Photoshop Tutorial: Creative WordPress Blog Layout

Today I will be walking you through the process of creating a Creative WordPress Blog Layout in Photoshop. This tutorial is a moderate difficulty tutorial but the instructions provided should allow anyone to follow and come up with great results, and, of course, you can always ask a question in the comments and I will be more than happy to help you out.

Here is what you will be creating:

Design Juices Tutorial Final Post Thumb Photoshop Tutorial: Creative Wordpress Blog Layout

Resources

Getting Started

Create a new Photoshop Document 1100*1700. Fill the background layer with #252525

Top Navigation Background

Now grab the rectangle marquee tool and change to fixed size of 1100*35:

 Photoshop Tutorial: Creative Wordpress Blog Layout

Fill the new layer with #e2e2e2 and set the Blend Mode to Overlay.

step one Photoshop Tutorial: Creative Wordpress Blog Layout

Now we are going to be making a selection of the layer we just created. You can either use the rectangle marquee tool again like above, or you can use the CTRL (CMD on Mac) +Click Thumbnail of the layer. Move that selection down 1px and fill it with black.

step two Photoshop Tutorial: Creative Wordpress Blog Layout

Now use the CTRL+Click method again to select your first layer. Once the layer is selected hit the delete key to delete you selection. Now you will be left with a 1px line as your layer.

step three Photoshop Tutorial: Creative Wordpress Blog Layout

Top Navigation Content

Create a new group called Bookmark. Within the group grab your text tool. We are using the font Candara, at 24pt, color #cecece. Type out Bookmark and space it 20px from the top and 12px from the left.

HINT: To make things easier on yourself and to keep things in line perfectly I would add a ruler here. Set the ruler to be in line with the bottom of your Bookmark Text and line up the rest of the text with this ruler.

Now grab the 24px “add” icon from our icon set above and place it on our document. You will want to center the icon on our text and space it 10px from the left of our Bookmark text.

step four Photoshop Tutorial: Creative Wordpress Blog Layout

Create a new group called Spacer, set the blend mode to Soft Light and lower the opacity to 50%. Create a new layer and grab your rectangle marquee tool again, and this time choose a fixed size of 32px height and 1px width. You will need to zoom in to see your selection properly. Fill your layer with black and space it 1px from the top of our document. Now move the layer over to be 17px to the right of our “add” icon.

step five Photoshop Tutorial: Creative Wordpress Blog Layout

Create another new layer and use the same fixed size. Fill this layer with white, use the same top spacing, and place this layer directly next to your black line.

step six Photoshop Tutorial: Creative Wordpress Blog Layout

Now repeat the same method two more times. Space the next layer 17px from your spacer on both sides. For your final layer do not add another spacer. Each spacer should be in its own group. I am going to be using Login and the “users” icon as well as Mobelize and the “mobile_phone” icon.

step seven Photoshop Tutorial: Creative Wordpress Blog Layout

At the other end of the spectrum we are going to be adding links to our two WordPress Pages: About Us and Contact Us. We will be using the same method above, only this time we will start with the icon. Grab the “mail” icon from our icon set and space it 40px from the right of our document and 10px from the top.

Grab your text tool again, same font styles, and type out Contact Us. Use the above method (or just duplicate your group) for your spacer. Use the same spacing guidelines (17px on both sides).

Grab the “chess” icon from our icon set and add it to our document. As with all our icons you just want to space it vertically with our text. Grab the text tool again and type out About Us.

step eight Photoshop Tutorial: Creative Wordpress Blog Layout

LOGO AND SEARCH BAR

Grab your favorite logo that you wish to use. We will be using the Design Juices Logo with Blogging Template added just below it because, of course, this is not a Design Juice template. Space it 12px from the left and 30px from the bottom of your top navigation. Our straw sticks up a bit higher, which is fine, just make sure the main portion of your logo is spaced correctly. You can throw this logo in a group if you want or just name it “Logo” to keep track of the layers.

step nine Photoshop Tutorial: Creative Wordpress Blog Layout

Now your search bar is going to be an a simple method but it involves a lot of steps. To make things easier we are not going to worry about spacing right now. Create a new group called Search Overall which we will place all of our next layers and groups in. This will make things easier when we do set up our spacing.

Somewhere to the right of your document grab your text tool again. We will be using the font Candara, 18pt, color white. We are also going to be writing out the text with all caps, which you can accomplish with Caps Locks or using your Text Character Window. Apply the following Drop Shadow to your text layer.

step ten Photoshop Tutorial: Creative Wordpress Blog Layout

step eleven Photoshop Tutorial: Creative Wordpress Blog Layout

Create a new group called Search_Bar. Create a new layer. Now grab your rectangle marquee tool again and with a fixed size of 280*30 fill it with white. Add the following style to your layer:

step twelve Photoshop Tutorial: Creative Wordpress Blog Layout

Now set the blend mode to Overlay.

step thirteen Photoshop Tutorial: Creative Wordpress Blog Layout

We will use the CTRL+Click Thumbnail method again. Click the thumbnail of your Search Bar Layer. Now go to Select—Modify—Expand and choose 1px.

step fourteen Photoshop Tutorial: Creative Wordpress Blog Layout

Create a new layer and fill it with black. Now do the Thumbnail Selection method again and hit the delete key. This will leave a 1px black line around your box.

step fifteen Photoshop Tutorial: Creative Wordpress Blog Layout

Now go back to your search bar layer and choose Select–Modify–Expand and choose 2px. Create a new layer and fill it with white. Now use CTRL+Click your thumbnail on your search bar layer again. Go to Select—Modify—Expand and choose 1px again. Now hit the delete key.Now you will be left with a 1px line of white around your search bar and black line.

step sixteen Photoshop Tutorial: Creative Wordpress Blog Layout

Now set the blend mode to Soft Light on both layers and lower the opacity to 40%.

step seventeen Photoshop Tutorial: Creative Wordpress Blog Layout

We will not hide those two layers we just created, just for this next step.

Create a new group and name it Go_Btn. Create a new layer and grab your rectangle marquee tool. Use the fixed size of 45px wide by 30px tall. Fill this layer with white and set its opacity to 35%. This layer we will make sure is spaced correctly. It will fit inside our search bar layer and needs to be lined up exactly at the end of our layer as well.

step eighteen Photoshop Tutorial: Creative Wordpress Blog Layout

Grab your text tool and type out the word “GO” in Candara, 18pt, black. Center the text on your button layer.

step nineteen Photoshop Tutorial: Creative Wordpress Blog Layout

Now unhide your black and white lines so that they cover the entire search bar.

Now grab your whole group “Search_Overall” and space the search bar 45px from the top and 40px from the right. Your search text should be 10px from your search bar and centered vertically with our search bar.
Such simple techniques give us such a great look.

step twenty Photoshop Tutorial: Creative Wordpress Blog Layout

CHECK UP

This is what you should have so far if you are using the same exact text and techniques we have detailed so far.

step twentyone Photoshop Tutorial: Creative Wordpress Blog Layout

NAVIGATION

Time to set up our navigation. Create a new group called Navigation. Create a new layer. Grab your rectangle marquee tool again with a fixed size. The fixed size will be 1100×40 pixels. Fill this layer with black.

step twentytwo Photoshop Tutorial: Creative Wordpress Blog Layout

Now this layer will need to be spaced 45px from the bottom of our Search Bar. Set the blend mode to Soft Light and lower the opacity to 50%.

step twentythree Photoshop Tutorial: Creative Wordpress Blog Layout

Now grab your type tool again with Font Style Candara, 24pt, and use White for the color. Center the text vertically on your navigation background layer and 70px from the left of your document.

step twentyfour Photoshop Tutorial: Creative Wordpress Blog Layout

HINT: Here again is a good place to set up a ruler to make sure your text stays in line.

Now use the same technique as earlier to create your spacer. Create a new group called Spacer and set the opacity to 60%. Used a fixed size of 1px wide by 38px tall with a black and white line next to each other, each on a separate layer within the group. Add a spacing of 30px to each side of your navigation spacer.

step twentyfive Photoshop Tutorial: Creative Wordpress Blog Layout

Repeat the same process for the rest of your navigation to fill out your layer. Like this:

step twentysix Photoshop Tutorial: Creative Wordpress Blog Layout

Post Area

Now we will be starting on our post area. For this area we will be using a simple background with a subtle gradient.

Grab your rounded rectangle tool and draw out a box 750px*1150px and fill it with white. You should have this:

step twentyseven Photoshop Tutorial: Creative Wordpress Blog Layout

Now apply the following layer styles:

step twentyeight Photoshop Tutorial: Creative Wordpress Blog Layout

Now go ahead and make your image bigger so you just see a portion of the post area. We will now be working on adding our tabbed post area. Your post layer should be spaced 111px from the left of the document and 40px from the bottom of our navigation.

Create a new layer and bring it under your post layer. Hide your post layer for now. Grab your pen tool and make this shape:

step twentynine Photoshop Tutorial: Creative Wordpress Blog Layout

HINT: You can do this by holding down the shift key to make sure the lines are straight and using the Convert Point tool to make sure the arrow is not rounded.

Right click and choose make selection. Fill the layer with white. Apply the following Layer Style:

step thitry Photoshop Tutorial: Creative Wordpress Blog Layout

To keep track re-name this layer “Tab”. Now create a new layer. Use the CTRL+Click Thumbnail to select the thumbnail of our tab. Go to select—modify—expand and choose 1px for the choice. Fill this layer with black. Go to Select—Modify—Expand again, and choose 1px again. Now create another new layer and fill this with white. Move your white layer below your black layer so you have something like this:

step thitryone Photoshop Tutorial: Creative Wordpress Blog Layout

Now select the thumbnail of your “Tab” image. Choose your white layer and hit the delete key. Now do the same thing with your black layer. Now choose the thumbnail of your black layer, choose your white layer, and hit the delete key so you have this:

step thitrytwo Photoshop Tutorial: Creative Wordpress Blog Layout

Set your black line’s blend mode to Soft Light and keep the opacity at 100%. For your white line change the blend mode to Soft Light and lower the opacity to 45%.

step thitrythree Photoshop Tutorial: Creative Wordpress Blog Layout

Create a new layer and make a selection like below:

step thitryfour Photoshop Tutorial: Creative Wordpress Blog Layout

Fill this layer with black, select the thumbnail of our tab layer, right click and choose select inverse, and hit the delete key. You should now have this:

step thitryfive Photoshop Tutorial: Creative Wordpress Blog Layout

Change the blend mode to Soft Light, lower the opacity to 35%. Go to filter—blur—gaussian blur and choose 2.0 pixels.

step thitrysix Photoshop Tutorial: Creative Wordpress Blog Layout

Group these layers we worked on into a new group and title the group “Tab”.

Now unhide your post layer (the white box from earlier). Your tab spacing should be 5px from the left of our document and 40px from the top of our post box.

step thitryseven Photoshop Tutorial: Creative Wordpress Blog Layout

Select the thumbnail of our “Tab” layer and choose delete. This will delete the proper area from the post section to make it look right.

step thitryeight Photoshop Tutorial: Creative Wordpress Blog Layout

Go back into your tab group and create a new layer above the other layers. Now grab your polygon lasso tool and create a shape like this:

step thitrynine Photoshop Tutorial: Creative Wordpress Blog Layout

Fill this selection with black. Lower the opacity to 30%. Go to Filter–Blur–Gaussian Blur–1.5px. This will create a nice shadow effect for our tab.

step forty Photoshop Tutorial: Creative Wordpress Blog Layout

Now all that is left is to add the text to our Tab. I am using the font RockoUltraFLF at 22pt color black for the font. You will want to center it horizontally and vertically on your tab. Make sure it stops at the start of the post layer.

step fortyone Photoshop Tutorial: Creative Wordpress Blog Layout

Now duplicate your tab group. Hit CTRL+T to open the free transform on our group. Scale it down to 80%.

step fortytwo Photoshop Tutorial: Creative Wordpress Blog Layout

Now move the image down so that it is 170px from the bottom of our first tab layer and 26px from the left of our document (this will line it up just right)

step fortythree Photoshop Tutorial: Creative Wordpress Blog Layout

Apply the following styles to our “Tab Copy” layer.

step fortyfour Photoshop Tutorial: Creative Wordpress Blog Layout

Now unhide your text layer and change the text from your date to an amount for comments. Center this text with your ribbon, again making sure it does not go past the post layer.

step fortyfive Photoshop Tutorial: Creative Wordpress Blog Layout

Select the thumbnail of your “Tab Copy” layer. Choose your post bg layer and hit the delete key so you have a smaller version of your first tab.

step fortysix Photoshop Tutorial: Creative Wordpress Blog Layout

Now we need to set up a guide to make sure that we stay within the limits for coding later. Create a guide that stops 1px after the end of our tab. You will need to zoom in to get this absolutely perfect.

step fortyseven Photoshop Tutorial: Creative Wordpress Blog Layout

Post Content

Now to start on our Post Content. Grab your text tool and use the font Candara, 30pt, and color #242424. Type out whatever you want for your header; we used “This is a Sample Header”. Now space it 30px from your guide and 20px from the top.

step fortyeight Photoshop Tutorial: Creative Wordpress Blog Layout

Now set up your Written By area by grabbing your text tool again using the same font and color but this time at 14pt. Type out your Written By text and space it 52px from the top, which will line it up with our header text, and 15px from the right.

step fortynine Photoshop Tutorial: Creative Wordpress Blog Layout

Now to set up your post image area. This will be accomplished by grabbing your rectangle tool and creating a new rectangle with a fixed size of 680*105. Create a new layer and fill this with #aee3dd. Space it 10px from the bottom of your header and 20px from our guide.

step fifty Photoshop Tutorial: Creative Wordpress Blog Layout

Now insert whatever image you are going to want to use and give it a 3px padding. The easiest way to do this is make a selection on your image of 680*105, bring it over to our document, line it up with our blue bg, and use the thumbnail click and modify-contract-3px.

step fiftyone Photoshop Tutorial: Creative Wordpress Blog Layout

Now add your content. We are using Candara, black, 18pt for our font. Type out some content to fit into the remainder of our area until our comment tab starts.

step fiftytwo Photoshop Tutorial: Creative Wordpress Blog Layout

HINT: You may want to create a guide at the top of your comment tab.

Grab the layers you just created and put them in a new group called Post_Content.

Now you need to create a ruler at the bottom of your comment tab so we know where to start our spacer.

step fiftythree Photoshop Tutorial: Creative Wordpress Blog Layout

Now, create a new layer outside your group and grab your rectangle tool. Grab a fixed size of 650px by 1px and fill it with black. Create another new layer, move your selection box up one px, and fill with #989898. Set both layers to Soft Light and keep the opacity at 100%. Space them both 36px from the left and right.

step fiftyfour Photoshop Tutorial: Creative Wordpress Blog Layout

Group these layers into a new group and name it Spacer. Now take your Spacer Group, your Post_Content Group, Tab copy Group, and your Tab Group and duplicate them.

step fiftyfive Photoshop Tutorial: Creative Wordpress Blog Layout

step fiftysix Photoshop Tutorial: Creative Wordpress Blog Layout

Now move them to the appropriate area.

step fiftyseven Photoshop Tutorial: Creative Wordpress Blog Layout

Now move them down so they keep the same top spacing as our first header (20px).

step fiftyeight Photoshop Tutorial: Creative Wordpress Blog Layout

Now select the two thumbnails of your two new tabs. You can select both thumbnails by holding the shift key down. Make sure you have your post layer selected.

step fiftynine Photoshop Tutorial: Creative Wordpress Blog Layout

Now hit delete to remove that section from our post layer.

HINT: You may want to group the Tab Copies and the post content and spacer copies.

Repeat the previous steps 2 more times so the posts fit on your post area. On the last post delete your spacer group for that post.

step sixty Photoshop Tutorial: Creative Wordpress Blog Layout

step sixtyone Photoshop Tutorial: Creative Wordpress Blog Layout

RSS and Twitter

Grab our Exclusive Glowing Icons set and open the 64×64 set RSS and Twitter Icons. Drag them over to our document and put them in a group called Twitter_RSS. Now hide your rss icon for right now while we set up the spacing on our twitter icon.

Place your twitter icon 25px from the bottom of your navigation and 35px from your post area.

step sixtytwo Photoshop Tutorial: Creative Wordpress Blog Layout

Now place your rss icon xxpx from your twitter icon, keeping the spacing from the navigation 25px and 35px from the right of the document.

step sixtythree Photoshop Tutorial: Creative Wordpress Blog Layout

Duplicate our two icons layers and hide them. We will not touch them again in this tutorial, but you never know when you might need them *hint hint* Now make a selection like below:

step sixtyfour Photoshop Tutorial: Creative Wordpress Blog Layout

It should be just under half of the icons. Hit delete so both selections will be deleted and you will be left with this:

step sixtyfive Photoshop Tutorial: Creative Wordpress Blog Layout

Ok, now we are going to set up our shadows for our icons. Start out by grabbing your line tool, 1px, and make sure you are using black for the color. Draw it out to be 75px.

step sixtysix Photoshop Tutorial: Creative Wordpress Blog Layout

Now go to Filter–Blur–Motion Blur and apply the following styles.

step sixtyseven Photoshop Tutorial: Creative Wordpress Blog Layout

Now zoom in on your document and grab your elliptical marquee tool. Draw out a shape 70px by 3px and fill it with black.

step sixtyeight Photoshop Tutorial: Creative Wordpress Blog Layout

Now go to Filter–Blur–Gaussian Blur and use the following styles:

step sixtynine Photoshop Tutorial: Creative Wordpress Blog Layout

Now duplicate your layers and set them up exactly the same over your RSS Layer.

step seventy Photoshop Tutorial: Creative Wordpress Blog Layout

Now to add the text. Grab your type tool, using the font Candara, 16pt, and color white. Type out follow me and space it 5px from the our twitter line.

step seventyone Photoshop Tutorial: Creative Wordpress Blog Layout

Now do the same for our RSS Icon but type Subscribe instead of Follow Me. That finishes off our RSS and Twitter icons.

step seventytwo Photoshop Tutorial: Creative Wordpress Blog Layout

Right Content

Your Right content is going to be the area for your widgets, so this area is up to you on what you want to add there depending on what widgets you are going to be using. This is what we added:

step seventythree Photoshop Tutorial: Creative Wordpress Blog Layout

Footer

Now to set up our footer. We will be displaying some latest tweets in the footer so lets start with that. create a new group called Footer and another new group inside that called Twitter.

First head to http://designmoo.com/resource/tweeties/ to download the twitter bird we will be using. Now open up the 32px tweetie curious.

Drag it over to our document and space it 60px from the bottom of our post content. and 30px from the left of our document.

step seventyfour Photoshop Tutorial: Creative Wordpress Blog Layout

Now grab your text tool. You will want to use the font Cambria, 24px, color #141414. Type out Latest Tweet From @(yourusername). Center it vertically on your twitter icon and 25px to the right of your twitter icon.

step seventyfive Photoshop Tutorial: Creative Wordpress Blog Layout

Now grab your type tool again. This time use the font Cambria, 14px, color #525e69. Head over to your Twitter and grab your latest tweet. Now set it up so your post time is on its own line and change the font size for your post time to 12px.

step seventysix Photoshop Tutorial: Creative Wordpress Blog Layout

Now repeat the same process until you have filled your area, making sure to space them 15px from each other.

step seventyseven Photoshop Tutorial: Creative Wordpress Blog Layout

Full Social Networking

Now we are going to start working on our social networking area of our footer. Create a new group called Social Icons and place the following images within that group. This area is going to be simple. Just open your Glowing Icons from above and choose the 32px icons. Grab whichever icons you want to use. We are using our contact, twitter, facebook, dribbble, forrst, designmoo, and deviant art. Drag all of them over to the document and space them 10px from each other. Make sure they are all 15px from the bottom and the last icon needs to be 15px from the right of our document.

step seventyeight Photoshop Tutorial: Creative Wordpress Blog Layout

Newsletter Sign-Up

Finally we will add a newsletter subscription area to our footer. Grab your type tool again and use font Candara, 30px, color #141414. Type out Sign Up For Our Newsletter. Now space it 65px from the bottom of our post page and 30px from the right side of our document.

step seventynine Photoshop Tutorial: Creative Wordpress Blog Layout

Now grab your rounded rectangle tool with a radius of 5px. Drag out a rectangle that is 387px by 35px and fill it with #525e69. Now set your blend mode to Color Dodge and apply the following layer styles:

step eighty Photoshop Tutorial: Creative Wordpress Blog Layout

step eightyone Photoshop Tutorial: Creative Wordpress Blog Layout

Now grab your rectangular marquee tool and drag out a selection 72px by 48px. Set it at the end of your rectangle like this:

step eightytwo Photoshop Tutorial: Creative Wordpress Blog Layout

Now create a new layer and fill it with #525e69.

step eightythree Photoshop Tutorial: Creative Wordpress Blog Layout

Now select the thumbnail of your newsletter submission area, right click and choose select inverse and hit delete.

step eightyfour Photoshop Tutorial: Creative Wordpress Blog Layout

Now grab your type tool using the font Cambria, 18px, color #141414. Type out the word submit and center it horizontally and vertically on the button.

step eightyfive Photoshop Tutorial: Creative Wordpress Blog Layout

And that’s it!

Conclusion

As you can see there are quite a few steps involved with creating this elegant theme, but they are all worth it. Now that you have just spent two or three hours designing this and tweaking it to your needs sit back and enjoy your handy work.

Design Juices Tutorial Final Post Thumb Photoshop Tutorial: Creative Wordpress Blog Layout

We would love to see what you have come up with. Post a link in the comments with your work.

We offer best quality leather4sure – leather jackets and realtests – a+ certification practice test – certification exam. You can get our 100% guaranteed toefl sample test certkiller.