WordPress Theme from Scratch – Day 1: PSD

written by aext on December 15, 2009 in WordPress with 60 comments

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.

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.

FrozenFlirt WordPress Theme by aextnet

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.

Add Background To Theme In Photoshop

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.

Top Border In Photoshop

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:

Top Border In Photoshop 2

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:

Top Border In Photoshop 3

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:

Paint the Light by Brush

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:

Layout Menu 1

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:

WordPress Layout in Photoshop after 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.

Search panel

Here is the result of your header:

WordPress Header after all in Photoshop

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.

WordPress Layout in Photoshop - Content section

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.

WordPress Layout in Photoshop - Content section with gradient

Set Opacity value of this layer to about 22% and you will get this result:

WordPress Layout in Photoshop - Content section with gradient 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:

WordPress Layout in Photoshop - Add some 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:

WordPress Layout in Photoshop - Add Pagination

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.

WordPress Layout in Photoshop - Add banners

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:

WordPress Layout in Photoshop - Sidebar Widget Title Effect

Here is the result:

WordPress Layout in Photoshop - Popular Posts Widget Text Color

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.

Flickr_logo

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:

WordPress Layout in Photoshop - Flickr in footer

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.

WordPress Layout in Photoshop Flickr Stream

Twitter Update section will be done by the same way as Flickr Stream. Download this twitter logo and then add it to your layout.

twitter_logo

Adding text:

WordPress Layout in Photoshop twitter

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.

WordPress Layout in Photoshop brush dotted line

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.

WordPress Layout in Photoshop Footer

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