Create a Clean Blog Theme in Photoshop

Want to design your own site? It’s not too difficult to learn, though like most things, it does have a learning curve. Where many people seem to get tripped up is in specific solutions to specific problems. Fortunately there’s a good chance that someone before you has already had the same problem and even better has found a solution.

Create a Clean Blog Theme in Photoshop

In this tutorial I’m going to show you how to create a Clean Blog theme in Photoshop also i will show some of technique that may help you to create more themes in the future, we usually create one page “Home Page”, but in this tutorial we are going to create two page “Home Page” and “Content Page”, Grab your coffee and let’s get started and see how to prepare a clean and sleek blog theme by yourself.

Final Result

Let’s see what you will be creating in this tutorial.

Clean Blog Theme - Home Page   Clean Blog Theme - Content Page

Resource Details

Social Network Icon: Komodomedia

Create a Clean Blog theme in Photoshop

Step 1

Create a new document using Photoshop with the following dimensions: 1400 X 3000 Pixel. Make sure to remove the lock option from the background and rename it to: Bg.

instantShift - Clean Blog Theme in Photoshop

Step 2

We now need to set up guide lines. Go to View > New Guide.. > Check ‘Vertical’ and type in the following values, then press ‘Ok’.118px, 955px, 977px, 1255px, 1277px,

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

Step 3

Let’s move to the next step by creating the header, select Rectangular Tool & set up code color #2d2d2d and start creating header as you see in the image below

instantShift - Clean Blog Theme in Photoshop

Step 4

Apply the settings Gradient Overlay by following the image below: Layer > Layer Style > Gradient Overlay

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

Step 5

Good start now let’s Create navigation, Select Rectangular Marquee Tool set up size Height: 69px and fill Selection with any color you want, in the layer box change fill Opacity to 0% and apply the settings Gradient Overlay by following the image below

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

Step 6

Create a simple Logo

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

Step 7

Add new banner 468×60 Pixels

instantShift - Clean Blog Theme in Photoshop

Step 8

It’s time to add social network, RSS, Twitter, Facebook, Flickr, 13px between icons and Height: 19px

instantShift - Clean Blog Theme in Photoshop

Step 9

Start Creating the search form by select the Rounded Rectangular Tool and set up code color #EEEEEE

instantShift - Clean Blog Theme in Photoshop

Step 10

Now apply the settings Gradient Overlay and Stroke by following the image below

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

Step 11

Add Search icon and Search text then set up code color #CCCCCC

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

Step 12

Add a little Ribbon to navigation and add above home icon, set up code color #929292

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

Step 13

Select Horizontal type Tool or Text Tool and start creating pages, step up colors Home:#ebebeb, Home Page: #929292

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

Step 14

Change Color one of text pages to #333333 this where we going to set up the categories pages

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

Step 15

Ok it’s time to start creating Categories Pages, Select Rectangular Marquee Tool and set up size 89px by 214px and Fill Selection with color #F8F8F8

instantShift - Clean Blog Theme in Photoshop

Step 16

Let’s Create background for text by Selection Rectangular Marquee Tool and set up the size: 87px By 35px and color: #FFFFFF

instantShift - Clean Blog Theme in Photoshop

Step 17

As we know most of Categories has a little shadow or effect so let’s creating the shadow categories by Selection Rectangular Marquee Tool and set up the size: 87px By 37px then select Gradient tool and make the shadow effect as you see in the image below

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

Step 18

Make 3 copy of Shadow Layer

instantShift - Clean Blog Theme in Photoshop

Step 19

Do the Same thing as i did before to create Categories by following the image below

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

Step 20

Add Categories text set up code color text to #333333 and apply the settings as you see in the image below

instantShift - Clean Blog Theme in Photoshop

Step 21

After that you will get this result

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

Step 22

Let’s create a little background behind the header Select Rectangular Marquee Tool and Set up the size Height: 411px and color to e0e0e0 and apply the settings Gradient Overlay by following: Layer > Layer Style > Gradient Overlay

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

Step 23

It’s time to start creating background Content, Select Rectangular Marquee Tool and set up the size width: 837px fill the background with white color #FFFFFF and apply the settings Stroke by following the image below

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

Step 24

Create a little Line between images and texts, Select Rectangular Marquee Tool and set up size Height: 3px and code color: #eFeFeF

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

Step 25

Let’s create background behind images posts and texts, again Select Rectangular Marquee Tool and set up size Height: 115px and apply the settings Gradient Overlay by following: Layer > Layer Style > Gradient Overlay

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

Step 26

Apply the same steps

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

Step 27

Add new banner on the top content 728×90 Pixels

instantShift - Clean Blog Theme in Photoshop

Step 28

Create an image with 200×200 Pixel and drag it into project work

instantShift - Clean Blog Theme in Photoshop

Step 29

Select text tool and start creating Category tutorial then apply the settings text by following the image below

instantShift - Clean Blog Theme in Photoshop

Step 30

Do the same thing with Title

instantShift - Clean Blog Theme in Photoshop

Step 31

Select Rectangular Marquee Tool and let’s create Background for the category and date, set up size 281px by 21px and code color #F8F8F8 then apply the settings stroke by following the image below

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

Step 32

Add new text Posted on 14 Dec, 2010 by admin in Tutorials, Drawing and apply the settings by following the image below

instantShift - Clean Blog Theme in Photoshop

Step 33

Add new text again and Apply the same settings

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

Step 34

Let’s create Button comment and Continue reading, Select Rounded/Elliptical Marquee Tool, Set up code color #dadada and create a little form then apply the settings by following the image below

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

Step 35

Duplicate layer and apply the settings as you see in the image below

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

Step 36

Add new text “Comment” and apply the settings Shadow by following: Layer > Layer Style > Drop Shadow

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

Step 37

Ok now Let’s Create another button for continue reading and apply the same settings

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

Step 38

Select Buttons Layers and drag layers to new group and change size as you see in the image below

instantShift - Clean Blog Theme in Photoshop

Step 39

Add another Line

instantShift - Clean Blog Theme in Photoshop

Step 40

Duplicate Post Group

instantShift - Clean Blog Theme in Photoshop

Step 41

Do the same thing and create 5 of posts

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

Step 42

Let’s create Next Page by following the same settings buttons, Select Rounded/Elliptical Marquee Tool, Set up code color #dadada and create a little form then apply the settings by following the image below

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

Step 43

Duplicate Layer

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

Step 44

Add new text “Page 1 of 3″ and apply the settings text by following the image below

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

Step 45

Let’s move to the next step to create sidebar, Select Rectangular Marquee Tool, Set up Size Height: 323px Fill Background with color #eaeaea and apply the settings Stroke

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

Step 46

Add Rss Subscriber icon

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

Step 47

Add new Text “RSS Subscriber” and apply the settings Drop Shadow by following the image below

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

Step 48

Add Twitter Followers, Facebook Fans, Comment

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

Step 49

Select Rectangular Marquee Tool and create another Line by following the settings Height: 1px, Color #FFFFFF #D7D7D7

instantShift - Clean Blog Theme in Photoshop

Step 50

Let’s Create Advertising Widgets, Select Rectangular Marquee Tool and set up size 279px by 409 and apply the settings stroke

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

Step 51

Add banners ads to the form that we have created

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

Step 52

Again Select Rectangular Marquee and create Widgets Categories, Archives, Pages by following the settings: Height: 20px between line and widgets and set up size 276px by 286px

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

Step 53

Add new form by following the settings: Height: 40px between form and background and form: 256px by 272px then apply the settings stroke

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

Step 54

Add Lines and Texts

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

Step 55

Add another Line and Select Rectangular Marquee Tool to create Recent Widget

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

Step 56

Add images and create Lines

instantShift - Clean Blog Theme in Photoshop

Step 57

Set up code color #D66F0D and add Text to work

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

Step 58

Add Another Line and Select Rectangular Marquee Tool to create Flickr Widget and apply the same settings as you see in the image below

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

Step 59

Ok let’s move now to the next step to create Widgets Footer, Select Rectangular Marquee Tool and set up the size: 1159px by 630px

instantShift - Clean Blog Theme in Photoshop

Step 60

Select text tool and let’s create Categories widget, apply the settings as you see in the image below

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

Step 61

Do the same thing as i did before with Categories follow the image below

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

Step 62

Let’s finish this by creating footer, Select Rectangular Marquee Tool set up size: 1159px by 74px Fill Selection layer with any color you want then change Fill Opacity to 0% and apply the settings gradient overlay and inner shadow by following the image below

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

Step 63

Select text tool and add your copyright and your name

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

Step 64

And you will have this awesome result

instantShift - Clean Blog Theme in Photoshop

Step 65

Let’s move to the next step on how to create content page, Make copy of PSD file and rename the file to Content, then remove all layers: posts, Buttons, next page, as you see in the image below

instantShift - Clean Blog Theme in Photoshop

Step 66

Add another Line, Select Rectangular Marquee Tool to create form for the final result of tutorial

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

Step 67

Add another Line, Select Text Tool and add introduction Tutorial

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

Step 68

Do the same thing as i did before with the final result Form

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

Step 69

Add another Line and Let’s Create Author Bio by following the image below

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

Step 70

Create Related Posts by following the image below

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

Step 71

Create Discussion Form by following the image below

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

Step 72

Let’s Finish this by create Submit Comment Button, apply the same setting as i did before with Comment button and Continue Reading

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

instantShift - Clean Blog Theme in Photoshop

Step 73

You will get the amazing result as you see in the image below

instantShift - Clean Blog Theme in Photoshop

Final Results

Now here are the final results.

Clean Blog Theme - Home Page   Clean Blog Theme - Content Page

Conclusion

As difficult as it looks I’m very sure if you follow my tutorial you will find a lot of help using your skills and images to produce your own creation! Ones again Thank you for using our tutorial, we will be very happy to answer any questions that you may have, You can simply leave a feedback and or a comment bellow.

Like it? Share it.

31 Comments

  1. Wow great you makes it very easy for me to Create a Clean Blog theme in Photoshop. i like your this post because it is written in a clean and nice way which i think everyone will understand. nice info.

  2. Oh my GOD.. thats so awesome ~!!!

  3. please tell me how to use this psd file in blogger templates .

  4. Excellent step by step tutorial! It’s been really useful. Thanks!

  5. Hello really Good Work am get & unique idea Your Best Tutorials Thx and GOD BLESS YOU Get Complete Tutorials
    on my website SEO Tips & web design Tips in Photoshop

  6. very helpful………………..m really your big fan(instantshift)

  7. Its verry awsome………………… and thanks for the author

  8. Hi..
    Thanks for sharing this information its really help full for me with the help of this we can improve our designing and i am really inspire with this artical so thanks

  9. woow amazing!!!!

  10. Thank you.
    But it would be rather helpful if you could post a tut on how to turn it into a working blogger blog.

  11. unfortunately it’s never the graphics that are hard to come up with, its the code that runs them.

  12. datz soo KOOL

  13. Seriously well explained, for what it is.

    However without explaining what you do next to turn it into a WORKING website, all we end up with is a PSD file that LOOKS like a website, and that is not very useful.

    What do we do next?!?

  14. Hm. Very nice tut!

    But the design is very close to smashingmagazine.com , don’t?

  15. Nice tutorial, and guys turning designs into blog is when things get really complicated, for all asking the question think about this: this tut maybe covers 1/5 of the whole process.

  16. So how to implement at php coding for wp?

  17. Great useful tutorial.

    Thank you for sharing.

  18. amazing step by step….
    now, how to convert it on xhtml/css??

  19. Fantastic tutorial, thanks a lot for posting

  20. it’s a great tutorial.
    Please make another tutorial for how to convert this design into HTML with css.

  21. yup.. its amazing tutorial but how to convert this psd file to wordpress theme

  22. Very inspiring… Looks great.. descriptive and helpful photo shop tutorial. Thanks for the share!!!

  23. hello bro my que is after the Step 73 …..what is the file formt for this template.

    and how to use it on blogspot that”s it…

    and thnx for this simple and use full steps…plz help me urgent .

    i make a template with ur steps and i want to apply it on my blog..

  24. i also need the extension of this template such as .HTML .XML .PHP …? what.?

  25. This tutorial will helped me a lot especially to make best theme for my blog .I just started using Photoshop recently so this tutorial is very useful for me. In addition, to this I am taking help from LearnPhotoEditing.net. Can you suggest me any other site like this website?

Leave a Comment Yourself

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>