Today it’s a little Photoshop tut to break the wordpress routine :p. A client recently asked me to create a navigation bar that looks like the Apple.com. The process is fairly easy and goes as follow:
Open a new document in Photoshop with the size of your menu. For this example I start from a 500×40 pixels stripe.
First we want the grey background of the buttons. Select the rectangle shape tool or rounded rectangle and draw a shape from edges to edges.
Now of course we need to change the color of the shape and add a little gradient on it. I choosed #cacaca for the background color and a black to transparent gradient with 150% scale and 35% opacity, normal blending mode.
You should end up with something like this:
Next step is the text. I don’t have the exact same font they use but Lucida Sans will do the job plus it is a common font so you should have it as well. Type the text of your buttons and align them properly. Tip: to get multiple layer align on the same line select them all, then select the move tool and in the top menu click on align vertical centers.
Now we need to get this embossed effect like if the text was pressed on a paper surface (This is called Letterpress effect in printing). To get this we just need to add a little white drop shadow on the text:
That should brings you here:
Now because you are probably going to use this on a website you may want to add a hover state and use the css sprites technique to change the background of you link.
So, first group your layers (select all and press ctrl+g/cmd+g). Next increase the size of the canvas (ctrl+shift+c / cmd+shit+c) and change the height to be the double of what you had originally. In my case I started with a height of 40px so I need to increase it to 80px. Notice also the position of the anchor. This is to get the space at the bottom of the current canvas.
Duplicate your group of layers and drag it down to fit the space created:
First change the colour of the background of the second rectangle to a dark grey. Then change the style of the text layers in the second group to add an inner shadow. I’ve also change the outer-shadow to 100% opacity.
Now there is a little trick here. The outer shadow will give the font a bit more weight, a bit like bold. But this outer shadow, acting as weight changes the size of the letters slightly so that the bottom is now 1px below where it was originally on the first group. So to get a perfect hover effect select all the text layers from the second group and move them 1px up.
And here you go. I’ll live you the CSS coding to get the hover, there is plenty of help out there or even from this blog here.
Related Items and Services:If you need Space Saver Stairs come to us.
Grey Fleet Management at great prices.
T-Shirt Printing
Are you after ID card printing ?
Loading ...
Comments