New Playstation Portable Realistic Buttons

• Tutorial Details:
  
      ·       Program: Adobe Photoshop CS3
      ·       Difficulty: Intermediate
      ·       Estimated Completion Time: 1/2 Hour
  On last January 27th Sony Computer Entertainment has announced a new portable videogame which will succeed PSP. It's called Next Generation Portable (NGP). As I wanted to share some techniques and trends used in web and GUI design, I decided to write a tutorial teaching how to build the buttons of this console in a realistic way. Take a look at the NGP:
• 
• What you will be creating:
• 
• 
• Step 1
  Create a new document using the settings shown below. The background color can be set to either white or transparent.
• 
• Step 2
  
  Grab the Ellipse Tool (U) and open the Geometry Options window. Select Fixed Size, and then set both width and height to 74px. Click in anywhere of your workspace and this setting will automatically create a circle shape. Fill it with any light color since we will cover this shape with effects later.
• 
• Step 3
  Rename this layer to “Base”. Double click on Base layer to bring up Layer Style. Apply the following layer styles:
• 
• Always remember to pay attention at the Preview of Layer Style, in this way you will understand what each effect produces. 
• 
• 
• 
• Your circle should be exactly like the image below:
• 
• Step 5
  
  Let’s duplicate this layer: right click on it and select “Duplicate Layer…”. Name this new layer to "White border". This new duplicated layer comes with all the styles that you created for Base layer, but we want only the shape of circle. So, right click on this new layer and select “Clear Layer Style”.
• 
• Step 6
  
  Double click on “White border” layer to bring up Layer Style. Apply the following layer styles:
• 
• Be careful! As we only want the effects of layer style without any fill, we have to set the Fill Opacity to 0% on Advanced Blending. 
• 
• Your circle should be exactly like the image below:
• 
• Step 9
  
  Duplicate “White border” layer and name the new layer to “Grey border”. Again, clear the layer style of this layer and apply new styles following the images bellow:
• 
• 
• Your circle should be exactly like the image below:
• 
• Step 11
  
  It’s time to add the iconic shapes of any Playstation videogame’s: triangle, square, circle and X. Maybe some of you are thinking to download a font with these frames or vector free file. But this time let’s explore Photoshop potential, you will see that a lot of things can be done using only Photoshop in right way.
  
  Grab Custom Shape Tool (U). Open Custom Shape picker window, click on the little black arrow and then click on option “All”, in this way all the shapes will appear on picker window and you will find easily triangle, circle and square frames. X button will give us a little more of work and I will show you how to create it at the end of this tutorial.
  
  Set the Foreground color to #FFFFFF, so our shape will be white. Choose some shape that you prefer, and open the Geometry Options window. Select Fixed Size, and then set both width and height to 40 px. Click in anywhere of your workspace and this setting will automatically create the shape.
• 
• Step 12
  
  We will have to align our shape at the middle of the button. Ctrl + Click on Base layer thumbnail to activate the selection of circle. Grab the Move Tool (V) and select our shape layer. You’ll see at the top of your screen some alignment buttons, in this way we will align the shape to the selection. After that, press Ctrl + D to deselect.
• 
• Step 13
  
  This preset frames have a too rigid shape. So let’s diffuse this a little bit. Select the layer and go to Filter >> Blur >> Gaussian Blur. Set the Radius to 0,3 px. To understand better this step take a look closely the shape with zoom before and after of applying effect. Remember to give a meaningful name like “triangle” to this layer.
• 
• Step 14
  
  Our button looks too flat and we will change that. In order to make more realistic icons, buttons and layout in general you have to use slightly textures. I see a lot of sites that seem poor because they don’t have any kind of texture. Despite of be an almost imperceptible detail, makes all the difference.
  
  Create a new layer and name it “Texture”.  Ctrl + Click on Base layer thumbnail to bring up the selection of circle. Fill this new layer with color #282828. Press Ctrl + D to deselect. With this layer still selected go to Filter >> Noise >> Add Noise. Set the Amount to 46% and Gaussian to Distribution.
• 
• 
• Now change the Blending Mode of this layer to Luminosity and the opacity to 5%. In order to understand better the very slightly difference between flat and textured button look at this image below:
• 
• Step 15
  It's time to give the impression of volume to our button. Duplicate “Grey border” layer, name it to “Volume” and bring it to the top of layers. Clear the layer style of this layer, set the foreground to #FFFFFF and apply new styles following the images bellow:
• 
• 
• For default, Gradient Ovelay comes from the center to borders. But we want to simulate the light coming from left top area, so still on the Gradient Overlay window take the cursor to your shape and drag the effect to top left portion. Change the opacity of this layer to 60% and you will have this result:
• 
• Step 16
  
  Finally we will add brightness to our button. Duplicate “Volume” layer and name the new layer to “Brightness”. Clear the layer style of this layer and apply new styles following the images bellow:
• 
• 
• But the brightness should not be as long as it’s right now. So we will have to erase some parts.
  Right click on Brightness layer and select “Convert to Smart Object”. Again, right click on this layer and now select “Rasterize Layer”.
  
  We just want the light coming from top left portion of the circle: blue area in image below. So every part out of the blue area can be erased with a soft brush.
• 
• Voilà! Now put all these layers into a group called “bt_triangle”, for example. Duplicate the group three times and finish changing the shapes of the buttons. I decided to do an app icon with these buttons, and the process of doing that was quite similar to do the buttons.
  
• 
• X frame step
  
  Last, but by no means least, how to do the X shape. Set the Foreground color to #FFFFFF, so our shape will be white. Grab the Rectangle Tool (U) and open the Geometry Options window. Select Fixed Size, and then set width to 4 px and height to 44 px. Click in anywhere of your workspace and this setting will automatically create the rectangle. Create another rectangle inverting the settings: 44px X 4 px.
  
  Now you have rectangles with two directions: vertical and horizontal. Activate Move Tool (V), select both layers and use the align bar to get a cross shape. With the cross still selected go to Edit >> Transform >> Rotate and set the rotation to 45°. Now you have your X frame. Before you put it inside the button, remember to apply the Gaussian Blur.
  
• 
• Applying these techniques wisely you can achieve awesome results. I hope this tutorial helps you to improve your skills!