Flash Journey - A journey towards learning flash and web design

Salam all,

In today’s tutorial I will show you how to design a simple wordpress theme from scratch using adobe photoshop CS2. Lets get busy, grab whatever you want, they may take a while (coffee, snacks, loved-ones…etc.)

Create a new Document

Open photoshop and create a new file width: 1200px and height: 2000px. Tip: I like to keep my files dimensions big so it gives me more space to work.

Fill the background with this color #fce6e6. Before we start anything else, go to View + Show + and click on Guide as illustrated here:

Then drag two guides, the first to 90 pixles and the other to 1110 pixels, this will give us a width of 1020 px to work with our blog.

Next is the header section

This will have three parts. Top-header, Header, and Navigation bar.

Create a new layer, name it “top-header”, then select the rectangle tool (U) and choose fixed size from option bar and apply settings as shown below and click anywhere in the image  (preferably on top of the image )and reposition the bar using the Move tool (V) on the top of your image. Tip: If you want to make your design life easier I recommend naming your layers appropriately for future reference. Besides I don’t like my layers to be names layer 1, 2, …etc.

Don’t worry about the extra parts on the side, all that matters is the visible content, the extra bits won’t be needed.

Create another layer and using the same tool(U) and the same technique as before, draw a bigger rectangle colored: #750000 and width: 1250px and height: 85px as shown below:

And position the header rectangle below the top-header using the Move tool (V).

Tip: shape color can be changed anytime by Double-Clicking on the layer in the circled area as shown in tip image:

Create a new layer named navigation bg and using the rectangle tool (U) set the width:1250px and height:50px as previously explained and color:#000000 (black). Position the navigation background below the header and now you have a complete header. We will now apply some decoration to our headers.

Create a new layer, call it 1px line and select the Marquee tool (M) and select Singl Row Marquee Tool, then zoom the image to about 500% and click under the top-header and you will see a thin selection create. Now using the Move tool (V) align the selection underneath the top-header. Then pick a color with the picker tool #a80000 and fill the selection once its below the top-header with this color. Tip: to fill a selection, you can hit Ctrl+delete for background color or Alt+Delete for Foreground color.

Deselect by pressing Ctrl+D and again create a new layer with the name 1px line 2 and click underneath the header image and you will have a new 1px line. Align it exactly under the header and fill it with color: #900000. Again create a new layer with the name 1px line 3 and click underneath the navigation bg image and you will have a new 1px line. Align it exactly under the header and fill it with color: #FFFFFF (white).

now you should have something like this:

Probably you can’t see the 1px white line underneath the navigation bg but that’s ok, it just for decoration I like one pixel lines and you will see that I use them everywhere.

Now we write our blog title and put a logo and a slogan if you like. I created mine in a hurry for educational purpose and this how my header looks.

Navigation Bar

Now a little of fun with styles. Create a new layer and call it nav-bar and grab the rectangle tool (U) and with any color selected draw a fixed rectangle similar to earlier shapes and fix the width: 1020px and height: 40px. Place the bar on the navigation bg like this:

Now double-click the layer and in add the following styles:

Add a new layer and call it nav-bar hilight and while pressing Ctrl key, and with the mouse pointing at the nav-bar layer, press on the thumbnail as illustrated below, this will create a marquee that we will use shortly:

Activate the nav-bar hilight now and using a Marquee tool subtract from the active selection created from previous step to half of its height or so. Once you are done, fill the selection with white color and change layer opacity to 35%. This will give you a hilight effect on your nav-bar.

Now we add menu backgrounds. in a new layer called menu buttons, draw a rectanglar shape fixed size, width: 100px and height: 30px. Place the button on top of the nav-bar and give the layer the following styles:

The button shape we just did will represent the active and hover state of our menu. Type more menus such as About and Contact. And now your navigation bar is complete and I hope it looks something like this:

Post Box

Now we turn our attention to post area. In a new layer named post-box, create a white rectangle shape with fixed width; 700px and height: 250px; than apply a 1 pixel stroke of #BBBBBB color to it. Position the box underneath the navigation bg about 10 pixels below. Tip: you don’t have to be precise with this, it is all going to be controlled by CSS later in the coding stage.

Now we create the post thumbnail bg. This is going to be 210px wide and 210px long. By now you know which tool to grab. That’s right, the rectangle tool (U), draw the shape in a new layer called post-thumbnail bg with color: #C4C4C4 and give it a stroke style of Black color #000000.

Now create another layer, call it post-thumbnail and bring an image of the size width:200px and height:200px, and center the image on top of the post-thumbnail bg. This will create an effect of an image with a 10px border. Add a post title and some description and you should get something like this, see my image:

Now we will work on post information such as author, tags, read more, and comments.

On a new layer called read more button, create a rounded with 5 pixels radius rectangle shape size width:100px and height: 20px. Place somewhere below the description and apply the following layer settings to it:

Add a 12px read more Verdana fonted text and your read more button is finish. It should look something like this:

Again select the rounded rectangle tool and create a new layer and call it post-info and draw a fixed rectangle width:120px and height 220px with 5 pixels radius. It doesn’t matter what color. Apply the following styles to it:

Create a hilight for our shape by first activate a selection of post-info shape by clicking the layer thumbnail while holding the Ctrl key and then grab the pen tool to subtract the undesired selection so you end up with a shape like this:

Once you are satisfied with your selection fill it with white color and change layer fill to 10% and your image should look something like this now:

We are going to add some dividers to separate the content of the post-info. So grab the pencil tool and zoom the image and draw a one pixel horizontal line the width of our post-info shape with the color: #000000. Tip: press on Shift key to keep the pencil drawing straight.

Draw another line but with a different color: #5C5C5C. Draw the lines in separate layers and keep new line underneath the black line. Now move them together about a third of post-info shape. Then highlight the two layer and duplicate the layers to create another set of dividers and move them towards the end third of our post-info shape. It should look like this:

Then to finish it off we will add a highlighting border around the shape. Activate a selection of the shape and create a new layer call it post-info-border, go to Select + Modify + Contract… enter 1 pixel and click ok. Fill the selection with color: #919191, then again go to Select + Modify + Contract… enter 1 pixel and click ok. Now hit delete and you shall have a one pixel  line border around the shape. Then add a mask and create a gradient mask to reveal mostly the upper part of the border:

Now add some texts mine looks like this:

That concludes our post-box shapes and text and we will move to the side bar area now.

The side bar is straight forward, just create a long grey rectangle color: #D0D0D0 with width: 300px and whatever height. This will be expendable when wordpress is done. Give it a white stroke and add some title bars as shown in the image and some text. I also added a search box and some 125×125 ads. See below:

You can all titles you want and remember the side bar is controlled dynamically within wordpress admin panel.

Lets turn our attention now to the footer section which is similar to our header section. First I created a rectangle in a new layer called footer 1 with width more than 1200px and height of 120px color: #750000. Then I created another rectangle in another layer called footer 2 and gave it width: 1200px+ and height: 40px color: black.  After that create three 1px lines (horizontal) two will be above footer 1, one white and the other colored: #440000. Align on top of each other, white on top and red in bottom. The third line will be positioned on top of footer 2 with color: #900000. You can add any text you want in the footer.

Finally, I created two buttons exactly like the read more button we created in the post-box and placed them above the footer and gave them titles “Older Entries” and “Recent Entries”. See the finished design:

After finishing the design I grouped similar layers to their categories as you will see from the PSD attached. I hope you enjoyed the tutorial as much as I enjoyed creating it and hope to see with us when the PSD is converted to a fully functional wordpress in later tutorials. Thanks for following.

Download PSD wordpress-theme-001.

Share on Facebook

Tweet This Post