 |
|
| 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 |
 |
|
 |
|
| |
|
| 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) |
 |
|
 |
|
|
|
| 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) |
|
|
|
|
|
| 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) |
|
| a) |
|
b) Click Image to Enlarge |
 |
|
 |
|
|
|
| Make the back color orange (ff5e00), and create a linear gradient in the 2nd rounded rectangle (a). For the text i've used the setting shown in b) |
|
| a) |
|
b) Click Image to Enlarge |
 |
|
 |
|
|
|
|
|
|
|
|
|
 |
