Photoshop Tutorial - Stylish Red Layout part 2

	Flash Game Design

Tutorials

Articles

Flash Game Design > Tutorials

Step 6.

Create a pixel thick line and then a thick horizontal rectangle using red (B13000). Make another 1 pixel thick line above the thick rectangle. They should all have a pixel thick gap between them as shown in the zoomed in image a).

Duplicate the 45 degree line layer and then move it above the pixel thick line you just created. Use the rectangular marquee tool to delete half of the of it. Next we want to change the saturation and lightness of the lines. Go to image > adjustments > Hue/Saturation and then set the saturation to +54 and the lightness to - 12.

a) Click to enlarge		b) Click to enlarge

Step 7.

So that's the main part of the header done. Now we're going to make it look a bit more interesting with some hot glowing shapes. Create a new layer and then select the elliptical marquee tool, using it to create a white circle. Duplicate that layer and then reduce it in size, to about 60%, using edit> transform > scale. Repeat the process until you have 4 different sized circles (image b)

a)		b)

Step 8.

Make some more duplicates of each cirlce and then spread the cirlces about a bit, making some overlap others.

Step 9.

Next we're going to create a glowing orange border around circles. Merge all the circle layers into 1 and then make a selection with the new shape. You can do this by holding down CTRL and then right clicking on the shape's layer. Expand the selection by going to select > modify > expand, entering 2 as the value. Feather the selection by going to select > modify > feather, entering 1 as the value. While there is still a selection, create a new layer below the while shape and then fill it with bright orange (FE6800). You should end up with something like this:

a)		b)

Step 10.

Continue to use this technique to create more shapes like in image a), making sure to leave a space for your logo.

a) Click to enlarge

Step 11.

Next we're going to create the borders. Create a new layer, above all the other layers, filling it with grey (CCCCCC). Select the rounded rectangle tool, seting t the radius of the corners to 15.

a)		b)

Step 9.

Create a white rounded rectangle. Right click on it's layer and then choose rasterize layer. Make a selection with the rectangle and then go to select > modify > contract and then enter 12 as the value. Delete the selected area so that you're left with a border as shown in the image below. Then using the selection delete the grey background, revealing the header graphic.

a) Click to enlarge		b) Click to enlarge

Step 9.

Make a background for the text, with a light grey and then create some buttons using white.

a) Click to enlarge

Create a snazzy logo (I've just made a simple one here), add your content and then you're done!

Stylish Red Layout Part 1