Gel web buttons and graphics in illustrator CS4. 8-10-09

Throughout the week we'll look at the various techniques used to make web buttons with a gel look as well as other web graphics and buttons that can bring some pizzaz to your website. It's very important to create web buttons in a vector program like adobe illustrator because there are times when you might want/need to scale your buttons as your site evolves. If you used a bitmap to create your buttons you'll be subjected to various distortions depending on the scale of the scaling and the details in the button. With a vector button you don't need to worry about that so it's always a good idea to create web buttons and graphics as vectors. To understand more about the differences between vectors and bitmaps follow this link.

Let’s start out with the easy rectangular gel like button. These web buttons are basically just a rectangle or rounded rectangle drawn out to your required dimensions filled with a linear vertical gradient with three colors. For the top color you want a richly saturated color with about 70% or so brightness. The middle color should be just under 70% saturated with about 50% to 60% brightness. The bottom color should be fully saturated and very bright. The idea behind this color scheme is to create a rich looking button. Of course you can desaturate all these colors down and you'll still get a washed out gel button look. It's entirely subjective (i.e. up to you). Next create a rounded rectangle over the top of it about half way down. This will be our highlight shape. With the rounded rectangle tool still in use press the up or down arrows to round out the corners more or less. Fill this shape in with a very light color in a similar family as the base button and set to 70% hard light. Next copy the base button shape and mask the top highlight shape. Inside the mask layer fill the mask shape with a linear black to white gradient with the black on the bottom.

Ok with that practice well in hand we'll move on to the 3d rounded gel like button in the upper right hand corner of the buttons graphic. This button is a nice button to get the hang of as it will let you do many other things that require similar techniques. The button is easier than it might appear. So with that in mind let's try and make this gel button.

To start off draw out an ellipse with the ellipse tool. It can basically be just about any shape you want. Try to create the angle you're looking for. Then fill the ellipse with a gradient. It can also be just about anything but make it linear. You can see the gradient I used to the right. Sharp contrast with multiple colors in your gradient gives the appearance of a metallic edge to your button. The base gradient should be drawn horizontally.

Copy and paste in front the ellipse you just made (CMD c, CMD f). Fill this with the same gradient you just made but angle it to show the transition in light as it goes from the edge to the top of the button. Shift up arrow will nudge it up until you have the thickness you want in the edge. Copy and paste this shape in front (I need to name this shape for reference cause we'll need to refer to it in a moment. Let's call it shadowshape).

Now go back to the bottom ellipse and copy and past in front twice (you'll have 3 copies now). The copies should be below the top button ellipse. Go to the middle edge ellipse and fill it with a radial gradient that gives the edge the color you're looking for. You can see mine to the right. Set this layer to 50% opacity. On the third edge layer set this to overlay with 100% opacity. You can set the blend modes and opacity in the transparency panel.

Now with the top ellipse button shape selected go to object, path, offset path. Off set this path by a negative number that represents how thick you want the top edge to be. My button is smallish so I chose -10px. This will create the actual button. Copy this shape and paste in front twice. With the middle shape selected add an otter glow. My settings were a darker blue set to multiply at 65% opacity with a 1px blur. Now go back to the shadowshape and select it. Then select the lower button shape (of the three we just created) and click the minus front button in the pathfinder panel. Now we should just have an outer ring shape. Use this shape to mask off the outer glow (i.e. we only want the outer glow to show). I used a clipping mask, CMD 7.

Now it's time to make the button. Chose a radial gradient of the two colors you want as your button. I chose a light and dark blue. Play around with the gradient until you get the effect you want. Then add an inner glow. I used a light medium saturated blue with a blend mode of screen. 75% opacity, and 6px blur. Now draw out your highlight shape with the pen tool, filled with white or a very light tint color, and mask it off to the button shape by copying the button (CMD c) and double clicking the white space next to the icon in the transparency panel and pasting in front (CMD f) fill the mask shape with white, and set the blend mode of the highlight to overlay.

In order to make a nice button that you might use on your website to attract viewers to order something, etc. You might want to create a presentation type button. This button is meant to highlight the product/service/item so the button is rather plain and the contents are what you aim to show off.

For this type of button I used the rounded rectangle tool to draw out the basic shape. I put the stroke to a decent weight so it would be readily visible and the background to a linear vertical gradient, lighter on top. Then I went to object, path, offset path, and put a stroke around the inside (negative number) to add some definition. I added triangles at the button-right to provide a place to set the mouse (where most windows place their resize function). You can fill your button with the appropriate content and add various effects like the overlaid shape I have over the text, or you could add a stroke to the text for some pop. In short you can do anything you like, but this is the basic way to create this type of button.

The last button type we'll go over here is the RSS button. I will create a separate tutorial on the bullhorn rss button, so we'll cover the others.

So we have two rss buttons. The square one with rounded corners and the circle. Draw the square with the rounded rectangle tool and fill with a linear vertical gradient (light on top). Click the fx button in the appearance panel, or click Effect in the menu bar, and choose inner glow. Select a lighter version of the color you chose for the top of your gradient and set to overlay, 75% opacity and 6pt blur (my square is 50px X 50px). Copy and paste in front twice (CMD c, CMD f, CMD f) and delete the fx of the top two and and fill the middle with a suitable highlight color. I chose a light, but saturated yellow. Nudge the top layer up until the bottom edge is in the middle area of the button. Shift click the middle layer so both the top and middle layer are selected and press CMD 7 to create a clipping mask. Set the opacity of this group to 20 or 30% and the blending mode to overlay. Then draw out the top and bottom highlights as shown by repeating the mask process but this time only nudging up the mask layer until you have a sliver of the shape you're looking to create. Copy and paste that shape in front, click object, transform, reflect, and reflect along the horizontal axis. Put into place and fill with a darker color on the bottom and lighter on top. Experiment with fx if you aren't getting the look you want. Color burn/doge or overlay, soft light, etc.

The circle button is the exact same process minus one step. There is no inner glow on the main shape and it's filled with a radial gradient instead of a linear one. That's it, when you're done put your RSS graphic on it and you're finished. To make the RSS logo graphic, watch the video to the right. A couple of notes: turn on grid view, click view, show grid. View snap to grid. Hold shift and option when making your circles. That should be it. If you have trouble let me know and I'll update.