Create A Stylish And Sleek Play-Station Portable Icon

Posted in 3D Effects, Tutorials4 years ago • Written by 18 Comments

Tutorial-psp-gadget Title imageIn this Photoshop tutorial we’ll learn how to create a stylish and sleek-looking play station portable. This is very detailed, but advanced tutorial, so if you have basic knowledge and understanding about Photoshop you should be able to easily keep up and let me guide you through this PSP creation process. Each step is followed by screenshots to give you a better understanding. Note that you can always improve and add more details to such designs – it’s hard to understand at first when to stop and when less is more, but I am sure you will get those skills automatically after you’ve done several tutorials and some tweaking by yourself!

This is what we’ll be creating today! Looks good? Great – let’s get started:

Step 1

So at first, let’s create a New Document with sizes – 900×600 px. We will starting by creating the background.

Create a new layer (press Ctrl + Shift + N)  fill it (with any color).

Open the Layer Style window and apply this Gradient Overlay.

This kind of gradient you should get:

Step 2

I’m going to use guide lines to create the PSP shape, so let’s place all the lines that we’re going to need. (To activate the guidelines, you have to activate the rulers at first (CTRL + R) then what you do is click on the ruler, then hold and drag it into position).

For the Horizontal guidelines set: 250px, 280px, 510px, and  540px and for the Vertical guidelines: 120px, 200px, 660px and 740px.

TIPS:

  • CTRL +  ; will hide or show the guidelines.
  • Use the move tool to move the guidelines around.
  • Slide the guidelines back to rulers to remove them.

Pick the Rounded Rectangle Tool (U), set radius to 10px and do the same like I did on the picture below:

Now do the same as I did in the next picture. I used another color so you could see better difference:

Step 3

Now create a new layer, set the Brush Tool to 411px and draw two rounded circles as seen in screenshot below:

Now set circled brush layer behind the other layer and erase the parts you don’t need:

Step 4

Create a new layer, make selection with Lasso tool(press L to get it) similar like in the screenshot below and fill it:

Duplicate it 3 times more and set the others to each corner of the shape. You can go to Edit, Transform, Flip Vertical and/or Edit, Transform, Flip Horizontal to help you rotate the shapes.

Now select all the (parts) layers (Hold Ctrl and click the layers), right click and select  “merge layers” and add these Blending options:

Step 5

Now with your psp shape still selected let’s create a new layer, select the brush tool and choose white.

Set 35px for the brush tool and then select the Pen tool (P) and create a line like I did. then right-click and select “stroke path”, choose brush and hit OK.

After that click right click and click “delete path” and set the Opacity (of the layer) to 20%.

Create a new layer, set the brush tool to 16 px then select your Pen Tool and create something like this then right click and select “Stroke Path” – choose brush and click Ok. Right click again and click “Delete Path”.

Select the Eraser and erase the unnecessary parts:

Create a new layer, set the brush tool to 170 px and draw the left side to give it shining effect:

Then set the Opacity to 62% and erase the parts you don’t need.

Now select your Marque Tool (M) and move your selection using your arrow keys a bit to the right and inverse your selection (Ctrl + Shift + I) and press Delete. Finally press Ctrl + D to De-select your selection.

Step 6

Let’s create a new layer and create a circle using the Elliptical Marquee Tool (M) (hold down shift to draw a precise symmetrical  circle) and fill it.

Open the Blending Options menu and adjust the settings like in image:

Create a new layer and create a smaller circle to fill it:

..and add these Blending Options:

Step 7

Create a new layer and add a create a small circle like this,fill it:

Add these Blending Options:

Step 8 – Adding text and details

Now select the Text Tool (T) and type SONY with a dark color. I used the font Engravers MT, type UMD with the color code: (#a8a8ad)

..then create something like this using your pen tool (P) to achieve little perspective:

Set your Brush Tool to 2 px, then select your Pen Tool again and stroke it with a gray color (mine is #404041).

(you can duplicate it and set a darker one in its side like i did) ..then duplicate it (Ctrl + J) and go to Edit, Transform, Horizontal Flip and set the duplicated layer on the other side of the circle.

Step 9 – PSP Text

Now create a new layer and using your Pen Tool (P) let’s create the PSP.

Lets begin with the “P” – make sure your Brush Tool is set to 2px, select your Pen Tool again and create something like in the screenshot below:

psp-tutorial

Stroke it with a white color (right click on selection), delete the path.

Follow the same steps to do letter “S” as well.

..create selection, stroke it… and do the same with the third letter “P”.

Now add these Blending Options to letters:

Step 10

Create a new layer and now we will add a little bit more details in design. Create selection like in the screenshot below with your Polygonal Lasso Tool (L):

Fill it with white and set it below the psp shape layer. DONT DESELECT THE SELECTION.

Select your Brush Tool, set it to 42px, and brush something like I did from the corners to get some shadowing and 3D effect.

Okay, we are done with bottom side, now let’s get to the top.

Create selection like in the screenshot and set it below the PSP shape:

..like this:

Now set these blending Options:

We need the same effect on the other top side of ou gadget right?

Just duplicate the layer and go to Edit, Transform, Flip Horizontal and set it on the other side of the PSP shape. Let’s compare our outcome which is petty much finished, but we will add some more details to make it look really good:

Step 11 – Final Tweaking

You can brush with a black color at the bottom of the PSP like i did in the next picture to achieve more 3D like effect:

Select all the layers EXCEPT THE BACKGROUND (Hold down Ctrl), right click and select merge layers. Hold down Ctrl and click the PSP layer to make a selection, you should get selection like this using your Pen Tool (P):

Right..now set your Foreground Color to white, right click, go to Fill path… and hit OK then set the Opacity to ~ 36%, set your brush tool to a soft brush of 200px, set the Opacity of the brush tool to 50% and erase the parts you don’t need anymore like screenshot below:

Now Duplicate the PSP layer (Ctrl + J) and go to Edit/Transform and select Rotate 180 degrees, set it below the other layer.

Now lets add some reflection, shall we?

With the Duplicated layer selected go to Filter, Blur, Gaussian blur and set the radius to 3.8px:

Now set the Duplicated layer’s Opacity to 60%. Select your eraser and set it to a soft brush of ~185% set the eraser’s Opacity to 50% and erase like i did to achieve natural reflection:

Congatulations – you’re done!

If you have any questions about any of the steps, don’t hesitate to ask!

22 Written Articles

18 Comments Best Comments First
  • sriganesh

    Thursday, March 11th, 2010 12:30

    1

    good tutorial and thanks sampson ! ill give a try now :D

    0
  • Eric Shafer

    Thursday, March 11th, 2010 18:36

    8

    Great tutorial, easy to follow with a professional result.

    0
  • Amberly | Web Designer

    Thursday, March 11th, 2010 16:31

    6

    Superb… Well Explained Tutorial..
    But i think there is problem with the “reflection”
    In my opinion you have turned it 180` degree then horizontal so that you get the Mirror effect.
    Any way. Very nice tutorial. Thanks for sharing..

    0
    • Dainis Graveris

      Thursday, March 11th, 2010 16:50

      3

      Yes, you’re right but in this case there aren’t details seen which show it’s not mirror effect so I think it doesn’t matter now :)

      Thank you for comment and opinion :)

      0
      • Amberly | Web Designer

        Thursday, March 11th, 2010 17:39

        7

        Yes. you are right. we cant notice that in the final out put. Only in the second last step we notice it. After all, we are only only concerned about final out come.

        0
  • Matthew Heidenreich

    Thursday, March 11th, 2010 21:25

    5

    great looking tutorial, thanks for this.

    0
  • julio

    Thursday, March 11th, 2010 15:57

    2

    really cool tutorial thanks for the post!

    0
  • SmashingWebs.com

    Thursday, March 11th, 2010 18:13

    4

    Nice tutorial. Also nice color combination for the psp :)

    0
  • Nishant's Blog

    Thursday, March 11th, 2010 22:01

    9

    Hey, thanks for showing it. M not a designer myself, so this helps.

    Also, is it possible for you to write tuts for GIMP? Coz most of the time m on linux and if you cud do that, wud be a big help!

    0
  • Duane

    Friday, March 12th, 2010 02:11

    10

    Great and detailed tutorial. Thanks very much.

    0
  • Gail

    Monday, June 14th, 2010 13:10

    16

    Easy to follow tutorial, thanks for sharing your knowledge with us! Good end result

    0
  • Austin

    Thursday, June 2nd, 2011 21:48

    17

    yea, Only in the second last step we notice it. After all, we are only only concerned about final out come., thanks !!!

    0
  • Marvin

    Friday, September 2nd, 2011 06:19

    18

    Coz most of the time m on linux and if you cud do that, wud be a big help!

    0
  • Camisetas

    Tuesday, May 25th, 2010 14:43

    15

    Great Tutorial! Another option would be to develop in Illustrator, I’ll try and post later to say it gets easier.

    0
  • Hilde

    Saturday, March 13th, 2010 02:14

    14

    Well done! Thank you for this tutorial. Detailed and easy to follow :)

    0
  • Mohammad Irfan

    Friday, March 12th, 2010 12:53

    11

    Wow…..!!!!
    What a great tutorial. Really nice one and detailed.
    Keep it up doing such nice things.

    Regards
    Irfan Sheikh

    0
  • Ostap

    Friday, March 12th, 2010 19:30

    12

    Not bad. But not realistic. Although it is not very important:)

    0
  • Marvin

    Friday, September 2nd, 2011 06:19

    18

    Coz most of the time m on linux and if you cud do that, wud be a big help!

    0
  • Austin

    Thursday, June 2nd, 2011 21:48

    17

    yea, Only in the second last step we notice it. After all, we are only only concerned about final out come., thanks !!!

    0
  • Gail

    Monday, June 14th, 2010 13:10

    16

    Easy to follow tutorial, thanks for sharing your knowledge with us! Good end result

    0
  • Camisetas

    Tuesday, May 25th, 2010 14:43

    15

    Great Tutorial! Another option would be to develop in Illustrator, I’ll try and post later to say it gets easier.

    0
  • Hilde

    Saturday, March 13th, 2010 02:14

    14

    Well done! Thank you for this tutorial. Detailed and easy to follow :)

    0
  • Ostap

    Friday, March 12th, 2010 19:30

    12

    Not bad. But not realistic. Although it is not very important:)

    0
  • Mohammad Irfan

    Friday, March 12th, 2010 12:53

    11

    Wow…..!!!!
    What a great tutorial. Really nice one and detailed.
    Keep it up doing such nice things.

    Regards
    Irfan Sheikh

    0
  • Duane

    Friday, March 12th, 2010 02:11

    10

    Great and detailed tutorial. Thanks very much.

    0
  • Nishant's Blog

    Thursday, March 11th, 2010 22:01

    9

    Hey, thanks for showing it. M not a designer myself, so this helps.

    Also, is it possible for you to write tuts for GIMP? Coz most of the time m on linux and if you cud do that, wud be a big help!

    0
  • Eric Shafer

    Thursday, March 11th, 2010 18:36

    8

    Great tutorial, easy to follow with a professional result.

    0
  • Amberly | Web Designer

    Thursday, March 11th, 2010 16:31

    6

    Superb… Well Explained Tutorial..
    But i think there is problem with the “reflection”
    In my opinion you have turned it 180` degree then horizontal so that you get the Mirror effect.
    Any way. Very nice tutorial. Thanks for sharing..

    0
    • Dainis Graveris

      Thursday, March 11th, 2010 16:50

      3

      Yes, you’re right but in this case there aren’t details seen which show it’s not mirror effect so I think it doesn’t matter now :)

      Thank you for comment and opinion :)

      0
      • Amberly | Web Designer

        Thursday, March 11th, 2010 17:39

        7

        Yes. you are right. we cant notice that in the final out put. Only in the second last step we notice it. After all, we are only only concerned about final out come.

        0
  • Matthew Heidenreich

    Thursday, March 11th, 2010 21:25

    5

    great looking tutorial, thanks for this.

    0
  • SmashingWebs.com

    Thursday, March 11th, 2010 18:13

    4

    Nice tutorial. Also nice color combination for the psp :)

    0
  • julio

    Thursday, March 11th, 2010 15:57

    2

    really cool tutorial thanks for the post!

    0
  • sriganesh

    Thursday, March 11th, 2010 12:30

    1

    good tutorial and thanks sampson ! ill give a try now :D

    0

Comments are closed.

23.20.112.161 - unknown - unknown - US