Photoshop Tutorial - Stylish Red Layout part 1

	Flash Game Design

Tutorials

Articles

Flash Game Design > Tutorials

	Photoshop tutorial Stylish Red Layout

	This Photoshop tutorial will show you how to design a stylish web layout with a red hot header. You'll learn how to use simple shapes to create a smart looking glowing pattern. Click on the image below to see the whole layout.

Step 1.

First of all create a new document with dimensions of 740 x 440. Fill the background with a grey (CCCCCC) and then create rectangle the length of the entire document with a height of about 2/5 of it. I've used a dark red (4F0100) for this, as you can see below.

a) Click to enlarge

Step 2.

Next we're going to create stripes at the bottom of the dark red section. I've used FED08D for the peach color, white for the next one down, EDE1CE for the next, white for the next and then lastly EDE1CE once again. Click on image a) to see the stripes at normal size, while Image be shows the stripes zoomed into 400%. It's easer to create them by zooming in a bit.

a) Click to enlarge		b)

Step 3.

Next we're going to create some lines, using the color AD847F, at an angle of 45 degrees. Select the pencil tool and then zoom in by 800%. Create a new layer and make a diagonal line pixel by pixel as show below. You'll need to select the pencil too fir this, shown in image a).

a)		b)

Step 4.

Duplicate the layer and then move it to the right by 3 pixels, so that there's a 2-pixel width gap between the 2 lines (image a). Merge the 2 layers and then duplicate the newly merged layer, again move it across, so that there are now 4 lines (image b)

a)		b)

Step 5.

Repeat the process of duplicating, moving across and merging until there are diagonal lines all the way across.

a)		b) Click to enlarge

Stylish Red Layout Part 2