Design A Blog With Photoshop

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 .psd of the final to compare your final with. You can download the .psd here. Let me know your thoughts and feelings on this project in the comments below and as always, enjoy!

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

2. Choose your Rectangular Marquee tool (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 120px as this will be the width and height of our header.

3. Click above the document and a selection should appear. Move the selection to the very top as shown in the demo below if not already in place.

4. Now create a new layer (Layer > New > Layer…) Name it Header. Select that new layer in your layers pallet and go to Edit > Fill and in the first drop down choose color… Add in the hex code #c7dba9. If you are on the background image we could have issues later on. Press ok and it should fill your selection with a light green.

5. Next we are going to add some shadow to the bottom of the header. Keep the header section selected. If it’s not 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 the selection is made create a new layer in your layers pallet and grab your gradient tool (G). Make sure in the gradient picker you choose the Foreground to Transparent gradient.

6. With the selection 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 (makes a straigt line) release the mouse button at about 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 75%.

Logo & Blurb Time

7. Text tool (T) and pick Arial, Bold, 50pt, white and click near the upper left side of the header type in the title of your blog in this case “Blog Title”.

8. Now onto the blurb below your title. With your text layer selected hold cntrl and press J (cntrl + J) to duplicate the type layer. Now use the move tool (V) and once you do this hold shift and press your down key 4 times. Now the text tool (T) again and set to 25pt and type in your “blurb”.

9. After you finish typing right-click on the Blog Title layer and choose Blending Options… Add a drop shadow with the figures from below. Continue on your blurb layer as well with the same settings.

On To The Navigation

10. Lets start off by bring in some guides. Your rulers must be out to do this (cntrl +R). 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. See the screenshot below.

11. After you have the guides in place get your text tool (t) and choose Arial, 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 boxex.

12. Highlight all of your navigation items and press Command + G or Control + G to group them together. Name the group Navigation so we remember what it is.

Setting The Background Color

13. Now we are going to give our site 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 #65754d.

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

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

The Content Section

16. 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. Also make a horizontal guide set at 150px. This will give us 25px of “padding” from our header as well.

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

18. Make a new layer and fill it with any color. Double click on that new layer in your layers pallet and give it a stroke of 1px filled with hex color:#000000 and opacity set to 10%. Now select gradient overlay and use the settings shown below.

19. Now we will give our sidebar a header. Set your Rectangular Marquee to 275px by 60px. Make a new layer and fill it with hex color:#546140.

20. Now use your Rectangular Marquee and set it to 275px by 1px. Make a new layer and fill it with hex color:#f3ebe0. This will add a highlight section to our side bar.

21. Select the 3 sidebar layers and group them (cntrl+G) and name it sidebar. Now duplicate that group to make a second sidebar.

22. Mave another vertical guide 25px to the right of the sidebar as shown below.

23. Now we are going to make our main content sections. Use Rectangle Marquee on fixed width set to 550px x 280px. Create the header for this main content the same as you did with the sidebar. You can copy the layer styles and paste them to stay consistent.

24. Copy the main folder 2 more times and make the 3 main content sections. See below:

The Footer

25. Grab your rectangular marquee tool set on normal and start 25 pixels below last post and select the rest of the canvas. Fill it with #546140 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.

Now its up to you to add the content. Have fun with it and I hope you learned some things about designing a professional clean looking site. Let me know what you liked in the comments.