How to Make a Cool Icon for Websites With Gimp
by 101lenny101 in Circuits > Websites
17758 Views, 5 Favorites, 0 Comments
How to Make a Cool Icon for Websites With Gimp
Gimp is an good image editor, and a good alternative to Adobe Photoshop. In this Instructable, I will be showing you how to make a good icon for websites (YouTube, Facebook, Myspace, Twitter, etc.)
The Basice
In this step, we will be making the image size.
1) Go to File>New
2) Create the image at 250x250 then click Advanced Options. Under Fill With:, use Transparency
3)You will now have a screen similar to the one below (Third Image)
1) Go to File>New
2) Create the image at 250x250 then click Advanced Options. Under Fill With:, use Transparency
3)You will now have a screen similar to the one below (Third Image)
The Gray Background
To do this, first make a circle the size of the document. Then go to the gradient tool and select the brushed aluminum gradient. Then make the gradient go from left to right. Please follow the pictures below for more help.
The Gradient
***IMPORTANT*** Well, kind of. Be sure to create a new layer so we can revert back if we screw up.
Right click on the aluminum layer and click "Alpha to Selection". Go to the new layer you created, and go to Select>Shrink... And shrink the selection by 5-10 pixels. Now go to the gradient tool and pick FG to BG. Now set the corresponding colors (First=FG Second=BG) To the colors you like. I picked a black to a red. Do a straight gradient from top to bottom.
Right click on the aluminum layer and click "Alpha to Selection". Go to the new layer you created, and go to Select>Shrink... And shrink the selection by 5-10 pixels. Now go to the gradient tool and pick FG to BG. Now set the corresponding colors (First=FG Second=BG) To the colors you like. I picked a black to a red. Do a straight gradient from top to bottom.
The Gloss
***IMPORTANT*** Well, kind of. Be sure to create a new layer so we can revert back if we screw up.
First, select the area you would like the glossy area to cover. Now fill this area with white. Go to the layers pallet and make sure the new layer you created is selected (It should have the white "gloss" part) and tone down the opacity to your likings. It's O.K. if the gloss goes into the background, we will fix this now. Right click on the layer with the gradient that we created and click "Alpha to Selection". Now go back to the gloss layer. Make sure the color gradient is still selected, even though we are on the gloss layer. MAKING SURE YOU ARE ON THE GLOSS LAYER, go to Select>Invert and hit the delete key. This should get rid of the extra gloss.
First, select the area you would like the glossy area to cover. Now fill this area with white. Go to the layers pallet and make sure the new layer you created is selected (It should have the white "gloss" part) and tone down the opacity to your likings. It's O.K. if the gloss goes into the background, we will fix this now. Right click on the layer with the gradient that we created and click "Alpha to Selection". Now go back to the gloss layer. Make sure the color gradient is still selected, even though we are on the gloss layer. MAKING SURE YOU ARE ON THE GLOSS LAYER, go to Select>Invert and hit the delete key. This should get rid of the extra gloss.
And Finally, the Text
This couldn't get any simpler. If your layers are in my order, they should be, and if not you did something wrong. Click on the colored gradient, which should be UNDER the "gloss" layer. Select the text tool. Put your text wherever you please, and it will be under the gloss layer, giving some (or all) of the text lighter.
The Final Result
If you have done everything correctly, it should look a little like this!!