Rapid Fire #10: Circular Shadows & Highlights

Published on February 8, 2008 in Adobe, Design, Fireworks, Rapid Fire and Tutorial. 39 Comments

Before and after

Gradients and masks are all it takes to create lighting effects for circular shapes in Adobe® Fireworks®. Generate as many layers of shadows and highlights as you need. Let me show you how…

We start off this tutorial by putting into our canvas a circular graphic that we wish to add shadows and highlights to. In this case, I’m going to use a lifebuoy (see Figure 1), but you can use any other graphic you want, as long as it has a perfect circular shape.

Lifebuoy — “Save me!”
Figure 1. Base graphic on canvas.

You’ll also want to start thinking about where your light source is situated; you’ll need it in the next step.

Creating the “Effects Element”

Next, we build what will be referred to as our “effects element”. Create a shape that exactly matches and goes directly on top of your base graphic. If your graphic is composed of one or more vector shapes, you can do this by duplicating the graphic (Ctrl+Alt+D), and combining the paths into one (Union: Ctrl+Alt+U). Otherwise, you’ll need to trace around your graphic. (Depending on your graphic, you’ll only need to draw a circle around it with the Ellipse Tool (Icon).)

Select your newly-made shape and apply a cone gradient (black:100 → black:0 → black:0)* (see Figure 2). The direction of your gradient handle will depend on your light source. For this tutorial, let’s imagine that the light is above and in front of our lifebuoy, and align our gradient handle (and all subsequent gradient handles) vertically.

Cone gradient
Figure 2. Cone gradient.

The shape restricts our shadows and highlights to within the shape, while the gradient restricts them radially.

Next, we create a circle the exact size of the base graphic, and give it a radial gradient (black:100 → black:100 → white:100) (see Figure 3). (Leave the gradient handle at its default direction.)

Radial gradient mask-to-be
Figure 3. Radial gradient mask-to-be.

Proceed with the following steps:

  1. Cut the previous shape (Ctrl+X);
  2. Select the new shape;
  3. Paste the previous shape into the new shape (Ctrl+Shift+V);
  4. Select the mask (in the Layers panel);
  5. Select the Grayscale Appearance option (in the Properties panel); and
  6. Set its opacity to 70% (see Figure 4).

Effects element
Figure 4. Effects element complete.

We have just completed our copy-pastable, fully-tweakable effects element, which we can use for all our shadows and highlights. We’ve also created our first shadow! Now let’s create some more…

Add More Shadows

At this point, it would be nice to have a reference photo of your base graphic in a real-world setting (Google for one—or several), so that you know where to put your shadows and highlights. If you’re that good, you could even guesstimate where the shadows and highlights should be.

Let’s put our next two shadows along the inner edge of the lifebuoy. Duplicate the effects element, and adjust its gradient handle such that it’s pointing directly up. Select the mask, bring up the gradient dialog, and position the color handles such that the resulting gradient starts at the inner edge of the lifebuoy, and ends about halfway on the inside (see Figure 5). Adjust the opacity for a slightly lighter shadow.

Another shadow
Figure 5. Another shadow.

Duplicate the first effects element once more, this time leaving the gradient handle pointing down. Adjust its cone gradient such that it covers only a little above one-quarter of the base graphic’s circumference. Adjust the mask’s gradient in similar fashion to the second effects element, only this time, end it about one-third of the way inside the lifebuoy (see Figure 6). Adjust the opacity, as well.

Yet another shadow
Figure 6. Yet another shadow.

That’s enough shadows for one day. Let’s move onto highlights, shall we?

Add Highlights

To start creating highlights, let’s duplicate our effects element and give it a few tweaks:

  1. Bring up the gradient dialog (for the masked object);
  2. Change all the color handles to white;
  3. Select the mask (in the Layers panel);
  4. Bring up the gradient dialog (for the mask);
  5. Modify the color handles to create a gradient (black:100 → white:100 → white:100 → black:100), all to the far right of the gradient bar (see Figure 7). (Adjust the color handles to position the highlight correctly on the base graphic.)

Go back and select the masked object, and adjust its gradient handle to point up. This will position the highlight on the upper side of the base graphic. Also, adjust the cone gradient such that it covers around two-thirds of the base graphic’s circumference. Bump up the opacity a bit to give our lifebuoy a nice shine.

Highlight effect
Figure 7. Highlight effect.

Duplicate the last effects element, point its gradient handle downwards, decrease the cone gradient’s range, and adjust the opacity (see Figure 8). Adjust the mask’s gradient color handles to position the highlight in between the two shadows.

Another highlight
Figure 8. Another highlight should do it.

Finally, add the obligatory Drop Shadow, and you’re done! Congratulations, you’ve completed another Rapid Fire tutorial!

Done!
Figure 9. Now, that lifebuoy looks more convincing!

Need a quick sample to study? Download the source PNG (tutorial10.zip, 266KB, Adobe® Fireworks® CS3) for this tutorial.

You might also like:
  1. Rapid Fire #7: Shiny Ribbon
  2. Rapid Fire #6: Sticky Notes
  3. Rapid Fire #5: Image Editing Tricks Part II

39 Responses to “Rapid Fire #10: Circular Shadows & Highlights”

Feed for this Entry
Comments are currently closed.