1 [PS]Photoshop Tutorial Clean White Navigation Bar1/2 Mon Sep 20, 2010 10:28 am
Admin
Admin
Page 1 of 2
[You must be registered and logged in to see this image.]Simplicity is the key to beautiful web layouts. Learn how to draw a beautiful navigation[You must be registered and logged in to see this image.] bar in Photoshop.
Preview of Final Results
[You must be registered and logged in to see this image.]
Clean White Navigation Bar Photoshop Tutorial
Step 1
To start off with, create a new document, for the purpose of this tutorial I have chosen 500 by 200 pixels. Fill the background with a radial gradient from a medium-dark grey to a darker grey. You can do this by selecting the gradient tool from the tool box and setting it to radial. Set your foreground colour to #45443f and your background colour to #31302c. Left click in the middle of the document, drag to the right and release.
[You must be registered and logged in to see this image.]
Step 2
Create a new layer (Layer > New > Layer) and select the rectangular marquee tool. Make a fixed size selection of 440 by 50 pixels in the middle of your document.
[You must be registered and logged in to see this image.]
Step 3
Fill the selection with a linear gradient from #f4f4f4 at the top to #d9d9d9 at the bottom.
[You must be registered and logged in to see this image.]
Step 4
We are now going to be applying a couple of layer styles to this layer.
Layer > Layer Styles > Drop Shadow
[You must be registered and logged in to see this image.]
Layer > Layer Styles > Outer Glow
[You must be registered and logged in to see this image.]
Result:
[You must be registered and logged in to see this image.]]
[You must be registered and logged in to see this image.]Simplicity is the key to beautiful web layouts. Learn how to draw a beautiful navigation[You must be registered and logged in to see this image.] bar in Photoshop.
Preview of Final Results
[You must be registered and logged in to see this image.]
Clean White Navigation Bar Photoshop Tutorial
Step 1
To start off with, create a new document, for the purpose of this tutorial I have chosen 500 by 200 pixels. Fill the background with a radial gradient from a medium-dark grey to a darker grey. You can do this by selecting the gradient tool from the tool box and setting it to radial. Set your foreground colour to #45443f and your background colour to #31302c. Left click in the middle of the document, drag to the right and release.
[You must be registered and logged in to see this image.]
Step 2
Create a new layer (Layer > New > Layer) and select the rectangular marquee tool. Make a fixed size selection of 440 by 50 pixels in the middle of your document.
[You must be registered and logged in to see this image.]
Step 3
Fill the selection with a linear gradient from #f4f4f4 at the top to #d9d9d9 at the bottom.
[You must be registered and logged in to see this image.]
Step 4
We are now going to be applying a couple of layer styles to this layer.
Layer > Layer Styles > Drop Shadow
[You must be registered and logged in to see this image.]
Layer > Layer Styles > Outer Glow
[You must be registered and logged in to see this image.]
Result:
[You must be registered and logged in to see this image.]]