All About iPods

This is a two part tutorial part one looks at basic iPhone style black icons and gives you the basics so that you can make your own icons for themes, websites or whatever. Part two looks at starburst effects and more advanced techniques for a much better icon.

Icons you will learn how to make!



Part One:

Step 1:
Create a transparent background canvas which is 60 x 60.
Step 2:
Draw a rounded edged square by using the shape tool and holding shift. The radius should be about 15px.
Step 3:
Align square with the canvas.
Step 4:
Select the square by holding the ctrl button and click on it in the layers bar. And open a new layer.
Step 5:
Use the gradient tool and put the settings so that both colours are white but the second colour has opacity of 0.
Step 6:
Apply the gradient to the selected layer by holding shift and dragging down in a straight line.

Step 7:
Still selecting this new layer you should open the ?Elliptical Marquee tool? and make sure you have the ?Intersect with Selection? button pressed (see picture below).

Step 8:
Draw the oval so that it covers the top bit of the icon. Press ?ctrl + shift + I? this will select the rest of the icon. Now press delete.
Step 9:
Deselect everything and then go into the layer with the reflection (new layer by default) and adjust the fill opacity until you think it looks good mine is set to around 36%

Step 10:
Select the shape layer and create a new layer. This layer will become your shape that makes this icon mean something I added a circle with cross to mine. You can emboss this slightly to make it look cool.


________________________________________________________________________________​______


Part Two:

Step 1:
Create a 300 x 300 canvas. Double click on it in the layers bar and click ok to the message which appears. Now make this layer black.



Step 2:
Create a new layer and choose similar colours as in the picture below. This new layer will become our starburst effect.



Step 3:
Set the gradient to be ?Foreground to Background?, ?linear? and keep the other options the same. See picture for guidance.



Step 4:
Apply the gradient to the new layer by dragging the cursor from the top of the document to the bottom whilst holding shift.
We now have to apply some filters to get the starburst effect.



Step 5:
Go to ?Filters > Distort > Wave?. A box should pop up with a bunch of settings. The settings which I find look best for this are shown in a list below.
No. of Generators ===== 15
Wavelength ==========5---35
Amplitude ===========10 ?50
Scale ===============100%---70%
Boxes to tick ========== ?Triangle? & ?Repeat edge Pixels?




Step 6:
We are now going to use another filter to make it look starburstier. Go to ?Filters > Distort > Polar Coordinates? Make sure the top box is ticked and click ok.



Step 7:
We now need to go to ?Filters > Sharpen > Unsharp Mask?? The settings for this are listed below.

Amount === 70%
Radius === 40
Threshold === 0

You will be glad to hear that the starburst is now complete!



Step 8:
Go to your shape tools and select the rounded rectangle. Put the radius of this to about 40. Hold shift and draw the shape so that it covers the starburst. Hold shift whilst drawing so you get a perfect square. Now centre this shape.

Step 9:
Go to the layers bar and drag the shape layer below the starburst layer. Now select the starburst hold ?ctrl? and click the white box on the shape layer. Scroll to the bottom of the layers bar and click the small button ?Add Layer Mask?




Step 10:
Create a new layer for the highlight at the top of the icon. Now hold ?ctrl? and select the layer below. Now take the ?Elliptical Marquee Tool?. Now hold the ?alt and shift? key and draw from the top left corner of the canvas to a bit above the middle.



Step 11:
Now we are going to create the actual highlight. Change the foreground colour to white using your colour picker and click on the gradient tool. Make sure that you have the ?Foreground to Transparent option chosen. Now drag the gradient whilst holding shift from the top of the document to a bit below the selection. Deselect.



Step 12:
Double click on an empty space in the layer bar on the starburst layer and on the menu which appears go to ?Gradient Overlay?. On this menu set the style to reflected, on ?blend mode? set it to overlay and set the opacity to 70%




Step 13:
So now we are nearly done. All we need to do now is create the symbol which goes on top of the icon. Go to ?shape tools > ellipse tool? draw with this tool whilst holding shift. Centre this circle now go to the layers bar and double click on an empty space for this ellipse layer. Below is a list of settings that we are going to change.

Fill Opacity = 0%
Stroke > Colour = white
Stroke > size = 10
Bevel and Emboss > Style = emboss
Bevel and Emboss > direction = down
Bevel and Emboss > Adjust depth and size to however you see fit



Step 14:
Create an arrow and change its settings to the same as the circle?s.



Step 15:
Turn the brightness down a bit to make it look a bit closer to the original.



THIS TUTORIAL CAN BE VIEWED HERE: http://www.youtube.com/watch?v=Z4CwZnkeVSs

Great tutorial! But in the wrong place. This should be in the Tutorials section. I'll move it.

Have you been able to move threads? I haven't

This shouldn't be in the tutorial section because this is not hacking support :P lol