Friday, July 2, 2010

How to Make Icons for iPhone


     Hi all! What we are going to do for today's Photoshop tutorial will be about making an icon, in this case, an iPhone icon! As you can see above, and Smart Phone icons in general, it has rounded corners, a glossy effect, and some simple graphic inside. So fire up your Photoshop now so we'll get started!

     By the way, before we even begin, download some suitable custom brushes that you can use for your icon. You can download a great deal of cool brushes at Deviant Art.


     Just like in previous tutorials, we will use the 'Rounded Rectangle' tool so we will have a rounded corner rectangle that looks modern.


     Then, choose the color that you want and then choose the 'Gradient' tool with the settings shown above. In this case, I chose Orange color and a Color to White gradient. After doing so, start dragging a shape into your canvass. It doesn't have to be big since iPhone icons are not big but be sure that the resolution or DPI is high enough for details.

     In your shape, apply the gradient vertically in such a way that the lighter part is at the bottom as shown below.


     After your creation of shape and application of gradient, you should have a graphic the same as shown above.

     What we'll need to do next is add the glossy effects, background pattern, and the logo itself inside the icon.



     Now get your 'Brush Tool' using the brush that you would want to appear in the background. This is where we can use the custom brush we downloaded from Deviant Art. In my case, I used a Rising Sun pattern for my background.   

     NOTE: Make sure to choose 'Overlay' for the blending mode of your brush when applying the icon background.


     The option for setting the blending mode can be found just below the menu bar of Photoshop. Make sure it's set to Overlay before applying the brush. Just choose a darker color for this.



     Don't remove the rounded rectangle selection yet as we will need to have an intersection of selections for the glossy part of the icon. Get the 'Ellipse Tool' and make a selection as shown above. The intersection of both selections will be our glossy part. Now, Right click on the new selection and choose 'Intersect'.


     As shown above, we choose the intersect option of making the new selection.


     Get your gradient tool again but this time, choose 'White' as the color and Color to Transparent option for the gradient option as shown above. This is because we would like to achieve a fall off or fading effect to the glossy top of the icon.


     Final step would be to create the actual graphic or logo inside the icon that you've recently created. In my case, I used 'Paths' to have clean drawing. By setting some blending options, you would be able to create amazing effects such as adding Drop Shadows.

     After everything is complete, you can save it as Gif, or Png, or Ico for icons.

So, that's it! I hope you had fun following this tutorial!

No comments:

Post a Comment