Full Autumn Template tutorial by Lorelei ©
www.loreleiweb.com
Full .PSD file is available for FREE download, members only. (scroll down).
This is not a very easy tutorial, therefore I enhanced it with 35 screenshots to help you along the way...
Your final result will be this rainy autumn layout -
Lets get started. if you want to use exact colours and settings as we did, you would need a high quality photo for the header. Morguefile.com offers a lot of good licence free photos of landscape, just find one that looks dark and at the same time beautiful.
1. Create a new canvas, 750*550 pixels, fill it with the #cce1d6 colour.
2. Make a new Layer. Using the Marquee tool, create a box inside the canvas, as shown on the picture and fill it with any colour.
3. Go to Layer >> Layer Styles >> Blending options, and apply the following setting to this box, which will be your template's body.
The gradient is between #dcdcdc and #ededed colours, with #ffffff highlight between.
So far, this is your result...
4. Take your landscape picture and place it above, where the header is supposed to be. If its too big, cut the edges using the Erasing tool, to make it fit perfect. Do not take small pictures and resize them, as they will look terribly pixelated and will ruin the quality look of your layout.
5. After having placed your header, duplicate the header's picture, and select the Single Row Marquee Tool.
6. place the row anywhere in the middle of the header, Press Ctrl + T to transform the layer, and draw it up and down as shown on the picture:
Click "Apply". This is what you will get after completing the action...
7. Now go to Filter >> Artistic >> Sponge and apply these settings:
Click "OK".
8. Go to Layers window, and reduce the upper layers opacity to these dimensions:
This is what you got.. nice rainy and somber landscape...
9. with the Marquee tool, select a box at the upper part of the header
10. Go to Filter >> Blur >> Motion Blur. Apply these blurring settings to the upper header layer.
11. Create a new Layer, and while this box is still selected, fill it with any colour (we used dark green, randomly picked from a palette.
12. Go to Image >> Adjustments >> Brightness / Contrast, and darker your box.
13. Go to Layer >> Layer Styles >> Options. Apply these settings for Shadow..
...and emboss, to give our future navigation menu a nice deep border.
This is the result of your style application. You may select the erasing tool and remove a bit of the new box from the upper part of the template, to make the navigation menu look like an "independent" box.
14. Select the typing tool and type in the navigation bar all the words that later on will become navigation buttons. Here we used the Franklin Gothic font / 15 px size.
15. Duplicate the text layer ( Layer >> Duplicate layer ) and drag it down.
16. Go to Edit >> Transform >> Flip Vertical, and flip the text, in order to create an illusion of reflection.
17. Set the Opacity of the duplicated layer to 32%, which will make it dramatically paler.
18. Add a Layer Mask to this flipped layer
19. Select the gradient tool, with "reflected gradient effect" (as shown on the picture below) and grad the gradient tool's line from the bottom of the navigation menu to the end of the original text layer.
20. Select the typing tool again and type the name of your site in much bigger letters on the header. Try to refrain from using multiple fonts on the same template, better stick with one simple font, unless you cant match a several fonts smoothly without turning the layout into a mess.
21. Repeat the steps 15, 16, 17, 18, 19 and 20 but this time with the site title, Lorelei Web in this case.
This is what you have so far...
22. Make a New Layer, select the marquee tool and draw a box, approximately 1/3 of the template's width.
23. Go to Select >> Modify >> Smooth, to round the selection edges.
24. Go to Layer >> Layer Styles >> Gradient Overlay, and apply the following gradient effect.
We used #485b29 for the dark green and #959c7f for the lighter hue.
Apply also a shadow...
This is the result of the box...
25. Repeat steps 22, 23 and 24 in order to make one more body box, this time for the remaining 2/3 of the template.
26. Select the Brush tool. We used 21 px, but you may want to use bigger or smaller size.
27. Draw a line over the place on the template where the header "meets" the template's body. We randomly picked a green from the header's hue, #1a3a0e.
28. Select another hue, lighter, #475b28 - and a smaller brush size, lets say 17px, and draw a line inside.
29. Repeat once again with yet again thinner brush and lighter colour, in this example - #7e8b60.
30. This is it! 30 simple steps and you have a professionally looking template! Slice and code, good luck!
[You need to be a member for a minimum of 3 days and have 10 posts or more in our forum to be eligible to download]
[Photoshop] Original Autumn Template, Full Tutorial
Linear Mode
