Nokia 5300 Cell phone interface

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



Select again the Line Tool (U) to draw this time a highlight of white color situated under the flatness.

Create Nokia 5300 Cell phone interface in Photoshop CS3

Next we shall represent the joystick button, applying the Rounded Rectangle Tool (U) (radius of 30 px). Then apply the Convert Point Tool to make the corrections on the element’s shape. The layer’s color is #E6E6E6

Create Nokia 5300 Cell phone interface in Photoshop CS3

The layer’s parameters: 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 

Create Nokia 5300 Cell phone interface in Photoshop CS3

Let’s represent now a kind of deeping on the joystick button, selecting the same Rounded Rectangle Tool (U) with a radius of 30 px.

Create Nokia 5300 Cell phone interface in Photoshop CS3 The layer’s parameters: Fill 0%
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

On the next new layer we shall draw the inside part of the joystick button. This time we should use the same Rounded Rectangle Tool (U) with a radius of 10 px. The Convert Point Tool is helpful when making the appropriate corrections for the new element. The layer’s color is #D9DBDC

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

Make a copy of the last made layer and select Free Transform option to make the copy smaller, changing also the layer’s parameters:

Create Nokia 5300 Cell phone interface in Photoshop CS3

The layer’s parameters: Fill 0%
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

Applying the Rounded Rectangle Tool (U) with a radius of 10 px, it’s possible to represent the buttons of the cell phone.

Create Nokia 5300 Cell phone interface in Photoshop CS3

The layer’s parameters: Blending Options>Inner Glow

Create Nokia 5300 Cell phone interface in Photoshop CS3
Blending Options>Gradient Overlay

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

Make a copy of the recently created layer and then select as usually Free Transform solution for placing the copy the same way demonstrated below:

Create Nokia 5300 Cell phone interface in Photoshop CS3

Make two more copies of the layer containing the button’s colored representation. Choose again the Free Transform option to situate the copies on the same position as below, changing the parameters for the copied layers:

Create Nokia 5300 Cell phone interface in Photoshop CS3

The parameters for the green button: Blending Options>Gradient Overlay (the rest of the layer’s parameters should remain the same)

Create Nokia 5300 Cell phone interface in Photoshop CS3

Gradient’s parameters:

Create Nokia 5300 Cell phone interface in Photoshop CS3

The parameters for the red button: Blending Options>Gradient Overlay (the other parameters should be left the way they are)

Create Nokia 5300 Cell phone interface in Photoshop CS3

Gradient’s parameters:

Create Nokia 5300 Cell phone interface in Photoshop CS3

Using the Rounded Rectangle Tool (U) (radius of 15 px), it’s possible to represent the protuberances reserved for the loud speakers. Then press Alt button while applying the Rectangle Tool (U) to erase the unnecessary elements.

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

  •  

  •    

  •  

 

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..:)