09 May How to Create Hand Drawn Web Layout Using Photoshop

Today i would like to share how to create hand drawn web layout using photoshop. In this tutorial we will show you how easy to manipulate some photoshop brushes for great looking  web layout. I think it may help you to create your own web site or blog more stylish. So, why not have a try….

At first create a new document. Go to File > New

Fill the background with the following color #f7f6f2 (use paint bucket tool)

Select Rectangle tool, and create a new shape, and place it like in the following image:

Download the following image and open this image in photoshop

This image is very small. I hope you can see it

After you open this image, go to Edit > Define pattern. Chose a name for this pattern and click OK. You can close this small image. We will return to our hand drawn layout. Select the white shape, and add the pattern we have created on this layer.

To add this small image to the shape is very simple. Go to Layer > Layer Style > Pattern overlay… and use the following settings

[ad#AdBrite]

And for the Color Overlay use the following settings

For Outer glow settings use the following settings

This is my result

Now comes the funny part. We will add some nice flower brushes under this layer.

All the brushes I will use are from Talk-Mania Designer’s Pack

You can find these brushes in the following folders:

Inside this folder you will find: Flowers-2, Flower-3, Flower-6, and Flower-7. Load all this brush sets, and create some random brush artwork.

Now right above the background layer, create a new layer (press CTRL+SHIFT+ALT+N). Grab Brush tool, and be sure you have “Airbrush Soft Round 300” brush selected. Change the opacity to 40-50 %, and on this layer add some random colors.

This is my result

On the top part I will add another brushes also from Photoshop designer’s pack ( you will find this brushes in Ornaments folder)

Now on the right part of the layout I will add some post note papers, and some clips

On the top I will add some text with type tool, and on the bottom note paper, I will add some text with a Wacom Tablet. I am not writing so beautiful with a tablet. You can write on a piece of paper, and then you can scan it, and place the scanned images on your layout.

In the same time I have placed a few banners. You can see that 2 banners are with our newest websites

www.graphic-host.com and www.wordpress-mania.com

I have placed a little with my Wacom tablet and I have created a nice RSS icon

Now I will add some text and images on my layout

What I don’t like is that our text looks not clear with that patter behind. For this we will add a new layer under the text. Select Rectangular marquee tool, and set the radius to 40

With rectangular marquee tool, create the following selection

Then fill this selection with white (use Paint bucket Tool). Press CTRL+D to deselect.

Final Result:

Hope you can learn something new from this tutorial.

I feel really glad if you give me feedback through comment below. Soon i am going to show more interesting & innovative tutorials so please keep visit our blog. That’s for now.

Have fun!

Reference: talk-mania.com