If you follow me on Dribbble, you may have seen my Chubby iPhone Icon post. Now’s the time when I show you how you can create your own!
iPhone Icon in Photoshop
If you haven’t gone through the short “3D iPhone Icon” tutorial, I suggest you do that first. It will allow you to create the ‘base’ of this icon. You’ll also be able to download the template, for you lazy people out there!
Once your base is ready to go, let’s start placing shapes! To help with alignment, I’m going to drag a Guide from the left, to the middle of my document. It should snap to the center of the selected layer.
Because this tutorial is “moderate” in level, I’m not going to go through the process of creating shapes in Photoshop. I’ve used basic shapes to create the main elements of the phone.
Screen – Rounded Rectangle
Receiver/Proximity Sensor – Rounded Rectangle
Camera – Two perfect circles
Home Button – Perfect circle
Speaker/Mic – Rounded Rectangle
Screws – Circles with star shape found under the Custom Shapes
Dock Connector – Rounded Rectangles.
Now that we have our basic shapes in place, it’s time to make them look pretty! Let’s start with the white glass. Here are it’s Layer Styles:
Once all the Layer Styles are added, you should have something that looks like this:
Let’s move on to the Home Button! Before applying the Layer Styles, set the Fill Opacity to 0%. This will ensure that the Home button is the same color as the glass, and that we can still see our Layer Styles. The Layer Styles are as follows:
As long as you made sure to set the Fill Opacity to 0%, you should have something that looks like this:
I found a slight highlight at the bottom of the Home Button helps give it depth. Create a new layer, then use a soft white brush to add a slight highlight.
And obviously, we’re missing the symbol! This one’s simple! Start by creating a Rounded Rectangle in the center of the Home button:
Turn the Fill Opacity down to 0%, then apply the following Stroke:
Our design is coming along nicely, but there are a few more elements which we need to finish. Continue onto the next page for more!