Loading ...
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.
50 Responses to “Funky Web Design Layout”
Photoshop Tutorial Directory Says:
Really funky.. it looks like a myspace layout or some sort of personal blog.
Free tutorials Says:
Great template tutorial, keep em coming! :)
FrankVoors Says:
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 ;) :D
jitendra Says:
Cool …………….nice
Raya Awalsyah Says:
Funky…………..
Naveed Says:
nice awesome tutorials…thanks for sharing :)
Rudd Says:
omg I like it
Katrine Lee Says:
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! :)
Molly-Sue Says:
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
ADMIN Says:
well all tutorials are written on the basis of you no’ing at least some of photoshop.
Reactor Says:
wow yeah this is what i need, my webdesigns are really boring this is fresh and new for me:D
Rjdesigns Says:
Really nice website its new fresh and a awesome style ;) good job
Anders Moen Says:
Thanks, I really like the header. The rest wasn’t to impressive, but it works :)
Geoserv Says:
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/
Zohair Says:
THIS SITE IS AWESOME AWESOME !!!! I LOVE YOU GUYS!
Computer jobs Says:
Great thread! , i like these tips, its looks that i knew just small part of it.
Textile Lasers Says:
Nice post … can u please subscribe me to your newsletter if u have any.
Thanks
ADMIN Says:
check the rss readers bit on the right
photoshop free tutorials Says:
very nice tutorials i like the divider technique very much
bebo skins Says:
i love your site, tutorials are good also, im quite gd a designing but not very good at css and html make some of those please.
unooo Says:
Wou, for beginners perfect tutorial ;-)
infocus digital photo retouching Says:
very nice design in this easy to follow tutorial
iddaa Says:
Wou, for beginners perfect tutorial ;-)
tshirt-printer Says:
Nice tutorial , I like the grundge effect. I will keep checking back for more inspiration!
Leave a Reply
Trackbacks
search
Learn more about advertising with us.
write for us
Intrested in publishing some articles, tutorials or freebies on hv-designs.? We welcome anyone who is intrested, we'll even return the favour by sending you aload of goodies. Learn More
Learn more about advertising with us.
Recent Comments
copyright
The effects and techniques demonstrated in tutorials on hv-designs.co.uk can be used in whatever manner you wish without attribution. The text, images and tutorials themselves are all copyright © hv-designs.
usage
You cannot copy whole tutorials, either in English or translated to another language unless permission is given by the tutorial author.
friends online