Flash Game Design  
Tutorials Articles
Flash Game Design > Tutorials    
Gallery Layout Photoshop Tutorial

This Photoshop tutorial will show you how to create a clean gallery layout, to present your images in. You can see the outcome of the tutorial in the image below. Click image to enlarge

Step 1.

To Start off, make a new Photoshop document with dimensions of 740 width by 440 height. Create new layer and zoom in to 400%. Make a rectangular selection and choose the gradient tool, setting it as a linear gradient. Select light grey (CED2D6) for the foreground and a slightly darker grey (B4B9BF) for the background. Make a gradient in the direction of the red arrow, shown in image a). Create a another layer and make a 2nd gradient, with CBD0D4 for the foreground and EBEEEF for the background. Once you've made the two gradients, zoom back out to normal viewing. Merge the gradient layers together and then choose the transform tool (edit > transform).

a)   b)   c)
Step 2.

Stretch the gradient layer so that it spans from the top of the document to the bottom of it. Next, create a pixel wide dark and light grey line, to the left of the gradient layer.

a) Click to enlarge   b)   c)
Step 3.
Next, duplicate the side border, move it over to the right and flip it horizontally (edit > transform > flip horizontal). Create a new layer and then make a selection at the top and inbetween the border. Use the linear gradient tool to create a blue gradient, using A8C7DC for the foreground and CBDEEB for the background. Now go to Gallery Photoshop Tutorial Part 2

 

Click image to enlarge

 

More Photoshop Tutorials
Chained Text Vista Style Layout
 
Zombie Modern Layout
Red Glow Layout Glitter Graphic
   
   
Site Copyright © 2008 Nick DS. All rights reserved.