Nav Bar Interface Tutorial
This tutorial builds upon the NavBar Pen tutorial where we take the shape we created in that tutorial, and build upon it.
If you do get stuck on a step, or have questions about ANYTHING, please contact me at:
, or post on the tutorial message boards I will be more than happy to answer your questions about how to do a technique or step. Also, the units used in this tutorial are pixels, and if you see something like this "File -> Save As" it just means go to the top menu bar and select "File", then select "Save As".
Thanks and have fun!
You may download the zip version this tutorial. Please open your copy of NavBarPen.psd in Photoshop so you can have it handy and be able to use it as a reference when you need to. This helps you to see where a certain element of needs to be on the document. A tip I recommend is to set your screen resolution to 1152 x 864 or higher. Of course this is not mandatory, but I have found that when working in Photoshop you need all the desktop space you can have.
- Start by creating a new document (ctrl + n). Make the document size 710 x 250 pixels with a white background, a resolution of 72 pixels/inch, and RGB Color Mode.
- Drag the shape you created from the NavBar Pen tutorial tutorial and place it in the center of the document. Rename this layer as "base shape"
- Make a new layer, and place a 49 x 49 black circle at the right edge of the shape. This will round off the straight edge of our shape. In the screenshot below, I have dropped the opacity of my circle to 50% to show you how I positioned it.
- Now, make the black circle the same color as your base shape, and hit ctrl + e to merge the circle with the layer below it.
- Now you should have one layer called base shape that looks similar to this:
- Load the base shape layer's selection (ctrl + click on its thumbnail in the layers palette) and create a new channel called "base shape channel".
- Fill the selection with white (don't deselect), give it a gaussian blur (Filter -> Blur -> Gaussian Blur) of 6, then another gaussian blur of 3, then deselect, and one final gaussian blur of 1.
Go ahead and save your interface right now. Since we are about to use the lighting effects filter, sometimes it causes Photoshop to quit unexpectedly, and I have been known to lose some great work that way. So, save early and often!
- Go back to the layers palette, and with base shape as your current working layer (cwl) (just click on it in the layers palette to make it your cwl), go to Filter-> Render -> Lighting Effects...
- Position your light similar to the screen shot below, and enter in the values for the different fields (I know my Texture Channel at the bottom is set to Alpha 1, but make sure yours is "base shape channel"):
- Hit OK, when you like what you see, and then make sure it looks ok for real.
- Load the base shapes selection again, and create a new layer called "2nd lfx".
- Fill this selection with a mid range gray color (I used #d6d6d6), and deselect.
You're going to run the lighting effects filter on this new shape/layer and we'll change its layer mode and opacity in a second to make the nav bar look metallic and realistic.
- Now go back to the lighting effects filter and make your dialog box look like this one (still using base shape channel as our Texture Channel):
You may need to change the brightness and contrast of the base shape or 2nd lfx if it is too shiny or too dark. Just go to Image -> Adjustments -> Brightness/Contrast... to do this. Ideally you want it to look like the next screenshot.
- Change the layer mode of 2nd lfx to Lighten, and drop its opacity to 60% and you should have something similar to this:
- Make a new layer above 2nd lfx, and name it "inside shadow".
- Load the 2nd lfx selection, and give this selection a black, 1pixel stroke on the inside.
- Keep it active, and give the stroke a gaussian blur of 1.5 and then deselect.
- Take the eraser tool, and with a soft, large brush (maybe 45px diameter) erase the top and left sides of the shadow to end up with this (only the bottom and right circular side have a shadow to it):
You may be thinking that this is a tedious step, or that it doesn't make that big of a difference to add subtle shdaows and things like this. But believe it or not, the little details separate an average interface from a truly great one so just keep that in mind as you are designing your interfaces.
- Create a new layer called "angular shape". With the polygonal lasso tool make a shape that looks like this: 
. It is 203 px wide, and 21 pixels high.Fill it with a dark gray color when you are finished.
- Position this new shape as in the screenshot below (zoomed in to 300%)
- Load the angular shape's selection and make 2nd lfx your current working layer. Hit the delete key to delete that portion of the selecion from the 2nd lfx layer.
- Now make base shape your cwl, and hit the delete key to remove it from that layer also. So now you should have this:
- Create a new layer called "outside stroke", load the base shape layer's selection and give the base shape a black, 1 pixel outside stroke (Edit -> Stroke). I know I have an outside stroke in the previous screenshots, but that is a mistake and you should add it now instead of earlier. Sorry for any confusion.
- Drag the stroke layer below the base shape layer in the layers palette, and drop the stroke's opacity to 50%.
- Create a new layer set right above your background layer called "Top Green Bar". You can now move the angular shape layer by dragging and dropping it inside this layer set.
- Inside this layer set, make a new layer called rectangle and make a rectangular selection (about 210 x 20) and place it like below:
- Fill this selection with a light green color, I used #7cae33, and deselect. You should now have something like below:
- Create a new layer called "shadow". We're going to make a black to transparent gradient in the middle of the green rectangle.
- Make a rectangular selection similar to the one below:
- Now, grab your gradient tool, and with a black to transparent gradient, make a small gradient like so (zoomed in to 200%):
- Now drop the opacity of this shadow layer to about 40%.
- Make a new layer called "subtle lines" and make 1 pixel, white lines about 4 pixels apart. Hint: Make one line at the left side of the bar and duplicate the layer. Move the new line 4 pixels to the right (using the move tool, and hitting the right arrow key four times), merge the two layers together, and repeat until you have lines all across the bar like this:
- Drop the subtle lines layer opacity to 10%.
- Create a new layer called "stroke" and give the rectangle a black, 1 pixel, inside stroke. Lower the stroke's opacity to 80%.
Creating the Screen
- Make a new layer set called "Screen".
- Create a new layer inside this layer set called "screen".
- With the ploygonal lasso tool, make a selection similar to the shape below but don't fill it like I have. That is just for demo purposes.
I have included this shape on the layer called "screen angular" in the Screen layer set with the .psd download, so grab that if you can't get it looking right.
- Now go over to your channels palette, and make a new channel called "screen".
- Fill the selection with white, and proceed to round the corners with my rounded corners tutorial (deselect, give it a gaussian blur of about 3 or 4 and then open the levels dialog and move the sliders towards the center until the blur becomes a hard edge).
- Load the channel's selection and then go back to your screen layer, and fill it with a dark gray color,
- Now go to Layer -> Style -> Inner Shadow, and give these settings for Inner Shadow, Bevel and Emboss, Gradient Overlay, Satin, and Stroke:
Inner Shadow
Bevel and Emboss
Gradient Overlay
Satin
Stroke
- You should have this as a result:
- Now add a "highlight" layer and load the screen's selection.
- Contract the selection by 2 pixels, and then subtract the bottom half of it like this:
- Now apply a white to transparent gradient to the selection, deselect, lower the opacity to about 80%, and you should have something like below:
That's it for the screen unless you want to add some text or digital display things to it. That wasn't too bad was it?
Now we'll create the top part above the screen. This is is what I like to call miscellaneous things that I add to an interface to make it look more interesting. If I was designing this for a purpose, such as a winamp skin or something like that, I would probably put more thought into these miscellaneous items and use the space accordingly.
- Create a new layer set called "Top Gray Area". This should be placed right above the Screen, layer set in the layers palette.
- Make a new layer called "shape".
- With the polygonal lasso tool (L), make a shape like this:
The angle is 45 degrees. Just hold down shift while you are making the shape, and it will snap to 45 degrees automatically.
- Shift + ctrl + alt + click on the base shape layer's thumbnail in the layers palette to intersect the selection with base shape. Then, ctlr + alt + click on the screen layer that is in the Screen layer set. This will subtract the bottom part of the selection and match it up evenly with the top of the screen:
- Fill this with the gray color #565656 and deselect.
- Duplicate layer the shape layer (right click on the shape layer, and select Duplicate Layer..., or drag it to the new layer icon) and go to Edit -> Transform -> Flip Horizontal.
- With the move tool (V), hold shift and drag the flipped piece straight across to the other side, and line it up with the angle of the base shape:
- Change the layer mode of the shape to Linear Light, and drop its opacity to 40%.
- Then, create some insets on the left and right side of this shape (light insets are white 45 degree lines, with opacity of 50%, and dark insets are black lines with 60% opacity):
- Create a new layer set within the "Top Gray Area" set called "Top Left Button" (if your version of photoshop doesn't support layer sets inside of other sets, just create one outside).
- In this new set, make a layer called "inset" and with the polygonal lasso tool, make a shape like below:
- Go into your channels palette, and create a new channel called "button rounded".
- Fill it with white, and deselect.
- Give it a small gaussian blur of about 1.5, and then use the levels (ctrl + L) to get rid of the blur. This is detailed in the Rounded Corners tutorial.
- Go back to your layers palette, and give it a subtle dark to light gradient similar to:
- Load the inset layer's selection and make a new layer called "button".
- Contract the selection by 1 pixel (Select -> Modify ->Contract) and then give it a light to dark gradient like this: (you may need to hide the selection, by hitting ctrl + H, in order to get a nice gradient)
- Make a new layer called hlight and apply a white to transparent gradient to a selection that is about half of the height of the button:
- Make a new layer called stroke and load the button layer's selection again. Give it a black stroke of 1 pixel, inside. You can deselect now.
You can add a wingding font character or icon of some sort to the button to make it look like a real button.
Now duplicate that layer set, and flip it horizontally. Drag it over to the opposite side and position it there:
