Posted on September 17, 2008 - by Matthew Heidenreich

Quickie: Create an Environmentally Friendly Layout

Introduction…

In this tutorial you will learn how to create a environmentally friendly web layout with a tabbed navigation at the top. This takes our tabbed content box tutorial one step further.This is a quick and short tutorial, but If you have any questions, please remember to use the comments below to get them solved.

Download the PSD…

Don’t have time to do the tutorial, but would like to see the results? The PSD is available to anybody who would like to use it.

Lets get started…

1. First lets create a document around 1000×600.

2. First thing we want to do is change our background color. I want to make it a nice green, so we want to add these blending options to your background layer.

3. You should have a document with a washed out green look to it. Next, go ahead and download this texture, and put it on your document. Change them blending mode of the texture to Linear Burn and you should have something that looks like this:

4. Next, get out your rectangle marquee tool and make a selection similar to the following and fill it with #75a414 on its own layer.

5. Again with your marquee tool, make another similar selection and fill it with #639013.

6. Next thing we want to do is to get out our Rounded Rectangle Tool with a radius of 5px and make a rectangle similar to the following:

7. We want to go ahead and add a nice tabbed navigation at this point, so lets use our rounded rectangle tool again to make a selection similar to the follow under our main content box, and choose a simple text of your choice and label your button ‘home’ with #639013.

8. Next, we want to go ahead and create a few more tabs. Go ahead and copy your first tab and place it accordingly.

9. This time we want to add a couple blending options to this layer to show that it is not an active tab, so right click its layer and choose blending options and insert the following

10. Go ahead and insert some more text on this layer, but this time make it white. Your results should look very similar to this:

11. Now repeat steps 8 through 10 as many times as needed and you’ll have something that looks like this:

12. Now you can add some content and you’ll have something that looks like this:

**If you have any problems, or have any questions about this tutorial, please leave your comments and I will get back to you. Also, remember the PSD to this tutorial is available for download.

If you enjoyed this tutorial, why not check out our other Adobe Photoshop Tutorials?