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!
But WAIT! There’s MORE! You can’t create the eye with just that one gradient, no, you’ll need TWO. Create another rectangular shape and apply the White gradient as you did above. One small change, you’ll want to adjust the
opacity on the TOP color well, so that it looks a little like this. Then, duplicate this shape and set both color wells on the duplicate to Black. Now, set the Opacity on the lower color well to zero. Your result should look like this
. Since iWeb doesn’t support multiple gradients, we just created our own. The trick now is to get these two together. Did I hear someone say Preview Passthru? Sure I did! And you’ll do it like this. Arrange the two gradients so that the bottom of the white one is touching the top of the black one. Copy it. Open Preview, Command-N then save that pdf. Now, let’s apply the effect to, say, a circle. Insert a circle (how about a nice red one?). Duplicate this circle, position the duplicate over the original then change it’s fill to an image fill and set it to
Scale to Fill. Select the gradient .pdf you already created and, presto! Easy enough to create your own army of metallic bouncing balls of the web!