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

Clean and Green Design


1. Create a new document (750*800).

2. Fill the background with #0d8cb7 using the paint bucket tool.

image 1

3. Adjust the blending options (layer - layer style - blending options) for the background and add a gradient overlay with the following settings.

image 2

4. Add the following picture to the bottom of your design (click on it to view the image in a bigger size). You can also use your blur tool to remove the sharp pixelated edges!

image 3
Click to enlarge

image 4
Click to enlarge

5. Create a new layer (layer - new layer) and select a rectangular shaped box like shown in the screenshot below with your rectangular marquee tool. Then fill it up with #50eff5 using your paint bucket tool.

image 5
Click to enlarge

6. In this sixth step we're going to add some blending options (drop shadow and stroke) to the previously created layer from step 5. Use the following settings…

image 6

image 7

image 8
Click to enlarge

7. Now is the time to add some text to the menu so use your horizontal type tool to write somehting in plain white #ffffff so you end up with a design looking like this for now.

image 9
Click to enlarge

8. Add another picture to your design (click on it to view the image in a bigger size). Place it like shown in the picture below!

image 10

image 11
Click to enlarge

9. This step is easy… Add some hot air balloons to the top of your layout to give it a natural and nice looking touch! The images can be found below (there are 5 of them but you can add more balloons if you want to)!

image 12

image 13

image 14

image 15

image 16

10. Once I did this I had a design looking like this, the only thing left now is to add some text! The title is in #ffffff and #83f54e and the text is in #2f6f82! The font used in both texts was microsoft sans serif with a size of 20px for the title and a size of 9px for the content text!

Clean and Green Design
Click to enlarge


Author's URL: PhoNuts.org
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

No comments yet...
Add comments to "Clean and Green Design"

Captcha