Subscribe Via RSS

3910 Subscribers

Subscribe Via RSS
Subscribe Via Twitter

Followers

Subscribe Via Twitter
Web Design Layout #2 Tutorial

October 10th, 2007 in Photoshop Tutorials by Richard Carpenter

Web Design Layout #2 Tutorial

1 Star2 Stars3 Stars4 Stars5 Stars42 Votes, Rating: 4.33
Loading ... 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.

About The Author

About The Author: Richard Carpenter

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

 

Richard Carpenter has written 364 posts.

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

96 Responses to “Web Design Layout #2 Tutorial”

  1. Nomad says:

    This a great tutoria

  2. Nomad says:

    This a great tutorial

  3. Lori says:

    How would you slice and code this layout?

  4. Lee says:

    Where can I download these spatter brushes?

  5. ADMIN says:

    search for a website called

    “brusheasy”

  6. Demo says:

    So how do you make this html with links and junk?

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

  8. Montgomery says:

    EXCELENTE, GRACIAS POR LOS TUTORIALES.

  9. Henry says:

    Great post… excelent…!!!
    http://www.crea-t.net

  10. Shawn says:

    Great Tutorial!

    what font is being used?

  11. Mike says:

    Thank you for providing the source files as well. You do great work. Thank you for sharing. -chicago web design

  12. KoOpa says:

    Great but now how coded this layout ? !

  13. Great post buddy, Thnaks for provideing the source files :)

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

  15. Lenny says:

    Brilliant tutorial! What font are you using here by way?

  16. lhoylhoy says:

    please also include tutorial on how to code this on css/xhtml thanks!

  17. nice blog

  18. ferhat says:

    thank yu

  19. sikis izle says:

    perfect article. thnx ADMIN

  20. Simiys says:

    Where to me to download ready psd a template? Please send the reference to an e-mail: trunin-artm@yandex.ru !

  21. angry-bull says:

    hahahahahahahahaha,,,,,,,u r dengerous

  22. That tut is awesome, I have ideas for my new banner.thanks mate.

  23. I am not so good with graphics but your tut gave me a new impetus to come up with such quality work.

  24. Slicing such a design is the next option in making the graphics a website. This is where art meets science.

  25. This is a amazing tutorial.. Nice work

  26. Nive design but it would make the coding part quite difficult… you would have to rely overly on images for the entire page… would make it pretty heavy…

  27. Tanmay says:

    Iam confused on dis 1
    i hv made dis design
    but dis is only d home page
    how can i edit those other pages n den host it ??

  28. Ok great! these sites sure sound promising. Wonder why I didn’t find it out before. Thanks

  29. yaekiong says:

    i am just want to learn about phososhop web design

  30. yaekiong says:

    your work very good ^^

  31. good work

  32. kenichifc says:

    thanks for tutorial. Love it, simple and effective :D

  33. Abhinash says:

    nice tutorials and design like it..

    can i use this for my own site?

  34. Aaron says:

    Of course you can use the design you created in the tutorial for your own site :)

  35. Andrew says:

    Amazingly amazing…
    And it wasn’t that hard to be done!

  36. Andrew says:

    When I rotate my rectangle filled with blue the edges take kind of zig zag, can someone tell me why?

  37. ashok says:

    it’s great website

  38. thoufeeq says:

    thank u i like it

  39. how do you slice and code this template?

  40. manoij says:

    thank for like this

  41. very amazing template..thank you…

  42. this is quite amazing way of explaining and the talented design too…I would like to create one design like this for my future work

  43. I would love to create something like this. Sadly, I lack the skills.

  44. perter harvay says:

    i want to make a interface for my web 3D,but i don’t know where start.help me!

  45. Amazing……
    I like it …
    I like blue and black…
    Thank….

Leave a Reply