Blog Templates Tutorial

**Brandon Sheley** · 11-25-2008, 05:55 PM

I share with you a good clean blog photoshop tutorial. I hope to see a few creations for you all, I'll try to get a "how to code a template for wordpress" tutorial as well.

Preview:

Blog Template.

Step 1:

Let’s start out by creating a new file. I used a 1000×1000 pixels canvas set at 72dpi, and I filled my background with white color. Now make a new layer then draw a light blue rectangle with #487CDB color shade and 1000 px 162 px dimensions.

Step 2:

Under Layer Style(Layer > Layer Style) add a Drop Shadow and Gradient Overlay blending options to your large blue rectangle layer.

Result:

Step 3:

Now make a new layer then draw a gray rectangle with #909090 color shade and 1000 px 19 px dimensions right above below your blue rectangle design.

Step 4:

Under Layer Style(Layer > Layer Style) add a Gradient Overlay blending options to your gray rectangle layer.

Result:

Step 5:

In a new layer draw a another dark gray rectangle with #3D3C3D color shade and 952 x 28 px dimensions on the center of the gray gradient rectangle design.

Step 6:

Under Layer Style(Layer > Layer Style) add a Drop Shadow, Inner Shadow and Gradient Overlay blending options to your darker gray rectangle layer.

Result:

Step 7:

Select the Horizontal Type Tool and set the font family to Arial, regular, 15 pt, none and #C3F5FF color shade. In a new text layer type out your navigation links on the gradient rectangle interface.

Step 8:

Create a new layer, 2 pixels below the navigation interface draw a 1 px line with #EEEEEE color shade across your canvas.

Step 9:

Now make a gray tab, first make a new layer then using the Rounded Rectangle Tool draw a gray rounded rectangle with #F3F3F3 color shade. Then cut the bottom corners of the rounded rectangle to make a tab.

Step 10:

In a new text layer type 'Advertise with us' on the gray tab. Use font arial, bold, 10 pt, none and #2E5CCB color shade.

Step 11:

Now just duplicate the tab for the rest of your links. Below the navigation interface on the right end will hold the sidebar. The top section will hold 125 x 125 advertisements.

Step 12:

Make a new layer set and name it 'Content Box'. In a new layer draw a long rectangle with #487CDB color shade and 666 x 20 px dimensions. This will hold the title of the content box.

Step 13:

Under Layer Style(Layer > Layer Style) add an Inner Shadow and Gradient Overlay blending options to your long blue rectangle layer.

Result:

Step 14:

Now add a gray tab with the date on the left side of the long rectangle layer. Use font Arial, bold 10 pt, none and #858585 color shade.

Step 15:

Next to the name add the title of the content box using fontArial, bold, 12 pt, none and white color shade. Then use a regular font with black color shade for the paragraphs.

Step 16:

Create a new layer, below the paragraph sample draw a gray rounded rectangle with #EEEEEE color shade and 226 x 26 px dimensions. Then under Layer Style(Layer > Layer Style) add a Drop Shadow blending option.

Result:

Step 17:

In a new text layer type the content post info such as author name, category and comments on the rounded rectangle design.

Step 18:

In new layer draw a 1 px light gray line on the right end of the content box. Then add another set of content box by duplicate the layer set.

Step 19:

Under the 125 x 125 advertisement section add a content box for 'about us' section. Then below that add a category content box.

Step 20:

Now add a simple footer with your navigation links and copyright info. Seperate them with a light gray 1 px line.

Step 21:

Select the Horizontal Type Tool then set the font family to Bauhaus 93, regular, 36 pt, strong and #B5CEFF color shade. In a new text layer type your website name on the header design.

Step 22:

Under Layer Style(Layer > Layer Style) add a Drop Shadow and Gradient Overlay blending options to your text layer.

Result:

Step 23:

Select the Horizontal Type Tool then set the font family to Wingdings, 50 pt, strong and white color shade. In a new text layer type 'F' which should be a hand icon. Now under Layer Style(Layer > Layer Style) add a Drop Shadow blending option.

Result:

Results:

Blog Template.

**bobdebilder** · 12-03-2008, 11:16 PM

well done Brandon, you have really presented this well