Photoshop and illustrator tutorials.

LG-Chocolate Phone tutorial.

 

In this tutorial, we will make the stylish “chocolate” phone from LG. It is quite large and difficult…you are warned. Also, be noted that I use the Dutch version of Photoshop CS. So, in the layerstyle boxes, you will see the Dutch names. Don’t worry, the places of the boxes that contain the numbers are the same as in the English version.

 

1: Make a new document, 500x500 pixels. The background can be any color, but white works best.

 

2: We need to make a base for the phone. We will make it with the polygonal lasso tool.

    You need to make a shape similar to this one:

   

Fill it with any color you like. If you find it too difficult to make an exact shape like this one, just copy it.

3: Next, in the layers toolbox, select this layer, and call it “phone base”. Now, double click on the layer in the toolbox, to bring up the layerstyle box. We need to give it a gradient.

For this gradient, we use the following settings:
The color of the right side needs to be: “3E3D3B”
The color of the left side needs to be: “BEBDBB”

Now use these settings:

You should come up with this:

 

4: Now, hold CTRL and click on the icon of the phone base layer in the layer box. It should bring up the selection of that layer. Keep this selection, make a new layer and call it “phone, 2^nd layer”. After that, go to: Select > Modify > Contract. Fill in “2” pixels.
Now, we need to fill this selection. To do this, follow step 3 again.

In addition, also add a stroke with the following settings:
Size: 1 px.
Position: Inside (inner)
100% transparency
Fill color: Black (000000)

You will now have an image like this:

5: Now, first repeat the first part of step 4 again. Instead, fill in “9” pixels at the contract part, and name the new layer “phone 3^rd layer”. Now using the right arrow key, nudge the selection to the right by 1 pixel. Fill this selection with any color you want.
Now, bring up the layerstyles bow again, and again apply a gradient to this layer.

Use these settings:
For the left side of the gradient, use this color grey: “DFDCD7”
For the right side use this grey: “2C2827”

Use the same settings as before, so:
Angle: 0
Etc etc.

Now apply a Gaussian blur of “1,7” pixels.

You should now have something similar to this:

6: Once again, CTRL click on the icon of the “phone 2^nd layer”in the layer box, and contract it. This time, contract it with “12” pixels. Make a new layer and call it “phone 4^th layer”

Fill this selection with Black (000000)

7: Make a new layer between the Phone 4^th and Phone 3^rd layer. Get your rounded rectangle shape tool, and make your foreground color “E5E3E1”
Make a selection that is wider, but not taller than the one above. Make sure it stands out by about 3 pixels.

8: Make another layer, call is “screen”. Get your rounded rectangle tool again, and make a selection like this:

 

Select the screen layer and bring up the layer style box. Go to gradient overlay, and use these settings:
61605C (Left side of gradient)
0A0607 (Right side of gradient)

You should now have this:

 

9: Make a new layer, you don’t have to name it. Get your rounded rectangle tool and make a small, wide selection like this:

Also, use bevel and emboss in the layer style box, to make it similar to the one in this image.
The settings I used are:
Inner Bevel
Down
Size: 1 pixel
Angle: 49
Height: 42

10: Once again, make a shape with the rounded rectangle. This time, it needs to be more like a square instead of a rectangle. Make it like this:

Place it in the empty space below the screen, in the middle.
Give it the standard black-to-white gradient, with a 150 degrees angle.
Bring up the layerstyles menu, and give the selection a bevel and emboss, with the settings we used before, plus a standard settings contour style.

11: Select the selection of the shape in step 10. Now contract it by 6 pixels. Make a new layer, and fill it with black
You should now have something similar to this.

 

12: Next up are the red buttons.

The first buttons we will make, are rounded rectangles. These are very easy to make.

Get your rounded rectangle tool, and make a small rectangle.
Like this:

Now, we have to give it some effects. Bring up the layerstyle menu again, and apply a gradient. Use these settings:
Left side of gradient: D30000
Right side of gradient: A80000

Now, it also has to have a bit of outer glow. So apply that as well, with these settings:

Outer glow:
Layer mode has to be “screen”
The opacity needs to be 50%
The color of the glow needs to be: FDD5D5

The rest of the settings need to be standard Photoshop settings

Copy this button, and place it on the opposite side of the phone.

We move on to the next buttons.

First up are the arrow buttons. Get your free shape tool (you can find it in the shapes menu) and pick the hollow arrow. Now make a small arrow to the right. Copy this layer, and flip it horizontally, now move it to the left of the centrepiece. Again, flip it, but now make it point upwards. Place it above the centrepiece. Copy this layer and then flip it vertically, and place it underneath the centrepiece.

Give all arrows the same gradients and outer glows as we did with the two other buttons before.
You should end up with this:
 

Next up is the “ok” button in the centre.
Get your type tool, and use the font Verdana.
Now write “OK”, in fontsize: 15.

Again, give this layer the gradient and outer glow we have applied to all previous buttons.

At last, the two other buttons. These are the most annoying buttons on the phone.
We will start with the one in the left corner. If you find it difficult to make a shape like these buttons, I suggest you copy them into your own piece.
The button I mean, is the one in the left corner.
Now we will make the last button, the one in the right corner.

 

We are not finished yet.

13: There are also some buttons on the sides of the phone. We can make this in one very simple step.
Move down in your layers menu, until you are between the background, and the phone base layer. Make a new layer. Get your rectangle selection tool, and draw a rectangle that is slightly wider as the phone base. It needs to stick out on both sides with about 2-3 pixels.
Fill this selection with a gradient.

The settings of this gradient are as follows:
The color for the left AND right side is: 63605B.
The color for the middle is white.
Set the scale to 125%.

14: Last thing that will finish this phone is the LG logo. Now, we can make it ourselves, and give us a hard time doing so, or we can just get the logo from internet and use that one. I suggest using the last option.
You need to place the logo in the middle between the top of the screen and the rectangle above the screen.
Like this:

 

15: Now its up to you if whether or not you want to give the phone more details. I chose to do so, and came up with this:

 

Now, you have noticed my phone is darker. That is because I changed the first gradient on the phone base layer. I liked the phone darker, because it made it look more realistic.
If you want this as well, the gradient to use is:
Left side: 1B1B1A
Right side: 000000

So one final image to compare yours to mine, and to look at the real thing:

I hope you enjoyed this tutorial. Thanks for using it.