Nokia 5300 Cell phone interface

May 28th, 2008 by ART-D Posted in Adobe Photoshop, Designing

Learn the best tips on how to freelance and get your first contract using these free iphone apps.

This tutorial shows you how to use multiple vector shapes, layer styles, and various tools to create a mobile phone design. It’s a nice design with multiple small details explained.

Start working by creating a new file (File>New) of 1280×1024 px and 72 dpi.

Then we should select the Rectangle Tool (U) to represent the background of the picture we’ll get on the final stage.

Create Nokia 5300 Cell phone interface in Photoshop CS3

Set the next parameters for the made layer by making a mouse click on the layer we work with on the layers’ panel. Blending Options>Gradient Overlay

Create Nokia 5300 Cell phone interface in Photoshop CS3

Gradient’s parameters:

Create Nokia 5300 Cell phone interface in Photoshop CS3

Create Nokia 5300 Cell phone interface in Photoshop CS3

Next we shall select the Rounded Rectangle Tool (U) (radius 55 px) to draw the cell phone body. Then press SHIFT button while using again the same tool with a radius of 2 px and this time to represent three prominences for the lateral buttons. Using the Add Anchior Point Tool, it’s possible to add one more top on the bottom part of the body for getting a correct shape. The layer’s color is #E4E5E6

Create Nokia 5300 Cell phone interface in Photoshop CS3

Create Nokia 5300 Cell phone interface in Photoshop CS3

The layer’s parameters: Blending Options>Inner Shadow

Create Nokia 5300 Cell phone interface in Photoshop CS3

Blending Options>Inner Glow

Create Nokia 5300 Cell phone interface in Photoshop CS3

Blending Options>Stroke

Create Nokia 5300 Cell phone interface in Photoshop CS3

Gradient’s parameters:

Create Nokia 5300 Cell phone interface in Photoshop CS3

Create Nokia 5300 Cell phone interface in Photoshop CS3 Select the Rectangle Tool (U) to represent the screen’s zone, colroed with #E21E25

Create Nokia 5300 Cell phone interface in Photoshop CS3

Press Alt button on the same layer while making a mouse click between the red layer and the layer belonging to the phone’s body (on the layers’ panel).

Create Nokia 5300 Cell phone interface in Photoshop CS3

Create Nokia 5300 Cell phone interface in Photoshop CS3

Next we shall apply the Rounded Rectangle Tool (U) with a radius of 40 px to represent the next layer belonging to the cell phone’s body. Use again the Add Anchior Point Tool to insert one more top on the bottom part. Select the Convert Point Tool to make the appropriate corrections on the layer’s shape. Its color is #D1D3D4

Create Nokia 5300 Cell phone interface in Photoshop CS3

The layer’s parameters: Blending Options>Stroke

Create Nokia 5300 Cell phone interface in Photoshop CS3

Create Nokia 5300 Cell phone interface in Photoshop CS3

Create the next layer belonging to the phone’s screen, applying this time the Rectangle Tool (U) too.

Create Nokia 5300 Cell phone interface in Photoshop CS3

The layer’s parameters: Blending Options>Gradient Overlay

Create Nokia 5300 Cell phone interface in Photoshop CS3

Gradient’s parameters:

Create Nokia 5300 Cell phone interface in Photoshop CS3

Create Nokia 5300 Cell phone interface in Photoshop CS3

Select the previous applied tool to continue representing the phone’s screen.

Create Nokia 5300 Cell phone interface in Photoshop CS3

The layer’s parameters: Blending Options>Gradient Overlay

Create Nokia 5300 Cell phone interface in Photoshop CS3 Gradient’s parameters:

Create Nokia 5300 Cell phone interface in Photoshop CS3

Blending Options>Stroke

Create Nokia 5300 Cell phone interface in Photoshop CS3

Gradient’s parameters:

Create Nokia 5300 Cell phone interface in Photoshop CS3

Create Nokia 5300 Cell phone interface in Photoshop CS3

Using by turn the Rectangle Tool (U) and the Pen Tool (P), it’s possible to draw the symbols of white color for the lateral buttons.

Create Nokia 5300 Cell phone interface in Photoshop CS3

Select the Line Tool (U) to draw a line, dividing the buttons below the cell phone’s screen. The layer’s color is #909295

Create Nokia 5300 Cell phone interface in Photoshop CS3

  •  

  •    

  •  

 

Post Pages: 1 2 3 4

  • Tirath

    12/01/2010

    Awesome tutorial
    Thanks so much for posting
    always amazing tutorials
    your all tutorials are awesome
    I learn so much from you
    Thanks so much Genus
    U are one of the Best tutorials website on internet
    Keep up good work
    God bless you :-)

  • Bhargav

    05/02/2010

    Didn’t new making such a superb phone was so easy :) It was an exciting tutorial for me! Thanks :)

  • FreshBusinessCards

    03/06/2010

    HI !

    Cool effect I will certainly be useful to my new project.

    Thanks

  • maria

    19/06/2010

    que bueno! muy practico!

  • Mahi

    20/07/2010

    Thanks a lot!
    very good and useful!

  • shilpa

    31/01/2011

    Thank you for such a wonderful tutorial :)

  • lovely

    27/08/2011

    Design nokia n97 in photoshop latest gadget tutorial….
    i found this here- http://heromind.com/design-nokia-n97-in-photoshop-latest-gadget-tutorial/

  • Khan ahmed

    09/09/2011

    =>such a wonderful tutorial

  • sejal

    06/02/2012

    THIS TUTORIAL HELPED ME IN MAKING MY PROJECT……THANK YOU SO MUCH..:)

  • Arvind

    11/04/2012

    Hi,

    This is best tutorials for learning.

Make your fundamental concepts strong by using our 70-662,350-018 and 642-524.You can also take guidance from E20-361 and 1z0-054.