Have you been having a swell time with gradients? Making buttons all over the place glow with a deep knowledge of their own self worth? Laying down some serious smite on all things non-gradient-ed? Then you should really enjoy this bonus extra blam that uses a little bit of iWeb and a little bit of Preview Passthru. (Actually, you could use Pages or Keynote as well. The same general technique applies so take your pick!)

Last time, we were yanking gradient colors from near and far using them to set our gradients in iWeb. If you’re doing a bit more looking, though, I’m sure you’ve seen some things out there that you can’t recreate using my steps. In fact, the very first example I gave was a trick to make you notice this. Compare the original

on the right to the one just below it. Notice that while they both have a

solid look, the second one looks positively flat compared to the first. It’s more of a highlight that’s a variation on the whole gradient idea. In other programs, it’s as simple as changing where the gradient transitions from one color to the next. Unfortunately, iWeb only allows for the smooth gradient seen above.

Fortunately, there is a way to fake it so that you can end up with this handsome looking fella! And you don’t have to go any further than your friendly neighborhood iWeb.

Begin in the beginning with a plain rectangular button. That’s going to be the foundation of the completed button’s color.

If you want a different color button, well, choose a different color! Let your color instinct be your guide. This is the part where I rely even MORE on your personal sense of artistic freedom and say you should duplicate that first shape, position it directly over the original (using the automatic snap guidelines) and resize it upwards horizontally by a little more than half. How much is a little? Eh, just eyeball it. This isn’t technical drawing and, since these are all objects that can be moved around, if you don’t like it, you can always change it later.

Here’s an example of how mine looks (changing the color of the one in front so you can see the difference). Select the object you just resized (the one in the front), and change it’s fill to Gradient Fill. Here comes the whammy, are ya ready?

Set the top color to White and the bottom color to... White! No, it doesn’t look like what you expect but we’re getting there. We’re just going to make one small adjustment that makes the effect universal for any button you’d care to make. With the bottom color of the gradient selected in the inspector, go to the opacity slider in the Colors palette (Yes, that thing again!) and slide it all the way to zero. THAT’s what you were waiting for. Ok, why do it that way instead of changing the color of the gradient to match the color of background shape? Try clicking on the background shape and changing it’s color. Since you’ve created it using the opacity slider, ANY color you use will be instantly buttonized by that gradient.

So, there’s the basic idea. Let’s complete it by giving the background shape a two pixel stroke, then resize and move the gradient so that it doesn’t overlay the stroke for an even greater sense of solidity. Also, alter the opacity of the gradient for the just-right amount of shine. Now’s where Preview Passthru comes in. Using the shape “as created” in iWeb means three separate graphics have to be rendered, the background, the gradient, and the text of the button. Simply Preview Passthru it and, instead of three images, you have only one!