Subscribe Via RSS

3800 Subscribers

Subscribe Via RSS
Subscribe Via Twitter


Subscribe Via Twitter
The Design Lab #2

November 11th, 2009 in Photoshop Tutorials by Richard Carpenter

The Design Lab #2

1 Star2 Stars3 Stars4 Stars5 Stars22 Votes, Rating: 4.64
Loading ... Loading ...

Hello welcome to another tutorial by hv-designs. In this tutorial il be showing you how to make a simplistic colourful web design layout from scratch using photoshop.

Let’s Get Started!

Create a new document 1200 x 1200 pixels with a white background.


Set your foreground colour to #151515, then fill your background using the paint bucket tool. Were now going to setup two guides so our layout stays within the center of our canvas, and has a maximum width of 900 pixels.

In the menu at the top go to “view > new guide”, in the box that pops up enter 150px. Repeat the step only this time enter 1050px.


Preparing Our Wooden Texture

For the header were going to use a wooden texture, the texture ive decided to use is by “Matt Hamm“, you can grab the texture from his flickr page.

Once you have the wooden texture drag it over onto your canvas. When the texture is on your canvas you’ll notice it maybe a bit too big so were going to resize it by 30%. Press ctrl + t to access the free transform tool, at the top of the screen you’ll see a little chain icon. Click the chain icon then enter 70% in the W: and H: fields.


Place the newly resized wooden texure in the top left hand corner of the canvas. Duplicate the wooden texture and place it next to its orginal. Keep duplicating the texture moving it next to the last one until you reach the other side of the canvas.


Once you reach the other side of the canvas merge all the wooden texture layers into one layer. Now go to “image > adjustments > hue/saturation” then colorize the wooden texture using the settings below.


Creating The Header

Select the rectangular marquee tool and make a selection around the whole wooden texture, leaving about 60px at the bottom of the texture.


Cut and paste the selection to a new layer, then re-align the texture you just cut back up with the 60px left over. Once re-aligned hide the small part of the wooden texture then add a drop shadow to the big part using the settings below.


Unhide the smaller part of the wooden texture then add a layer mask. Drag a linear gradient from the bottom of the texture to about half way up. The effect were looking to get is like a reflection, you should have something like this.


Select the rectangular marquee tool and make a selection around one of the floor boards.


Fill the selection with shade of red, do the same for the next floor board only filling the selection with a new colour, repeat the process until you have something like this.


Set each layers blending mode to “soft light”, you should now have something like this.


Duplicate all the colours then move the duplicate colours over until you have reached the right guide.


Adding The Header Elements

Select the rectangle tool or the rectangular marquee tool and make a black rectangle at the top of the canvas. Inside the black rectangle add the title of your website in white text. Mines called the design lab, so my first word would be “the” inside a black box.


Press ctrl + t to free transform the black rectangle. Rotate the black rectangle just a little bit.


Do the same for the text only rotate slightly in the opposite direction. Select your text layer then set the layer blending mode to “soft light”, then select the rectangle layer and set the opacity to 40% and the blend mode to “hard light”.


Repeat the steps above for each word in your website title, try randomizing the rotations of the text and rectangles. You should have something like this.


In the top right corner of the header add some social network icons, search bar or something you need for your website. I’ve opted for some social icons by “Jan Cavan“.


Creating The Featured Area

Select the rounded rectangle tool with a radius of 10px.


Drag out a rectangle underneath your header, make sure the rectangle stays within the boundries of the guides.


Add these layer styles to the featured rectangle.





Using the rectangle tool or the rectangular marquee tool create a black rectangle inside the feature rectangle. Rotate the rectangle ever so slightly using the free transform tool.


Load a selection around your black rectangle then contract the selection by 10px by going to “select > modify > contract”. Once you’ve contracted the selection paste an example image inside the selection.


Finish off the image by adding a shine effect by using the pen tool. Were now going to add some left and right arrows, select the arrow shape from photoshop’s custom shapes menu.


Drag out the arrow any where on the canvas filling the arrow with the colour white. Make a selection around the backend of the arrow.


Extend the arrow a little bit, then go to “edit > transform > warp”. Select the top and bottom left anchor points and drag them up so the arrow starts to bend.


Set the arrow’s opacity to 60%, add a drop shadow using the default settings then duplicate the arrow and place one on the right of the image. On the right side of the image add some example featured text.


Creating The Navigation

Select the rounded rectangle tool still with a radius of 10px, on a new layer underneath your featured area drag out a small rectangle.


Duplicate the rectangle as many times as needed.


Add your navigation text to each black rectangle.


Set each buttons layer opacity to 70% then free transform each button rotating them slightly either left or right. Load a selection around your featured area then go through and select each individual button, once selected hit the delete key, this should remove the excess button from behind the featured area.


Creating The Content Area

Create a big rectangle using the rounded rectangle tool with a radius of 10px. Keep the rectangle within the boundries of the guides. Copy the layer styles from the featured rectangle and paste them onto the content rectangle.


Inside the rectangle add your content, i’ve gone for a simple 3 column look with some nice bold headings.


Creating The Footer

Using the rectangle tool create a rectangle underneath your content area, fill the rectangle with any color then copy and paste the layer styles from either the content or featured rectangles.


Make a selection around your coloured header the same width as the footer. The selection doesnt need to be any higher than about 20-40px. Once you’ve made the selection go to “edit > copy merged” then paste the selection onto the footer at the bottom of the rectangle.


Finish off the footer by adding your footer information.


The Finished Concept


Hope you enjoyed this tutorial, many thanks for reading dont forget to DIGG and RE-TWEET my post. Your help is greatly appreciated, thanks.

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

44 Responses to “The Design Lab #2”

  1. Abraham says:

    Great tut – always come out with good layouts :P

    Will you be converting this to CSS & XHTML?


  2. dronix says:

    hey great looking layout, and thank you for the tutorial. Would there ever be any vid tutorials?

  3. Elijah says:

    I am new to your tutorials. But i love em. They gives me a push to creating my own designs.
    Thx for your work;).

  4. MI says:

    Cool Layout! Looking forward to XHTML/CSS tut! ;)

  5. DxDesigns says:

    Looks great, would love to see this get coded!

  6. xRommelx says:

    xhtml/css please

  7. No1 says:

    Always something new but yet so simple ;)

  8. -darkmonster- says:

    Yes sir! can you convert this CSS & XTML.. it will help to much to me.. I learn new things every time i read your tutorials.

    Thanks and more power!

  9. David says:

    You must have been reading my mind. I was looking for a wooden header design for a project I am working on. In my case it represents the white wooden decor for a tropical guest house. Will try a white colour overlay and colourful website alternative.

  10. Webjohn01 says:

    Hello Richard!

    Very nice tutorial and I really enjoy reading it and at the same time learning something new.hoping for the XHTML/CSS conversion.

    Keep up the good work.

    More thanks!

  11. Asker says:

    nice tutorial

  12. Steve says:

    Nice Tut once again Richard.

    Not completely to my design tastes, but all the same nice techniques and tips revealed.

    Many thanks for another good read.


  13. mustapha says:

    great work
    i like your touch when you play with the color in the header

  14. N Mahale says:

    we all know the tools , but how to use and where to use is problem and thats you did . really great idea.

  15. SkullTraill says:

    YAYAYA!!!! Cooool!!

  16. Thanks for your comments much appreciated.


    no i wont be doing any video tutorials at this time, sorry.

    @EVERYONE ELSE regarding HTML and CSS, there won’t be a follow-up tutorial unfortunetly. But stay tuned as il be writing some PSD sitebuilds soon.!

  17. Ahmed says:

    Very nice tut


  18. kobs says:

    thanks … great work..

  19. I don’t really like this Design, it looks unprofessional, and I thing “Design Studios” have to look professional. But I love your other Tutorials, and have learned so much from you, great work at all. #


  20. Regidan says:

    nice tut thanks bro

  21. very nice tut….

  22. hitesh says:

    i like your layouts very much and especially your techniques. i have a small question i have started to make websites from photoshop to css & xhtml till now it is going smoothly but i am stucked that how to add blog post title to the static websites like you have done to your please tell me the solution i know that this is not the right place but if you can please or give the hint

  23. squab says:

    My face will get tired coz of sayin’ Yho… a lot

    dankie bro

  24. Almas says:

    Thank you. Nice! :)

  25. Umar says:

    how to put a pic in dp…..???

  26. eric says:

    Hello and congratulations to the tutorials that we offer you on your site I learn a lot with what we offer you thanks for your help Could you give us the tutorial for creating website “cut and hand coding Thanks in advance Eric

  27. botarab says:

    very nice tutorials
    thank you

  28. Dayday says:

    Why don’t you people stop asking for the css/html and MAKE IT YOURSELF….Thanks for the design. I swear, people complain so much they are never happy….sheesh.

  29. vanickers says:

    About the Navigation:

    “Load a selection around your featured area then go through and select each individual button, once selected hit the delete key, this should remove the excess button from behind the featured area.”

    I am having a hard time deleting the excess shape. After I load the selection of the featured, should i simply select the layer of each individual button one at a time then delete???

  30. vanickers says:

    oh.. i am able to delete it now. i should have rasterized the button first to be able to delete. =)

  31. vanickers says:

    if i slice the images to prepare my xhtml and css, will the opacity properties of the images still apply when preview in browser?

  32. Mike says:

    This is a great design really, really cool. I have learned alot following this tutorial as well. Keep up the good work and thanks for making the tutorial.

  33. Frank says:


    Is there a change you could make a tutorial about: how to make the web layout’s work in dreamweaver? I’m a bit of a beginner when it comes to websites.

    With kind regards,


  34. yethusoe says:

    Thank u !

  35. Maulik Suchak says:

    very very nice work :)

  36. Que notable, muy bueno tu diceƱo

Leave a Reply