Magazine Styled Blog Layout

What We’ll Be Creating

Lets Get Started, Creating Your Document

Create a new document (Ctrl + N) with the dimensions 1200 x 1550 pixels. Set your foreground color to #ffffff and background color to #e3e3e3 then select the gradient tool (G). With the gradient tool selected change the gradient type to a reflected gradient.

Drag the gradient from about half way down the canvas, once you’ve added the gradient add some noise by going to “Filter > Noise > Add Noise”.

Your background should look like this.

Creating The Website Title & Slogan

Select the “Type Tool” (T), then at the top of your canvas add your website title and slogan using your desired font.

Once your happy with your title and slogan add the following layer styles to your website title layer.

You should have something like this.

Creating The Search Box

Select the “Rounded Rectangle Tool” (U) with a radius of 20px.

Now drag out a rounded rectangle about the same height as your website title then place the rectangle on the right side of your canvas.

Spruce up the rectangle by adding the following layer styles to your rectangle layer.

You should have something like this.

Inside the search box add a small magnifying glass with the text “Search…” next to it.

Creating The Textual Navigation

Select the “Type Tool” (T) then type out your navigation items, I’ve gone for an italic verdana font. Once you’ve typed it out color the first navigation item in a different color.

Once your done with your navigation add a drop shadow using the settings below.

On a layer underneath your text navigation layer add a rounded rectangle using the “Rounded Rectangle Tool” (U). Once you’ve added the rectangle color it white (#ffffff) then add a small triangle using the pen tool in the bottom middle of the rectangle.

Creating The Content Area

Select the “Rounded Rectangle Tool” (U) with a radius of 20px then drag out a big white #ffffff rectangle out onto your canvas.

Add a stroke to your big rectangle using the settings below.

Next, select the “Elliptical Marquee Tool” (M) then drag out an ellipse the same width of your content box but let the ellipse over hang at the top by a smidge.

Fill (G) the elliptical selection with the color black (#000000) on a layer underneath your content box layer, then set the opacity to 20%. Finally blur the ellipse by going to “Filter > Blur > Guassian Blur”, set the blur amount to 3 px. You should have something like this.

Repeat the above steps for the bottom of the content box.

The Featured Content

Select the “Rounded Rectangle Tool” (U) then drag out a black (#000000) rectangle inside your content box. The radius of the rectangle should be about 5-10px.

Inside your new black rectangle add an example featured image. Once you’ve chosen an image you can easily place the image inside the rectangle by going to “Edit > Paste Into” or “Edit > Paste Special > Paste Into” if your using CS5.

Were now going to transform our featured image so it looks like a jQuery slideshow. Select the “Rectangular Marquee Tool” (M) then make a selection at the bottom of the featured image.

Fill (G) the selection with the color black (#000000) then set the opacity to 25%. Were now going to remove the excess rectangle as we don’t want any of it outside of our featured image. Load a selection around your featured image rectangle leaving the the black rectangle layer highlighted. Now go to “Select > Inverse” then hit the delete key.

Inside the transparent rectangle which we now have, were going to add some text. Select the “Text Tool” (T) and using a big bold font add a title for the article your featuring. Once you’ve added the article title add a little bit of meta information time and date etc…

Now on the right side of the featured article were going to add a simple list of other featured articles. Start off with 4 small rectangles on top of each other with the following layer styles added.

You should have something like this.

Inside each rectangle add a small example image to represent that article, the on the right side of the image add some dummy text.

Creating The Blog Articles

When creating your blog articles think about the way columns are setup in magazines and newspapers.

For this layout I’ve gone for a similar look using blocks of text, with each block of text there’s the meta data for that article.

Once you’ve started adding articles continue to add more articles and sections just like you would in a magazine. I’ve gone ahead and added a simple community section.

A simple list of archives.

Then I’ve finished off the layout by adding some media, videos and photo’s etc…

The Footer

Finish off the layout by adding a simple textual footer with some little social icons for good measure.

Conclusion

Thanks for taking part in this tutorial, maybe you could share some of your results by posting them below.

Other Related Articles

• 

  When To Use Magazine-Style Themes For Blogs?

  When designing a custom theme or deciding on an already-existing theme, bloggers have a lot of factors to consider and there is no shortage of options, particularly for WordPress users. A growing number of blogs are moving away from traditional blog layouts in favor of magazine-style themes.

  Read More…

• 

  28 New Great Magazine/Newspaper Style WordPress Themes

  As a great cms platform WordPress has many examples for every work like blogs, companies, portfolios, galleries etc. Magazine/Newspaper style themes are one of the most wanted WordPress themes and they are very useful for managing lots of posts on a page.

  Read More…

• 

  Web Design: Awesome Magazine Style Sites

  From Fubiz to Justin Timberlake’s site, these are great inspirations for every designer.

  Read More…

Purchase Psd Now

Author: Sam Zaman

Sam loves to write on technology & related stuff. Ecommerce, mobile and internet marketing equally drive her interest. Likes gardening and experimenting with new recipes. An avid reader and absolutely mad @bout donuts :)