Featured Posts

Cute Adorable Newborn Baby Photography Babies are the gift of god. Especially Newborn baby appears with full of emotions and surprise for their parents. Every parent knows the value of newborn photography because they want to memories their...

Read more

Impressive Spring Photography that Must Energize Your... Every photographer are the host of mother nature. They don't miss any scope to focus the single beauty of all seasons. Spring is one of the favorite season to photographers because flowers are blooming,...

Read more

Most Famous Fine Art Photographers and Their Immortal... Today we are presenting the second and final part of Most Famous Fine Art Photographers and Their Immortal Art Photography post. In this post we are introducing world's most famous fine art photographers...

Read more

Most Famous Fine Art Photographers and Their Immortal... Fine art Photography also known also as “artistic photography” refers the expression of artist's perceptions and emotions and to share them with others though the art of photography. It is the best...

Read more

Most Famous Portrait Photographers and Their Great... Everyone can take photos but only some are considered as famous photographers. Take a creative & outstanding portrait photographs is not an easy task. A famous portrait photographer can combine...

Read more

clipping path

Follow us

on Twitter

ClippingDesign.com

Clipping Design

is an Outsourcing

Clipping Path ,

Image Masking &

Graphics Design

Service Provider.

Image editing

services at very

low prices. Visit

our website: ClippingDesign.com

How to Create Hand Drawn Web Layout Using Photoshop

Category : Web Design

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

How to Create Hand Drawn Web Layout Using Photoshop

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:

How to Create Hand Drawn Web Layout Using Photoshop

Download the following image and open this image in photoshop

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

How to Create Hand Drawn Web Layout Using Photoshop

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

How to Create Hand Drawn Web Layout Using Photoshop

[ad#AdBrite]

And for the Color Overlay use the following settings

How to Create Hand Drawn Web Layout Using Photoshop

For Outer glow settings use the following settings

How to Create Hand Drawn Web Layout Using Photoshop

This is my result

How to Create Hand Drawn Web Layout Using Photoshop

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:

How to Create Hand Drawn Web Layout Using Photoshop

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.

How to Create Hand Drawn Web Layout Using Photoshop

[ad#AdBrite]

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.

How to Create Hand Drawn Web Layout Using Photoshop

This is my result

How to Create Hand Drawn Web Layout Using Photoshop

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

How to Create Hand Drawn Web Layout Using Photoshop

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

How to Create Hand Drawn Web Layout Using Photoshop

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

How to Create Hand Drawn Web Layout Using Photoshop

[ad#AdBrite]

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

How to Create Hand Drawn Web Layout Using Photoshop

Now I will add some text and images on my layout

How to Create Hand Drawn Web Layout Using Photoshop

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

How to Create Hand Drawn Web Layout Using Photoshop

With rectangular marquee tool, create the following selection

How to Create Hand Drawn Web Layout Using Photoshop

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

How to Create Hand Drawn Web Layout Using Photoshop

[ad#AdBrite]

Final Result:

How to Create Hand Drawn Web Layout Using Photoshop

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!

For clipping path service, image masking service or design support please contact ClippingDesign.com.

Thank you…  :)

Reference: talk-mania.com

Share

Post a comment

*