Clean and green design


weblayoutj.jpg


weblayoutj17.jpg


1. Create a new document (750*800).
2. Fill the background with #0d8cb7 using the paint bucket tool.

weblayoutj1.jpg

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

weblayoutj2.jpg

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!

weblayoutj3.png

weblayoutj4.jpg

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.

weblayoutj5.jpg

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…

weblayoutj6.jpg

weblayoutj7.jpg


weblayoutj8.jpg

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.

weblayoutj9.jpg

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!

weblayoutj10.png

weblayoutj11.jpg

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)!

weblayoutj12.png

weblayoutj13.png

weblayoutj14.png

weblayoutj15.png

weblayoutj16.png

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!

weblayoutj17.jpg

Please Login or Register to download the .psd file.

  • Digg
  • del.icio.us
  • StumbleUpon
  • Technorati
  • Facebook
  • Google
  • De.lirio.us
  • Live
  • NewsVine
  • Sphinn
  • Mixx
  • Furl
  • Ma.gnolia
  • Propeller
  • Simpy
  • BlogMemes
  • Blogsvine
  • Netvouz
  • Taggly
  • TwitThis
  • Yahoo! Buzz

7 Responses

  1. MARiA Says:

    I love it. The layout reminds me of a summer day. [:

    Very clear instructions. I recommend this layout for photoshop beginners.

  2. Tyusha Says:

    awesome. its very pretty :]

  3. Nouman Says:

    Nice yar …
    any one tell me how i can insert urdu in Photo shop please

  4. ahmed Says:

    nice work i love it

  5. Web Design Says:

    Awesome. Simple technique - but effective.
    thanks for sharing!
    DM

  6. Jasim Says:

    Really a Nice Tutorial.. Simply awesome .. simple technique and lovely to watch.. I love it

  7. Allawy Says:

    Very nice done mate, thanks for your tutorial !

Leave a Comment

Please note: Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment.