In this photoshop tutorial you will learn how to create a blog design from scratch using a combination of gradients and selections.

Here is a preview of what we will be creating

Photoshop Document Size

1. Lets begin by creating a new photoshop document – File > New with a width of 900px and a height of 1200px.

Building the Header Section

2. Choose your Rectangular Marquee tool ( Shortcut Key: M ) and put in the following options below. Feathering to 0px, then choose the drop down menu and pick Fixed Size. Set the width to 900px and the height to 80px as this will be the width and height of our header.

3. Click and hold near the top of the document and a selection should appear. Move the selection to the very top as shown in the demo below.

4. Next create a new layer by going to Layer > New > Layer… Name the layer Header, Then go to Edit > Fill and in the first drop down choose color… Add in the hex code #7a6c5a make sure before you do this that you are selected on the new layer we just created. If you are on the background image we could have issues later on. Press ok and it should fill your selection with a dark brown.

5. Next we are going to add a little shadow to the bottom of the header. Go to your layers palette where all of your layers are stored and Command + Click (mac) Control + Click (PC) on the thumbnail of the Header layer. That will bring up a selection of that layer. After we click and the selection is made create a new layer then head over and grab your gradient tool. Make sure in the gradient picker you choose the Foreground to Transparent gradient.

6. With the selection still active and black set as your foreground color start about 20 pixels below the header and click and drag up while holding down the shift key ( keeps the line straight ) release the mouse button at approximately halfway up the header. Rename this layer Header Shadow. Change the blending mode to soft light and adjust the opacity as you see fit. I set my opacity to 78%.

Now Lets do the Logo

7. Grab the Text Tool select Myriad Pro, Bold, 52pt, white and click near the upper left side of the header type in the title of your blog in this case “Blog Title”.



8. Go ahead and highlight the text by using the shortcut Command + A or Control + A then go up to Window > Character and set the tracking to -39. See example below.

9. Once you have fixed the tracking right-click on the Blog Title layer and choose Blending Options… Add a drop shadow with the figures from below.

Creating the Navigation

10. First lets start off by bring in some guides bring a guide in from the top to about 2 pixels underneath your logo. Then drag in a guide from the left and have it stop right at the 6 on the top ruler of your document. Drag out another guide from the left and increase each one by 1.25 inches which means this time it will stop at 7.25 the next one will be 8.5 etc…until you have five boxes for your navigation to go into. Take a look at the below screenshot to see if it’s similar to mine.

11. After you have the guides in place get your text tool and choose Myriad Pro, Regular, 16pt, White and type Home in the first box. It should be positioned just like in the screenshot above. Finish the rest of the navigation items which are Tutorials, Freebies, Trends, and Contact and make sure they all fit in their box.

12. Highlight all of your navigation items and press Command + G or Control + G to group them together and name them Nav. This will keep our photoshop file cleaner.

13. Our next step is to add the active state of the navigation. Go into the Nav group and create a new layer called active. Drag that active layer underneath the Home text layer so that home will show up on top of it.

14. With your guides still up select the Rounded Rectangle Tool and set the Radius at the top to 10px. Make sure in your toolbar at the top that FILL PIXELS is selected. Start at the 6 inch mark where home is, about 8px above home is where you will start on the 6 inch guide. Click and drag to the right until you hit the other guide and drag down so that it goes past the bottom of the header. If that was confusing look at the screenshot below.

15. Grab your rectangle marquee tool, and make sure that at the top where you have the tool options that you set the style drop down box to normal instead of the fixed width. Then drag out a selection around the part that hangs over the header and hit the delete or backspace key.

16. Now we will create the outward curves at the bottom of the tab. Grab your pen tool and make your first click on the left edge of the tab and then click and drag left at the bottom of the header while holding down shift until you get the desired curve let go and just click to complete the shape.

17. Now that we have the path drawn we need to create a new layer in our layers palette. Then go to Paths and choose the “Fill path with Foreground Color” option. After you have filled the color and you have your paths panel open click off of the current selected path by clicking in the gray area below, then go back to your layers palette. Now in mine I have a little bit hanging over the header so I’ll grab my rectangular marguee tool and delete that.

18. Next we need to duplicate the layer we just made ( Command + J (Mac) Control + J (PC) ). Then we need flip it horizontally because we want to use it for the other side. Go to Edit > Transform > Flip Horizontal. Then press your “V” Key on your keyboard which selects the move tool and use your right arrow key to move that layer into position. Once that layer is in position select all three layers in your layers palette and merge them down to one ( Highlight all of them then right click and choose Merge Layers). Then be sure to move this layer under the Nav group so that the “Home” text shows through. Here is what we have so far.

19. Now it’s time to give our tab some gradient action! Right click on the tab layer and choose blending options. Click on the Gradient overlay option and copy the settings below

20. Next we want to give a drop shadow to the tab to give it a little “Pop.” Use the settings below.

21. Now you may notice that the drop shadow is hanging below the header which we DO NOT want. Here is a trick on how to get rid of a specific section of a layer style. Click on the part that says Blending Options: Custom which is at the very top of our Blending Options dialog box. Then in the Advanced Blending section check “Layer Mask Hides Effects.”

22. Now go ahead and add a layer mask to your tab Layer > Layer Mask > Reveal All. Grab your rectangular marquee tool and draw a selection around the drop shadow that is hanging over the header.

23. Once you have the selection like above go to Edit > Fill… and choose black as your color. The reason we use black is because when using layer masks white reveals and black hides.

Main Background Color

24. Now we are going to give our blog its main background color. Head to the very bottom of your layers palette and find the layer called background. If it has a lock by its name double click the lock and then press ok. Then go up to Edit > Fill… > Color… and put in the hex code #e0ceb6.

25. We are going to add a highlight at the bottom of the header so that it gives the header a subtle separation from the body background. While selected on your background layer create a new layer. Then grab your Single Row Marquee tool and click inside right underneath the header. The correct selection should look like below.

26. Fill that selection with #f3ebe0 and you should get something like the below screenshot.

On to the Content

27. First thing we want to do is clear all of our guides. So go up to View > Clear Guides. Now lets create two guides that will help us align our content correctly. Go back up to View > New Guide… choose Vertical and give it a value of 25px and hit enter. Repeat that process except this time put in 875px. This gives us 25px of “padding” on each side.

28. Lets create the box where the posts will be shown. Select the Rectangular Marquee tool and input the settings in the toolbar below. Place the selection in the exact place as seen in the second screenshot.

29. Fill the selection with a color (I used white), then open your layer style menu and choose the gradient option and copy the settings below.

30. While in the layer style menu add a stroke: 1px, #887c6a (stroke color), outside.

31. Now we will create a section for the post title to go into. Grab the Rectangular marquee and use the settings below.

32. Fill it with any color and copy the styles below to apply the gradient.

33. Now we can add a little highlight to separate the title from the preview content by using our rectangular marquee tool and setting the width to 550px and height to 1px.

34. Add a new layer and fill it with #f2e7d9.

35. Take those three layers we just made and group them together and call them “Post.” Duplicate them two times and evenly space them down the page like below.

On to the sidebar

36. The sidebar will use a lot of the same values as we used for the post so this part should be short. I created a couple more guides to help me align the sidebar. I placed one at the right edge of the post and then one 25px to the right of that. This is great spacing because it means all of our elements have 25px in between each other which we want to keep consistent.

37. Now I can draw out my sidebar using the rectangular marquee tool set the rectangle marquee to the fixed size with a width of 275px and a height of 430px

38. Create a new layer and fill it with any color. Copy the layer style from #29 earlier in the post and apply it to this new layer.
Draw out a selection at the top of the sidebar where the title “Sponsors” will go. Make sure it lines up with the darker brown part of the post title. Fill it with any color and copy the layer style from #32. Also create the 1px highlight like we did before to go right below the brown part.

39. Group all of the sidebar elements into a group called sidebar and duplicate it once. Use your move tool to nudge the duplicated group down to fit into position like the screenshot below.

The Footer

40. Grab your rectangular marquee tool and start 25 pixels below last post and select the rest of the canvas. Fill it with #716656 and it should look like the screenshot below. P.S. I had to adjust the height of the second sidebar in order for it to be lined up with the last post.

Layout Complete now add Content

41. The layout is now complete all thats needed now is to add some content. I stuck with Myriad Pro for all of the font on this website including post titles.

I hope you learned something from this tutorial, even if your not a fan of the design there are still photoshop techniques to be learned. Thanks everyone and let me know if you attempt it. Don’t forget to promote this below if you enjoyed it.