In this post we will show you how to create a website using splatter brush and few cool techniques. You can customize it for a company or own web site. Also, the PSD template is available for downloading .

Preview

Lets the the result first (Click for bigger size).

Resources

1. Tileable Wood Background

2. Mail and Phone Icons

3. Splatter Brushes

4. Tech and Screentone Patterns

We  are using 960 Grid for this tutorial. So open up the PSD template and  place the the wood background.  We are going to adjust the color setting for the background. Go to Images > Adjustments > Levels and then Images > Adjustments > Curves . Here are the settings for Levels and Curve :

You can play around with these setting as you like.  Here is how background looks like after these changes:

So, now it looks kind of grungy . We are going to add lighting effect to make the wood brighter. Go  to Filter > Render  > Lighting Effects. Keep it Default in the Style Menu. Here are the setting for the lighting effect:

Here is the result after applying the lighting effect:

Add thin gradient of #71644a on the both side of the wooden background. The reason for that if you are coding this layout, the background won’t look awkward on a big screen.

Now we are going to create the logo. Here is the hex color code #afc05b.  Using the following brush shown below draw one end of the logo.

Don’t worry about the excessive splatters. You can erase them by using the eraser . Use the same brush extend the logo’s background size.

Here is how it should look like:

After that use 5 px soft brush and fill out the areas that need fill color and erase the excessive splatters. I am using Cooper Std font for the logo.

Now, we will work with content area first and then add the menu.  Make the content 820 x 546 and add 1% noise from  Filter > Noise > Add Noise > . Here is how it looks with the grid.

We are going to add Pattern Overlay and Stroke to add more the depth to the content area. Here are the settings :

Now we add the menu. I am using Rockwell Font for the menu and content also. Fill the background with pure black and turn down the opactiy to 60%. Also, copy the same layer style from the content and paste it for each menu background.

We are going create a rotating image/slideshow area. Get any image and paste it on the left side of the content area. Mine is 335 x 225. We are going to add Drop Shadow and and Storke from Layer Styles. Here are the settings:

Here is how it looks:

We need to make the picture 3D-is by adding a corner drop show. Using pen tool draw a simple corner like following:

Now, fill the path by right clicking over it. Choose black for the fill.

Add a Gaussian Blur to filled area . Keep it between 4-6 pixels. See what works best. Here is my result:

Use the rounded rectangle tool and draw an rectangle on a new layer.  Select  Make selection option from the drop down menu by right clicking on the path. Fill it with the gradient . Drag the Gradient from top to bottom.

We are going to crop it  using shapes.

Use make selection again and delete the selection area. Now move that layer all the way to the end  of content area and add the text and icons.

Add the rest of the necessary text element, heading which are pretty simple and self explanatory. No special tricks.

Only one thing I added is the drop shadow for the “Testimonial” text shadow with this color #695a28. Here is the setting for that :

Now time for footer. It is almost the same process as header, but we are using a different brush.

Now repeat the same step with the third brush and erase the excessive splatter and make the it into a nice splatter shape.

Add the additional text and copy the same background for the other footer heading.

Thats it ! We have reached the end of this tutorial lets see again how the web layout looks. Feel free to ask any questions or suggest improvements

You can download the PSD template. It is organized into folders. Feel free edit and use it .

Dowload AD PSD