TutsArena

EcoZone: design a green business website

by TutsArena - Templates, Tutorials

Nowadays everything is about green technologies, green business, ecologically clean products. For a web designer, it may be very probable to encounter a client, who needs just such a web site design. Ste Story teaches you how to do just that.

Final Outcome:

Click the image for a full-size version

Step One: Starting Off

First off, open up your photoshop and make a new image. I used roughly the dimensions 890×790 but it’s often a good idea to make the image slightly larger then you need then just crop it down to the desired size once your design is in place.
If it isn’t already, fill your background layer with white.
Next grab the gradient tool and set your foreground colour to a nice green (or whatever main colour you want to use), and your background colour to white. Create a linear gradient down the page to make a nice background.

Step Two: Header

Using a free stock exchange website such as www.sxc.hu find yourself a nice repetative image to go over the background. As I’m making an eco website I got a stock of some grass.

Paste it onto your image, and resize it so it fits on your page and looks right. Then set that layer to Multiply on 30% Opacity and it will blend nicely into your gradient.

To create the logo I just used a standard font (Walkway) but consciously used capital letters to improve the look of it – along with a pixel font (Silkscreen) to add a tagline.
I also brushed a little flower on to match the “Eco” style. If you search deviantART for floral brushes, you’ll find some similar brushes for you to use.
I then added this outer glow to the logo layers, to make it stand out more:

I also added some simple text with the text tool to the other side. Remember – when adding small text, always ensure that Anti Alias on the text toolbar is set to “none” and not “Sharp/Crisp/Strong/Smooth”.

Step Three: Banner / Navigation

Due to the way they’re designed we need to do the banner and navigation in one tutorial step.
Grab the rectangular marquee tool and make a selection on the page that goes from just below the logo, right down to where the gradient ends and roughly 50px in from the side of the page. Fill that layer with white.

For the navigation tabs, grab the rounded rectangular tool and make a small white shape (the size you want the tabs to be). Move the layer below the white rectangle layer you just made, and duplicate the layer for as many tabs as you want.
Spread them out evenly and using the text tool, add your text links onto the page. When choosing the colour for the text, use the eyedropper tool and pick a colour from the background.

Now we’ll make the banner. Using the rectangular marquee tool, make a selection for where you want the banner, and on a new layer fill it with the colour you used for your navigation text. Then add the below blending option.

Grab the eliptical marquee tool and make a selection like below.

Using the gradient tool, choose white as your foreground colour and the foreground to transparent gradient from the toolbar. On a new layer Drag from the top of the selection to the bottom. Set the layer to Overlay at 48% opacity.
Then repeat this step for the bottom of the banner, but use black as the foreground colour and set this layer to Soft Light on

Grab a copy of the logo you designed earlier, and make all the layers black (rasterize then and press ctrl+i to invert the white to black). Set the layers to SoftLight and move it down onto the banner.
Then add some text below the logo, and choose the colour from the logo.

Then add a suibtably styled “Read More” button. If you look in the PSD supplied you’ll be able to see how this one was done.
A tutorial on creating buttons will appear on TutsArena very soon so keep checking back to see in detail how to create this button and many more.

Then I added a stock image of a map of the earth. Using the magic wand tool, I deleted all the sea so we’re just left with the land.
I then pressed ctrl+u and put Lightness on +100 to make the land all white. Then finally I added a white outer glow.

Step Four: About Us Box

Using the rounded rectangular marquee tool and ensuring “paths” is selected, make a selection for where you want the box to go.

Right click, press “Make Selection” and press ok. Then make a new layer and go to Edit>Stroke and add a 5px stroke using a medium grey.

Again using the rounded rectangular tool, make another selection and on a new layer fill it with a dark colour taken from your banner.
Then, as in Step Three with the banner, make a new selection using the eliptical marquee tool and using the gradient tool, choose white as your foreground colour and the foreground to transparent gradient from the toolbar.
On a new layer Drag from the top of the selection to the bottom. Set the layer to Overlay and play with the opacity until it looks good.

Using the text tool, add a bold title onto the sub-header you just made, and your content.

Then I added a small image with the below blending options to make it look good and fit onto the page:

Step Five: Recent Clients Box

Using techniques you learnt in Step Four, you should be able to create the Recent Clients Box. As usual, if you struggle please do check with the PSD supplied with this tutorial for your learning.
For the recent client images, I just went got the images, went to Image>Adjustments>Desaturate and lowered their opacity until they looked good.

Step Six: Quick Contact Box

Again, this is one step you should be able to do soley from the techniques learnt in the previous steps. Make your box as usual, and add your header and text.
For the three boxes; simply use the same technique as you did in Step Four to make the green headers, and then go to Filter>Noise>Add Noise and add some 1px Monochromatic Gaussian noise.
Then add the blending options that you used at the end of Step Four:

Step Seven: Content

Now let’s add our content. Using a dark grey add a large header or strapline.
Now for the main content. I used a slightly lighter colour and Tahoma font. Remember, for small fonts like this DO NOT use anti alias.
Also remember to to mix it up a bit by using a variety of Bold/Normal and colour/grey – just to keep things interesting.

Step Eight: Footer

Now lets make the final piece, the footer. Make a new layer, grab the rectangular marquee tool and make a selection right across the bottom of the page.
Set your foreground and background colours to a dark and medium grey. Using the foreground to background gradient tool, drag from top to bottom.

Now using the single row marquee tool, make a selection a couple of pixels below the top of the footer layer. Hit delete.

Now go to Filter>Noise>Add Noise and press ok (keep the same numbers you used in Step Six)

Now using the rectangular marquee tool make a selection right across the page, covering the central half vertically. Fill that layer with a colour from the banner.

Add these blending options:

Then using a pixel font I added the copyright and footer information, aswell as a copy of our logo.

Finished Product

And there we have it! Finished!

Click the image for a full-size version

Download template