 |
 |
|
| |
|
| |
This is part 2 of the modern layout Photoshop tutorial. Next, zoom out to 300% and create another gradient filled rectangle, with 5C8303 for the foreground and 77A313 for the background. below this rectangle, make another one but this time filled with 4E9B1C (image b). Next, select the the top grey gradient part and then duplicate it into another layer (layer via cut) and then move it to the bottom (image c). Make a selection, as shown in the image c), and the convert it to transform (edit transform) expand the transform selection by dragging the center top point upwards (image d). Lastly create a 2 pixel wide line at the bottom, as shown in image e). |
| |
|
| |
|
| |
|
| |
|
| |
Now, zoom out to normal viewing, and your header should look like image a). Merge the layers together and the use the transform tool (edit >free transform) to stretch the image to the other side. Next, zoom in by 800% and select the pencil tool. Choose a dark green and make 4 pixels diagonally, like in image c). |
| |
|
| |
| a) |
|
b) Click image to enlarge. |
|
c) |
 |
|
 |
|
 |
|
|
|
| |
|
| |
Continue to addmore pixels and then duplicate the layer a few times, and merge them together, like in image b). Duplicate the layer again several times to make more diagonal lines (image c) |
| |
|
| |
|
|
|
| |
|
| |
Continue to duplicate the diagonal lines all the way across the layout, like in the image a). Next, use the rectangular marquee tool to copy the section (layer via cut) shown in image b), and then move it further down the layout (image c). |
| |
|
| |
|
|
|
| |
|
| |
Stretch the layer, using the transform tool. This will act as a divider between sections. |
| |
|
| |
|
|
|
| |
|
| |
Create a rounded rectangle with the shape tool, and then make a selection out of it, by holding down control, and then clicking on it's layer in the layers panel. |
| |
|
| |
|
|
|
| |
|
| |
Use the selection to cut out (layer via cut) part of the layer, as shown in the image below |
| |
|
| |
|
|
|
|
Next use the rounded rectangle shape too to create some dark grey content areas, as shown in image a). Add a logo, which i've used a caligraphy style font called Giddyup Std for the "my part". You can easily find a font of this style on the many free font sites. I've used a thick rounded font for the portfolio bit of the logo called BorisBlackBloxx, but it looks just as good with Arial Black or ITC kabel. For the menu text i've used verdana 10 pt, bold. |
|
|
|
|
|
| |
| Lastly, all that needs doing is for you to add your content. I've used verdana for all the main text and sub-headings. So that's all there is to it. Hopefully you've created a modern looking layout! |
|
|
|
|
|
 |
