by: Madalin Tudosein: Freebies, Tutorials

Design a Magazine style WordPress layout + Offering the coded theme-MagaBlue

Today I`m offering you something special.A tutorial of a clean and modern WordPress layout + The coded theme of the layout.

In the tutorial we`re gonna create a PSD layout in Photoshop for a clean Magazine style WordPress theme,which may fits for any type of tasks,from a web design blog to a portfolio one and even for a business one.

The coded WordPress theme is compatible up to 2.8.4 WordPress version and has a modern web typeface.The theme has standard 2 columns layout and is easy to be convertible as you want,as the PSD source of is also included in the package,or just follow the tutorial.

The demo is what you see.My current theme is the same with the theme I`m offering to you.

Have a look!

The tutorial:

Step 1:Download the 960 grid system template.

First step is downloading the 960 grid system template,which is in big lines,a system which allow us to divide the layout in equal columns.I`m using it in all the layouts I create because it has the guides already drawn.You can find it on the 960.gs official website.Unpack the zip file and look for PSD templates. You will see that there are two different types of templates: one is 12_col and the other one is 16_col.We`ll use the one named 12_col because we`ll divide it in 2 parts:the content and the sidebar.The content is twice the sidebar,so we`ll have 3 parts-two for the content and one for the sidebar.

So,open the 960_grid_12_col.psd into Photoshop.

Step 2

You can see that the image has some pink vertical stripes,to evidence those 12 columns,but we want to get rid of them.For this,hide the group named 12_col_grid.

Now we are ready to move on.

Step 3:Creating the header

To create the header,select the Rectangle tool and draw a rectangle at the top of the canvas.Mine is 175px.

After,draw another rectangle of 145px high and fill it with a blue color.

Now select the rectangle tool and set it to paths.Then draw a path of 115px high but leave a top-margin of 30px above.

With the Gradient Tool(G) and a black to transparent gradient,with the opacity of 30%,draw a shadow at the top of the selection.

Now select the Line Tool and draw a 1px line with the same blue color.

Change the white color of the background with a gray one.

Step 4:Creating the top button bar

This step is creating the button bar of the header.So,draw a rectangle at the bottom of the header,over that black area,then add him a gray to white gradient.

Then add two lines:a white line above the button bar and a gray line,darker than the background,at the bottom of the button bar.

If you1re still confused,follow the images.Until now,we draw the next elements:

Until now,you should have something like this:

Step 5:Creating the search bar

Select the Rounded Rectangle Tool,set a radius of 5px and draw a rectangle in the right part of the header.Then add a gray to white gradient and a search icon.I did a search on the internet for one.You may do the same.Place it like in the image:

Step 6:Adding the buttons

With the Type Tool(T),add some text links to the top and bottom of the header.

Step 7:My logo

In this step I added my own logo,a logo created in 1 minute using some blending options.

Now the header is finished.

Step 8:Creating the post

Now I`m gonna show you the steps I took for creating the post.

Select the Rectangle Tool and create a rectangle with the width of 650px.The height may vary,in relation with the content of the post.But as an idea,it`s not bigger than 350px.Give the rectangle a gray color,#cecece.

Now duplicate this layer and give it a gray to white gradient and an inside stroke.The inside stroke is very important in creating the desired effect.You`ll see in the next image what I`m talking about.

Step 9:Adding the thumbnail

Now add a thumbnail.It doesn`t matter which dimensions are.

Then create a fancy outside stroke around the thumbnail image.You may do this by Ctrl+Clicking the thumbnail(selecting the thumbnail) and expand it with 5px (Select->Modify->Expand),then filling the selected area with white color and giving it a black stroke of 1px.

Now add some content to the post.For the small icons,you may go for a search on the internet.

Step 10:Social icons.

Download those Social Icons(link) and add them to our project.I used the 32x32px icons.

Step 11:The “Read More” button

To create a beautiful “Read more” button,select the Rounded Rectangle tool and with a radius of 7px,draw a button of 100x23px.Place it right bottom the post area.Then add the next blending options:

The button should look like this one:

Add some custom shapes,using the Custom Shape Tool,to create a “play” element.

The post area is finished.

Step 12:Sidebar advertisements

Now let`s create the sidebar.First area is the advertising area,situated at the top of the sidebar,to be more visible,obviously.

For this,repeat the step 8 and you should have something like this.

Now add some advertisements.Usually,here comes those of 125x125px.

Step 13:Duplicating content

Now,duplicate two or three times the boxes to have more posts and spaces for the sidebar.

Step 14:Adding categories.

Add some text in the first rectangle to create the Categories.

Step 14:Adding Recent articles

In the last rectangle of the sidebar,add some text to create an area of Recent Articles.For each article,add a small thumbnail with a blue 2-3px stroke.

Step 15:Creating the footer.

Now let`s creating the footer.At the bottom of the image,draw a rectangle with the height of 40px.Add a gradient overlay using a gray color at the top and a lighter gray at the bottom.Then add two more lines at the top of the footer:one dark gray and the other,white.If you didn`t understand till now,you`ll see in the picture what I was speaking about.

Now add some text on the left and right side of the footer to finish the layout.

The result

Now the image is finished.If you followed the tutorial,you should have something like the next image.Is a simple WordPress theme layout,but it looks great coded,and soon you`ll see something like this on this website.

Click the image for a bigger preview.

I hope you enjoyed the tutorial and if you want to have the coded theme,just enter your name and email in the form below and you`ll receive it,with all the PSD files from all the tutorials created here at DeliciousThemes.

Magablue-Our WP theme

Main features of the theme

Modern and clean web typeface.
Tableless design and 100% CSS-based layout.
2 columns of fixed width.
Widget Ready.
XHTML 1.0 Transitional valid.
CSS 2.1 valid.
Delivered with source .PSD file.
Clean CSS and HTML code.
Multi-browser compatibility. Tested under Firefox 3 , Safari 2 , Opera and IE7.

Agreements

A link back must be included in the footer or simply just don’t remove the credits from footer.
You may not claim intellectual and exclusive ownership to the theme.
Do not provide the direct download link nor upload “DeliciousThemes Blue Theme” onto other servers for your own share. If you want to spread the words, just link to this article.
You may use it for your clients’ projects / websites.Unlimited number of projects.

I hope you enjoy the theme and if there are any bugs,contact me and I`ll provide you an improved version.

Click to rate this post!

[Total: 0 Average: 0]

Madalin Tudose

A web developer with a crush on SEO. Having my skin in the game of website development and digital marketing for more than 10 years already, you might consider me an expert. At least this is what people call me. Honestly, I HATE that term. I prefer to describe myself as a person who takes action and risks. I test every hypothesis, document every step of the process, and implement what works.

Join the discussion

Felipe on September 1, 2009 at 7:26 am Reply

¡¡Nice job!!
tirath on September 2, 2009 at 9:33 pm Reply

Awesome web layout with nice step by step tutorial
Thanks so much for your kind effort for posting them
Awesome technique Amazing job
I learn a lot
keep up good work
God bless you 🙂
DesignStraw on September 4, 2009 at 1:56 am Reply

Thanks for the information. Good Thought – I have bookmarked your blog.
Pett on September 4, 2009 at 7:22 am Reply

Hi, http://www.deliciousthemes.com – da best. Keep it going!
Rufor on September 5, 2009 at 8:50 am Reply

Greatings, Super post, Need to mark it on Digg
Rufor
Dirnov on September 7, 2009 at 2:12 am Reply

Thanks for article. Everytime like to read you.
Thanks
estetik on September 7, 2009 at 1:34 pm Reply

thanks, i can quote this article ?
deratizare on September 7, 2009 at 3:09 pm Reply

Interesant. Mersi
loans on September 8, 2009 at 5:04 am Reply

Awesome man! I posted some comments before anyway, because a lot of your stuff is really awesome.
Pro-Desiger on September 11, 2009 at 7:23 am Reply

thx for the awesome tutorial.
keep them coming..
Jenifer Paris on September 11, 2009 at 11:40 am Reply

I dont think this post is completely true. Howerver, it has a lot of good ideas. Thank you
Saurooon on September 12, 2009 at 4:02 pm Reply

Hello,
Can i take a one small photo from your site?
1. Madalin Tudose on September 13, 2009 at 2:07 am Reply
  
  Yes you can!
Saurooon on September 20, 2009 at 10:46 pm Reply

Thank you! I would now go on this blog every day!
Saurooon
kurye on September 23, 2009 at 1:16 pm Reply

thank you for share
alex farguson on September 23, 2009 at 10:46 pm Reply

I really liked your blog!
markez linda on September 24, 2009 at 1:56 am Reply

Please, can you PM me and tell me few more thinks about this, I am really fan of your blog…
kurye on September 24, 2009 at 3:03 am Reply

Design a Magazine style WordPress layout + Offering the coded theme-MagaBluevery nice gread article thanks
igor on September 24, 2009 at 5:28 am Reply

Hey this is a very interesting article!
Tania on September 24, 2009 at 11:40 am Reply

Hi,
http://www.deliciousthemes.com to GoogleReader!
Have a nice day
payday loans on September 26, 2009 at 7:17 am Reply

nice blog posts, i would like to add you to my link exchange list if it is no problem, best regards
JimmyBean on October 1, 2009 at 12:57 am Reply

I don’t know If I said it already but …I’m so glad I found this site…Keep up the good work I read a lot of blogs on a daily basis and for the most part, people lack substance but, I just wanted to make a quick comment to say GREAT blog. Thanks, 🙂

A definite great read..Jim Bean
Nadine on October 1, 2009 at 8:06 am Reply

Super post, Need to mark it on Digg
Thanks
Nadine
фильмы бесплатно on October 6, 2009 at 7:57 am Reply

thanks))
Saurooon on October 8, 2009 at 1:58 am Reply

Hello,
Super post, Need to mark it on Digg
Have a nice day
BloggerDude on October 8, 2009 at 7:19 pm Reply

I don’t know If I said it already but …Hey good stuff…keep up the good work! 🙂 I read a lot of blogs on a daily basis and for the most part, people lack substance but, I just wanted to make a quick comment to say I’m glad I found your blog. Thanks,)

A definite great read….
Bill Bartmann on October 9, 2009 at 8:27 am Reply

Your blog is so informative … ..I just bookmarked you….keep up the good work!!!!
Lady Sonia Upskirt on October 9, 2009 at 4:55 pm Reply

emm. nice )
ineedapaydayloan on October 12, 2009 at 5:16 pm Reply

It was an affirmation of what we already knew and was encouraging.
loans on October 14, 2009 at 12:13 am Reply

I found your blog on google and read a few of your other posts. I just added you to my Google News Reader. Keep up the good work. Look forward to reading more from you in the future.
порно видео on November 20, 2009 at 1:47 am Reply

admin respekt!!!
Nanowebtech on November 24, 2009 at 2:28 am Reply

Hi,
Article very useful for learner
скачать порно on December 29, 2009 at 8:08 am Reply

best best best!!!
порно on June 15, 2010 at 2:50 pm Reply

порно скачать
clothingbrands on December 7, 2010 at 4:16 am Reply

The article’s very clear. Thank you for your work. ‘ll Experiment.
big brother on December 26, 2010 at 6:28 pm Reply

Wow it is Amazing. Thank you for sharing it with us. Nice design skills and very cool WP theme
Elwanda Tuma on February 26, 2011 at 3:22 am Reply

Useful to me. njvgojkgf
mnowluck on March 4, 2011 at 2:55 am Reply

Can you please email me the psd and the coded template. Nice work.. TIA
Ron Gillen on March 22, 2011 at 12:38 am Reply

Hi please e-mail me the template. Great tutorial!
Ron Gillen on March 22, 2011 at 12:40 am Reply

Hello, could you please e-mail me the theme, the tutorial was great!
EGA on April 13, 2011 at 1:32 pm Reply

Great article, hope I’ll get the source code soon.

Regards EGA
Ravi Srinivas R on May 22, 2011 at 5:56 pm Reply

Would love to have your theme!
Jyotirmay Intellisen on May 31, 2011 at 4:01 pm Reply

yes this is rally great theme, and you did a hard work to create theme and tutorial.

thanks.
Aman Arora on June 16, 2011 at 6:04 am Reply

The theme is really awesome and clean, I liked it very much and would like to use it on my new blog. Would be great if you can mail me the theme.
Alex on August 12, 2011 at 12:36 am Reply

Hi, I would like to have the theme, would you send it to me?
Thank you for the awesome tut Madalin!
yudi on September 13, 2011 at 9:26 pm Reply

nice tutorial…
can i get the theme? and also i want to know how to make dotted line in the sidebar (categori)?
Ricardo on November 26, 2011 at 8:22 am Reply

The fiel do input my email address is not visible, i can download de megablue on other location?
med kh on January 5, 2012 at 6:29 am Reply

please , can you send me this theme !
mybb on September 13, 2012 at 2:37 pm Reply

thanks for content.
Mahmoud on February 2, 2013 at 8:02 pm Reply

Hey i don’t want the Theme .. but i want another tutorial designing and coding … Thanks Though Good One !
renae wood on February 15, 2014 at 3:35 pm Reply

Great theme! May I please get the PSD files to be able to have a coded theme? Thank you 🙂
Philippine Weddings Forum on March 20, 2014 at 1:14 am Reply

hello nice tutorial hehe can i have the psd and the coded files