DIY

How do I... Make a glass button for a Web page using Adobe Illustrator?

Adobe Illustrator can be used to create buttons and other images for use on Web pages just like Photoshop. The finished product is very similar but how you get there is slightly different. Steven Warren shows you to make a glass button using the tools available in Illustrator.

Most people use Adobe Photoshop or Macromedia Flash to create buttons for the Web, but I decided to create one in Adobe Illustrator. The best part of Illustrator is that it is vector based not pixel based like Photoshop. The subject of pixels versus vectors will be addressed in a future tutorial. We will be using Illustrator version CS2 for this tutorial, but even if you are using the most current Adobe version, the principles should still be the same.

This blog post is also available in PDF form as a TechRepublic download.

First, you will need to open a new project by going up to File on your toolbar and clicking on New. You can also hold down [Ctrl] and press N for PC.

You will now have a choice to either work with CMYK colors or RGB. CMYK colors are useful if you are creating something in Illustrator that is going to the printer for flyers or posters. RGB works better for the Web and for transferring files back and forth between Illustrator and Photoshop.

Now that you have a new file open, go to your shape tools and choose the Rounded Rectangle tool (Figure A).

Figure A

Rounded Rectangle tool

Click and drag out the desired shape of your button. Keep in mind that the look of the gradient will vary depending on the size of the button. Try to keep your buttons approximately the size you will want for the Web page to prevent problems down the road.

Second, we will be applying our colors. You can use the colors that go with the color scheme of your Web site. I will be working with what I like to call Apple blue.

Once you have decided on your basic color, go the color palette. If your color palette is not displayed on your screen, usually to the right, head up to your primary toolbar. Click on Window, then Color, or simply press [F6] for PC. You should see some tabs at the bottom of the Colors toolbar and click on gradient (Figure B).

Figure B

Color palette

The gradient tool works differently in Illustrator than it does in Photoshop. In Photoshop, when you open the gradient toolbar, it takes you to a new dialog window; not so in Illustrator.

Once you have applied the gradient tool to the button, select one of the two arrows located below the gradient palette. The default is from white to black and the gradient in the middle is gray. Click on the color you want to change and then go to the color picker to the left. You will see a solid color cube and what looks like a transparent box with a thick border. That is for the outline color; make sure that it is white with a red line through it, which means that there are no outlines for this layer. Double-click the solid cube and choose your desired color.

If you are trying to achieve a glass look that is glowing, make sure that you contrast whatever color you choose with white. To add more dimensions to your gradient, simply go back to your gradient tool and click between the two arrows and a new one will appear. Then, change the colors like we did previously. The closer the arrows are together the sharper the break between colors. When trying to achieve a glass-like look, the lines between contrasting colors need to be sharp. To achieve a matte finish, spread the arrows apart.

Now, we will be applying our effects, so go back to the primary toolbar and select Effect | Stylize | Inner Glow (Figure C).

Figure C

Inner glow

I am choosing to go with the white because it is a great contrast to the darker portion of the blue gradient around the edges of the button. We will apply the same effect to the outside of the button, so click Effect | Stylize | Outer Glow. This time, I went with a blue shade. You could also use white here if desired.

We will now be creating another shape layer that will be on top of the base layer. It will be approximately a third the size of the original and will be acting as a high sheen. This layer will be a solid color. Next to the Gradient tab there is a tab called Transparency. After selecting the Transparency tab, choose Overlay (Figure D).

Figure D

Transparency | Overlay

The final step is to add your text. It is optimal to choose a font that is legible. I know, I am a huge fan of the grungy fonts too, but this is not the place to use them. Something simple, such as Arial or Garamond, would work.

3 comments
shiny_topadm
shiny_topadm

Well, I'm glad you cleared that up, it has suddenly become very transparent for me... You know, why developers half my age are making twice as much money. I have spent way too much time learning business processes and making computer applications mimic that logic, and obviously spent too little time in drawing jelly beans! Thanks for the article, anyway.

ahin4114
ahin4114

We've all spent months writing great code, efficient code, downright clever code. Sad fact is, without a few jelly beans, some sales guys have a hard time convincing (potential) customers it's a better app than the OpenGL, raytraced, half functional pile of BS the last rep just showed them. All hail the glass button.

Editor's Picks