« 

Rapid Fire #9: Fun With The Satin Gradient

Fireworks Zone: Tutorial Design Contest »

Rapid Fire #10: Circular Shadows & Highlights

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

Gradients and masks are all it takes to create lighting effects for circular shapes inAdobe®
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.
 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  .)

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.
 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.)

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).

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.
 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.

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.

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.
 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!

Figure 9. Now, that lifebuoy looks more convincing!

« Safari Gave Me Blurred Vision

Rapid Fire #9: Fun With The Satin Gradient »

Rapid Fire #8: Extracting Logos

Published on September 20, 2007 in Adobe, Design, Fireworks, Rapid Fire and Tutorial. 31Comments
After a short hiatus, I’m back with a tutorial that shows you how to extract a logo and/or
logotype from a raster image, using only Adobe® Fireworks®‘ Live Filters. With this method,
you also have the option to re-color the lifted logo in anyway you want: solid, gradient, or
textured. All of this, while avoiding the temptations of the quick-and-dirty Wand Tool  .

Note: This method works best with images of dark, one-color logos (or any other solid shape, for
that matter) set against a white or light-colored background.

Prepare by loading the image of the logo onto a new canvas, or into the canvas of an existing
project. For this tutorial, we use an image of a fictional wordmark(which I might just go ahead
and use to brand my blog), imported onto a canvas with an initial background layer of a nice
meadow, courtesy of trelin over atstock.xchng. (See Figure 1.)

Figure 1. Logo image loaded onto target background.

Tip: If you’re working with an image of a light-colored logo set against a dark background, simply
apply an Invert filter before proceeding with the rest of the steps.

Step One: Desaturate

With the logo image selected, apply a Hue/Saturation… filter with the Saturation slider set all
the way to the right (Saturation: -100). (See Figure 2.) This will reduce your logo’s colors down
to shades of gray.

Figure 2. Image colors desaturated.

Step Two: Full Contrast

Next, apply a Brightness/Contrast… filter to the logo image, bumping up the Brightness and
Contrast sliders such that the background becomes absolutelywhite (#FFFFFF), and the logo
itself becomes absolutely black (#000000). (See Figure 3.) Keep an eye out for the edges of the
logo becoming jagged, and tweak the values as necessary to keep those edges smooth.
 Figure 3. Image colors reduced to black and white.

Step Three: Convert To Alpha

Next, apply a Convert to Alpha filter to the logo image. (See Figure 4.) This will effectively
remove the white background and leave you with a clean, solid logoform. The neatness of the
edges and the holes of the logo puts the Wand Tool to shame.

Figure 4. Background removed.

Step Four: Re-color

Finally, apply a Color Fill filter to the logo image. (See Figure 5.) This will allow you to revert
the color of your logo back to the original, or give it a different color.
 Figure 5. Logo re-colored.

Tip: Save the set of filters as a style (Properties Panel → Filters: → (+ button) → Options → Save as
Style), so you can re-use it on other projects and save time.

Bonus: Applying Gradients And/Or Textures

If you want to give your logo a little more kick, you can fill it with a gradient or texture,
instead. To do this, go back to Step Four and pick white (#FFFFFF) as the color fill of your logo.
(See Figure 6.) Once you’ve changed the fill color, flatten the logo image (Ctrl+Shift+Alt+Z).
This will create a bitmap mask in the shape of the logo.

Figure 6. Logo converted to bitmap mask.

Then, draw a rectangle on top of and covering the logo. For demonstration purposes, let’s
give it a gradient fill going from top to bottom (#C88F1A:100 → #46220B:100)*. (See Figure
7.) This will be the fill that goes into our logo.
 Figure 7. Rectangle with gradient fill.

Finally, Cut the rectangle (Ctrl+X), select the logo image, and perform a Paste Inside command
(Ctrl+Shift+V). (See Figure 8.) Now your gradient is applied to the logo! Just give it an
additional filter or two for added effect, and you’re done!

Figure 8. Logo with gradient fill (and optional outer glow).

Page Curl in Fireworks Tutorial

Home » Tutorials » Fireworks Tutorials

In this tutorial I will show you how to add a stylish page curl to the corner of your image. To
start, lets get an image that we can add the page curl to. Here is the one I used.
Take your polygon lasso tool, and select the corner that you want to curl. Make a selection
similar to mine. Once you have it selected, press delete to remove that portion of the image.

Click on your gradient tool, and choose a linear gradient. Change the colors to match the image
you are curling. You want your page to look like it is bulging towards you, so place the lightest
part of the gradient towards the center. Place your gradient so that the lines run parallel to the
incline of the page curl. Refer to the example below.
Now we are going to move this into the correct position. Choose Modify > Transform > Free
Transform

Rotate your gradient and position it in line with the deleted portion of the image.
Now lets give your image some depth. Add a drop shadow by clicking + sign in your properties
tab. Change the direction of the light source so that shadow displays on your image and not the
deleted space.

Your done! Here is how it might look with some text, and a darker background.
 

A short time ago Fabio wrote a tutorial showing us

how to create an image inspired by Andy Gilmore's
work. I really liked that technique and decided that it
would be cool to do something like that in Fireworks
as well.
In this tutorial I will show you how to create a nice effect for banners, and we will use this
technique for the Abduzeedo Job Board banner. We released the Abduzeedo Job Board a few
days ago, and now we will start promoting it. The idea of this banner is exactly that; to
demonstrate why you should post your job in our job board and also the new price. I hope
you enjoy this new Fireworks tutorial. Feel free to send suggestions for new FW tutorials.
STEP 1 - OPEN FILE
First open a new file with dimensions of 480 x 180px and fill the background with black #000.
STEP 2 - CREATING THE FIRST ELIPSE
Now we're going to create the main element of the tutorial, an elipse. Draw a simple elipse,
then apply aLinear Gradient from the color #003734 to #000. Note that we have a border of
2px with some style. The color is #098191, the type is Graphite, and it has a Grain Texture of
15%. Also, we will use a Noise Filter set at 2.
STEP 3 - THE ELIPSE GROUP
We've just created the first elipse; now let's draw the others. We're going to do that by just
duplicating and changing the colors and shadow of each one. See in the list below how each
should be styled:

Elipse 1- Gradient: #125A5F to #000 - Border: #33CCCC - Shadow: 28, 100%, 35

Elipse 2- Gradient: #025F4E to #000 - Border: #33CCCC - Shadow: 27, 100%, 32
Elipse 3- Gradient: #2C5777 to #000 - Border: #0099FF - Shadow: 26, 100%, 32
Elipse 4- Solid #000 - Feather: 85 - Shadow: 30, 100%, 30
STEP 4 - STARTING THE EFFECTS
We're almost there. Now you must group all five elispses we've made. Just duplicate this
group, and in the top layer group apply a Color Dodge filter. See in the image how the layers
are through this step.
STEP 5 - MIRRORING
In this step you will select one of the groups, duplicate it, and go to Modify > Transform > Flip
Horizontal. After that apply the Color Dodge filter to this group. Now for the last duplication
duplicate the group you just mirrored and change the filter to Screen. Take a look at the
image and you will see all the groups and their own filters.
STEP 6 - ADD ELEMENTS
Ok, we're there! The effect has been created. Now just place your unique elements, your logo,
some text, etc...
FINAL RESULT
The effect is quite simple, isn't it? Yet with this simple effect we can create great images.
Choosing the right fonts and paying close attention to placing text in the best position
relating to the other elements is key to allowing you to make great layouts!

Now share your experiments with us!