Design a pixel perfect menu – MetaLab style

Perfection

I’m a big fan of pixel perfect design. So much so that whenever I visit MetaLab’s website my jaw drops in awe. The attention to detail is unbelievable. So I tried to replicate the style by designing a pixel perfect navigation menu. I was surprised at how easy it was to produce replicate , it’s because of this that I decided to write up my process. If you’re into this type of design then I strongly recommend reading this tutorial. It should definitely get you on the right track.

Step 1

Let’s get started! Boot up photoshop and create a new canvas. Set width to 550px and height to 250px. Press OK and you should have a brand spanking new canvas ready to draw your pixel perfect menu. If the canvas doesn’t have a background then go ahead and press Shift + F5 and fill the layer to white. I added a radial blur to spice mine up a bit.

Start off with a nice background

Step 2

Grab the marquee tool (M) and draw a rectangle from one side two the other. Create a new layer by pressing Ctrl + Shift + N and fill the area with any colour. Double click the newly create layer and add a gradient overlay. I chose a linear gradient with a dark and lighter shade of red. Also add a black outer stroke, and set opacity to 90ish percent (if you used different colours for your gradient overlay then you may have to lower this).

Add a background for our menu

Step 3

To add a shine to any object in photoshop is fairly simple. Hover your cursor over the thumbnail of the menu background layer whilst holding Ctrl. The cursor should change to a one with a dashed box on top of it. Left click to select the area of the menu background.Now grab the marquee tool, hold alt and draw a rectangle that covers the bottom half of the menu background. You should now just have the top section selected. Create a new layer, fill the selection with white and reduce opacity to 2%.

Add a shine

Step 4

Now onto the menu itself, select the rounded rectangle tool (U) and draw a button onto your menu background. The colour of the rectangle is up to you. I just made mine a lighter shade of red. Now to add some crisp borders. Double click on the rounded rectangle layer and add a white outer stroke and reduce opacity down to around 20%. Now add a black inner glow with the opacity set to 80% (again, play with these values until you’re satisfied). Set the choke to 100% and size to 1. I also added a gradient overlay, from dark to light red (very subtle).

Add a pixel perfect button

Step 5

To make the selected/pressed state you just add a black inner shadow with an opacity of 60%, angle of 90 degrees, distance of 3 and size of 3. Add some text with a black drop shadow, an opacity of 20%, distance of 1, spread of 100 and size of 1.

Add an inner shadow

Step 6

To make the normal state, select the area of the button using the method in step 3. With the button selected click on select from the top menu, choose modify and then contract. Contract the selection by 1px. With the gradient tool (G), select or create a gradient that starts from white with 100% opacity to white with 0% opacity. In a new layer, draw this gradient from the top to the bottom of the selection. Now contract the selection again by 1px and press the delete key. Set the layer to overlay and reduce the opacity until you are happy.

Add another pixel perfect button, this time with a shiny edge

Step 7

Repeat steps 4,5 and 6 to add more buttons to the menu and that’s it! Easy I hope you enjoyed this tutorial. If you have any queries then please feel free to leave a comment. I will try to respond as soon as possible.

Continue to add buttons for each link

  

Written by Liam McCabe

The almighty creator of CreativityDen. Absolutely loves design and messing around with wordpress.