Worthy Clicks


Search HV-Designs


Tutorial Categories


HV-Designs Flickr Group

Join the HV-Designs Flickr Group


Tag Cloud


Subscribe & RSS Readers

Enter your email address:

Be notified of important updates.



Subscribe to hv-designs rss feed

Web Design Layout #2 Tutorial

Posted on October 10th, 2007.

8 Votes, Rating: 4.631 Star2 Stars3 Stars4 Stars5 Stars
Loading ... Loading ...


Learn how to create a paint splatter web design layout.

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.

E-mail Del.icio.us Digg Reddit Technorati Furl Stumble Design Links

Tags: , ,

12 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!


Leave a Comment