Making Fireworks with Fireworks

Posted November 16th, 2007 by Mike Cherim

If you found this post because you’re a pyromaniac, sorry. This is a simple image-making tutorial using the Abode Fireworks image editing software. I will specifically be making fireworks with Fireworks, as the post title implies. You could, however, use the program of your choice. I’m won’t be using tools you can’t get with most mid-level image editors. This tutorial assumes you know the basic tools that will be mentioned. If you don’t, ask in a comment. Okay, let’s get started.

Step One

To begin you want to make the burst structure. To do this I have drawn some intersecting lines of varying lengths. Using the line tool I made one vertical line and one horizontal line, plus two x-intersecting 45-degree lines. The remaining four lines are drawn at hand angles. (Rotating the lines may ruin the crispness so drawing them is best.) Once drawn I grouped these lines, colored them brightly using primary colors, then I made copies, resizing some of them as I went (making some burst children). I also rotated the groupings at various angles with the manual rotate tool located in the upper-left under the primary pointer, and by flipping the images vertically and horizontally. The point of this exercise is to create a little randomness. Think chaos!

Step Two

Well that looks like crap — it’s missing something. Oh, yeah, we need some night. To do that, of course, I simply changed the web layer color or background to pure black. I also made several more copies of these “burst structures” resizing them, making some small ones, and assigning new line color values if needed to create more distinct color patterns. Once that was done I grouped all of them into a single burst structure grouping. I then copied this grouping twice, sending the copies to the back. I then applied a gaussian blur effect (default radius of 4.1). For the last part of this step I enlarged both blurred images and shifted them 2-3 pixels to the left and right. Doing this created a nice glow. I could have used the glow tool, but that would have been too uniform plus I wanted the layers.

Step Three

Okay, now it’s colorful and has a certain effect which is kinda nice. But I am actually hoping for slightly more action and realism within the limits of simplicity. To do this I first made some gray circles with color codes #666666 and #333333. I make these about half the size of the main burst structures. For this image I hand drew nine circles, all similarly sized with the two colors mixed. I made perfect circles by drawing them while holding my shift key, but doing this is probably not necessary. Next I loosely grouped (selecting while holding shift) the darker circles (five of them) and applied a 20 pixel feather edge, then I did the same to the lighter circles. I then grabbed them all, grouped them, left them on top and applied a top-down fade. Doing this left some sharp edges but I just pulled (resized) them to the edge of the canvas.

Step Four

The next thing I did was to copy the “smoke” and discard the fade. I then reapplied a new down-top fade to the copy. I think this is easier than trying to vertically flip the faded group of circles. The upper level smoke was a little on the bright side so I sent it back two places behind the crisp burst structure and the uppermost blurred one. It was still too bright — and I didn’t want to send it all the way back because I wanted more depth — so I applied transparency (80% opaque). For this step I did one more thing: I wanted less definition of the crisp burst structure line groups near the base of the image so I applied a down-top fade to the group. I have to warn you this operation is a system resource hog, but the outcome is an image size that is considerably less. I then gained a little back by sharpening the crisp burst structure group. It was worth it, though.

Step Five

The image still needs more life and more action. I attempted this by rolling up my sleeves, grabbing the pencil tool, zooming in at 300%, and applying the small burst grandchildren around all of the ends, matching the colors as needed. Some sparks if you like. I also added several white ones to further add to the chaos and lend points-of-light brightness. I think it’s starting to look cool. In fact, this step is done and I’m now ready to put these fireworks to use creating a larger image like that shown below in what I’m going to call “Step 6″ anyway.

Step Six

To make a fireworks scene I used two copies of “Step 5’s” image, grouped them with a single burst structure overlap, copied the group, then flipped it vertically. I moved the flipped scene to the bottom of the oversized area but left its arrangement layered on top of the upper group. I applied a gaussain blur effect (with a 2 pixel radius) to the lower scene. Instead of applying transparency, though, I decided to apply a textured mask so as to create a better defined horizon line. To do this I made a dark blue rectangle, then I gave it a rough pattern. I made two layers like this, one with 15% “parchment” and the other with 15% “oil slick” but it’s not terribly important. The effect I was after was a reflection on calm water. The help the illusion, I added a ship silhouette on the horizon. The last thing I did was throw in a few more pencil tool sparks, this time using bright yellow.


Other effects could be applied, more bursts made, single color bursts, fountains, whatever you can think up. Launch contrails could also be added, more smoke, a crowd silhouette, and more. A distort tool could also be used to drag the edges and make it look like it’s a windy night. There are many different way I could have made these fireworks, but this tutorial should get you started with one method, your imagination will take you the rest of the way.

2 Responses to: “Making Fireworks with Fireworks”

  1. David Zemens responds:
    Posted: November 17th, 2007 at 8:32 am

    Thanks for the inspiration and technical tips, Mike. That’s a pretty cool looking graphic you have there. Now you have me wondering just what project is on the horizon that prompted you to design these fireworks? Time will tell, eh?

Sorry. Comments are closed.

Note: This is the end of the usable page. The image(s) below are preloaded for performance only.