Adobe Illustrator CS3 Menus: Mirror Menu

Written by:  • Edited by: Michele McDonough
Updated Nov 2, 2010
• Related Guides: Adobe | Adobe Illustrator

In this tutorial, I will show you how to create a beautiful mirror menu for your website. This menu is created using Adobe Illustrator. The menu is made out of a gradient square and textures.

Adobe Illustrator CS3 Menus - mirror menu - finished
click to enlarge
This menu reminds me of a mirror, so that’s how it got its name. The mirror menu is created using a graphics style. The graphics style that we will be using was actually a button style but I made the menu and applied the style and it turned out really nice. So, this tutorial will show you how to create the Mirror Menu. Create a new document to work on and we will get started.

Drawing the Rectangle for the Mirror Menu Background

The first step to creating this menu is to draw the background part of the menu. The background part is created using the Rectangle Tool. Select the rectangle tool from the toolbar on the left side of your window. Draw the rectangle on the document and draw it the size that you want the menu to be.

Adobe Illustrator CS3 Menus - mirror menu - menu effect
click to enlarge
Applying the Graphic Style to the Mirror Menu

Next, you will need to apply the graphic style to the mirror menu. Go to the top of Illustrator and click Window > Graphic Libraries > Buttons and Rollovers. When the box opens, look for the Steel Normal style. You can place your mouse over the styles to see the names of them. Once you find the style, click the rectangle and then click the style to apply it.

Adobe Illustrator CS3 Menus - mirror menu - graphic style applied
click to enlarge

Adobe Illustrator CS3 Menus - mirror menu - artistic symbol box
click to enlarge
Adding the Swirls and Curls to the Mirror Menu

Next, we will add the swirls and curls design to the mirror menu. I used a symbol for this design, so you will need to open the symbols box. Go to the top of your window and click Window > Symbol Libraries > Artistic Textures. When the box opens, locate the Impressionism symbol. Again, you can place your mouse over the symbols to see the names of them

Adobe Illustrator CS3 Menus - mirror menu - menu style applied and symbol
click to enlarge

Once you find the symbol, click it and drag it to the mirror menu. You will probably need to resize it. You can resize it by clicking it and selecting the transform tool. Make it as large as you want it. Now you will need to drop the transparency of the symbol. Locate your Transparency box in the tool panels on the right. If you can’t find it, go to the top of your window and click Window > Transparency. Drop the transparency down to 25% and set the mode to Normal.

Adding Your Text to the Mirror Menu

Now you can start adding the text links to the menu. Select your text tool from your toolbar and type what you want on the menu. You can use the font style, size, and color of your choice. I just threw text on mine to show you what it would look like. I did select the color of the text to match the top of the mirror. The hex code for the color of the text is # 2B5E66. You can use this color or you can use another color.

After you have added your text, you can resize the menu if you need to. Then you can export the menu.


 
blog comments powered by Disqus
Email to a friend