Here's how I prepared the fireworks to match the cityscape sky.
After opening the firework images into Photoshop, I make a duplicate
of the Background layer (the fireworks image).
I then click on the eyeball icon for the Background (bottom) layer in
the Layers panel to hide that one from view.
Next, I open up the Levels dialog (go to Image > Adjustments > Levels).
This dialog showcases the brightness distribution of the image:
What I want to do is drop out the "static" in the night
sky and make it pitch black. I do this by bringing in the sliders from
the outside in providing a sharper contrast in the image:
With that in place, I use the Color Range selection method to pick
most of the color in the night sky. Go to Select > Color
Range to bring
up the dialog:
I select a portion of the night sky in the thumbnail in the dialog
and set the Fuzziness slide to a value of around 40. This selects
most of the night sky for me. Then I hit the Delete button. This should
eliminate most of the nighttime sky from the image.
The next steps are used to help create a seamless transition for the
Fireworks to the Web page's background. First, I add a new layer and
fill it with the musty color used in the cityscape. Then I set the
layer with this color from Normal setting to Linear Dodge (Add) using the menu at the top of the Layers panel.
This gives the appearance of the fireworks exploding over our intended
background color. However, in order to export as a GIF or PNG with
transparency, we need to delete most of this background sky.
To do this, repeat the same steps for removing the original nighttime
sky. However, this time, you will delete most of the night sky
color layer!
Why do this? Well, we want to create a smooth transition—so
we need to apply or overlay the background color we want against the
fireworks display. When we export the image with transparency, the
fireworks image won't look out of place.
Exporting to GIF and PNGs
Next step is the easiest part. Well, relatively. With
the background deleted and only the firework being displayed, select File > Save
for Web (CS5 users, select File > Save
for Web & Devices). Then set the options to export the image
as a GIF:
Also, experiment with the PNG-24 setting. With transparent PNGs, more
than one color can be transparent. This makes for a more realistic
layering effect when placing images on top of one another.
When you're done, head back to the exercise to keep going!
