This month

• Date: Tuesday, March 18th, 2007 6:30pm
• Speaker: Tim Strickland
• Topic: Making Fireworks kuler
• Location: 601 Townsend St, San Francisco, California 94103 (Kojack Conference Room)

Making Fireworks kuler:

• kuler overview
• What’s new in kuler 2.0
• Prototyping kuler 2.0 with Fireworks
• kuler 3rd party APIs & applications

The task: design a Fireworks tutorial will win a prize:
1st place: 1 copy of Genopal Pro v1.0 + 1 copy of DistriFusion Pro
2nd place: 1 copy of Genopal Pro v1.0 + Playing with Fire
3rd place: 1 copy of Genopal Pro v1.0

Contest will end February 28th, 2008

This is a tip good for poster art. Add a radial gradient in bold text to spice things up. If you’re tired of using borders and bevels, try this.

1. Start off with your text on canvas however you want. Choose a very bold font, I used Impact as it is most common.

2. Select the text and click the Fill Color square, and click Fill Options. Choose gradient instead of the default solid. Then choose Radial among the types of gradients.

3. Choose your colors, preferably darker on the edges and bright on the center.

The result is a simple beautification of your headline or title.

4. And optionally, create a rectangle and fill with another radial gradient.

Drawing
Curves with pen tool
Create custom shapes
Create a grid
Draw a drop of water
Shape editing
Design a website with Fireworks
Create a golden star

Text
Text on path
Patterned text
Chocolate Text
Beveled text with transparent edge
Glass letters
Plastic text

Photo/image
Change color within image
Extracting with Magic Wand
Feathering
Paste inside masking technique
How to use rubber stamp (video)

Effects
Twist and Fade Effect
Motion Trail
Fog Effects
Perspective shadow
Mirror reflect

Buttons
Gel button
Rollover button
Round corner button
Jewel button
Rounded gradient button

Animation
Bouncing ball
Animation and Tweening

Official Fireworks Support Center
Fireworks video tutorials
Comprehensive basic skills knowledge base

I have noticed a considerable demand for a tutorial like this, so I’ve decided to give it a try. It’s not easy, and the result is not perfect, but its a good attempt nonetheless.

Note: The final image is the outcome of much trial and error. But you can pick up the techniques I describe, and analyze the source file for yourself when my explanations get too complicated, which they will.

1. First, create five layers (Using the folder button in the Layers window) like so:

Text (topmost), Canvas 2, Effects 2, Canvas 1, Effects1 (bottommost)

2. Lets color the canvas first. On Canvas 1, draw the following, from top to bottom:

Rectangle: Opacity 60%, Radial Gradient FFCC33, bottom left 70%, and the rest 0%
Rectangle: Vertical Gradient 3399CC, top 0%, bottom 100%
Rectangle: Overlay, Vertical Gradient, top 33CC33, bottom 3399CC
Large circle above: 77% Overlay, Radial Gradient FFFFFF, center 100%, edges 0%

3. As for Canvas 2, draw the following:

Rectangle: 40% Overlay, Radial Gradient (positioned above center) FFFFFF, center 100%, edges 0%
Rectangle: 20% Overlay, Radial Gradient 003300, center 0%, edges 100%
Rectangle: 100% Overlay, Radial Gradient 003300, center 0%, edges 100%

Now your canvas is nicely colored. Basically, its dark on the edges and its a mesh of blue and green.

4. The image has four different kinds of objects. Lets start with Element 1. Draw a light yellow trapezoid with a Vertical Gradient with 16% opacity and 1 Feather, left 100% and right 0%. This will make a fading line, put this in Effects 2.

5. Draw two more similar trapezoids, with variable sides and opacity and color. These two here are placed in Effects 1.

6. Now for Element 2. Draw a long circle segment with 40% Overlay and color it green. Make more of this with varied color, thickness, angle, and opacity. You have to be creative in this one. Place some in Effects 1 and the rest in Effects 2.

Basically you’re making the colors fluctuate from left to right.

7. Now for Element 3. Draw thin tilted light blue triangles with 86% Opacity. Make the Vertical Gradient fade (100% to 0%) angled in such a way that one edge is more faded than the other.

The tricky part is trying to angle the gradient just right.

8. Now for Element 4. Draw a long arc with 50% opacity and 2 Tip Size of 50% Edge, and use Radial Blur on it. I find this to be a lame replacement for those lines you see in the real wallpaper, but its better than nothing.

Make two more of these. Now you have appropriately placed set of four different types of shapes with the right effects. Its all up to your creativity.

9. Now type your text in white, with Inner Glow (Thickness 2, Opacity 12, Softness 1), and Glow (Thickness 0, Opacity 39, Softness 9).

There, this is the best I can do. At least it looks okay when you see it from far.

The good people at Macworld has reviewed Adobe Fireworks CS3 and have given it thumbs up.

If you design and develop Web sites, you can’t afford not to use Fireworks CS3.

See the article here.

Also, Adobe products will be compatible with Leopard.

In the meantime, I am waiting for my copy of Adobe Fireworks CS3 to arrive at my doorstep. I have been using Fireworks 8 for all my tutorials to date, just for your information.

Can anyone highlight any improvements that you find significant?

1. Start with a canvas which is 175% higher than your circle for the drop shadow, reflection etc. Draw a circle and gradient fill it using a sample of blue (dark) and then a dropper sample of a lighter (not white that’s too harsh) shade of blue, or your chosen color.

2. Now grab a copy of the circle and invert it and position it under the existing circle and commands > creative > fade image to fade it out as a reflection then reduce the opacity down to 60%

3. Now we add the inner reflections to create the shiny effect on the surface of the marble. Draw a small ellipse with the same colour (FW usually keeps the same gradient you used earlier) and place it in the circle as in the image below.

4. Now copy the added inner circle and paste it on the top of the circle, again fade it out to get it to blend in the main circle and reduce it’s opacity down to 60%.

5. Nearly there, you can add in a further drop shadow to the left or right of the main circle (make sure that it sits under the main marble and is lowest in the order list in the layers panel. Draw an ellipse. fill = solid, colour=#DDDDDD. width=70px, height=13 pixels, feather = 5

6. You can add in surface elements and an overlapping title for the navigation item if, like me, you needed to use a number of these on a page.

Have fun, I hope this was of use to somebody somewhere!

This tutorial will show you how to create a barcode for any purpose.

Step 1.
Select the Pencil Tool, set the color to black, and make sure both the Anti-aliased and the Auto erase boxes are unchecked. Holding down Shift, start drawing random lines on the stage. You should get something like this:

Step 2.
Make sure the layer of the bitmap is selected, and using the Marque Tool, create a selection box anywhere on the bitmap with a width of choice but a height of 1. Right click on the selection, then pick New Bitmap Via Copy.

Step 3.
Now that you have what you need, go ahead and delete the original Bitmap layer (the random pencil lines). At this time, on the stage you should only see a few black dots/pixels lined up. Increase the height of this Bitmap by using either the Free Transform Tool or by imputing the desired height of the barcode in the Properties Panel.

Step 4.
We all know a barcode has numbers. Using the Marque Tool, select a portion of the barcode as illustrated below, and press Delete. Add some randomly spaced out numbers in the cleared portion.

Step 5.
Get creative! Add text instead of numbers, or both. Place the barcode on a sticker and create a peeling effect featured in “Creating a Realistic Peelable Sticker Effect in Fireworks” tutorial. Give the sticker a Web 2.0 touch featured in Justin’s “Create Web2.0 logos with Fireworks” tutorial.

*Download not available*

Draw a realistic enough picture of a planet in space completely from scratch with Fireworks. You don’t even need any images, its all there in your textures. This tutorial is inspired by this one.

1. First, draw a rectangle the size of the canvas. Now use filters in this order; add noise with amount 27, add Brightness -46 and Contrast 98, then add Gaussian Blur 0.8. Now you have stars. This shall be the lowest layer, nothing goes beneath this.

2. Draw a circle and fill it with the Paint Dark pattern. Change Brightness to -56. Add a white Inner Shadow with distance of 9, opacity 65%, softness 10 and angle 45. Set its texture to Metal 31%. This shall be the Planet layer.

3. Draw two circles the exact size and shape of the Planet, place them directly above it. Fill the first one with radial gradient with white edges opacity 22 and black center opacity 0. In other words, its an alternative to a white Inner Shadow. As for the second circle above that one, resize that to 95% of its original size, and add a Gaussian Blur 4.8 and 75% opacity.

4. Draw two black circles on top of the previous two circles, the size of the Planet. Resize the first one to 110% original size and set its edge to feather 72 and opacity 78. The second one, which is above the first, set to feather 49 and opacity 74. Position them slightly over to the top right.

5. Draw a white circle on top of all layers, the size of the Planet. Resize that to 55% and position it on the bottom left. Set its edge to Feather 55 and the shape to Overlay.

6. Draw another white circle the size of the Planet. This time, delete the top and right vector points, leaving an oval on the bottom left. Set its edge to Feather 24 and opacity to 38. Arrange it underneath the Planet.

7. Now draw two smaller circles 60% size of the Planet and place them beneath everything. Set both to the Flames pattern, edge feather 97, and opacity 60%. Color fill the bottom one to red with overlay. Then change the saturation of the top one to -100 and Brightness -15 and Contrast 64. Now you have a little bit of space texture.

8. Draw a white oval and set opacity to 70 and Overlay. Place it beneath all the layers, making the stars on the left of the Planet brighter.

9. Draw one last circle and set its pattern to Smudge Red, edge Feather 100, opacity 10, Saturation -100, Brightness -15, Contrast 64, and put it on top of all layers, towards the bottom left. This makes more space texture.

There you have it, a convincing planet. Do some tweaking and you can make a new solar system!

A tutorial which will give you step-by-step instructions to create a peeling effect. Great for placing in a corner of a website to reveal news or offers.

1. Create a rounded rectangle having the same color as the background. Apply to it an outline of any other color. This will be our sticker.

2. Duplicate the sticker and change the color of the copy to anything you want. This will be the surface underneath the stiker, in other words, place its layer below the sticker’s layer.

3. Duplicate the sticker one more time. We will change its color later on. This will be the back of the sticker. Place its layer between the Sticker and Surface layer.
NOTE: No change of position should be done during this tutorial.

4. Now that we have what we need, it’s time to modify the paths. Select the sticker and ungroup it to make it a changable path, taking away it’s custom shape properties (yellow adjustbale dots). Good! Now using the Subselection tool (White arrow) sub-select the sticker so it has a blue outline and white dots at intersections. With the sticker sub-selected, switch to the pen tool. Add two extra points as shown bellow (.a). Change the position of the dots and anchors to create something similar to the illustration below.

5. Now let’s modify the back of the sticker. For an easier approach, make the Sticker layer invisible by clicking on the eye next to it. As done in the previous step, ungroup the rectangle representing the back of the sticker and select it using the Subselection tool. Add two more points at the same location as those added to the Sticker (.a). Delete the the two points that create the rounded corner and insert one instead as shown below.

6. We are now done with modifying paths. Let’s add color. Select the sticker and change it’s fill type from Solid to Gradient. One of the sides of the gradient should be the color of the background, while the other should be a darker shade to simulate shadow. This is shown below:

7. Change the color of the back of the sticker to white. Add a Inner Shadow effect with the following values: distance-4, opacity-30%, softness-30, angle-315 degrees.

8. Select the rectangle representing the Surface and add an Inner Shadow with the following values: distance-1, opacity-30%, softness-2, angle-315 degrees.

9. Change colors and add text however your heart wants.