Funky Web Design Layout

Posted on March 18th, 2008.

18 Votes, Rating: 4.22

 Loading ...

Learn how to create a web design layout, FUNKY STYLE.

Create a new document 850 x 1024 with a white background. Select the rounded rectangle tool and create a rectangle at the top.

Add these layer styles yo your rectangle.

Now add your navigation text and a little symbol as a seperater.

Now select the rounded rectangle tool again and create a number plate shape, fill with the color #0195cb and add a 2pixel white stroke.

Now for this part and the next few steps your going to need a set of different brushes, all of which are included in with the PSD download. You need some random grundge brushes, techy shapes brushes, vector shape brushes, circle shape brushes and last but not least some splat brushes. Select the rubber tool and use these settings.

As your brush you need to choose a grunge brush. On your number plate shape start to brush randomly around the edges and abit in the middle. You should end up with something like this.

Now add your website text and using then pen tool add a shine.

Now the intresting part, select your brushes I.E circle, vector shapes etc… and build up your image like this.

Make sure every item is on a new layer for quick and easy editing. Now select the rounded rectangle tool and draw out a smaller rectangle fill with the color #f5429f, now with your rubber again using the same method as above rub some away, Add some welcome text.

Repeat the above step adding more content as you go along…. im not being very specific here as its mainly adding text and repeating the step above and im sure by now you no how to add text.

Now in-between our content we need to add some sort of a divider…. to do this just select the type tool and type out some dash’s ( —– ). Then while the text tool is still active click this icon.

Now experiment with the features of this tool as it can come in handy creating text effects.

Now for the footer. Duplicate your grey navigation and flip it vertically ( edit > transform > flip vertically ) Move to the bottom of the canvas, add your footer text.

Now duplicate the elements of your header, rescale abit by clicking “ctrl + t” and move down the bottom right hand corner. You should end up with this.

Tags: arrows, circles, custom, design, funky, layout, web

19 responses so far!

Note: We now use Gravatars here on HV-DESIGNS, they are little icons that appear next to your name on this site and on many others next to your comments. You can get a Free Gravatar account for free and any other site that supports it will show your avatar also!

• 1 Photoshop Tutorial Directory ~ Mar 19, 2008 at 7:03 am

  Really funky.. it looks like a myspace layout or some sort of personal blog.

• 2 Free tutorials ~ Mar 19, 2008 at 1:27 pm

  Great template tutorial, keep em coming!

• 3 FrankVoors ~ Mar 19, 2008 at 11:38 pm

  Hey,

  I’d say the header is impressive, but you might want to improve the content beneath it.

  The rest is too… empty. But again the header is fresh

• 4 jitendra ~ Mar 20, 2008 at 10:19 am

  Cool …………….nice

• 5 Raya Awalsyah ~ Mar 22, 2008 at 12:53 am

  Funky…………..

• 6 Naveed ~ Mar 22, 2008 at 8:41 am

  nice awesome tutorials…thanks for sharing

• 7 Rudd ~ Mar 31, 2008 at 2:32 pm

  omg I like it

• 8 Katrine Lee ~ Apr 1, 2008 at 10:54 am

  I need a Little help. I can’t undstand some introductions I mean, can somebody help me? I`m confuse, I don’t know what tool to use. PLEEAASSSSE HEELLP ME MAKE MY OWN MULTIPLY LAYOUT!

• 9 Molly-Sue ~ Apr 3, 2008 at 12:42 pm

  it was a little confusing, not everyone know’s were some of the tools are. Maybe next time go into a lil’ more depth about were to get/find tools

• 10 ADMIN ~ Apr 3, 2008 at 3:11 pm

  well all tutorials are written on the basis of you no’ing at least some of photoshop.

• 11 Reactor ~ Apr 8, 2008 at 3:27 pm

  wow yeah this is what i need, my webdesigns are really boring this is fresh and new for me:D

• 12 Rjdesigns ~ Apr 13, 2008 at 11:21 am

  Really nice website its new fresh and a awesome style good job

• 13 Anders Moen ~ Apr 14, 2008 at 11:10 pm

  Thanks, I really like the header. The rest wasn’t to impressive, but it works

• 14 Top Stumbles - Best of StumbleUpon ~ Apr 17, 2008 at 5:32 pm

  HV-DESIGNS.CO.UK | Be . Creative | Version 21…

  Over 100 photoshop tutorials, including psd’s, learn photoshop online for free…

• 15 Geoserv ~ Apr 17, 2008 at 5:33 pm

  STUMBLED!

  As soon as I can get a handle on PS, I hope to be able to do this kind of stuff.

  VOTED for you at:
  http://www.newsdots.com/design/designs-co-uk-be-creative-version-21/

• 16 Zohair ~ May 10, 2008 at 7:18 pm

  THIS SITE IS AWESOME AWESOME !!!! I LOVE YOU GUYS!

• 17 Computer jobs ~ May 12, 2008 at 9:04 am

  Great thread! , i like these tips, its looks that i knew just small part of it.

• 18 Textile Lasers ~ Jun 22, 2008 at 11:49 am

  Nice post … can u please subscribe me to your newsletter if u have any.
  Thanks

• 19 ADMIN ~ Jun 22, 2008 at 1:55 pm

  check the rss readers bit on the right