Simple 2 Column Blog Layout

In this tutorial you will learn how to create a simple 2 column blog layout using Photoshop similar to the one used for PSDVIBE. If you have any questions about this tutorial be sure to ask in the comments. Also, remember with all the tutorials, the psd is available for download.

Author:

Matthew Heidenreich

Category:

Photoshop


This will be your final result


v
1. The first thing we need to do is create a new document with the size of 1024×998. This may vary depending on how large you would like your layout.

2. We want to go ahead and start from top to bottom. So using your rectangle tool, or rectangle marquee tool make a rectangle similar to the following and fill it with any color

3. Now move to your layers pallet and right click your newly created layer and choose blending options from the drop down menu and insert the following


4. Next we want to add a little ‘shine’ to the top of our horizontal navigation. Make a 1px high selection spanning your whole document at the top of your navigational menu and fill it with #FFFFFF. Lower the opacity on that layer to 36%, and change the blend mode to ‘Overlay”.

5. Now lets go to our tools pallet and pull out our text tool and create some links similar to the following. On your text layer, input the following blending options to give it a little more detail

6. This is what it should look like

7. Next lets go ahead and make dividers between our links. To do so I used my rectangle marquee tool to make a selection similar to the following and filled it with #FFFFFF

8. I then lower the opacity to 59% and changed the blend mode to Overlay. Copy that layer and place it in between all your links and your document will look something like this

9. The final step for our links is to show what a link will look like when you place your mouse over it. To do so use your rectangle marquee tool to make a selection similar to the following and fill it with #FFFFFF

10. Now right click that layer and insert the following blending options


11. Your menu will now look something like this

12. The last thing we want to add to our horizontal navigational menu is a search field. I wanted to go with an Apple feel search so pull out your Rounded Rectangle tool with a radius of 3px and make a Rounded Rectangle similar to the following

13. Then all you need to do is add a little search icon. You can use the one I provided here.

14. Next make a selection similar to the following and fill it with #000000 on its own layer.

Then go to your layers pallet and right click your newly created layer and insert the following blending options

15. Next I chose to make a small selection at the bottom of my header to add a sort of ‘divider’ between the content and the header. So using your rectangle marquee tool make a selection similar to the following and fill it with #000000

16. Then go ahead and insert the following blending options onto your layer



17. Now using the same method I used in step #4, we want to add a little shine to the back of our header. Make a 1 px high selection across the top of your blue background and fill it with #FFFFFF. Then lower the opacity on its layer to 17% with a blend mode of Overlay

18. Your document will now look something like this

19. To have a layout its good to have a logo, so lets go ahead and add one. I went ahead and plop the PSDVIBE logo onto the layout and used these blending options to achieve a gray gradient



20. Your logo will look something like this

21. The last thing I added to my header was a place for an RSS Feed. Using a icon from Smashing Magazine, and some simple text I came up with this

22. Next lets add a light gradient to our background. Create a new layer right above your background layer and make a selection similar to the following and fill it with #FFFFFF.

23. Now insert the following blending options onto its layer


24. Now lets make a simple little sidebar. Using your rectangle marquee tool make a selection similar to the following and fill it with #FFFFFF.

24. Now insert the following blending options onto your sidebars layer


25. I went ahead and added some filler content and your sidebar will look something like this

26. Our left side is where our posts will be displayed. It is pretty generic, so set it up something similar to the following for each post

27. All thats left now is to add a footer. Make a selection with your rectangle marquee tool similar to the following and fill it with #FFFFFF.

28. Then insert the following blending options onto its layer



29. Thats it! Now you should have something that looks similar to the following

 
Get a commercial/public use licence for this PSD (More info)

Remember if you have any questions or comments about this tutorial to leave your responses in the comments below and we will get back to you very quickly.

If you enjoyed this tutorial please take a moment to visit one of our sponsors

Show Some Love
Thank you for your support

13 Responses

Leave a Comment

Name (required)

Mail (required)

Website

Message

 

Sponsors