Flash Game Design  
Tutorials Articles
 
  Step 14.  
  Next we're going to create some simple buttons, using the rounded rectangle tool. Once you've selected this tool, set the radius to something like 10 and then create a pale green (7EA9A8) rectangle. Rasterize the shape and then make a selection with it, by pressing CTRL and then clicking on it in the layers panel. Go to Select > Modify > Contract, choosing 1 as the value, and then fill the selection with a light grey/blue (CFDBE1).  
     
 
a) Click to enlarge   b) Click to enlarge
 
  Step 15.  
  Go to contract once again, but this time choose around 7 for the value. Fill the selection with white. Using the rectangular marquee tool, make a selection and over the bottom half of the button and then press delete. Duplicate the button, making as many as you need.  
     
 
a) Click to enlarge   b) Click to enlarge
 
  Step 16.  
  Add some text for each button.  
     
 
a) Click to enlarge
 
  Step 17.  
  Lastly we're going to create the stars in the top half of the header. Make a new layer and then make the foreground white and the background B3E9F2. Zoom in 400%, make a selection and then create a gradient, as shown in image a). Go to edit > transform > distort and then drag the top corners inwards. You should up with something like in image c).  
     
 
a)   b)   c)
 
  Step 18.  
  Duplicate the layer, flip it vertically (edit > transform > flip vertically) and then line it up with the original, like in image a). Merge the layers together and then duplicate the layer. Rotate the duplicate by 90 degrees, by going to edit > transform > rotate 90 CW. Line the layer up, like in image c), merging it with the vertical original and then zoom out.  
     
 
a)   b)   c)
 
  Step 19.  
  So, now you've created the first star, all you need to do now is make duplicates of it and resize some of them (edit > transform > scale). Spread them about and you should have something like in image b). Lastly, Create a snazzy logo (I've just made a simple one here), add your content and then you're done! Click Here to receive the PSD files for this and other tutorials.  
     
 
a) Click to enlarge   b) Click to enlarge   c) Final image - Click to enlarge
 
  Magical Layout Part 1 / Part 2  
   
 
   
   
Site Copyright © 2008 Nick DS. All rights reserved.