Flash Game Design  
Tutorials Articles

 

Sleek Layout Photoshop Tutorial

This Photoshop tutorial will show you how to create a sleek layout. You can see the result of the tutorial in the image below. Click Image to enlarge.

sleek layout
Step 1.
First of all make a new Photoshop document with dimensions of 740x480. Create a large gradient for the content area, using light blue (D3F1F6) for the foreground and light grey (EFEFEF) for the background. To create the gradient, make the selelction and drag the gradient tool from the bottom to the top of it. Create arounded rectangle with a gradient, using blue (B6E1EC) for the foreground and light grey (F9FAFA) for the background. Next, make another rounded rectangle with lighter colors for the gradient.
a) Click to enlarge   b) Click to enlarge   c) Click to enlarge
Step 2.
Duplicate the content areas, so that there are a total of two columns. Zoom in to 300% magnification and create a 2 pixel wide light green line along the top of the content section.
a) Click to enlarge   b)
Step 3.
Next create a thicker rectangular selection above the thin line. Drag from the bottom to the top to make a subtle gradient, using CADEE2 for the foreground and A4C9CE for the background. Create a second gradient using B9D4D9 for the foreground and EBF2F3 for the background. This time only drag the gradient tool about half to the top, creating a more 3d look.
a)   b)
Step 4.
You should now have something like in the image below. Next go to Sleek Layout in Photoshop - part 2.
   
   
Site Copyright © 2008 Nick DS. All rights reserved.