Realistic Phone Vector

In this tutorial our aim is to create a realistic phone. I based my phone on an XDA IQ. I am getting one of these phones in a few days too, so It is of interest to me. I found my picture on Google image results. We'll create the phone from several different angles.

Find an ideal picture of the phone. I chose one off Google

For this tutorial we will be using the pen tool a lot, so make sure you are confident with it, and how to use it effectively.

With the following settings

Click to enlarge

I selected a random colour from the black area. I ended up using #07110d.

With the Pen tool, click on the top left corner (shown at 1) then move to point 2, moving to point 3. Repeat this process around the black area of the phone.

Now we are near the bottom corner

To get the smooth curve corner, all you need to do is click as normal at point 1, then go straight to point 2. Do not let go of the mouse button. Instead drag the mouse along to the black dot. This will curve the line. Keep the marker parallel with the lowe line of the phone.

Repeat this process in reverse for the lower left corner.

Your completed vector shape and image should resemble something like this.

On the layers palette, untick the small 'eye' icon as shown here

Your vector layer will disappear, but is still there.

Select the phone layer. We do this so when we create another vector, it will be underneath the first vector we made. Now mask out the sliver shiny bit in a colour like #97b3ba

Ok lets make the sliver layer look shiny

Set your foreground colour to #8fa2a7 and background to #ffffff. This will create a custom gradient for you to use in a minute.

Apply these settings by right clicking on you're the silver layer, and going to blending options.

Phew, glad that's over and done with. Hopefully you got something that looks like this.

Lets add the buttons.

First, make sure you have layers arranged as below. To move a layer all you have to do is click it, and drag it to its new position.

Use the pen tool again, and set the colour to #25303a, and create the background to the buttons.

Now the screen. Colour doesn't matter, as it will have a gradient placed over it. So mask out the screen

Then set #8be8fc as your foreground colour and #002482 as your background colour. Now go to blending options on your screen layer. And apply these settings

And a stroke

Looks cool don't it?

Now add buttons.

Make the button background layer invisible. Select the line tool.

Draw lines over each button separator on the original image, like this.

Ok, now we have masked each button, we should get something like this.

Nearly there now.

Add text and buttons. Text color for the phone buttons is #d6eaec. I used Verdana, set to regular, and size 10 for numbers. And Verdana size 8 for the little letters you use to text. Just do the buttons for now.

Lets add the little phone in red and green. The green colour is #2d7c37 and the red #b72a1b

Now to add the little circle thing. I made a circle (colour # 24363e) and with a 1px stroke in black. Then I added a slightly larger one behind it, and used a chrome style. Then I added an even bigger circle behind that, and added a different chrome style to that one.

Here's the styles palette

Add some custom shapes, a few more lines.

Then lets add some reflections at the top. You'll need to create a new layer, and drag it to the top. Then Select a small area, and use a white transparency gradient, with opacity set to 50% and you should have something like this.

And now you're done. Just add a cool background, nice reflection and a shadow.