Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Natural Green Layout

Natural Green Layout


1. Create a new document (700*550).

2. Fill the background with #ffffff using the paint bucket tool.

3. Add the following picture to your design (click on it to view the image in a bigger size) and place it like this.

image 1

4. Adjust the blending options of the layer (layer - layer style - blending options) we've just created and add an inner glow with the following settings! This is needed to remove the shadows we don't need!

image 2

5. Now use your rectangular marquee tool to select a line with a height of 2px like this and fill the selection with #72aa21 on a new layer (layer - new layer)!

image 3

6. Now use the same foreground color to select your menu buttons and create a new layer… This isn't as east as it looks so let's get started. Select your rectangular marquee tool and select a shape like you can see in the first picture and fill it with #72aa21.

image 4

7. Now go to (select - modify - smooth) and change the sample radius to 3px and click ok! Now go to (select - inverse) and press the delete button so you end up with some smooth corners for your button! Duplicate that layer 2 times or more of you want to.

Click to enlarge
Click to enlarge

8. Now select all the button layers one by one and use your rectangular marquee tool to select everything under the green 2px line we've created in a previous step. Press the delete button to remove the part of the menu button that we won't need so you end up with the following!

Click to enlarge
Click to enlarge

9. Now select a 10px high box under the menu and fill it with white #ffffff on a new layer, and then adjust the blending options and add a pattern overlay with the following settings!

image 7

10. If you want to, you can duplicate the previous layer we've created in step 9 and use it as a footer like I've done in this picture.

Click to enlarge
Click to enlarge

11. Our tutorial is already finished but I'm going to help you adding text using the right colors! So grab your horizontal type tool and type a site title next to the tree and the little man… The colors I used were (#4da300 = green), (#ffba00 = orange), (#b5b4b4 = light grey), (#949494 = dark grey).

Click to enlarge
Click to enlarge

12. I've also added some sort of logo above the site title (it's just an example, don't use a cow on a real site), I used a brush and created it on a new layer in this #72aa21 color.

Click to enlarge
Click to enlarge

13. I've just added some more demo text to the content box and the menu in #888888 and #ffffff in this final step and we're finished!

Natural Green Layout Tutorial: Final Result (Click to enlarge)
Click to enlarge


Author's URL: PhoNuts.org
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Natural Green Layout"

Only registered users can write comment

No comments yet...