Tutorial Details:

In this tutorial you'll learn how to Create a Beautiful and Creative Blog Design in Photoshop and you will learn the use of Pen Tool, Brush tool, Masking, Gradient, and some Transform Options.

Take a look at the image we'll be creating.

 

Getting Started

Step 1:

First create a new blank document and give a standard size as per website layout standards like 980x1000 (this size will give you the best view in 1024x768 resolution), now we can start with this design.

Step 2:

In Order To create a beautiful blog design first we will work on it's footer (the lower bottom of blog) as shown below, after completing this we will go for header part and overall design of the layout.

 

Step 3:

To start with footer of the blog we will use an image or clip part to give a beautiful look, in the below image you can see a nice hut so we will select the hut and remove the background, this is a perfect hut for our blog.

 

Step 4:

select out the hut image, by using pen or lasso tool , this hut will be used to make our footer a natural green feel, you can use any other image.

Step 5:

Now place the hut image into the footer of the layout as shown below, we will use more image to make a complete composite and cool look bottom.

Step 6:

Now we are using another image like above, in this image we can use this fences and this ground. Just select it out as we done earlier with your preferred selection tool.

Step 7:

And now use this image to select out gate for our footer image, one thing make sure we are using only half part of gate as we don't want to show the hut and ground behind the whole gate because that doesn't make any sense.

 

Step 8:

Using all three images i.e. hut , Fences ground and gate now we have this wonderful composite image of a hut with gate and fences around now its time to complete our footer, now we want some lush green vine ...

   

Step 9:

Now here you see green vine with flowers you can use these vines over ground and gate to decorate as our design required.

Step 10:

Just cut the part of vine you want to use actually we can use every part of flower vine, so select out image as shown below.

Step 11:

Now use this vine over fence ground and gate as everything seems natural and give us a feel of greate design, let's give image a personal touch so it will look more beautiful.

Step 12:

Now give some professional touch to the bottom part, in order to do this use your brush tool and make some tiny dots over bottom fence as red arrow is showing.

Step 13:

So now that’s it our blog's footer is ready and we can move to the remaining part of the layout.

Step 14:

Lets start with the Header as we have complete our footer part.

Step 15:

For header first we have to make an impressive title, the title of this blog is GREEN BLOG and we will give this title in a script (busorama Md BT) font with green color, also arrange them as shown in the image below into the upper corner of header.

Step 16:

Now its time to use some layer effect to make title attractive, I am using Drop shadow >75% opacity> %px distance with white stroke of 3px position of stroke should be outside of layer as settings below

Step 17:

Now use same settings for "blog" text but make stroke dark green to make a good match of color and footer combination.

Step 18:

Use guidelines to make alignments and this will give you a rough idea what we are doing and what will be the next thing we go to draw or design in the layout, now we need handmade color background for our blog and header.

Step 19:

Now we are using brush tool with brush opacity 75% and flow 50%, to show a feel of painted background, I am using brush type> charcoal large smear to give the look of a painted background.

Step 20:

Use this painted background into your blog you can lighten the color background using it's layer opacity down to 61% .

Step 21:

Our header looks bit empty as compare to our footer ,create a new layer name your layer "wind" and draw a curve wit theh help of pen just like below, create this path and convert it selection using CTRL+ENTER ,fill this selection with white color.

Step 22:

Now create this path and convert it selection using CTRL+ENTER ,fill this selection with white color as we done in the below image.

Step 23:

Now add a layer mask to the wind layer and hide bottom of the curve use brush tool and gradient to do so, make sure your background and foreground color are black and white.

Step 24:

Select move tool and drag wind layer with ALT key ( ALT+Drag) to make another copy of wind and place it as per design requirement.

Step 25:

Now your final title should look like this .i add some white puffy dots through brush tool as we done previously in order to give it a frosty look.

Step 26:

But this is not a final header so let's add some Buttons and images to make things complete.

Step 27:

For making menu bar i used rounded corner rectangle and give it some layer styles like inner glow and stroke use same settings as below to make a proper bar . this is where we put our blog’s menu with links.

Step 28:

Then write the name of menu buttons as you need with verdana font. font should be readable and simple, its time to make icons for our buttons to give them more visibility.

Step 29:

Use some custom shapes through custom shape tool to put the shape in your design as you want to use ,now fill all the shapes with white color

Step 30:

In custom shapes you may not be able to find a proper shape for twitter button so i am making shape of my own using pen tool , you can also browse internet and trace twitter icon for your use.

Step 31:

Again fill the entire icon with white color and now we have our main link bar ready to use.

Step 32:

Now add some balloons to our header so it will give you feel of sky with balloons, we have used new clip part to give a natural look to this layout

Step 33:

Place balloons accordingly where you fine suitable as per design requirement like image below, now it's time to make rest of our blog where we will put our discussions and comments, images, etc.

Step 34:

In order to do this i am using this vine cutout and place it in our blog template according to guidines we made earlier it give us a basic layout to put the content in the page.

Step 35:

Place it we have this lovely blog design where vine branches are out, your vine arrangement should look like image below ,but we want to show that our vine is long enough to reach sky and cloud, so the thing is now missing is clouds. Lets make clouds for our header.

Step 36:

Create a new layer and draw some random clouds with help of brushes, Play with opacity and flow in brush tool option to draw a cool puffy clouds like below

Step 37:

Place your cloud over vines braches so it looks vines zooming into clouds from ground. you can use cloud in middle of blog and in bottom footer for giving some fog effect.

Step 38:

This the final backdrop of our green blog , your final output might be bit different, now you have complete template just add your text and images where you want them to add.

Step 39:

Your final Blog should look like image below you can do other things to make things more interesting, you can add more buttons and links etc.

 

Conclusion

Hope you liked it! Of course this tutorial is just a small sample of what you can do with this style in web design, feel free to experiment with the technique and amaze us with something new!