This tutorial is in the series of “WordPress Theme from Scratch” that help you build a WordPress theme by yourself from nothing. On 1st day, we will start working with Photoshop. In this tutorial, we will learn how to create a cool WordPress layout in Photoshop.
Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.
If You want to stay updated and get news regularly consider subscribing to AEXT.NET feed and following on Twitter.
The result after finish your work you will get.
Step 1: Prepare the document and background
First of all, we need to create a new document. The first and very simple step we need is create a new Photoshop document with the size 1300px in width and 1585px in height.
To continue, fill out the background with color: #cacaca. That would be bored if we just make a background like this. Let’s add some noise to our background. Navigate to Filter > Noise > Add Noise …, then enter some value like this below, and click on OK.
Step 2: Header
Before going next, we need to understand that design a web temple in Photoshop will be very easy to mess up because in every webpage, we have a lot of elements. I would recommend to group related elements together. To create new group, navigate to Layer > New > Group…or click on the folder icon in Layer Panel
We will build the header that includes menu, logo… but at first, make a top border. In Photoshop, create new layer by simply press CTRL + SHIFT + N, then press N to select the Rectangular Marquee Tool. In the background, use this RMT tool to make a selection area at the top. Fill the color in this selection by using CTRL + Backspace, and the color filled is the background was set in the left toolbar.
Create new layer and place it under the border layer, name it as menuwrap or something. Do the same as above to fill the background for menu. In this case, fill it with black color #000000 and set Opacity to 10%. The result:
Let’s create a bottom border by using the Line Tool. Change your foreground color to #ababab then select the Line Tool from the toolbar or just press U. Hold SHIFT and drag your mouse from left to right likes this:
When done, release your mouse and right click on this layer and select Rasterize Layer. Well, if you are not sure about the color to mix with background and menu, create this border with black color then change its opacity until you think it’s good.
Add some text to your menu, and make a light to this background. In your toolbar, select Brush Tool and change the foreground to white color (#FFFFFF), create new Layer, name it as light. Change brush size bigger(~ 500px) and click on the background. Remember your light layer is under the menu but at above of the main background. Make a simple click to paint the light:
In the menu, you will need to add background for menu item that is active. After all, let’s see how my menu looks like:
Now, insert your logo. This tutorial will make a simple logo as a text. But at first, your should set up your site structure by using the Guidelines in Photoshop. Place your mouse cursor anywhere along the ruler and click. Hold in the mouse button and drag a ruler down onto your document. This layout is after placed some guidelines:
The last element in this header is the search panel, go to right top of this document. Use Rounded Rectangle Tool to create a rounded rectangle shape with color #000000 (Black). Remember to set its opacity to 10%.
After that, download this search icon and insert it to the search field we made above.
Here is the result of your header:
Step 3: Content
Based to the image that we dragged some Guidelines on it, we can make the content section on this layout easily. From the toolbar, select Rectangle Marquee Tool (press M) and make a selection in the content section based on the structure image above. Create new layer and fill it with color #bbbbbbwithin the selection, we will use this one as the border.
Keep this selection, don’t deselect it. From the menu, select Select > Modify > Contract…, then enter the amount 1px, click OK. Finally, create new layer again and fill it with color #FFFFFF (White) within the selection we have just made. Now, we have the content section with background is white and border is #bbbbbb. However, let’s make your content background professional by add a transparent gradient. You still keep the selection of white background? If not, hold CTRL and click on that layer, you will select this selection again. Create new layer. Do the same as above to select a selection that contract the white background by 1px. Then fill it with gradient background (black and transparent) using the Gradient Tool.
Set Opacity value of this layer to about 22% and you will get this result:
Next, add some content to your content section. Choose your own font family, font type, font size, and some thumbnail images to add them to the document. You should use Guidelines to margin the content logically. I’m using Helvetica font face with the size for post title is 30px and for text body is 14px. Here is my content:
If you are gonna use the PageNavi WordPress Plugin, I think you should add pagination to your layout. By using simple Rectangle Marquee Tool and find a nice color, your pagination will look like:
Step 3: Sidebar
We have done the content section and now we go forward to work with Sidebar content. Every people love to place ad banners at the top right of blog page, so we are gonna do as their need. It’s easy to add some 125px x 125px to your sidebar. Find some interesting ad banners and add them in.
[smartads]
I won’t use the background for the sidebar section to make this tutorial more simple. So, let’s begin by adding some ad banners. Using expanding from Select > Modify > Expand… will help you create borders for these banners. In this case, I will create 5px width for them.
With some text elements, you can add a list of popular posts. The color text link in Popular Posts Widget is #414141 and when mouse over, color of links will be changed to #b40000. Sidebar widget title created by adding a text with a simple but cool drop shadow by these setting:
Here is the result:
Step 4: Footer
In this tutorial, I would like to make the footer just simple, but it’s still attractive with the Flickr Stream and Twitter Updatesections. Save this Flickr logo (png format with transparent background) to your hard driver then open it via Photoshop.
Then drag this logo layer from the file you have just open and drop it to layout document. Change the size and add some text:
The line you saw above was created by using Line tool. Simply add the line with black and change the opacity to 20% (you can just fill the line with color #9e9e9e with opacity 100%). Duplicate this line, you will have another layer which is same as the line. Move down the duplicated layer 1px and fill it with color #F4F4F4, you will get the simple but nice line.
Find some cool images from the web and add it to your layout with size 75px x 75px. Create the border for them with 5px width and you are done.
Twitter Update section will be done by the same way as Flickr Stream. Download this twitter logo and then add it to your layout.
Adding text:
You properly need to add more than one tweet, and you need a line between them to separate. In Photoshop, it doesn’t have the built-in dotted line, but we can make our own. Select Brush Tool, navigate to Window > Brushes and the Brush panel will show up. Select Brush Tip Shape, choose brush size 1px, remember to deselect other option from the left panel, finally enter the value 450% in Spacing.
Ok, your brush is ready now. Use your Brush Tool make a simple holding SHIFT and drag the mouse and you will get the dotted line that you always do that easily via CSS. The color of link text is #414141. The icon follow me, you can use any icon from the web. Just choose one twitter icon you like and add this to the layout right bottom of your Twitter Update section, or download this icon here.
Coming Up
I’m sorry if this tutorial is go too fast because this is the first I write tutorial in Photoshop. However, if something goes bad, this would be great in the next post of this series. In the next, we will continue to built our one WordPress Theme from nothing. We will convert this layout (PSD) to HTML, so stay tuned to check it later.
Updated: Day 2 – PSD to HTML
Very nice tutorial so far. Can’t wait for the whole thing. This will be very useful for a lot of people!
Great ! Some basic tips I didn’t know…
Thank you
lovely tutorial, def’ worth a RT !
An extremely useful and insightful tutorial. Conversion is often a bug-bear for many.
Nice! Looking forward to the rest!
Well put Lam, I like the simplicity of the theme and the emphasis to the copy is a good touch.
Thanks guys!
Nice to see you here Hector
Sweet man. the PSD looks awesome
Great tutorial! PSD looks great!
I really like the brain and heart you put in this tutorial.
looking forward for next parts
Excellent job Lam! Can’t wait for the next sections.~@JesseLuna
Excellent tutorial !!
Thanks for sharing.
Really good tutorial… love it!
Can’t wait other parts!
Very very nice, love the name Frozen Flirt haha.
Looks to be a good series; anticipating the next post. Good job and good luck.
This is how I usually start my mockups as well. I’ll start with an idea, mock it up in Photoshop, and then slice into XHTML/CSS for a WordPress theme. Hasn’t failed me since, so it’s my preferred method you could say.
This is a nice tutorial for someone who wants to learn how to create a WordPress theme step by step. Great idea.
By the way, thanks for using a couple of our Flickr thumbnails in the tutorial.
Very nice tips. Thanks for sharing.
Looking forward to day 2!
useful tutorial
Thanks a lot,Mr.Nguyen !
Great PSD and tutorial. I can’t wait for the rest. Even though there’s a ton of WordPress ‘how-to’s’ out there, I always love reading up on everyone’s methods for creating them. I’ll be awaiting the rest of the series!
Nice tutorial.
Day one is looking nice. Will the end result of the entire tutorial be a fully coded theme? Or are you just focusing on the Photoshop design?
I’m working on it! Not really for full code, but … you will see the result at the end!
nice tutorial thanks for sharing can you do a tutorial on customizing a joomla template from scratch too
Thanks for this entire series – have always been looking for something like this.
great, can’t wait to start
Yay, just finish. Going to second day. This tutorial may be confusing for beginner who doesn’t know anything about Photoshop. But for those who familiar with Photoshop this is just enough.
Nice tutorijal, I’ll try to use some of the tips in redesign of my own web (elatio.hr)
wonderful tutorial @Lam thank you so much..
.-= joyoge bookmark´s last blog ..100 Best WordPress Themes Of 2009 =-.
Woww ! Nice tutorial series . Thanks you so much.
OMG this is so nice. I’m one of your fan now on facebook. I will be following this so soon. I really wanted to create my own theme and been looking for great tutorials such as yours. I’m so glad that I’ve found your site.
I’ve recently modified an arthemia theme by michael for our school batch. I can see how it is been divided now and I think I can start working on it from scratch because of your tutorials. Here’s the modified theme I was messing up with http://www.sacs99ers.com
.-= Ray´s last blog ..Schoolmates Turned Soulmates: Mike and Bonet Love Story =-.