Dark Interface NavBar Photoshop Tutorial

HomeHome

H₂OH₂O

ForumForum

TutorialsTutorials

» Adobe Photoshop

» Our Tutorials » User Submitted

» CorelDRAW

» Macromedia Studio

» Flash » Fireworks

» Corel Paint Shop Pro » Webmaster Articles

» Close «

DownloadsDownloads

» Website Templates

» Photoshop Downloads

» Brushes » Layer Styles » Patterns

» Forum Skins

» InvisionFree Skins » ProBoards Skins

» 3D Abstract Models » Affiliate Banners » Signature DK's » Avatar Packs » Wallpapers

» Close «

MiscMisc

» About Us » Contact Us » Meet the Staff » Web Services » Webdesign Portfolio » Affiliate with Us

» Close «

Resource PartnersResource Partners

Cheap Web Hosting
Best Web Hosting
Sezza Web Directory Affordable web hosting ServerRhino Web Hosting Businesses for Sale UK

PollPoll

What is the difficulty is it to navigate around Imusion Studio?

StatisticsStatistics

Hits

31 Guest(s) Online

0 Member(s) Online

77477 Posts

9675 Members

Latest Member: MUassibrarm

AffiliatesAffiliates

Show All
Link to Imusion

Imusion Studio - Innovative Ideas, Innovative Designs

Welcome Guest! (Login or Register)

Photoshop Tutorial

Dark Interface NavBar

Views: 13578
Comments (33)

Rate:

Currently 2.97/5 Stars.
1
2
3
4
5

Description: Design a very eye catching navigation bar for a dark interface website.

Written by: Imusion

Step 1

Change your Background Color to #232323 then create a new document.

Step 2

Create a New Layer then take the Rounded Rectangle Tool. Then Press X to switch your colours around so your foreground colour is #232323.

Step 3

With the Rounded Rectangle Tool click and drag a shape to look like a navigation bar, you shouldn't see anything when you let go, becasue it is the same color.

Step 4

Now while your on "Layer 1"(should be the layer that is active already) go to the Blending Options and create a black outer and inner glow.

Step 5

Now lets Load the Selection of this layer. The little navigation bar should be selected now.

Step 6

Lets reset your colours now. Then grab the gradient tool and from above your selection you want to drag down to about the midpoint of the navigation bar like shown in the image below. It dosen't have to be EXACT, just roughly, experiment with going down more or less and see what you like.

Step 7

Now you can add whatever text you like to the navigation bar. If you want to make inset lines to seperate each button then follow this step. Create a New Layer then grab the pencil tool. Change the brush to a solid circleish brush and have the diameter at 1px.

Step 8

You should have white and black as your foreground/background colors. Zoom in until you can clearly see the navigation bar top and bottom pixels. With the pencil tool drag a line down. Then change to the other color by pressing X and drag down on either side of the line you just made before, doesn't matter which side. Then finally change the blending mode to Overlay.

Final Product

And your done, doesn't that just look dandy?!?

Comments

Comment #1

fusionx2

Status: Offline

Very nice and useful tutorial John. One of you best yet in my opinion.

Rank: Senior Imusioner

Thursday June 23rd, 2005 at 8:09 AM

Comment #2

Johnathan

Status: Offline

Thanks, I knew you'd like it:p

Rank: Forum Administrator

Friday November 12th, 2004 at 2:25 AM

Comment #3

Johnathan

Status: Offline

test

Rank: Forum Administrator

Friday November 12th, 2004 at 5:03 AM

Comment #4

Johnathan

Status: Offline

Yep.

Rank: Forum Administrator

Saturday November 13th, 2004 at 4:32 AM

Comment #5

Johnathan

Status: Offline

Again

Rank: Forum Administrator

Saturday November 13th, 2004 at 4:35 AM

Comment #6

Guest: anonymous

Status: Offline

shit

Rank: Guest

Wednesday November 24th, 2004 at 9:18 PM

Comment #7

Guest: nnzeo

Status: Offline

i cant work out how to do it when i press ctrl + A it selects the whole thing then when i press down it just moves down!

Rank: Guest

Wednesday November 24th, 2004 at 9:19 PM

Comment #8

Johnathan

Status: Offline

Yeah thats the point, when you press down the round selection is made and just follow the steps and you should be fine. ;)

Rank: Forum Administrator

Tuesday November 30th, 2004 at 11:20 PM

Comment #9

Guest: Zero

Status: Offline

Stuck on step 5 I hit ctrl + a it works but when I hit down it just says I nudged the outline.

Rank: Guest

Thursday December 2nd, 2004 at 1:12 AM

Comment #10

Guest: Zero

Status: Offline

I tried going onto the next step with my problem but it says the content lable is not editable after trying to use the gradient tool

Rank: Guest

Thursday December 2nd, 2004 at 1:14 AM

Comment #11

Johnathan

Status: Offline

Your probably having something wrong with the layers. Make sure the layer you are on is "Layer1" if your not then I'd advise you to restart the tutorial paying extra close attention to step 2.

Hope I can help!:)

Rank: Forum Administrator

Friday December 3rd, 2004 at 6:09 AM

Comment #12

Guest: MenZa

Status: Offline

Looks quite nice. Good job, thumbs up.

Rank: Guest

Sunday May 8th, 2005 at 12:43 PM

Comment #13

Guest: anonymous

Status: Offline

I'm stuck on step 6 because it's not possible to use the gradient tool.

"Could not use the gradient tool because the content of the layer is not directly editable"

Rank: Guest

Thursday May 19th, 2005 at 7:52 PM

Comment #14

srsizzy

Status: Offline

I'm not very good with HTML, if you're making seperate links on one picture...well, how do you do that?

Rank: New Imusioner

Sunday July 10th, 2005 at 2:18 AM

Comment #15

Johnathan

Status: Offline

I'm sorry but I don't understand your question srsizzy.

Your probably on the wrong layer anonymous.

Rank: Forum Administrator

Sunday July 17th, 2005 at 9:46 PM

Comment #16

Guest: chris

Status: Offline

srsizzy - thats called an imagemap, you must specify coordinates for each "area" that you want to be a link or "hotspot" (in dreamweaver)

might be best to slice up an image instead, so you have multiple images, but it depends on the situation..

Rank: Guest

Monday July 18th, 2005 at 4:20 PM

Comment #17

Guest:

Status: Offline

The problems that some people may also be having is that they use the round rectangle tool, and you cant edit that. You must rastirize the layer first by right clicking on the object with the rectangle tool selected, or by right clicking on the shape 1 layer. This should be done before you do step 5 to acheive the right results.
Just some help, Have Fun!!

Rank: Guest

Monday August 22nd, 2005 at 4:13 AM

Comment #18

Guest: pancake

Status: Offline

in step 5 when it says load the selection of that layer...what u have to do is go to the layer hold down ctrl and click on the layer image

Rank: Guest

Friday August 26th, 2005 at 8:33 PM

Comment #19

Guest: 45

Status: Offline

SWEET TUT MAN

Rank: Guest

Friday September 30th, 2005 at 1:15 PM

Comment #20

Guest: AxE

Status: Offline

Nice tutorial.

Rank: Guest

Thursday October 27th, 2005 at 5:59 PM

Comment #21

Guest:

Status: Offline

Has this tut been edited? I can't see anything about hiting CTRL+A to select all in step 5.

Rank: Guest

Saturday November 5th, 2005 at 7:16 PM

Comment #22

Johnathan

Status: Offline

If you hover over some text, you can see it.

Rank: Forum Administrator

Saturday November 12th, 2005 at 2:06 PM

Comment #23

Guest: Hypocenter

Status: Offline

Fuck You Baby

Rank: Guest

Saturday January 21st, 2006 at 12:24 PM

Comment #24

Guest: Flash mx guy...

Status: Offline

ok .... i think ur tutorials on photoshop r kinda bad... no offence.. ur prob using like photoshop 6 cause most of the stuff u do take like hours when u could do them in much easier ways..... for ur text tutorial especially... and ur navigation bar.. and everytin else.. i suggest u get abetter version of photoshop or .. just improve ur skills...

good job ... keep it going....

Rank: Guest

Tuesday January 31st, 2006 at 11:52 AM

Comment #25

Guest:

Status: Offline

Heej jag e mkt bätre än er =)

Rank: Guest

Saturday June 3rd, 2006 at 9:02 AM

Comment #26

Guest:

Status: Offline

hahahahhahahahahahaha

Rank: Guest

Saturday June 3rd, 2006 at 9:03 AM

Comment #27

Guest: Bod2

Status: Offline

God, who does their art in Flash MX? That's just plain queer...

Rank: Guest

Tuesday July 11th, 2006 at 4:51 PM

Comment #28

Guest: Gazok

Status: Offline

Having a little trouble with this, when I do ctrl + a, then v and down, it says that I can't "nudge the layer without rasterizing the pixels first"

Rank: Guest

Tuesday July 11th, 2006 at 5:07 PM

Comment #29

Guest: TL

Status: Offline

But, hey, how do you do the HTML code on this?

Rank: Guest

Friday July 28th, 2006 at 10:55 PM

Comment #30

Guest: X

Status: Offline

Real bad tutorial. Everyones asking about ctrl+A .. Edit the tutorial, and explain it better bro?

.. Common sense tells you that.

Rank: Guest

Sunday August 13th, 2006 at 8:27 PM

Comment #31

Guest:

Status: Offline

crap tutorial. Cant get past step 5 becaus eit only nudges the whole canvas down.

Rank: Guest

Wednesday September 27th, 2006 at 12:36 PM

Comment #32

richard

Status: Offline

Cool tutorial.. really helpful.. :)

Rank: New Imusioner

Friday May 2nd, 2008 at 6:14 AM

Comment #33

Guest: ballballcat

Status: Offline

very nice tutorial

Rank: Guest

Sunday August 24th, 2008 at 10:12 PM

Post Your Comment

Member Area

Welcome Guest! Please login to view your Member Area.