Magazine Styled Blog Layout

In today’s tutorial I’ll be walking your through the process of creating a sleek magazine style wordpress blog in photoshop CS5. Feel free to download the free PSD file at the end of this tutorial.

In Interface

What We’ll Be Creating

Magazine Style Blog Layout

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.

Magazine Style Blog Layout

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

Magazine Style Blog Layout

Your background should look like this.

Magazine Style Blog Layout

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.

Magazine Style Blog Layout

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

Magazine Style Blog Layout

Magazine Style Blog Layout

You should have something like this.

Magazine Style Blog Layout

Creating The Search Box

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

Magazine Style Blog Layout

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.

Magazine Style Blog Layout

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

Magazine Style Blog Layout

Magazine Style Blog Layout

Magazine Style Blog Layout

You should have something like this.

Magazine Style Blog Layout

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

Magazine Style Blog Layout

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.

Magazine Style Blog Layout

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

Magazine Style Blog Layout

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.

Magazine Style Blog Layout

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.

Magazine Style Blog Layout

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

Magazine Style Blog Layout

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.

Magazine Style Blog Layout

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.

Magazine Style Blog Layout

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

Magazine Style Blog Layout

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.

Magazine Style Blog Layout

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.

Magazine Style Blog Layout

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.

Magazine Style Blog Layout

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.

Quick Tip:

To load a selection click the little thumbnail on the side of the layer in the layers window whilst holding down the CTRL key on the keyboard. OR the same can be done by going to “Select > Load Selection”.

Magazine Style Blog Layout

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…

Magazine Style Blog Layout

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.

Magazine Style Blog Layout

Magazine Style Blog Layout

Magazine Style Blog Layout

You should have something like this.

Magazine Style Blog Layout

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

Magazine Style Blog Layout

Creating The Blog Articles

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

Magazine Style Blog Layout

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.

Magazine Style Blog Layout

A simple list of archives.

Magazine Style Blog Layout

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

Magazine Style Blog Layout

The Footer

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

Magazine Style Blog Layout

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

    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

    Web Design: Awesome Magazine Style Sites

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

    Read More…

Download Source File

  1. November 9, 2010 at 7:41 PM

    Fantastic tutorial as always Richard! Keep them coming

  2. November 14, 2010 at 10:16 PM

    hi!This was a really quality theme!
    I come from milan, I was luck to approach your website in wordpress
    Also I learn much in your blog really thanks very much i will come later

  3. November 16, 2010 at 6:59 PM

    Good day!This was a really fine topic!
    I come from milan, I was fortunate to discover your blog in digg
    Also I get much in your website really thanks very much i will come later

  4. February 10, 2011 at 6:52 PM

    This is a great tutorial! Thank you for the help.

  5. April 9, 2011 at 9:16 AM

    Thanks

  6. April 16, 2011 at 6:33 AM

    I have been hunting for the exact content like this. You have made my day. Now I can think of just one thing and that is commenting as a way of appreciating.And yes i have tweeted your site http://www.photoshop-plus.co.uk .

  7. April 20, 2011 at 8:31 AM

    Need to keep testing my blog. Not working as I want it to yet. Thanks for the theme. Maybe this will get mine to look better.

  8. August 21, 2011 at 7:12 PM

    i love travle and your site is so amzing

  9. May 13, 2012 at 10:13 AM

    Hmm it seems like your website ate my first comment (it was super long) so I guess I’ll just sum it up what I submitted and say, I’m thoroughly enjoying your blog. I too am an aspiring blog blogger but I’m still new to the whole thing. Do you have any helpful hints for novice blog writers? I’d definitely appreciate it.

  10. June 23, 2012 at 2:01 PM

    fantastic points altogether, you just gained a brand new reader. What might you recommend about your publish that you simply made some days ago? Any certain?

  11. June 23, 2012 at 6:20 PM

    Just check the homepage you will see the latest 10 posts

  12. July 29, 2012 at 5:08 AM

    Dear Author,

    It was a wonderful tutorial to start for as I am moving to design custom wp themes and it help me a lot to understand the pro techniques and effects as you made on this layout. Could you please post another tutorial for this version about how to convert this layout into working wordpress theme. It will be a resource for me and for other readers as well. Thank you.

  13. September 24, 2012 at 11:03 AM

    I’m greatly inspired with this tutorial. Clearly explained. Thanks for the share.

Give Us Your Feedback

Here on Photoshop Plus we use something called Gravatar, its a little image which will appear next to your name when you comment on a blog. Using a gravatar will help us recognise genuine comments from the spam comments.


Don't forget to leave a comment on this post, we appreciated your feedback good or bad.

There's currently 13 Comments On Magazine Styled Blog Layout, why not add yours!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Auto Scroll To The Top
css.php