Loading ...
Create a new document 800×800 with a black background, select the color #01afee and create a rectangle. Once you have your rectangle press “CTRL + T”, now rotate your rectangle like this.
Now for this part you need some “splatter brushes” EITHER search yahoo or goto a site like brusheasy and download a set, once you have them make some randam splatters over your canvas, using the colors blue and black.
Select the type tool and add your site title and slogan.
Now if you have used two colors like mine above for your title then select one of the colors and add a splatter. If you have used white then you can just use a white splatter, you should have something like this.
Select the type tool again and add your navigation, use free transform (CTRL + T) to rotate the text.
Now im going add 3 sections to my main page which will be “news & updates”, “tutorials” & “latest work”, by the side of each of these 3 sections im going have a different icon, ALL of which are chosen from adobes custom shapes menu.
Now under each section im going to add some content.
Once you have your content in place, select a different color, im going to use the same color green i used for my title and add a big splatter at the bottom of the page.
Here i shall add my footer information.
Now last but not least, add some more black splatters around your content.
When your finsihed you should have something like this.
29 Responses to “Web Design Layout #2 Tutorial”
Nomad Says:
This a great tutoria
Nomad Says:
This a great tutorial
Lori Says:
How would you slice and code this layout?
Lee Says:
Where can I download these spatter brushes?
ADMIN Says:
search for a website called
“brusheasy”
Demo Says:
So how do you make this html with links and junk?
sydney web design Says:
hi, looks like an awesome tutorial, i’m always after inspiration so i’m going to try some of this i’ll let you know how it goes. I’m designing a website for suicide prevention so liked these bright colors.
http://www.creative-web-designer.com/
design blog http://www.scottydonald.com
Montgomery Says:
EXCELENTE, GRACIAS POR LOS TUTORIALES.
Henry Says:
Great post… excelent…!!!
http://www.crea-t.net
Shawn Says:
Great Tutorial!
what font is being used?
Mike Says:
Thank you for providing the source files as well. You do great work. Thank you for sharing. -chicago web design
KoOpa Says:
Great but now how coded this layout ? !
Satish Gandham Says:
Great post buddy, Thnaks for provideing the source files :)
MArk Says:
How would I slice and code this template, it looks very difficult, and has me confsued..
Are you doing a tutorial for it?
Thanks
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