Create an Apple iPhone 4S in Photoshop

Learn how to create a sleek Apple iPhone 4S in Adobe Photoshop! We'll be using various the shape tools, blending options and other helpful methods to create this cool iPhone 4S.

Final Result

1. Open up Photoshop & create a new document with the settings below:

2. Select the Rounded Rectangle (U) and set the Radius to 70px. Draw the main shape of the Apple iPhone 4S using the colour black.

3. Double click on the main shape layer to go into Blending Options and put in the options below:

4. Next select the Rectangle Tool and draw a small shape on top of the body, then draw rectangle shape across the lower part of the body using the colour below.

5. Next using the Rounded Rectangle (Radius 70) draw a lightly smaller shape for the body using the colour black & place it in the center of the main body. Double click into Blending Options and put in the Stroke below:

Controls

6. Now for the iPhone controls, using the Rounded Rectangle Tool and the Radius settings below draw each control. Double click into Blending Options and put in the settings below for each control:

Light Reflection

7. Go to the smaller main body layer, and click on the Layer Thumbnail while holding down the CTRL Key to highlight the shape. 

8. Next go to Select > Modify > Contract & Contract the highlighted shape by 5px.

9. Select the Polygonal Lasso Tool. While holding down  the ALT Key remove the left side of the shape like below.

10. With the shape still highlighted, create a new layer and fill it white & set the Blending Mode to Multiply. Double click into Blending Options and put in the Gradient Overlay below to create the light reflection.

Camera & Ear Speaker

11. Create a new transparent document that's 100×100 pixels. Press CTRL+R to bring up the ruler around the canvas and drag a 1 horizontal & 1 vertical line and place them in the center. Using the Rectangle Marquee Tool draw 2 square shapes like below and fill it Black. Go into Edit > Define Pattern & create the pattern for the ear speaker.

12. Using the Ellipse Tool draw a small shape for the camera while holding down the Shift Key (To keep the shape perfect). Double click into Blending Options and put in the Gradient Overlay below. Draw a smaller circle and place it in the center of the larger circle, double click into Blending Options and put in the second Gradient Overlay below:

13. Grab the Rounded Rectangle Tool with the Radius below and draw the ear speaker. Double click into Blending Options and put in the settings below:

Button

14. Using the Ellipse Tool (U) draw the button (while holding down the Shift). Double click into Blending Options and put in the setting below. Using the Rounded Rectangle Tool with a Radius of 5px draw a small white square shape. Set the Blending Mode to Multiply so it's invisible, double click into Blending Options and put in the Stroke below.

Screen

15. Next grab the Rectangle Tool and draw the screen using the colour white.

16.Copy & Paste a iphone screenshot. I've gotten my iphone screenshot from here. Place the screenshot layer directly over the white box you just created. Press CTRL+T and drag a top corner down while holding down the shift key to shrink the image. Right click the screenshot image and Create Clipping Mask. This will crop the image down to the white box.

Reflection

17. Next select the first layer of the iPhone, hold down the Shift and then select the last layer of the iPhone to select all the layers. Drag the layers to the New Folder icon to place them in a folder. Duplicate the Folder by dragging it to the New Layer Icon. On the Duplicated folder press CTRL+T and flip the iPhone down & drag the duplicated down to the bottom. of the canvas. While on the duplicated folder click on the Add Layer Mask Icon (circled below) nd click on the Layer Mask Thumbnail. Using a soft edged black coloured brush erase the bottom part of the iPhone & set the Opacity on the folder to 24% for the reflection

Background

18. Double on the white background layer to go into Blending Options and put in the settings below for a nice backgorund.

Final Result

Comments
  1. Fran Jeanes

    Thanks Ainsley for the great tutorial. The end result is one fine looking iPhone graphic. :)

  2. Mike

    Ainsley
    You do a great job with Photoshop! Thanks so much for the tips!

    Mike

  3. Luis

    Simply amazing!

  4. Cdavies

    lol oh god! Not the different antennae bands! Get over yourself. You can adjust the tutorial to suit your own interests. Why don’t you post a tutorial for the 4s with the accurate details.
    I thought this was great. I did it just for fun to learn more about blending modes. Thanks.

  5. Ross

    For anyone interested, I have created an iPhone Photoshop Action to render a high resolution iPhone using Photoshop Actions. Have a look! Cheers & happy Photoshopping!

  6. Bernard Cossette

    The most noticeable difference between the iPhone 4 and its predecessors is the new design, which incorporates an uninsulated stainless steel frame that acts as the device’s antenna. The internal components of the device are situated between two panels of chemically strengthened aluminosilicate glass.“;`

    http://www.healthfitnessbook.com

    My very own blog site