colorful,funky web layout tutorial

Diposting oleh HACKER INSIDE KILL FROM BATAVIA |

Step 1.

This is quite short for a Photoshop web layout tutorial, with only 18 steps to create a nice looking bright, layout. Getting underway, we'll start off by making the menu bar and the content area. So make a new Photoshop document, with dimensions of 800x600 and a black background. Choose the rectangle tool and create a grey (191b1b) rectangle (a). The content section is going to be divided into two main segments. Choose the rounded rectangle tool, set the radius to 12 and create two darker grey (080808) rounded rectangles (b)

a) Click Image to Enlarge		b) Click Image to Enlarge

Step 2.

Now we're going to create the menu bar, so change the foreground palette to a brown / orange color (b21e00) and create a thinner rounded rectangle (a). Rasterize it, by right clicking on it in the layers panel, and choosing "rasterize layer". This will allow you to have more control over what you do with the shape. Make a selection (b) using the rectangle, by clicking on it in the layers panel, then going to Select > Load Selection.

a) Click Image to Enlarge		b)

Step 3.

Set the background color to orange (ff4a00), choose the gradient tool (a, ii) and set it to linear gradient (a, iii). Create a gradient on the rectangle, by dragging from top to bottom of it's selection (b)

a)		b)

Step 4.

Create a new group (layer set in older Photoshop versions) called "menu" and place the rounded rectangle into it. Create a peach (ffc981) colored rounded rectangle over the other one, rasterize it, and make a selection using it (select > load selection)