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

psd52

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.

10

Step 2

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

11

Here’s my result:

12

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.”

13

Step 4

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

14

Step 5

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

15

Step 6

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

17

18

Here’s my result:

20

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:

21

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:

22

Step 8

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

23

Step 9

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

24

Step 10

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

25

Step 11

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

26

Step 12

Finally from Vector Birds Set 2 I will add some birds

27

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

Step 13

Using Rectangle Tool (U) create a similar shape:

28

Step 14

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

29

30

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

31

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:

32

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:

33

Step 18

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

34

Step 19

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

35

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

36

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

39

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:

40

Step 23

Then apply the following layer styles:

41

42

Here’s my result:

43

Step 24

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

44

45

Then with Type Tool add some text on the both shapes

Hree’s my result:

47

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

48

Than apply the following layer styles:

49

50

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:

52

53

My result:

54

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

55

Step 28

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

Here’s my result:

56

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:

57

Step 30

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

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

59

60

My result:

61

Step 31

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

62

Step 32

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

63

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:

66

Step 34

Using Rectangle tool create a similar shape:

66

Than apply the following layer styles:

67

68

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.

69

Step 36

Using Type Tool add your desired text

70

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)

71

Step 38

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

72

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!

Using the Weather Vectors (http://artbox7.com/120-weather-vectors.html) I will add another cloud + the sun

Download here Download all templates

ABOUT THIS AUTHOR

Hi, my name is Jeff and I'm the man behind ArtBox7.com. This blog was created to share my knowledge and in the same time to demonstrate the value of the Complete Designer Set All of our tutorials listed on this website have been created using our vector packs

  1. Malte Hansen
    August 14th, 2009

    Its pretty, but there is still a lot of finetuning yet to finish in my opinion.


  2. stron internetowych
    October 18th, 2009

    Nice pack. Thx a lot.


  3. Katie
    July 26th, 2010

    Congrats, your tutorial has been added to a list of the best Photoshop website layout tutorials, featured here:
    http://smileyhelper.com/inspiration/50-photoshop-website-layout-tutorials/
    :)

Leave a Reply