A simple tutorial on how to design a slick menu in photoshop for your wordpress theme. Later on we’ll slice and code this menu with CSS, xHTML and JQuery to give it a nice animation effect. It can be used on any design you want not necessarily in a wordpress theme design. So, let’s begin this step-by-step tutorial.
Step1
Create a new 700px by 100px canvas with white background.
Step2
Grab the Paint Bucket Tool (G) and fill the background layer with color 6f7072.
Step3
Make a new layer and name it Button1. Grab the Rounded Rectangle Tool (U), set the radius to 10px and draw a 160px width by 60px height shape with color b9b9b9.
Make 3 new copy’s of the Button1 layer and arrange them on the canvas.
Step4
Apply the following blending options:
Drop Shadow
Inner Shadow
Bevel and Emboss + Contour
Gradient Overlay
Copy and Paste the style to the other buttons.
Step5
Add text to the buttons. I used the MicrogrammaDBolExt font, size 18px, white color.
Put a Inner Shadow on each text.
Step6
Now, for the mouse over action, we’ll put a Inner Glow to the buttons and a Color Overlay to the text.
Inner Glow
Color Overlay
That’s it. Check the Coding section and follow the step by step How to code your menu with CSS, xHTML and JQuery to give it a nice animation effect, later on.
