I’m going to show you how to design a blog design in photoshop. You will learn not only how to make the design from scratch, but also why I made certain design choices. This will help you in the long term when you are creating your own designs from scratch.

 

Without further ado, here’s our final product. You can also skip down and just download the psd if that’s how you’d like to learn.

Click To Enlarge

Step 1

Create a new canvas 1024×820. I always use 1024 as the width when I design templates, because that is the most common screen width. Just keep in mind when you code to make it work for smaller and larger screen resolutions as well. Set the foreground color to #1d1d1d, and fill the background with that color (alt+backspace).

Step 2

Duplicate the background layer (ctrl+j), get the transform tool (ctrl+t), up top set the width to 84%, and hit enter to save the transformation. Now in the layers palette set that layer’s fill to 0%. This will make the layer’s contents invisible, without changing the opacity of the layer’s styles. Open up the layer style window, and set the drop shadow settings as follows and hit ‘ok.’

What this did is instead of having the inner part of the site a different color than the outside background, it just creates the illusion that they are different by adding a drop shadow.

Step 3

Now we’ll create the header and put in the widgets on the side. When I’m having a creative block I find that by getting the header out of the way it’s a lot easier to get the creative juices flowing. Grab your text tool, and in a nice big font, type your site name. I used 37pt Century Gothic with a bright orange, #ee5d07. It is highly recommended that you use a sans serif font (one that doesn’t have “feet”) for things like titles. You can also include a tagline to the right or underneath (I used 18pt Century Gothic #969696), and and a logo to the left of both of those. Under both of those I added nice large navigation links (Century Gothic #444444, the words are 32pt and the vertical lines are 37pt).

Step 4

Now we need to define a pattern that we will use several times in this design. Right click on this image, save it to your computer, and open it in photoshop.

With the image opened, goto Edit -> Define Pattern. Name it scanlines and hit ‘ok.’ Now you can close this file.

Step 5

Let’s add some faint scanlines up top. I wasn’t originally going to include them, but I added them in various parts of the design because it felt too bland. Duplicate the inner background (the second layer we made), remove the drop shadow, and add a pattern overlay. Select the ’scanlines’ pattern that we just created, make sure the opacity is at 100% and the scale is at 100%, and hit ‘ok.’ Then set the layer’s opacity to 10%. We only want the scanlines at the very top, so we’re going to add a layer mask. When you create a layer mask, everything that is white in the layer mask is shown, and everything that is black is hidden.

With the layer we just made selected, click the button on the bottom of the layers palette that looks like a rectangle with a circle in it to add a layer mask. Grab your gradient tool (G), set the default foreground/background colors by pressing ‘D,’ and create a linear gradient starting close to the top of your template and going up. Make sure you’re using the ‘foreground to background’ gradient when you are doing this, and that your are holding shift when you drag in order to make a perfectly straight line. This may take a couple tries until you get the lines fading out at the right point.

Step 6

For the stuff on the side I just pasted it from a basic wordpress sidebar. I changed the header color to #9a3900 and the other text to #a5a5a5. The RSS logo I just got off of a google image search and using Image -> Adjustments -> Brightness/Contrast I tweaked the brightness and contrast so that it would blend in to the site a bit more. I recommend that you use the layers I included in the psd at the end of this tutorial, or just skip this step. As long as you leave room for this sidebar, this step is not very important. Here’s how my file looks so far.

Click To Enlarge

Step 7

The rest of this design is a cinch. Grab the Rounded Rectangle Tool (U), set the radius to 5px, and set the foreground color to #212121. On a new layer, create a large box for the content to go in — just remember to save room for the footer at the bottom. Add a drop shadow to this layer using the following setting:

Grab your text tool (T), and create a title. I used Verdana 26pt #ee5d07. It’s important that you use Verdana, Helvetica, or Arial for this title because one of these fonts will almost certainly be how your users sees the title in their browser, depending on which fonts they have installed.

Then add some content text. Remember that when you have the text tool selected you can just click once to add a text line, or you can click and drag to add a text box which automatically does word wrapping. Since we have a lot of content to add, you should use the click and drag method. The content text I used is Verdana 14pt #e8e8e8, and I generated it on http://www.lipsum.com/. If you’ve never seen this text before, all it is is standard dummy text that is widely used as a placeholder.

Step 8

In order to add scanlines across the top of your content box, you need to duplicate the layer with the content box on it (ctrl+j), and set the new layer’s opacity to 35%. Add a pattern overlay and use the same scanlines that made earlier. Again we need to add a layer mask. Add a layer mask by pushing the rectangle/circle button on the bottom of the layers palette, and press ‘D’ to reset the default foreground/background colors. Then just below the top of the rounded rectangle hold shift and click and drag up a very little to create a gradient. The smaller the line is, the smaller the fade will be. This will probably take several tries, but just keep trying until you get something that you are satisfied with.

Step 9

Almost done! We just need to add the footer. Create a new layer and make a rectangle with the foreground set to #212121, at the very bottom. Then grab the transformation tool (ctrl+t) and pull out the sides until it snaps to the inner background (right where the drop shadow starts). Duplicate this layer (ctrl+j), and set the opacity to 29%. Add a pattern overlay with the same pattern we’ve been using, and you guessed it, add a layer mask. Get the default colors again (D), and while holding shift create a small gradient starting just under the top of the footer and going up. A couple of tries later and it should look very similar to the gradient on the top of the main content box. Add some copyright text, links, or whatever you want. I used Verdana 14pt #686868.

Final

Click To Enlarge

You’re all done with the design now! Check back soon and I’ll have a new tutorial about how to splice and code this. I recommend that you go back with your text tool, select for example your content text, and with the Character Window open adjust the leading and tracking. These control the space between lines and between letters respectively. This can increase readability and generally make the design look less crowded, and therefore better.

Now click here to learn how to code this design!

Download the PSD