Flash Game Design
Photoshop Tutorials Flash Tutorials Flash Games  
   
     
Modern Layout Photoshop Tutorial
This Photoshop tutorial will show you how to design a modern layout. You can see the outcome of the tutorial in the image below. Click image below to enlarge
Step 1.

First of all we're going to create the top part of the header, so create a new Photoshop document with the dimensions 740x470, and then fill the background with black. Zoom in to 600% magnification and then and create a rectangle, using the rectangular marquee tool, with D1D1D1 as the color. Then, set the foreground color to DCDCDC and the background color to F4F4F4. Choose the linear gradient, make a selection like in image a), and drag from top to bottom (the distance of the red arrow). Make a second selection, like in image a), with a pixel wide gap from the previous gradient.

a)   b)   c)
Step 2.

Next, set the the foreground to DDDDDD and the background to C5C5C5. Create a 2nd gradient at the bottom of the rectangle, like in image a). Create a pixel wide rectangle below it, using EBEBEB as the color. Duplicate the pixel wide line and then set the lightness of to -20, by going to image > adjustment > Hue / Saturation.

a)   b)   c)
Step 3.
Repeat the process again for a 3rd pixel wide line and the go to modern Layout Tutorial Part 2
   
   
Site Copyright © 2008 Nick DS. All rights reserved.