Cool and Simple Dark Navigation Tutorial
January 6th, 2010Ok so a lot of you want to create some cool navigations but in less time as possible. Where for you, I have written this very short and usefull tutorial on how to make a very good looking navigation in no time. It is so simple that it only consits of 2 main layers but still good enough for any website or design. Ofcourse that you want to see how it looks so here it is:
Let’s begin now shall we. First open a new document with any size you want (depends on the size of you navigation – mine is 500×100px) and fill it with some black dark color #020202.
Now let’s go with creating the small top part. Create a new layer and grab your „Rectangular Marquee Tool (M)“ and make a small selection like this:
Fill the selection with #cfcfcf. Right click on the layer name in the Layers Panel and select „Blending Options“. Apply the following:
Now you should be having something like this:
Not bad for a start, eh? Let’s make the main navigation part now. Create a new layer and again grab your „Rectangular Marquee Tool (M)“. Make a selection which is going to be your new nav, but leave a 1px gap between that and the upper part that we already created. Something like this:
Fill the layer with any color you want and add these Blending Options to it:
This is what you should be having now:
Well your navigation is now done and all we have to add is a bit of text. Grab your „Horizontal Type Tool (T)“, font and size depend on your navigation but I have went with „Lucida Sans“; “Regular“; “10pt“; „Strong“ with color #fefefe. Now click somewhere on your navigation to write something down. After you enter the links of your navigation right click your text layer and add the following Blending Options to it:
After you click ok, this is what comes up:
Believe it or not but it’s done. If you have any questions or suggestions about the tutorial you can leave it in the comment or contact us directly on admin@coregfx.org .
Feel free to use this in your designs but leaving credit to us would be much appriciated. Here are the source files if you’re not sure how to create something:






















Very cool dud . cool job
Very slick looking nav bar. Good job.
I’ve been using Photoshop CS2 for some time now, really feel like getting the newer CS4. Reading the posts and tutorials makes me even more keen to upgrade. I’m a kind of a noob when it comes to learning a new program. Is there a major difference between the 2 programs, or can I easily start using CS4 as I’ve used CS2 before?
very nice and simple, easy to follow.
Although article marketing is fundamentally free to do, it’s unquestionably a good idea to buy automation tools. Article spinning and submitter softwares are the best ones you can get that will massively facilitate you leverage your article marketing campaigns.
I have the problem too of getting to a blog and finding that I figure the conversation is already over hours ago. That’s the downside of putting the hour stamp on your comments by the way.
This is nice article on navigation, but mostly i like CSS templates and CSS based navigation due to SEO purpose, but this is nice addition with 10 minutes work to add navigation in existing design….good work
thanks for sharing bro. you think corefx for dle system?
Article marketing is really great if you have the time and effort to make new articles each day.*”.
when you want to promote your webiste or product, article marketing is always the best way to do it…~
what a article …..thanks for sharing…it is the easiest method i had ever used….thanks alot for sharing with us….
i always use article marketing to sell products and services, it is a very effective way to promote-.’
when you want to promote your webiste or product, article marketing is always the best way to do it and it is the easiest way of promotion.This is nice article on navigation.thanks for sharing…