In this Photoshop tutorial we’re going to learn how to create a nature inspired navigation menu sitting on grass for a website. 

Nature inspired navigation menu

Tutorial Details

• • Program: Adobe Photoshop
  • Version: CS5
  • Difficulty: Hard
  • Estimated Completion Time: 60 minutes

Final preview:

Stock Images

This tutorial uses free stock images and brushes:

Dirt texture:

http://www.sxc.hu/photo/1095376

Grass :

http://www.sxc.hu/photo/1284651

Ballons:

http://www.sxc.hu/photo/125653

http://www.sxc.hu/photo/1165461

http://www.sxc.hu/photo/1165461

http://www.sxc.hu/photo/1165462

Clouds brush:

http://qbrushes.net/nature/120-clouds-ps-brushes/

Grass brush:

http://qbrushes.net/plants/photoshop-grass-brushes/

Step 1. |

Start off with a new document with the settings below.

Step 2.

Create a new layer and name it earth. Open the dirt texture and use the Poligonal Marquee tool , make a selection like below and paste it in our new layer.

Step 3.

Create another new layer and name it grass. Open the grass image http://www.sxc.hu/photo/1284651 with the poligonal marquee tool make a selection like below

and paste it in the grass layer.

Step 4.

Behind the grass and earth layers create another new layer and fill it blue. Name it Sky.

Step 5.

On top of all layers create another one.Name it bottom grass.

Step 6.

Let`s grab a grass brush. We are going to use the stock one that Photoshop comes with. Set the background and foreground colours 2 tones of green lighter and darker and make a line of grass like in the image below:

Add it the following layer style colour overlay:

Step 7.

With the same bottom grass layer selected go to Edit-Transform-Flip verticaly. Move the layer at the bottom of the grass like in the image below:

Use the eraser with the settings below to erase a bit of the brushed grass from the surface of the real grass.

Add it a little dropshadow:

Step 8.

Create another new layer and name it upper grass. Use the same brush,settings and the same colour overlay like in step 6 and start brushing a line of grass like in the image below:

Step 9.

We are now going to merge the 3 grass layers. So first select the bottom grass layer and press ctrl+E. Then select the upper grass layer and again press ctrl+E.We are going to remain with the Grass layer.

Step 9.

We are going to give the all the grass the same vibrant unrealistic colour so go to Image-Adjustments-Hue/Saturation and use the settings below.

This is the result:

Step 10.

We are going to deal with the sky now. Select the sky layer. First we are going to create the sun. Go to Filter-Render-Lens Flare use te settings below.

Step 11.

Now let`s create the clouds. Use the clouds brush you can find the link at the top of the tutorial. Select the colour white, the settings below and add some random clouds. It`s not hard to achieve a great result.

Step 12.

Now let`s create the menu. Create a new layer and using the rounded corners rectangular shape tool and a gray colour create a shape like below:

Step 12.

Add the following layer styles:

Drop Shadow

Inner shadow

|

Gradient overlay

Result:

Step 14.

We are now going to add some grass that have grown over the menu. Using the stock grass brush add a little in the left and right of the menu like below:

Step 15.

Grab the grass brush from the link at the start of the tutorial and find the one sized 1024, resize it to about 960 with a green colour and brush it over the menu.

Erase the brushed grass from the real grass a bit.

Step 16.

We have finished the tutorial , add your text and the following settings below. Also add ballons and experiment untill you get a great result:

Inner shadow:

Gradient overlay:

Final result: