ArtBox7.com

Create a green/eco friendly/environmental web layout (photoshop template)

Hello and welcome to another tutorial here at ArtBox7.com
Today I will create a green/eco friendly/environmental web layout (photoshop template) .
As usual, I will use Supreme Vector Set to create this photoshop template. If you don’t have it yet, I suggest you to buy it because it will prove useful for your design needs. Besides that  I will use it in all of my tutorials

Full preview

Let’s start it
Note:  Some steps dose require to  have Supreme Set in order to achieve the same result.

Step 1

Open Photoshop and create a new document (Ctrl+N) with this dimensions: 1024px by 1600px. For background choose white.

Step 2

Select gradient overlay (G), set this colors in gradient editor # bce0f8 ; # e5e5e5 than apply the gradient to your document

Here’s my result:

Creating Top – Header

Step 3

First I will create the logo. I will select rectangle tool and I will type ArtBox7.com. The colors used in the logo are : # 00aeef (blue), # 8cc63f (green), #FFFFFF (white) . The font used is: ” karabinE.”

Step 4

Create a new layer (Ctrl+Shift+Alt+N) and than using the Pen Tool create a similar path:

Step 5

Right click on the path created in step 4 (make sure that the Pen Tool is selected) and choose Make Selection

Step 6

Fill the selection with a green color and then apply the following layer styles:

Here’s my result:

As you can see I have obtained a hill. Next I will create another hill (repeat this steps: 4,5,6)

Here’s my result:

Now using the packs from Supreme Vector Set I will try to create a nice illustration. Here’s how:

Step 7

From Vector Clouds Pack 1 I will add some clouds:

Step 8

Using the Weather Vectors I will add another clouds + the sun

Step 9

From Retro/Funky Tree Vectors I will add some nice trees

Step 10

Using the Colorful Flower Vector Pack 1 I will add some flowers

Step 11

From Vector Grass Vector Pack I will add some grass vectors, to make the illustration more realistic

Step 12

Finally from Vector Birds Set 2 I will add some birds

The header is now finished.
Let’s create the navigation bar.

Step 13

Using Rectangle Tool (U) create a similar shape:

Step 14

Apply the following layer styles to the shape created in step 13

Step 15

Using  Pencil Tool I will draw 2 small lines (the width needs to be 1px) on the navigation bar.
For the first one (the whiter one) I have used this color: # f8f8f8
For the second one (the blackish one) I have used this color: # cacaca

Step 16

I will repeat step 15, and I will create more lines, than using the Type Tool (T) I will add some links to Navigation Bar. Here’s my result:

Step 17

Creating the featured area block

Select Rounded Rectangle Tool, with a radios of 4px , set the background to #FFFFFF and create a similar shape:

Step 18

Apply the following layer styles to the shape created in step 17:

Step 19

Select again rectangle tool, set the background color to # 95d023 and create a similar shape:

Step 20

From Supreme Vector Set I will choose Halftone Vector Pack 3 , I will select an vector element from this pack and I will add it above the shape created in step 19

Step 21

Next I will type  Supreme Vector Set and I will add an image with some vector packs.

Step 22

Using the type tool I will add some text on the right side also

The final step on the Featured Area will be to add a call to action button

Select Rounded Rectangle Tool with a radios of 4px and create a similar shape:

Step 23

Then apply the following layer styles:

Here’s my result:

Step 24

Duplicate the shape created in step 23, and apply the following layer styles:

Then with Type Tool add some text on the both shapes

Hree’s my result:

Creating the content area

Step 25

Select Rounded Rectangle Tool, with a radios of 4px , set the background to #FFFFFF and create a similar shape:
Mine has the following dimensions: 905px by 841px

Than apply the following layer styles:

Step 26

Using Rectangle Tool, create shape with this dimensions : 260px by 308px. Don’t forget to set the a white background (#FFFFFF).
Please note that my shape is a Grey one just to be visible (it serve for demonstration proposes)
Then apply the following layer styles:

My result:

Step 27

Using again Supreme Vector Set I will choose Halftone Vector Pack 3 and I will place an vector element on my newly created shape

Step 28

Now I will duplicate the shape and the halftone vector 2 more times.

Here’s my result:

Step 29

Using the type tool I will add some text and then I will add some nice images found on the web
Here’s my result:

Step 30

Next I will create a read more button. Select Rounded rectangle tool with a radios of 5px and create a similar shape:

Then apply the following layer styles and with the type tool add some text:

My result:

Step 31

Duplicate this shape 2 more times and place it like I did:

Step 32

Using the type tool and another image found on the web, I will create a larger post area:

The next step will be to create a quick contact form

Step 33

Duplicate the shape created in step 23 and add it on this zone:

Step 34

Using Rectangle tool create a similar shape:

Than apply the following layer styles:

Step 35

Duplicate the shape created on step 24 two more times. Don’t forget to enlarge the shape at the bottom a little bit like I did.

Step 36

Using Type Tool add your desired text

Step 37

Creating the footer

I will gonna using again Supreme Vector Set, more exactly Vector Clouds Pack 1

From this pack I will select an element and I will place it behind Content Area (you can see only s small part from this vector cloud – white area)

Step 38

Next I will duplicate the logo and I will add some copy write text

Well That’s all. Congrats if you read this lines. It means that you have followed me step by step. I hope you have obtained an astonishing result!

Download here Download all templates