Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Simple 2 Column Blog Layout

Simple 2 Column Blog Layout


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

Simple 2 Column Blog Layout image 1

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

Simple 2 Column Blog Layout image 2

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

Simple 2 Column Blog Layout image 3

Simple 2 Column Blog Layout image 4

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'.

Simple 2 Column Blog Layout image 5

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

Simple 2 Column Blog Layout image 6

6. This is what it should look like

Simple 2 Column Blog Layout image 7

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

Simple 2 Column Blog Layout image 8

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

Simple 2 Column Blog Layout image 9

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

Simple 2 Column Blog Layout image 10

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

Simple 2 Column Blog Layout image 11

Simple 2 Column Blog Layout image 12

11. Your menu will now look something like this

Simple 2 Column Blog Layout image 13

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

Simple 2 Column Blog Layout image 14

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.

Simple 2 Column Blog Layout image 16

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

Simple 2 Column Blog Layout image 17

Simple 2 Column Blog Layout image 18

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

Simple 2 Column Blog Layout image 19

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

Simple 2 Column Blog Layout image 20

Simple 2 Column Blog Layout image 21

Simple 2 Column Blog Layout image 22

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

Simple 2 Column Blog Layout image 23

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

Simple 2 Column Blog Layout image 24

Simple 2 Column Blog Layout image 25

Simple 2 Column Blog Layout image 26

20. Your logo will look something like this

Simple 2 Column Blog Layout image 27

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

Simple 2 Column Blog Layout image 28

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.

Simple 2 Column Blog Layout image 29

23. Now insert the following blending options onto its layer

Simple 2 Column Blog Layout image 30

Simple 2 Column Blog Layout image 31

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.

Simple 2 Column Blog Layout image 32

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

Simple 2 Column Blog Layout image 33

Simple 2 Column Blog Layout image 34

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

Simple 2 Column Blog Layout image 35

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

Simple 2 Column Blog Layout image 36

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.

Simple 2 Column Blog Layout image 37

28. Then insert the following blending options onto its layer

Simple 2 Column Blog Layout image 38

Simple 2 Column Blog Layout image 39

Simple 2 Column Blog Layout image 40

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

Simple 2 Column Blog Layout Tutorial: Final Result



Author's URL: PSDVIBE
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Simple 2 Column Blog Layout"

Only registered users can write comment

Reader's comments