1. The first thing we want to do is to create a new document with the dimensions of 1024x1100. Your height may vary, but i used these dimensions for the purpose of this tutorial.
2. Next, we want to go ahead and add in our background. I used a great stock image I found on deviantart here. The images aren't large enough, but just go ahead and scale them to fit your document. Or you can download the PSD at the bottom of the tutorial, and get the image from there to save you the step.
3. The first thing I would like to do is to create a simple logo. Using the font Helvetica, I used #000000 for "Vicinity and set it to bold, and used #D75160 for the "Designs" while keeping its font styling to Regular. You should have something that looks like this
4. Now we want to add a little tagline to our logo. Using your Rectangle Marquee tool make a selection similar to the following and fill it with #FFFFFF
5. Lower the opacity of your layer to 90%, so it will blend better with the background. Then go ahead and add some text in your newly created box. I used the color #64685E
6. Next we want to add a spot for you and your clients to login. On the right side of your template we want to use our Rectangle Marquee Tool again and make a selection similar to the following and fill it with #000000.
7. Lower the opacity of your layer to 30%, and then add some text on top of it similar to the following. Make your text color #FFFFFF
8. Next we want to move onto our navigation. Using your Rectangle Marquee Tool again make a selection similar to the following and fill it with #000000
9. We now want to lower the opacity of that layer to 70% to give it a nice transparent feel on our colorful background.
10. Now lets show how our links will be displayed. For each link we will have a description under it to keep it fun and friendly. Using your Rectangle Marquee Tool make a selection similar to the following and fill it with #303130.
11. Change the blending mode of your square to Soft Light and then we can go ahead and add some text. For the link I used the color #FFFFFF, and for the description I used #FFFFFFF, but just lowered the opacity of the text layer to 50%.
12. Go ahead and repeat those steps to create all the navigation links you'll need. For my active link I used #3CC1F9 instead of the white.
13. With the extra space on the end, you can go ahead and add some options for users to subscribe to your RSS Feed. Just add some simple white text, and add your RSS icons and your document will look something like this by now
14. Next we want to move onto our content area. Using your Rectangle Tool we want to go ahead and select out a background for our content. So make a selection similar to the following and fill it with #FFFFFF
15. First lets go ahead and add a heading for our blog area. I chose to use the words "Latest Articles" with the color #000000 and set to bold. I then used the color #3B3A3A for the - - - - - - - - - - - - under my heading. You should have something like this
16. Now lets make a search bar. Having fun yet? Using your Rectangle Marquee tool again make a selection similar to the following and fill it with #000000
17. Now insert the following blending options onto its layer by right clicking its layer and choosing blending options from the drop down menu
18. You should have something that looks like this
19. Next we need to make a button for our search box. So using your Rectangle Marquee again make a selection similar to the following and fill it with #000000.
20. Now insert the following blending options onto its layer
21. Now go ahead and add some white text on top of your button and you should have something that looks like this. (note. I added a little white border around the edge, but that is optional)
22. Now go ahead and add some witty text in front of your text box and your document should look a little something like this
23. Lets go ahead and start with our sidebar shall we? The idea is to keep it simple. We want to go ahead and make a heading for our "Recent Posts" box, so using your Rectangle Marquee Tool make a selection similar to the following and fill it with #D65863
24. Now pull out your Text Tool and add the text "Recent Posts" in #FFFFFF.
25. Next use your Polygonal Lasso Tool to make a little triangular bullet and fill it with #000000. Then go ahead and add some text next to it to represent a post. For the link I used the color #2E92BC
26. Now just repeat those steps and you'll have something that looks like this after about 5 links
27. The last step for the box is to add a 2px high border on the bottom. Use your Rectangle Marquee to do this and fill it with #000000. Lower the opacity of that layer to around 10% and it will look like this
28. Now i just repeated those steps for a Recent Comments box, but changed the back of the heading to #B7D8CF. Your document will look something like this
29. Now its time to make our post list. Using your Rectangle Marquee Tool make a selection similar to the following and fill it with #F1F1F1.
30. Next we want to make a nice rounded box where our thumbnail will be for each post. So using your Rounded Rectangle Tool with the radius set to 10px, make a rectangle similar to the following (doesn't matter what color, we will be changing it)
31. Now on your newly created Rounded Rectangle, insert the following blending options
32. I went ahead and added a thumbnail from our site in there as an example and it will look something like this
33. Now all thats left is to use your text tool to lay it out something like the following. For the calendar icon, I used a pack you can find at this link.
34. We want to have every other post with a background, so on the second post I did not add a background, and changed the calender icon to one of the others in the pack. You'll have something that looks like this
35. All that's left is the footer (about time huh?). Go ahead and use your Rectangle Marquee Tool to make a selection similar to the following and fill it with #000000
36. Now lower the opacity of your newly created layer to about 70%, and then just add some text in a similar way to the following
That's it! When your all done, your template should hopefully look something like the following


More Tutorials:



