In this tutorial, I will teach you how to create the T - mobile Sidekick III

IMAGE CREATED IN PHOTOSHOP

Step1: Creating the Sidekicks main shape.
Create a new image using the dimension  800 x 600. Set the background color to white. Create a new layer, LayerNew Layer... (Shift+Ctrl+N). Click on the Rounded Rectangle Tool create a rounded rectangle using the dimensions below. Change the foreground color to #bbbbbb

With that setting, you should have the image below.

Ok, this part is a little tricky, Click on the Pen Tool using the options below.

Create the first Anchor point as shown in the image below. (Just click once, don't hold the mouse down.)

Create the second Anchor Point as shown in the image below.

Complete the selection as shown below

With the selection completed, you should have the selection below.

Using the Pen Tool , Right click on the selection as shown below and click Make Selection...

When the window below comes up, set it according to the image and click ok.

With that setting, now your path is a selection, Press the delete key on your keyboard to get the image below.

Now we need to make the other three sides the same as what you just did. Using the Pen tool is a bit complicated to get it perfect as the first side. Therefore, what I did was just duplicate, cut the first layer, and move it onto the different sides. So let me show you how to do that.

Duplicate the rectangular layer, and make the original layer invincible as shown in the image below.

Click on the Rectangular Marquee Tool and subtract from the image as shown below.

Subtract from your image until it looks like the image blow. 

Now duplicate the layer, click on the using the Chop Tool right click on the image and click Free Transform.

Click on the duplicated layer and change the W:100%, to W:-100

This will flip you image around, as shown below

Duplicate the layers again, change the H:100%, to H:-100

Duplicate the layer another time, change the W:100%, to W:-100

With that, your image should look like the screenshot below.

Step2: Adding the gradient
Hold Ctrl and click on each layers to select it as shown below.

Press Ctrl+E to merge the layers into one layer. Now Hold Ctrl and click on the layer to select it as shown below.

Create a new layer, LayerNew Layer... (Shift+Ctrl+N). Click on the Gradient Tool it's usually behind the paint bucket. Create the gradient below.

Click here to download the gradient

Create a gradient going from the top to the bottom.

With that, you should have the gradient below.

Right click on the layer, click Blending Options and add the setting below.

Outer Glow (color:#565656)

Inner Glow (color: #676755)

Step3: Making the faceplate.
Create a new layer, LayerNew Layer... (Shift+Ctrl+N). Click on the Rounded Rectangle Tool create a rounded rectangle using the dimensions below. Change the foreground color to #bbbbbb

With that setting, you should have the image below.

Click on the Pen Tool using the options below.

Create the Anchor point as shown in the image below.

Complete the selection, Using the Pen Tool , Right click on the selection as shown below and click Make Selection. This is the same as in the previous step. With you path converted to a selection press the delete key.

Doing that will give you the image below.

Remember in the previous, what we did to the all the same sides symmetrical. First, duplicate the layer, using the Rectangular Marquee Tool and subtract from the image until it looks like the image below.

Now duplicate the layer, click on the using the Chop Tool right click on the image and click Free Transform. Click on the duplicated layer and change the W:100%, to W:-100

Duplicate the layer again, change the H:100%, to H:-100

Duplicate the layer another time, change the W:100%, to W:-100

With that, your image should look like the screenshot below.

Step4: Adding the black faceplate.
At this point your image should look like the screen shot below.

Create a new layer, LayerNew Layer... (Shift+Ctrl+N). Duplicate the Face plate you just created, hold Ctrl and click on the layer to select it as shown in the image below.

Click on the Paint Bucket Tool and fill the selection with this color: # 030408, which will give you the image below.

Click on the using the Chop Tool right click on the image and click Free Transform, and resize the image so it looks like the image below.

Now right click on the black faceplate layer, click Blending Options and add the setting below.

Bevel and Emboss

Step5: Adding the buttons
Create a new layer, LayerNew Layer... (Shift+Ctrl+N). Click on the Rounded Rectangle Tool create a rounded rectangle using the dimensions below. Change the foreground color to #68696f

With that, you should have the button shown in the image below.

Hold Ctrl and click on the layer you just created to select it. As shown below.

Click on Select  Modify  Contract.

Set the contract to 2 pixels

Now press the Delete key on your keyboard. With that, you should have the image below.

Right click on the button layer and click blending options, add the settings below.

Outer Glow

Gradient Download

Bevel and Emboss

Gradient Overlay

Gradient Download

Stroke

Gradient Download

Click ok to add the settings when you are finished. Create a new layer and add a black image behind the button to get the effect below.

Create a new layer, and create button below.

Right click on the layer, click Blending Options and add the setting below.

Bevel and Emboss

With that, your image should look like the image below.

Step6: Creating the right button.
Create a new layer, LayerNew Layer... (Shift+Ctrl+N). Click on the Ellipse Tool .

Create a new layer, and create the image below.

Right click on the layer and click Blending Options, and add the setting below.

Bevel and Emboss

Create a new layer, and create the image below.

Right click on the layer and click Blending Options, and add the setting below.

Bevel and Emboss

Using this color (#9b9faa) create a small circle as shown in the image below.

Step7: Creating the screen.

Image I used for the screen. Right click copy and paste it into Photoshop.

Step7: Adding the text
This is the text I used to create the T Mobile. (Bitstream Vera Serif) click here to download. Text color #e12e8c. Click on the using the Chop Tool right click on the text and click Free Transform to reposition it.

Sidekick Text Style.
This is the font I use to create the sidekick text, Blackjack. Click here to download it.

Finished.
Well that's it, long I know, tried to put in a lot of information and explain it the best why I know with pictures. I will add a video tutorial for it soon.

This Tutorial was Created by Mark
© 2006 pixeldigest.com. All Rights Reserved.