Navigation
Resources
Tutorials » Dark Vertical Navigation
Step 1
First, lets start off by creating a new canvas size 200X600 with the background being #746C60. select your rounded rectangle tool. now set your foreground color to #32302F and make a rounded rectangle about 160px wide and 535px long. now go to your layers box and right click on that new shape that was created, and select rasterize layer.
Step 2
Now hold CTRL+Click on your shape layer. create a new layer. now set your foreground color to #000000. Press ALT+Backspace on your keyboard to fill this new layer with black. now go to select > feather > and set the feather radius to 2px. now go to Layer > layer styles > blending options. set your blend mode to soft light and your opacity to 50%.
Step 3
Next select your rectangular maquee tool and make a selection new the top of our main navigation body. make a new layer, and fill this selection with #FFFFFF. now go to Layer > layer styles > blending options. set your blend mode to soft light and your opacity to 50%. select your eraser too, and with a soft brush of about 50px erase the top half of this selection. all of the parts that go outside of our main body should be cut off, except 1px on both sides, this will give an indention look. next add some text so people will know what this is.
Step 4
Now go hold CTRL+Click on the main body layer, this will make a selection in the shape of our layer, and press the new layer button. then go up to Select > Modify > Contract and contract by 2px. Fill this layer selection with #000000. Now click on select > feather > and set the feather radius to 5px. Press DELETE on your keyboard to make a fading gradiant like effect on the inside of our body. go to Layer > layer styles > blending options. set your blend mode to soft light and your opacity to 30%.
Step 5
Next We want to add all of our links. First we will decided how many links we need. according to how many links we need, thats how many we will create. for this tutorial, i created as many as i can, and broke them down into catogories so it would be better on the eyes. for our main links, we will make them regular verdana text at 7pt with no anti-aliasing and will make them #E4DBCF. for our catogories we will make them bold verdana text at 7pt with no anti-aliasing and will make them #DC613C.
Step 6
Now we will add some hover effects to show what this navigation will look like whne it is fully coded. first, we'll make a bullet to the left side. first, select a new layer and make a rectangle that is 2px wide and 3px tall. fill this with the same color as your links, for this tutorial, use #E4DBCF. Now delete the top right, and bottom right pixels of this rectangle, leaving a single pixel on the right side. this will be our bullet. position it accordingly to how you will need your bullet, mine is 5px away from my link on the left side.
Step 7
Next create a new layer. select the whole area of your link and fill it with #ffffff. go to Layer > layer styles > blending options. set your blend mode to overlay and your opacity to 20%. select your eraser tool, and using a soft brush of about 127px and the opacity at 20, start erasing the right side of this rectangle. this will give a gradiant effect.
This is my final effect. you can always change it to fit your needs. dont be afraid to work on it more and make it more of your own than just a tutorial. I hope this tutorial has been helpful and that you have learned how to successfully create a clean red navigation.
First, lets start off by creating a new canvas size 200X600 with the background being #746C60. select your rounded rectangle tool. now set your foreground color to #32302F and make a rounded rectangle about 160px wide and 535px long. now go to your layers box and right click on that new shape that was created, and select rasterize layer.
Step 2
Now hold CTRL+Click on your shape layer. create a new layer. now set your foreground color to #000000. Press ALT+Backspace on your keyboard to fill this new layer with black. now go to select > feather > and set the feather radius to 2px. now go to Layer > layer styles > blending options. set your blend mode to soft light and your opacity to 50%.
Step 3
Next select your rectangular maquee tool and make a selection new the top of our main navigation body. make a new layer, and fill this selection with #FFFFFF. now go to Layer > layer styles > blending options. set your blend mode to soft light and your opacity to 50%. select your eraser too, and with a soft brush of about 50px erase the top half of this selection. all of the parts that go outside of our main body should be cut off, except 1px on both sides, this will give an indention look. next add some text so people will know what this is.
Step 4
Now go hold CTRL+Click on the main body layer, this will make a selection in the shape of our layer, and press the new layer button. then go up to Select > Modify > Contract and contract by 2px. Fill this layer selection with #000000. Now click on select > feather > and set the feather radius to 5px. Press DELETE on your keyboard to make a fading gradiant like effect on the inside of our body. go to Layer > layer styles > blending options. set your blend mode to soft light and your opacity to 30%.
Step 5
Next We want to add all of our links. First we will decided how many links we need. according to how many links we need, thats how many we will create. for this tutorial, i created as many as i can, and broke them down into catogories so it would be better on the eyes. for our main links, we will make them regular verdana text at 7pt with no anti-aliasing and will make them #E4DBCF. for our catogories we will make them bold verdana text at 7pt with no anti-aliasing and will make them #DC613C.
Step 6
Now we will add some hover effects to show what this navigation will look like whne it is fully coded. first, we'll make a bullet to the left side. first, select a new layer and make a rectangle that is 2px wide and 3px tall. fill this with the same color as your links, for this tutorial, use #E4DBCF. Now delete the top right, and bottom right pixels of this rectangle, leaving a single pixel on the right side. this will be our bullet. position it accordingly to how you will need your bullet, mine is 5px away from my link on the left side.
Step 7
Next create a new layer. select the whole area of your link and fill it with #ffffff. go to Layer > layer styles > blending options. set your blend mode to overlay and your opacity to 20%. select your eraser tool, and using a soft brush of about 127px and the opacity at 20, start erasing the right side of this rectangle. this will give a gradiant effect.
This is my final effect. you can always change it to fit your needs. dont be afraid to work on it more and make it more of your own than just a tutorial. I hope this tutorial has been helpful and that you have learned how to successfully create a clean red navigation.
Random Tutorials
