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.

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.

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.

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,

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

Step 4

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

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

Step 6

Create a simple Logo

Step 7

Add new banner 468×60 Pixels

Step 8

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

Step 9

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

Step 10

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

Step 11

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

Step 12

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

Step 13

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

Step 14

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

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

Step 16

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

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

Step 18

Make 3 copy of Shadow Layer

Step 19

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

Step 20

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

Step 21

After that you will get this result

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

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

Step 24

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

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

Step 26

Apply the same steps

Step 27

Add new banner on the top content 728×90 Pixels

Step 28

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

Step 29

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

Step 30

Do the same thing with Title

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

Step 32

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

Step 33

Add new text again and Apply the same settings

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

Step 35

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

Step 36

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

Step 37

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

Step 38

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

Step 39

Add another Line

Step 40

Duplicate Post Group

Step 41

Do the same thing and create 5 of posts

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

Step 43

Duplicate Layer

Step 44

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

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

Step 46

Add Rss Subscriber icon

Step 47

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

Step 48

Add Twitter Followers, Facebook Fans, Comment

Step 49

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

Step 50

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

Step 51

Add banners ads to the form that we have created

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

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

Step 54

Add Lines and Texts

Step 55

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

Step 56

Add images and create Lines

Step 57

Set up code color #D66F0D and add Text to work

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

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

Step 60

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

Step 61

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

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

Step 63

Select text tool and add your copyright and your name

Step 64

And you will have this awesome result

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

Step 66

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

Step 67

Add another Line, Select Text Tool and add introduction Tutorial

Step 68

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

Step 69

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

Step 70

Create Related Posts by following the image below

Step 71

Create Discussion Form by following the image below

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

Step 73

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

Final Results

Now here are the final results.

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.