Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Funky Web Design Layout 2

Funky Web Design Layout 2


Create a new document 800x900 pixels, drag a linear gradient over the top using #e4e4e4 & white. Select the brush tool then select some cloud brushes (included in psd) Add this drop shadow to you clouds.

image 1

This should be your result.

image 2
Click to enlarge

Now goto your custom shapes library and select the "registration 2 target" shape (see image below).

image 3

Drag your shape out in the middle of your clouds, fill with the color white. Now add a layer mask to your shape and drag a "radial gradient" over the top to blend in the edges. Now add these layer styles.

image 4

image 5

You should have something like this.

image 6
Click to enlarge

Now add your title and add these layer styles.

image 7

image 8

image 9

You should have something like this.

image 10
Click to enlarge

Now using various brushes and shapes start to build up your layers like this. (see animation below) Make sure everything is one a layer of its own for easy editing later on if needed (the brushes i used are included in the PSD).

image 11
Click to enlarge

Now select the rounded rectangle tool draw out a small navigation bar. Copy the layer styles that we used for our main title but adjust the stroke from 6 to 3.

image 12
Click to enlarge

Now add 2 arrows from the custom shapes library and your navigation text. (the arrows used have the same layer styles as the navigation bar apart from it has a different color).

image 13
Click to enlarge

Again select the rounded rectangle and draw a bigger box for some content. Copy and paste the layer styles from your navigation bar.

image 14
Click to enlarge

In the top left corner of the box add your content box title. Add these layer styles.

image 15

image 8

Your text should look like this.

image 17

Add a highlight using the circle tool to complete the effect.

image 18

Now add some content. Use the steps above to create other content boxes.

image 19
Click to enlarge

Now to complete the layout add your footer.

Funky Web Design Layout 2
Click to enlarge


Author's URL: Hv-Designs.co.uk
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

No comments yet...
Add comments to "Funky Web Design Layout 2"

Captcha