Eco Style Navigation Interface

**Brandon Sheley** · 09-02-2008, 10:56 AM

Preview:

Eco Style Navigation Interface.

Step 1:

Let’s start out by creating a new file. I used a 1000×300 pixels canvas set at 72dpi, and I filled my background with white color. Now make a new layer set, name it Navigation Interface.
Now make a new layer and draw a long rectangle with #88C000 color shade and 800 px 40 px dimensions. Then under Layer Style(Layer > Layer Style) add an Inner Shadow and Gradient Overlay blending options.

Result:

Step 2:

Select the Horizontal Type Tool and set the font family to Verdana, bold, 10 pt, none and white color shade. In a new text layer type out your navigation links with a lengthy space between each link.

Step 3:

At the end of your green rectangular strip add a simple search box made of a white rectangle.

Step 4:

Create a new layer. At the end of your navigation interface draw a green rectangle with #8DC20A color shade and 48 x 27 px dimensions. Then use the Polygonal Lasso Tool to cut a triangle shape as shown below.

Step 5:

Select the Horizontal Type Tool and set the font family to Arial Black, 12 pt, crisp and whitecolor shade. In a new text layer type 'GO' on the button design. Then under Layer Style(Layer > Layer Style) add a Stroke blending option.

Result:

Step 6:

Now set the font size to 18 pt, in a new text layer add your name with black and #88C014 color shade for colors.

Step 7:

Create a new layer and draw a 1 px line with #618706 color shade across your navigation interface, below that add another line with #E1F5AE color shade.

Step 8:

Select the Rounded Rectangle Tool, under the options palette select Fill Pixels, set radius to 10 px and check anti-aliased. Now create a new layer and draw a green rounded rectangle with #88C000 color shade and set your own size with 40 px height. Then cut the bottom corners off so its straight.

Step 9:

Under Layer Style(Layer > Layer Style) add an Inner Shadow and Gradient Overlay blending options to your half rounded rectangle layer.

Result:

Step 10:

Here we added the title of our categories for the navigation links below.

Step 11:

In a new layer make a half white rounded rectangle like you did in step step eight. Then under Layer Style(Layer > Layer Style) add an Inner Shadow, Gradient Overlay and Stroke blending options.

Result:

Step 12:

Add a navigation link on the white button.

Step 13:

Add the rest of our navigation links with its own button.

Results:

Eco Style Navigation Interface.

**Soliloquy** · 09-03-2008, 10:41 PM

This is probably the most useful graphics tutorial I've ever seen. I'm sure I'll be using it someday. You should write another tutorial on how to integrate the new navbar into vBulletin

**Caddyman** · 09-05-2008, 06:36 AM

that is when cut and paste and view source comes into play

d/l and install a style with a graphical header

checkout how they did the header code

try and code that into the header you just made

prosper.

**Soliloquy** · 09-05-2008, 08:58 AM

Yes, and a basic tutorial expanding on that would surely be popular among newbies

**Caddyman** · 09-05-2008, 05:43 PM

i will check and see what i can do to make a quicky tutorial. shouldnt be too hard.....

the bottom solid bar could be done with just the standard navbar by tweaking the css and stuff

the top tabs can;t be too hard to code...

**Soliloquy** · 09-05-2008, 09:45 PM

all stuff a newbie would struggle wiith

**Caddyman** · 09-06-2008, 05:38 AM

alright if i can find some time tonight ill git-r-dun....or try to at least.

**Soliloquy** · 09-06-2008, 09:24 AM

Heck, you could even make an article out of it, Caddy

**Caddyman** · 09-06-2008, 10:43 AM

an article you say? hey i might, i guess anything goes with the articles we are supposed to post right?

**Soliloquy** · 09-06-2008, 02:07 PM

yes, Brandon did away with the required topic. I think a navigation tutorial like this would be a great article, the template system baffles a lot of newbies.
(Why am I suggesting article topics to my nearest competitor? Lol I'm probably going to kick myself over this one!)

**Caddyman** · 09-06-2008, 05:19 PM

well you can only win one spot right? and im thinking the article im working on now would be better content wise then a article like this, ill still try and make one though

**Soliloquy** · 09-07-2008, 12:05 AM

That's good Caddy, hope I don't have to kick myself, I'm kinda delicate that way

**Caddyman** · 09-07-2008, 06:53 AM

well i wrote my "for real" article last night and it is GOOOD...

**Soliloquy** · 09-07-2008, 08:13 AM

Did you post it yet? *starts looking around for it*

**Caddyman** · 09-07-2008, 07:15 PM

nope not posted yet, not sure if i should post it now or drop them all before the wire....ooOOoOoo

**Soliloquy** · 09-07-2008, 09:39 PM

Oh, ok, didn't know if I was just overlooking it or not. Well, maybe I shouldn't look at the blog until the contest is over then, I don't think I'm going to win those points anyway...

**Caddyman** · 09-08-2008, 04:31 AM

like my favorite yo gabba gabba song "keep trying, keep trying, don't giiiive up, never giiive up"

**Soliloquy** · 09-08-2008, 10:12 AM

never heard that song

well I started doing some research for one of my article ideas but it doesn't look like that idea will work out, so now I'm considering doing a puff piece...