Photoshop Tutorial: Create the HTC One Smartphone from Scratch

Create the awesome looking new HTC one 2013 in Photoshop.

End result:

Author:

Views: 41157

Score: 9.14 / 10

Author earned: $20

Practice tutorial

Step 1

Create a new document in Photoshop. Height: 3000px Width: 3000px, resolution: 100 and name this document as 'HTC One' or anything you like.

Step 2

Now, create a rounded rectangle path (U) with radius 120 px and width 26cm, height 53cm. Press Ctrl+Enter, create a new layer (Ctrl+Shift+N) and fill this selection with white color(#ffffff).

Step 3

Select Layer 1 and go to Blending options>Pattern Overlay, and select Grey Granite pattern and set the opacity to 50% and scale: 100%, Blend Mode: Normal.

Step 4

Next, create another rounded rectangle of radius 20px and width 23cm, height 41cm. Press Ctrl+Enter, create a new layer (Ctrl+Shift+N) and fill this selection with any shade of grey. Name this layer 'Screen'

Step 5

Now to create the Bezel, duplicate the body layer and name it 'Bezel', disable the overlay effects. Now select the path of this layer(Ctrl and click of layer thumbnail) and remove the top and bottom curved parts till the ending of the curve.(see image below). Now select the path of the Screen layer, then select the Bezel layer and delete it. Fill this layer with any color darker than the screen.

Step 6

Give the Bezel layer 'Bevel and emboss' blending option with the setting as shown in the image below.

Step 7

Now create two circles with width and height 0.58cm (hold shift and ctrl for a perfect circle) and place them above the bezel to the left. These two circles act as the sensors.

Step 8

Now, to create the speakers, create a perfect circle of height and width 0.18cm and make 200 copies of it and place them in 4 rows and 50 columns just above the bezel and beside the sensors. Give them the same color as the sensors. (#4b4b4b)
(Merge all speaker circle layers to avoid confusion and to save space and memory)

Step 9

Now duplicate the speaker layer and place it below the bottom of the bezel(Ctrl+J and use arrow key and bring it down tom maintain the correct position). Your image should look similar to the image below.

Step 10

Create a new layer. Select the pen tool and draw a shape like the one shown in the image below. Fill it with black color and set the opacity to 50%. This layer acts like a light reflection and gives a realistic feel to the model.

Step 11

Create a home icon button with pen tool and place it in the bottom of the phone, on the bezel. fill it with white and set the opacity to 50%.

Step 12

Now create the back button using the pen tool and place it on the left of the home button.

Step 13

Create the camera by drawing a circle and applying blending options as show in the image below.

Step 14

Create two more circles, the last one acting as the opening.

Step 15

create a semi-circle shape, fill it with black and reduce the opacity to 50%

Step 16

Now create the app dock by using marquee tool. Draw a rectangle box and give the following blending options as shown in the image below

Step 17

Do the same for the top dock, create a rectangle using marquee tool fill it with dark grey and copy the layer style from the previous layer. These two layers must be placed between the screen and bezel

Step 18

Now to create some icons, create a new file with 3000x3000 resolution.

Step 19

Create phone icon using the built in custom shapes (U).

Step 20

fill it with any color.

Step 21

Remove the outer parts and fill only the phone with white and fill the outer parts with green.

Step 22

Create the message icon shape and make three rectangles with green color.

Step 23

Create 9 perfect squares and arrange them in 3 rows and 3 columns to create the apps icon

Step 24

to create the world icon, draw and perfect circle and fill it with ocean blue color and apply the following blending options as show in the image

Step 25

Trace the shape of the continents form any globe image and place them on this globe

Step 26

For the camera icon, create two rectangles and apply the following blending options as shown in the image

Step 27

Apply these settings too

Step 28

Create a ring and apply the following settings

Step 29

Bring in the previously created camera layer and re size it to fit in this icon. (Dont worry about the resolution because these icons will be very small)

Step 30

Bring all the icons, re size and place them on the app dock.

Step 31

Create signal icon by making 5 rectangles, each shorter than the other and all placed along the same line.

Step 32

Use a pen tool and make a battery,color it green, duplicate it, make it large, fill it with grey and add stroke of 3px to both the layers of the battery.

Step 33

Place both the Signal and Battery icon side-by-side on the top deck and re size them to fit perfectly.

Step 34

Too add more detail, select the first layer (Body) and select blending options and apply the following settings:
Stroke: 8px, opacity 50%
Inner Shadow: Distance:0 Choke:0 Size:43 opacity: 10%
Drop shadow: Size:54 distance: 0 choke:0

Step 35

Add a gradient background, some text, reflection(make all layers a group, duplicate the group, merge all layers in duplicate group, flip vertically, reduce opacity, erase some part using eraser) and that's it, you are done!

Step 36

Final result

5 Comments:

8749748 says:

很喜欢你的教程，可惜我英文不好，只能慢慢翻译

(5 years and 879 days ago)

directXdesign says:

Great

(5 years and 870 days ago)

Jagannath says:

Thank-you!

(5 years and 869 days ago)

nasrin4g says:

Excellent tutorial.

Background Removal Service

(5 years and 176 days ago)

photo123 says:

Wow. Cool tutorials...

(4 years and 122 days ago)

Leave a Comment