iPhone is a beautiful multimedia enabled smartphones designed and marketed by Apple Inc. Every body is very crazy for iPhone. So, today we have created an awesome iPhone in Photoshop.

In this tutorial we have used useful and easy techniques to make this cool iPhone. We are hopeful that you will like our creation. Feel free and share your comments with us.

Tutorial Details:

• Program: Adobe Photoshop CS5
• Difficulty: Intermediate
• Estimated Completion Time: 1 hour

Create a Realistic iPhone in Photoshop – Final Preview

Create a Realistic iPhone

Tools and Resources

Tools and Resources

Tools

Following photoshop tool are used in this tutorial.

• Ellipse tool
• Rounded tool
• Gradient overlay
• Text tool
• Ellipse marquee tool
• Rectangle marquee tool
• Brush tool

External Resource:

• Beautiful wallpaper

Lets start to create our new stylish iPhone in Photoshop

________________________________

Step 1

Create new document of 600×500 size (Ctrl+N), with black color #000000.

Create New Document

________________________________

Step 2-a

Select the rounded tool from tool panel and draw a shape of iPhone, named it layer background.

Draw iPhone Background

Now applying gradient overlay to the background layer.

Gradient Overlay

After applying gradient overlay we get a cool result as like in picture below.

iPhone Background

________________________________

Step 2-b

Select the rounded tool again and draw a big shape behind the background layer for make border, apply any of color as you like.

Bg border

Now applying some blending options.

Bevel and Emboss

Bevel and Emboss

Gradient Overlay

Gradient Overlay

After applying layer styles, we get cool iPhone border as like shown in preview.

Cool Preview Border

________________________________

Step 3

In this step duplicate the border layer and move to the top of the all layers and with the help of transform tool (Ctrl+T) minimize the size and set it in the center of iPhone background layer. Right click on the duplicate layer and click on Clear Style option.

Duplicate Border

Now go to layer > layer style and applying some effects.

Bevel and Emboss.

Bevel and Emboss Border

Gradient Overlay.

Gradient Overlay border

When we have applied layer style, we get a cool result as like in below picture.

Duplicate Border Result

________________________________

Step 4

Select rectangle tool and draw a shape center of the iPhone background layer, named it layer LCD screen, applying the color #6b6b6b.

LCD Screen

________________________________

Step 5

Download the iPhone wallpaper and set it in to the iphone screen.

LCD Wallpaper

________________________________

Step 6

Select the rectangle tool again and draw a shape upper side of the wallpaper with this color
#0b6899.

Shape

Apply gradient overlay but first set the blending mode fill 0% and opacity 60%.

Time Shape Gradient

After this step we get nice bar on iPhone screen.

Get Nice Result

________________________________

Step 7

Now duplicate this bar layer and set down side of the iphone screen as like in picture.

Set Down Side

Now select the first rectangle, choose the text tool and write something as you like.

Write Time

________________________________

Step 8

Now select of the second rectangle duplicate layer, make a rounded rectangle shape with #303466 color, and write text slide to unlock, with white color #ffffff.

Slide to Unlock

Now select rounded rectangular tool, create a small rectangle, as shown in preview.

Small Rounded Shape

Now we will applying gradient overlay on small rectangle.

Rounded Gradient

Get Result

________________________________

Step 9

Now draw a arrow shape on this rounded rectangle layer with white color #ffffff, you can select this shape from custom shapes.

Arrow key

________________________________

Step 10

Now its time to draw loudspeaker of iPhone, select the rounded rectangular tool, draw a shape with black color#000000 and applying layer style.

Stroke with gray color #686868,

Stoke

Loadspeaker

Now duplicate the loudspeaker layer and clear its effects applying white color #ffffff, then rasterize the duplicate layer and with the help of rectangle marquee tool cut this layer from upper half side, and adjust as like shown in picture below.

Cut Loudspeaker Duplicate Layer

Now go to blend mode and down opacity of this current layer till 26%,

Down Opacity

________________________________

Step 11

Now we are going to make small icons with the help of rectangle marquee tool and line tool, color white#ffffff, create a new layer and draw these icon.

Small Icon

________________________________

Step 12

In this step we are going to create the button of iPhone, select the Ellipse Tool draw a circle shape, applying black color #000000.

Button

Go to Layer > Layer Style and applying some blending options or layer styles.

Gradient Overlay

Circle Button Gradient Overlay

Stroke with color #636363.

Circle Button Stroke

After these effects we get awesome button as like in picture below.

Awesome Button

After applying blending options now duplicate this circle layer applying white color #ffffff, rasterize it and with using ellipse marquee tool cut this duplicate layer and down opacity till 30% and adjust as like in preview below.

Cristle

After that select the rounded rectangular tool and draw a shape center of the circle button, with color#1d1d1d.

Small Button

Go to blending option and applying stroke with light gray color #d1d1d1.

Small Button Stroke

Now we have successfully create a beautiful iPhone in Photoshop as shown in final preview below.

Final Preview

Final Preview

Related posts: