Creating a Clean and Elegant Blog Design with Photoshop, Part 1

Sun, Nov 1, 2009

Creating a great looking blog design isn’t as hard as you may think but it is a long process and quite a few different techniques will be required along the way. I think it is worth the effort trying it out yourself as knowing your blog theme well and basic web design and programming is essential for serious bloggers. Also besides being good at writing on interesting subjects and driving traffic, look and feel and usability is key to the success of a blog. You can of cause pay for a premium theme and it will most likely cover your needs but it may not give you the skills needed to act on the ideas you get along the way.

In a series of articles I will go through the design process starting in Photoshop and plan to go all the way implementing it as a theme for Wordpress. The part 1 is about creating a good looking header and working with some nice to know Photoshop Tricks. This tutorial now consists of:

Part 1 – covering the Theme Header Section
Part 2 – covering the Blog Front Page content area
Part 3 – covering the Side Bar and the Footer Sections

The result of this tutorial will look like this.

web-design-tutorial

Download the source file

Make sure you get a copy of the PDS source file before you start working on the tutorial. License: Creative Commons License.

Getting started

Step 1: Fire up Photoshop and create a new document having 1000px in height 1300 pixels in width. I recommend using white background.

web-design-tutorial

The following color palette will be used.

web-design-tutorial

Start working on the header section

Step 2: Then create a new layer and call it “header” on top of the background. Then select the op area 100 px and fill it with white. You may want to pull down a guide to keep track of where the 100 px line is. Simple click in the ruler and pull down. If you don’t have the ruler use [ctrl-R] to un-hide it or use the view menu.

web-design-tutorial

Step 3: Double-click on the header layer to get op the Layer Style window. Enable the Gradient Overlay and configure the setting illustrated below.

web-design-tutorial

Step 4: Lets make a cut in the gradient to gibe it a bit of “web 2.0″ style. Create a new layer on top of header (call it header-cut) and select the top 50 px. Then fill the selection with white.

web-design-tutorial

Add a Logo

Step 5: Well add a quick logo to the design. Write tripwire (or whatever you want the logo to be) with Helvetica Neue LT Std., 75 Bold using color #cc9900 and size 52pt. This will create a new text layer that we will add some layer effects to in next step.

web-design-tutorial

Step 6: Add a gradient to the text with the following settings.

web-design-tutorial

Then write m a g a z i n e (spaces between all letters) in a new text layer below tripwire. Use same font and wight, text color #bdbdbd and size 25,5pt. You should have a design looking like this.

web-design-tutorial

Setting up the menu items

Step 7:

Lets add a few menu items. Use Ariel, Bold, 14pt. Color for link is #707070 and hover state for link is #cc9900. Space between the menu items is 40 px and the text is aligned to the middle of the 50 px line from the top.

One way to create exact alignment is to add a temporary layer an draw 2 blocks of 20 px with 1 px space in the middle. For later use add a guide in the middle between each menu item as illustrated below.

web-design-tutorial

Step 8:Lets add some more visual effect to the hover state. Add two layers “hover divider #1″ and “hover divider #2″. Select a 1 px box covering the height of the header. For #1 place it over the guide between Home and Blog and fill it with color #bbbbbb.

web-design-tutorial

Then open the Layer style and add an gradient overlay as shown below. Apply the same on #2 on the other side of the Blog menu item.

web-design-tutorial

Add a layer above header-cut and call it menu-hover. Select the Polygonal Lasso Tool (L) and create a triangular shape. You can hold down the Shift key to ensure each side is perfectly straight. You can also add guide to assist your drawing and placement of the shape.Once you have a perfect triangular selection you fill it with color #797979.

web-design-tutorial

Transition between header and content

Step 9: Create a new layer called Content just above Background and fill it with color #797979. Then create a Layer called content shadow and select the header area minus the triangle we created in the layer called menu-hover. This can be done by selecting the triangle in the menu-hover layer and then changing to content shadow layer. Hold [Shift] and select the entire area below the header.

web-design-tutorial

Now select the header layer keeping the selection in the image. Press delete to cut the triangle out of the header. This is needed to add shadow later on. After this you may disable visibility on menu-hover layer by clicking the eye in the layer panel.

Then invert the selection by pressing [Ctrl]+I and fill it with color #797979. Hiding Layers content, header and header-cut will give you a result looking like this.

web-design-tutorial

We are ready to add a drop shadow effect to the header. You can unhide layers again. Select the content shadow layer and open the Layer style window.

web-design-tutorial

The final result of part 1

You should now have the worked yourself to a point where you have the following result. This is as far as we get in part one of this tutorial but I will publish part 2 very soon adding the blog layout page.

web-design-tutorial