Subscribe Via RSS

3267 Subscribers

Subscribe Via RSS
Subscribe Via Twitter

Followers

Subscribe Via Twitter
Funky Web Design Layout 2

May 8th, 2008 in Photoshop Tutorials by Richard Carpenter

Funky Web Design Layout 2

1 Star2 Stars3 Stars4 Stars5 Stars19 Votes, Rating: 4.16
Loading ... Loading ...
About The Author

About The Author: Richard Carpenter

Hi im Richard Carpenter im a freelance web and graphics designer from England. I am also a regular Blogger, Tutorial Writer, and owner of HV-Designs. You can follow me on twitter HERE. You may also view my portfolio HERE.

 

Richard Carpenter has written 331 posts.

Create a new document 800×900 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.

This should be your result.

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

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.

You should have something like this.

Now add your title and add these layer styles.

You should have something like this.

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).

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.

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).

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

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

Your text should look like this.

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

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

Now to complete the layout add your footer.

All material needed for this tutorial are available in the PSD download. Thanks for reading.

Be Part Of The Community!

Become part of the hv-designs community.

Subscribe Via RSS or Follow Us On Twitter.

Subscribe Via RSS Follow Us On Twitter

16 Responses to “Funky Web Design Layout 2”

  1. Webnoob says:

    hello, i like the tutorial, i have one question. How to make the selected images to background and also how to make some images div and stuff

  2. LIKO says:

    i liko the style for the webpage very much.
    good innovation

  3. Vladimir says:

    Wow! Great!
    I will use it for my site! Thanks!

  4. Karabar says:

    THis is just wonderful! :D ….How do you code it….? x_______x

  5. Xphunt3r.blogspot.com says:

    gr8 job

  6. Laura says:

    Great! Cool!

  7. ananana says:

    how do you “fill” the shape with white? did not work for me like that. when you apply a mask to the shape, that’s where the gradient is applied, and you cannot see it.????

  8. ADMIN says:

    what step are you on?

  9. annonymous says:

    Hi, how would you put in links and stuff if you were to put it on a website?

  10. ADMIN says:

    would be done in CSS i guess

  11. HBakker says:

    i think i have the same problem anana has. if i put in the white and draw the mask i get a wheel like shape, with nice colors, but not blended as you intended. where did I go wrong?

  12. ADMIN says:

    to fill the shape with a color, select the pen tool then right click and goto “fill path” then right click again and goto “delete path”.

    add a layer mask, set background to black forground to white, select a radial gradient, drag from the center of the shape outwards, hope this helps

  13. Roelof says:

    Hi man! Who knows wich font they use for the header text. Thnx!

    ~Roelof, from The Netherlands.

  14. epulido says:

    Just tried it – What an easy tut to follow.

Leave a Reply