Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Design a Creative Clean Blog Theme in Photoshop

Design a Creative Clean Blog Theme in Photoshop


We will start with a new document with the following sizes: 960 x 900 pixels. For the background color I will use #eeeeee
You can use Paint Bucket Tool to add this color to the background. First set your foreground color to #eeeeee, and then click one time on your document with Paint Bucket Tool.
Now you need to select Rounded Rectangle Tool, and create a white shape.

image 1

I will add a simple layer style. Go to Layer > Layer style > Stroke, and use the following settings

image 2

From my personal stock collection I will add an image with some bushes

image 3

Soon this type of images will be available on Grafpedia.
I will select Rectangle Tool, and with the following color: #eeeeee, I will create a shape on the bottom of the bushes.

image 4

With Rounded Rectangle Tool, I will create another shape with the same color as my background

image 5

I will add another layer style: Layer > Layer style > Stroke

image 6

image 7

You can see my result on the following image

image 8

With Ellipse Tool I will create two shapes. The color I have used is a dark brown # 463d2e

image 9

I will select each layer, and I will go to Filter > Blur > Gaussian Blur

image 10

This is my result

image 11

Now I will drag these two layers right above the big white shape

image 12

With Line Tool I will create two small lines on my navigation bar

image 13

Download this set of Cloud Brushes: for VIP only.
And on a new layer (press CTRL+SHIFT+ALT+N) I will add the clouds on my header

image 14

After that I will add some flowers on the left side of the header.

image 15

And on the right side an image with a butterfly

image 16

I will select Horizontal Type Tool, and I will add the text

image 17

Between the text buttons, I will add three lines with Line Tool

image 18

I will select all three lines in my layer palette, and I will press on CTRL+E (merge)
Then I will select Eraser Tool (with a small round brush), and I will delete the top part and the bottom part of the line

image 19

I will duplicate this layer, and I will place it between all text buttons

image 20

This is my final result

image 21



Author's URL: grafpedia
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials


Like us to: