Flash Game Design  
Tutorials Articles
Flash Game Design > Tutorials    
Step 19.  
This is the final part of the Photoshop tutorial to design the Wii. Create the 3rd button using the elliptical marquue tool and a radial gradient. For the foreground I used BBBBBB and for the background 81818. Create a small light grey dot, to give it some shine, and then, using the elliptical marquee tool, make a black circle underneath the radial gradient, to make a shadow.  
   
a)   b)
 
  Step 20.  
  Next we're going to create the very top button, but first zoom into 500%. Make 3 single pixel wide lines, as shown in iamge a) and then 2 more above them.  
   
 
a)   b)
 
  Step 21.  
  To the right of these lines, make a diagonal line to join them up and then use the pencil tool to draw a random little pattern, to make as if something is written on teh button.  
   
 
a)   b)
 
  Step 22.  
  Zooming out to normal viewing, your button should look like those in image a). Next we're going to create the last part, which is the light. So, using the rounded rectangle tool, with a radius of 10 pixels, create a rectangle, as shwon below.  
   
 
a)   b) Click image to enlarge
 
  Step 23.  
  Next create a new layer and then make gradient using light blue and white. This gradient should only be half the length of the blue rounded rectangle.  
   
 
a)
 
  Step 24.  
  Duplicate the gradient layer and then flip it vertically (edit > transform > flip vertical). Line it up with the original and then merge the 2 together. Use the transform tool (edit > free transform) to squash the gradient together, like in image b). Use gaussian blur on the gradient, with a radius of 0.4, and then merge it with the blue rounded rectangle.  
   
 
a) Click image to enlarge   b) Click image to enlarge
 
  Step 25.
  Next, use the transform tool to rotate the light, like in image a). Duplicate the light layer and then nudge the bottom one 2 pixels to the left, using the left arrow key. By going to image > adjustments > hue/saturation, change the sauration to -90 and the lightness to -40. You should now have a subtle shadow below the light. To make the glow around the light, make a selection out of it, adn then set the foreground to BBBFD8.
 
 
a)   b)
  Step 26.
  Expand the selelction (select > modify > expand) byt 1 pixel and then feather it by 3 pixels. Create a new layer and then fill it with the light purple. Nudge the glow layer by 1 pixel to the left. Lastly, we're going to create the logo. Select Verdana font and then type in Nintendo, with the tracking set to 75. This will space out the letters more, so that they aren't too distorted when we manupulate the text. Create a rounded rectangle and then contract it by 2 pixels, removing the center. Merge the text and the rectangle outline together.
 
 
a)   b)
  Step 27.
  Use the transform tool to distort (edit >transform >distort) the logo, like in image a). Add some glint to the logo, by using the pencil tool to add a few light grey pixels on either side of the logo.
 
 
a)   b)
  Step 28.
  And finally we're finsihed! Hopefully you've leanrt a thing or two and enjoyed this tutorial :).
 
   
   
Site Copyright © 2008 Nick DS. All rights reserved.