Nav Bar Interface Tutorial
Like I said, we're almost done. We just need to add the bottom and left parts that look like they could slide out.
Bot Area
- Make a new layer set called Bot Area.
- Then, make a new layer called shape. Grab the polygonal lasso tool.
- Zoom in to 200% and make a selection like this: (the angles are 45 degrees)
- Make a new channel, and fill this selection with white.
- Round it out with the rounded corner tutorial technique. I used a gaussian blur of 4.
- Load this channel's selection, and go back to your layers. Hold down shift + ctrl + alt, and click on the base shape, to intersect the selection with the base shape. Fill it with the dark gray color: #444444:
- Apply the following inner shadow layer style to this shape:
- Make a new layer called subtle hlight, and load the shape's selection. Invert the selection by shift + ctrl + I.
- With white as your foreground, grab a hard brush about 13 pixels in diameter, and apply a white highlight to the top of the shape: (I hid the selection so you can see it better)
- Drop the opacity to 65%.
Bot Slide Out
- Now create a new layer set, outside of the Bot Area one called Bot Slide Out.
- Make a new layer within this set, and name it shape.
- Create an angular shape with the polygonal lasso tool , like this: (notice the positioning, and don't fill it with a color; I just did that for example purposes only)
- Create a new channel and fill the selection with white. Use the rounded corners technique with a gaussian blur radius of 4.
- Load the channel's selection, and go back to your shape layer. Fill it with a gray color:
- Give the shape layer the following layer styles:
Bevel and Emboss
Stroke
- You should have this:
- Right click on the layer effects icon on the shape layer, and select "Create Layers":
This creates layers based on the layer styles, and distills them into their own layers.
- Now load the base shape layer's (the main base shape for the entire nav bar) selection, then ctrl + alt + click on the shape layer that is inside the Bot Area layer set. This will subtract the shape selection from base shape. You should get this:
- Now, with shape's Inner Bevel Shadows as your current working layer, hit the delete key. Now do the same for shape's Inner Bevel Highlights, shape, and shape's outer stroke. This deletes the excess part that we don't need.
- Now, select those four layers, and move them down by three pixels:
- You can adjust the brightness/contrast of the shape layer if you need to. I personally think it's better as lighter, so that's what I did.
- Make a new layer and put it above shape's Inner Bevel Shadows. Call it hlight.
- Load the shape's selection, contract it by 1 pixel, and give it a white, inner stroke of 1 pixel.
- Deselect, and gaussian blur it by 1 pixel. Lower the opacity to 50%.
- Now, erase the top and left part of that high light layer. Feel free to add a subtle top shadow that looks like the whole shape is beneath the nav bar:
- I added a slider and button to this layer set. You can check out the .psd to see the layers, and how those work.
Almost there, just a few more steps left!
- Create a new layer set called Left Area.
- Then create a new layer called inset shape.
- With the polygonal lasso tool, create a selection like this:
- Make a new channel, and fill this selection with white. Deselect, and use the rounded corners technique with a gaussian blur of 5.
- Load this new channel's selection, shift + ctrl + alt + click on the base shape layer, (which gets rid of the excess selection) and go back to your inset shape layer, and fill it with #595959 gray color:
- Apply the following inner shadow layer style to the inset shape:
- Make a new layer called subtle hlight.
- Load the inset shape's selection, and give it a white 1 pixel, center stroke, and deselect. Move it down and to the right by 1 pixel each:
- With a soft, smallish brush (21 pixel diameter), erase the top and left part of the stroke and lower the opcaity to 50%:
- Make a new layer set called Left Slide Out.
- Then create a new layer called shape.
- With the rounded rectangle tool and a radius of 10pixels, make a rounded rectangle that is 93x40 with the gray color #c8c8c8 (place it in approximately the same position):
- Apply the following bevel and emboss, and stroke layer styles to the shape.
Bevel and Emboss
Stroke
- You should have something like this now:
- Right click on the layer styles icon in the layers palette for the shape layer and select Creat Layers... (similar to how you did it for the bot slide out shape).
- Now load the (main) base shape's selection, and the ctrl + alt + click on the inset shape layer that is within the Left Area layer style. This will subtract the inset shape selection from the base shape selection. Then
- Click on one of the newly created layers, and hit delete. Then, do the same for the rest of the created layers to come up with this:
- Make a new layer called drop shadow.
- Load the inset shape selection that is in the Left Area layer set again, and with a soft brush and black as your foreground give the slide out shape a shadow so it looks like it is physically below the base shape:
I added a little button and inset to the slide out shape.
I also added a wire to the bottom right of the nav bar, a top left circular button, and finished it off with an overall drop shadow. Feel free to look at my layers and to see how I did those and to add your own touches. You may also see what it's like with different colors, or all gray scale with a black screen. Try different combinations. The great thing about photoshop and layers is the freedom you have to change the entire looks of something with just a few simple color changes! I'd love to see your creations over at the forums.
I hope you learned a lot, and here is the final product:
Thanks for completing the tutorial, and please go to the forums to give feedback and show off your interfaces! See you there. Also, please take a look at the other photoshop tutorials to expand your skills.
Sincerely,
