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.
- 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.
Agreements
I hope you enjoy the theme and if there are any bugs,contact me and I`ll provide you an improved version.
¡¡Nice job!!
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 🙂
Thanks for the information. Good Thought – I have bookmarked your blog.
Hi, http://www.deliciousthemes.com – da best. Keep it going!
Greatings, Super post, Need to mark it on Digg
Rufor
Thanks for article. Everytime like to read you.
Thanks
thanks, i can quote this article ?
Interesant. Mersi
Awesome man! I posted some comments before anyway, because a lot of your stuff is really awesome.
thx for the awesome tutorial.
keep them coming..
I dont think this post is completely true. Howerver, it has a lot of good ideas. Thank you
Hello,
Can i take a one small photo from your site?
Yes you can!
Thank you! I would now go on this blog every day!
Saurooon
thank you for share
I really liked your blog!
Please, can you PM me and tell me few more thinks about this, I am really fan of your blog…
Design a Magazine style WordPress layout + Offering the coded theme-MagaBluevery nice gread article thanks
Hey this is a very interesting article!
Hi,
http://www.deliciousthemes.com to GoogleReader!
Have a nice day
nice blog posts, i would like to add you to my link exchange list if it is no problem, best regards
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
Super post, Need to mark it on Digg
Thanks
Nadine
thanks))
Hello,
Super post, Need to mark it on Digg
Have a nice day
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….
Your blog is so informative … ..I just bookmarked you….keep up the good work!!!!
emm. nice )
It was an affirmation of what we already knew and was encouraging.
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.
admin respekt!!!
Hi,
Article very useful for learner
best best best!!!
порно скачать
The article’s very clear. Thank you for your work. ‘ll Experiment.
Wow it is Amazing. Thank you for sharing it with us. Nice design skills and very cool WP theme
Useful to me. njvgojkgf
Can you please email me the psd and the coded template. Nice work.. TIA
Hi please e-mail me the template. Great tutorial!
Hello, could you please e-mail me the theme, the tutorial was great!
Great article, hope I’ll get the source code soon.
Regards EGA
Would love to have your theme!
yes this is rally great theme, and you did a hard work to create theme and tutorial.
thanks.
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.
Hi, I would like to have the theme, would you send it to me?
Thank you for the awesome tut Madalin!
nice tutorial…
can i get the theme? and also i want to know how to make dotted line in the sidebar (categori)?
The fiel do input my email address is not visible, i can download de megablue on other location?
please , can you send me this theme !
thanks for content.
Hey i don’t want the Theme .. but i want another tutorial designing and coding … Thanks Though Good One !
Great theme! May I please get the PSD files to be able to have a coded theme? Thank you 🙂
hello nice tutorial hehe can i have the psd and the coded files