Create a nature inspired layout in photoshop
In this tutorial I will show you how to create an unusual website layout inspired by nature. If you have the right photos you will need less than 30 minutes to complete this layout. This type of tutorial was requested by Grafpedia Members.
If you want to download this layout you need to apply for a VIP account. The cost is 49 $ and it will allow you to download all our VIP resources
Create a new document with the following size: 960 x 900 pixels. I will select Gradient Tool, and I will draw a vertical gradient with the following colors : #2c6ed5 on the top and #ffffff on the bottom.
I will download the following set of cloud brushes
Load the brushes in Photoshop, and on a new layer add some clouds over the layout.
Select Rounded Rectangle Tool and create a white shape in the middle of the layout
For this white shape add the following layer styles
I will add some stock images with nature elements.
After that I will add a stock image with a tree and some flowers
On the top of the layout I will add a image with a ladybug and a butterfly.
Now I will add a navigation bar on the top of the layout with Rounded Rectangle Tool
For this navigation bar I will add the following layer styles
This is my result
With Type Tool I will add the text
On the bottom of the layout I will create a shape. You can place there some images with your latest clients, or your latest work.
Over this white shape I will add some image spots. you can add here whatever you want.
On the left side and on the right side I will add a simple button. It will allow your users to browse through your latest work. I have used the same layer styles I have used for the navigation bar, and the arrow was made with a custom shape tool.
This is my final result.
Do you want to download this layout ? Apply for a VIP account and you will be able to download this PSD layout together with our entire collection of VIP downloads. It is a crazy deal. For 49 $ you can download all VIP resources.
100% guaranteed 350-018 exam preparation with certified 350-029 materials! Pass your certification exam within days through online E20-001 test preparation.
good design. Thank you post.
Brilliant! love the result… thanks for posting
Very nice design, thanks for the tutorial.
The thing i am finding difficult is not the actual design but how and where to get all these “stock images” from and adding them to the design as the tutorial just says i will add some stock images of trees.
But fantastic website layout!!!
great tutor…i like the result
I love the layout and will definately be using parts of this for my portfolio, is there any hance you could post the code to make the simple buttons work and how to use the displaybar?
Nice design, but when you slice it up that footer bg will take some adjustment to span across 100% and look fluid.
Very nice!
WoW
Awesome layout tutorial . Well defined and easy to learn . I will create my own layout to follow this tutorial. Thanks for sharing this awesome post.
I didn’t even realize Grafpedia got a new look, the site looks amazing! If you’d ever be interested in having a small interview for my web 2.0 blog definitely let me know.
nice layout, thanks for the tut..
Very beautiful design.
Good design ! Well done ! Thanks for sharing.
Good post.