As modern people, we all have a certain attraction to the fresh gadgets offered by latest technology. Here we talking about Phones which I find usually amaze me more than anything. Phones are often reinterpreted by many artists according to their view or outlook of the type. Unsurprisingly, these interpretations are often sure-fire hits with many other designers out there.

In this detailed Photoshop Tutorial, you will learn how to create a high end professional Phone icon with a limited knowledge in Layers and Layer Styles. The only necessary skills to get through this tutorial are the basic knowledge of how to use the most common tools in Photoshop. In just a few steps we are going to create a truly eye catching Phone icon ready to be used in any way you want and can think of.

When it comes to Image editing or photo enhancement, Adobe Photoshop is usually the primary option to consider. However, the software package itself is a quite hard to learn — and extremely hard to master.

For those, who don’t know what is Adobe Photoshop? And what it can do? Then follow the link below for detail introduction.

• Adobe Photoshop | Adobe.com
• Adobe Photoshop | From Wikipedia, the free encyclopedia

You may be interested in the following related articles as well.

• 65+ Smoking Photoshop Text Effect Tutorials
• 66 Excellent Photoshop Web Design Layout Tutorials
• 77 Excellent Photoshop Tutorials For Designing Posters
• 145 Ultimate Round-Up Of Photoshop Tutorials and Resources
• 88 Ultimate Round-Up of Photoshop Photo Manipulation Tutorials

Feel free to join us and you are always welcome to share your thoughts that our readers may find helpful.

Don’t forget to subscribe to our RSS-feed and follow us on Twitter — for recent updates.

Final Result

Let’s see what you will be creating in this tutorial. You may click on the image to see the full scale version.

Materials Needed:

• Brushed Metal Wallpaper (as a pattern) by fardouk

Let’s Start!

Step 1: Creating New File

We are going to start by creating a new file using Photoshop CS4. After opening Photoshop go to File >> New… or you can just use Ctrl+N. Use the settings in the image below for your new file.

Step 2: Setting Up The Background

Now lets set the background layer Blending Options to the settings in the image below for Gradient Overlay.

Step 3: Creating the Phone Body – Create The Shape Layer

So, now after the background layer is ready we can start creating the phone shape layer. Select the Rounded Rectangle Tool (U) and set shape color to Black and 20px radius of rounded corners as shown in the image below. Then draw a rectangle shape with a fixed size of 360px*560px for this tutorial, but you are free to choose the size you like for your version. Then rename your new shape layer to “phone”.

Step 4: Creating the Phone Body – Applying Layer Styles

After creating the shape layer for the phone we will have the following result. Now press Ctrl+A while your “phone” layer is selected and then choose the Move Tool (V) and then go to Layer >> Align Layers to Selection >> Vertical Centers then Horizontal Centers this will make our phone aligned to the middle of our canvas.

Now open the “phone” layer blending options and use the settings in the images below for Drop Shadow, Inner Shadow, Inner Glow, Gradient Overlay, Pattern Overlay (use the Brushed Metal Wallpaper as a pattern. Or, you can create your own Metal texture via this photoshop tutorial), and Stroke.

Importing The Brushed Metal Wallpaper as Pattern

You can create a pattern from the wallpaper by simply opening the wallpaper in Photoshop and then goto Edit >> Define Pattern… and then give it a name that you like.

If you got everything right the “phone” shape layer should look exactly as the image below.

Step 5: Creating The Phone Screen – Create The Shape Layers

We can now start creating the screen shape layers. Select the Rounded Rectangle Tool (U) and set shape color to Black and 10px radius of rounded corners as shown in the image below. Then draw a rectangle shape with a fixed size of 300px*400px. Then rename your new shape layer to “screen 1”.

Now align the “screen 1” shape layer horizontally to the canvas as we did with phone shape layer in Step 4, but don’t align it vertically just move it vertically so that most of the lower third of the phone shape is clear. You can use the image below as a guideline.

Step 6: Creating The Phone Screen – Duplicating The Shape Layer

Now we are going to duplicate the “screen 1” shaper layer 3 Three times by going to Layer >> Duplicate Layer… and call the new layers “screen 2”, “screen 3” and “screen 4”.

Step 7: Creating The Phone Screen – Applying Layer Styles

Now that we have four similar screen shape layers we are going to apply styles to every layer. Select “screen 1” shape layer and then select Blending Options and apply the settings in the images below for Inner Shadow, Gradient Overlay and Stroke.

The “screen 1” layer should look like the image below.

Now we are going to apply styles to “screen 2” layer. Select “screen 2” shape layer and then select Blending Options and apply the settings in the images below for Fill Opacity, Inner Shadow, Outer Glow and Gradient Overlay (I used the same gradient colors as in layer “screen 1”).

The “screen 2” layer should look like the image below.

Now we are going to apply styles to “screen 3” layer. Select “screen 3” shape layer and then select Blending Options and apply the settings in the images below for Fill Opacity and Satin.

The “screen 3” layer should look like the image below.

Now we are going to apply styles to “screen 4” layer. Select “screen 4” shape layer and then select Blending Options and apply the settings in the images below for Fill Opacity and Bevel and Emboss.

The “screen 4” layer should look like the image below.

Step 8: Creating The Phone Screen – Create Screen Light Reflection

Now let’s add a little light reflection to the screen to make it more realistic. Create the Shape layer as shown in the image below. Rename the new layer to “screen reflection”.

Select “screen reflection” shape layer and then go to Blending Options and use the settings in the images below for Fill Opacity and Gradient Overlay.

Now you should have a result similar to image below.

Step 9: Creating The Phone Navigation Dial – Create Shape Layers

Using the Ellipse Tool (U) create a circle shape with a fixed size of 85px*85px, set shape color to Black and rename the layer to “navigation 1”, duplicate the shape layer as “navigation 2”. Place the Shape layers as shown in the image below.

Step 10: Creating The Phone Navigation Dial – Applying Layer Styles

Now, select layer “navigation 1” and then Blending Options and use the settings in the images below for Blend Mode, Bevel and Emboss, Gradient Overlay and Stroke.

Layer “navigation 1” should look like the image below.

Now, select layer “navigation 2” and then Blending Options and use the settings in the images below for Inner Glow, Bevel and Emboss, Gradient Overlay and Stroke.

Layer “navigation 2” should look like the image below.

Step 11: Creating The Phone Command Buttons – Create Shape Layers

Using the Pen Tool (P) create a shape similar to the image below, set shape color to Black, top right corner radius to 10px and rename the layer to “command 1”, duplicate the shape layer as “command 2”, “end call” and “accept call”. Place the Shape layers as shown in the image below.

Step 12: Creating The Phone Command Buttons – Apply Layer Styles

Now apply the Inner Glow, Gradient Overlay and Stroke to all four command layers as in the images below.

Now apply the Bevel and Emboss style for layers “command 1”, “end call”, “command 2” and “accept call” as the images below consecutively.

The result should be as in the image below.

Step 13: Creating The Phone Command Buttons – Create Command Buttons Engravings

Now we finish command buttons by creating the engravings on them. Using Line Tool (U) create with a weight of 3px and a width of 30px and set layer color to Black. Duplicate the Layers 3 times and align them to each command button as in the image below.

Step 14: Creating The Phone Command Buttons – Apply Style to Engravings

Apply the Blending Options settings for all layers for Inner Shadow, and apply Blending Options settings to each layer as in the images below. Apply the red styles to the end call button engraving, green styles to the accept call button engraving and blue to “command 1” and “command 2” engravings.

Step 15: Creating The Phone Navigation – Create Engravings

Now using Pencil Tool (B) with a master diameter of 3px, then create a new empty layer by going to Layer >> New >> Layer… or use the shortcut Shift+Ctrl+N, and then draw a shape like the one in the image below (use Black as color). Repeat the same step on a new layer but use White as color.

Step 16: Creating The Phone Navigation – Create Engravings

Now align the two layers to “navigation 2” layer to the center horizontally and then move the white layer one time to the bottom. Then duplicate the layers and rotate them 90 degree CW by going to Edit >> Transform >> Rotate 90 CW and repeat this 2 times, and distribute each two sets on the dial as in the image below.

Step 17: Creating The Phone Speaker

Now we are going to create the speaker using Rounded Rectangle Tool (U) with fixed width and height of 100px*8px and using the settings in the image below.

Create using the settings two shape layers call the lower layer “speaker back” and the hight layer “speaker”. Position both layers to center of the phone horizontally and at the top of the phone above the screen in the space available, just like the image below.

Step 18: Styling The Phone Speaker

Select the “speaker back” layer and open Blending Options and use the settings in the image below for Bevel and Emboss.

Select the “speaker” layer and open Blending Options and use the settings in the images below for Blend Mode, Drop Shadow, Inner Shadow, Inner Glow, Bevel and Emboss and Contour.

You should have a result like the image below.

Step 19: Creating Phone Shadow

Now, after we finished the phone we will start on making the shadow. Select the background layer (the first layer we created in this tutorial) then using Pen Tool (P) and the color Black create a shape under the phone similar to the image below with a width of about 400px, then rename the layer to “shadow”.

Now select the “shadow” layer and goto Layer >> Rasterize >> Shape, so that we can apply a filter on the shape layer. Now goto Filter >> Blur >> Gaussian Blur… and use the settings in the image below.

Applying Filters to Shape Layers

You can apply filters to Shape layers in two ways: First, by rasterizing the shape layer but in this case you lose the qualities of resizable shape layers. Second, by converting the shape layer to smart object and keep all the qualities of resizable shape layers. You can convert a shape layer to a smart object by first selecting the layer and then goto Layer >> Smart Objects >> Convert To Smart Object.

You would have the result in the image below.

Now move the “shadow” layer just like the image and set its Opacity to 60%.

Step 20: Creating Phone Reflection

Now, select and duplicate the “phone” layer select the “phone” layer again and goto Layer >> Group Layers or you can just use Ctrl+G and name the group “reflection”, move the group just under the phone like in the image below.

Now we can apply a layer mask to the group, select the “reflection” group and then goto Layer >> Layer Mask >> Reveal All, then select the Gradient Tool (G) and set gradient from Black to White and Drag from the lower third of the phone to the bottom.
You can use the below image as a guideline.

Now, if you have followed the tutorial step by step then you should have a result similar to the final image below (Click on the image for the full resolution image).

Conclusion

I created this tutorial to show you how easy to design gadgets and icons, and to show you that a few basic knowledge in Photoshop and layer styles can make a lot if placed in a well thought idea. I hope that you can all create better designs using the little things I shared with you here.

Download the PSD

• Download .psd Source File (.zip, 0.36 MB)