I put a tutorial here a year or so ago on how to create shiny/glassy icons and buttons, which can obviously be used in games.
I present the second version, where I'll demonstrate my way of creating an icon, and then a button
(coming later guys!). I hope you can provide me with any constructive criticism, and I hope this tutorial comes in handy.
.......:::::::ICON TUTORIAL:::::::........
This part of the thread focuses on how to make an icon that looks glassy or shiny. It's not program specific, you should be able to do what is taught here in any graphics program.
Step 1
I
always create my icons at a high resolution first, and then resize them for use. In this way, I avoid the pixel problems involved with trying to edit something detailed at low resolutions. So, first off I make a 512 x 512 image.
Step 2
Now to decide what the icon shape will be. Hopefully you'd have already had that part figured out. This tutorial will create a star icon - Why not?
Having decided that we are making a star, this step is to create a selection (which occurs in almost all graphics programs) shaped like a star. I then prefer to smooth the edges of the icon. Look in your selection manipulation tools for your editor to find a tool that will do this.
Step 3
Time to decide the color of the star. For my purposes, I'll go for an aqua-ish look. Here is my color choice:
R: 0
B: 229
G: 250
Step 4
Next we must fill in our selection with a darker version of our chosen color. You can find a darker color by editing the HSL value of your chosen color in the color selection palette of your editor. Just decrease the L value. Here is my chosen dark color:
R: 0
B: 127
G: 132
Then, fill your selection with the dark color:
Step 5
Now, shrink your selection about 10 pixels. This tool is also referred to as "contract". It should look like this:
Step 6
Now, you need a light version of the color you selected. Again, increasing the H value of the color's HSL value is the easiest way. Here is mine:
R: 171
B: 250
G: 255
Now, you need a two-color gradient from that color, and white. I prefer a circular-type star gradient:
Step 7
Now, create a new raster layer. Fill the contracted selection with the gradient from the previous step:
Step 8
Shrink the selection again, exactly as in Step 5.
Step 9
Now, bring back the first color you selected (Ours was in Step 3). Create a gradient similar to the one in Step 6, where the two colors are your chosen color, and the light version of your chosen color.
Step 10
Create a new raster layer, and fill the selection with the gradient from the last step.
Step 11
Save the current selection. The method of doing this differs from program to program.
Step 12
Now, select the color white for your current color.
Step 13
Select the ellipse selection tool (present in almost all graphics programs). Subtract the ellipse from the star selection, so it looks like this:
Step 14
Create a new raster layer. Fill the current selection with white, and set the opacity of the layer at 55%
Step 15
Load the star selection from the point where you saved it. Repeat Step 13, instead subtracting the top part of the star.
Step 16
Create a new raster layer. Fill the selection with the
dark version of your color, and set the opacity of the layer at about 20%.
Step 17 - Optional
This only works on some icons.
Create 3 circular selections, in a curve, roughly diagonal across the icon.
Now, create a new raster layer. Fill the circular selections with white. Then, blur the layer at a radius of about 8.
Step 18
Finally, resize the image. Be sure to use your graphics program's best resizing method. It is wisest, I find, to resize your image down by increments of 10%, and to clip any extra pixels off. I have resized the star to 10% it's original size (that's 51 x 51 pixels). Normally, we'd clip it, probably to create a 48 x 48 pixel icon, but that isn't the focus of this tutorial.
DONE!
........::::::::NOTES:::::::........
I realize, looking at the final product, that the color I chose may not have been the best. I assure you it works better with other colors, esp bright shades of green, yellow, blue, and red.
I hope this tutorial was helpful.
My sympathy to those with 56k who looked at this thread. I know your pain, my internet's 56k too.
