 |
 |
| |
| |
|
|
| |
This is part 2 of the 3 color layout Photoshop tutorial. Next we're going to add some more color to the layout! Using the rounded rectangle tool create a rectangle and the chop off the bottom, with the rectangular marquee tool, as shown in image a). Create another white rounded rectangle and make a pixel wide line separating the 2 rectangles, as shown in image b). Next, create a new layer and then make a peach colored rectangle on top of the 2 nd rounded rectangle.
|
|
| |
|
|
| |
|
|
|
|
|
| |
|
|
| |
Make a selection out of the peach rectangle and then nudge the selection 1 pixel down and 1 pixel right, using the arrow keys. Delete the contents of the selection, leaving a 2-sided border, shown in image b).
|
|
| |
|
|
| |
| a) |
|
b) |
|
|
 |
|
|
|
|
|
| |
|
|
| |
While the selection is still active, fill it with a grey/pink color and then, because it will be slightly to big, use the rectangular marquee tool to chop off the excess (image b).
|
|
| |
|
|
| |
| a) |
|
b) |
|
|
 |
|
|
|
|
|
| |
|
|
| |
Next, create the 1 st menu button with a red rectangle. Use the polygonal lasso tool to cut off the top right corner.
|
|
| |
|
|
| |
| a) |
|
b) |
|
|
 |
|
|
|
|
|
| |
|
|
| |
Duplicate the button layer and then create a pixel wide red line above the buttons.
|
|
| |
|
|
| |
| a) |
|
b) |
|
|
 |
|
|
|
|
|
| |
|
|
| |
Using the rounded rectangle too, create a grey square and the rasterize the layer by right clicking on it in the layers panel. Contract the layer by 1 pixel and then delete the selection.
|
|
| |
|
|
| |
| a) |
|
b) |
|
|
 |
|
|
|
|
|
| |
|
|
| |
Duplicate the square borders, which will contain the thumbnails. Create a dark blue rectangle along the bottom and then add some text for your buttons. I've used ITC Kabal, but you can use any rounded type font you like.
|
|
| |
|
|
| |
| a) |
|
b) |
|
|
 |
|
|
|
|
|
| |
|
|
| |
Add a logo in the green area and some header text along the blue. Place your thumbnails in the square borders.
|
|
| |
|
|
| |
| a) |
|
b) |
|
|
 |
|
|
|
|
|
| |
|
|
| |
Add your text
|
|
| |
|
|
| |
|
|
| |
|
|
|
 |
