Sleek Menu Bar

About Celoxdesign

Celoxdesign is a webdesign community offering free high quality tutorials in several categories such as Adobe Photoshop, Maxon Cinema 4D, Cascading stylesheets and xHTML.
I drive myself to give all my knowledge back to the design community for free and will continue doing this for a long time.

Guest tutorials

A new added feature on Celoxdesign is the guest tutorials section, this section will house tutorials written by my guests/members, some of them are even better tutorials that I've written over the past years. Register yourself and submit your own guest tutorials to give something back to the design community.

Step 10:

New layer called Indent black, foreground to black. Take the pencil tool again and make a 1px vertical line, joining sides with the horizontal white lines, Do not go over the white lines! Check the screenshot below for further reference.



Now do the same again but use white as the foreground, draw this line on a new layer called Indent white, and draw it right alongside the black line.



This step is almost done, we have to take care of the blendmodes and opacity settings. For the Indent black layer change the Blendmode to Overlay and opacity to 21%. Set the Indent white blendmode to Soft light and 35% opacity. Then duplicate the lines and move them horizontally to make buttons, like in my progress so far below.

Step 11:

Make a selection of the second button like below. Make sure though that you don't go over the lines (horizontally and vertically).



Make a new layer called Rollover, with the selection still selectec fill the Rollover layer with #5d6e6e. Change the blendmode to Color dodge and opacity to 35%.

Step 12:

First change the foreground to white if isn't already. Now let's add some text, You can choose your own font or can download the one I've used, the Visitor font. For fixed menu buttons it's always nice to use bitmap/pixel fonts, and most of the time I download these on dafont.com.

Set all the text layers to the Soft light blendmode.

Step 13:

Now this step is optional, but It's allways useful to tweak the colors even more, that's why I strongly advise you do this. Add a new adjustment layer (like we did in the beginning of this tutorial), but now choose Color balance as the adjustment. Then change the settings to the ones below:

Shadows: 0, 0, +6
Midtones: +41, +14, -9
Highlights: 0, 0, 0



That's it! Hope you came through no problem making this photoshop tutorial. If you had any problems and need help with it I would be glad to help you out, just ask around on the site.

<< First< Previous123