Article written

  • on 20.10.2007
  • at 12:33 AM
  • by Admin
  • with 28,161 views
  • 1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 5.00 out of 5)
    Loading ... Loading ...

Clean & Green Design 6

This tutorial will teach you how to create a layout with hot air balloons in a natural environment with a perfect blue sky.

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

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

weblayoutj1

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

weblayoutj2

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

weblayoutj4

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

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

weblayoutj7

weblayoutj8

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

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

weblayoutj11

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

weblayoutj13

weblayoutj14

weblayoutj15

weblayoutj16

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

Please Login or Register to download the source files.

subscribe to comments RSS

There are 6 comments for this post

  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. ahmed says:

    Nice work, I love it!

  4. Web Design says:

    Awesome. Simple technique, but effective. Thanks for sharing!

  5. Jasim says:

    Really nice tutorial. Simply awesome. Simple technique and lovely to watch. I love it ;) !

  6. Allawy says:

    Very nicely done mate, thanks for your tutorial!

Please, feel free to post your own comment

* these are required fields

PhoNuts is powered by WordPress.
Back to Top