Creating a fire explosion.
Step 1:
Firstly, you must create a new document. I prefer to use 150x285 when creating this image. There is no real reason; apart from the computer I use to web design is pretty old and slow when dealing with heavy graphics manipulation. I also use a resolution of 99 pixels per inch. This may not be everyone’s taste, but I find it perfect for clear images when working with JPG. If you are using GIF slices, then you may want to make it a bit higher.
I always use a white background. This helps with your eyes and judging distances for when you lay down the initial background. Transparent backgrounds have always messed up on me.
Step 2:
Now that you have your workspace, select the Rectangle Tool in the vector shapes and draw a rectangle that is 150x285. Then make the X and Y co-ordinates 0. Then, change the fill colour to #141414. It is a lighter shade of black. You may use any other black variant as long as it stays under #2E2E2E. You will not be using this square for quite a while. All will become clear about its purpose later, but for now, let’s create that explosion.
Step 3:
I always shied away from using the bitmap tools unless I had to. However, they are probably the best way of creating 3D digital images, which I like and many other people like to see on websites. Now, select the Brush Tool. Change the size to 12 and the colour to #FFFFFF. If this hurts your eyes, then no pain = no gain. Start by scribbling from the centre outwards in a linear function, like the image below.
As you can see, the lines aren’t exactly straight. This is the whole purpose of using the brush tool. When drawing the “splash” make sure to double back on the line you are drawing. This will save a couple of seconds. Your image can be more uniform or messier than the one above.
Step 4:
Now change your brush to size 5. This is thinner and will be the backbone of most of the explosion. Also change the Edge to 80. This will make it less blurry along the edges of the image. Then when you have finished it should look similar to the image below.
There are also diagonal lines from top left to bottom right and bottom left to top right. You do not need to include these lines, but you can if you wish.
Step 5:
We are now ready to make it into an explosion. At the moment your probably thinking, well it isn’t fire explosion looking. That is the beauty behind this model. If you make it any colour you want, it suddenly becomes more than just a fire explosion. It can be a new background to an object, such as a car or just another digital image. To make the image look more like an explosion we’re going to add a blur to it. Firstly, select your bitmap and go to Filters > Blur > Zoom Blur. Have the amount at 100 and quality 100.
Please note that you should only use the filters menu when working with bitmaps. If you try to use it with vector, it will change your image into a bitmap. To use filters on vector shapes, use the Effects component in the Properties panel. Your image should look similar to the one below.
Step 6:
This is mainly the experimental step. To change the colour of your new object, add effect of Adjust Colour > Colour Fill.
Change the colour to whatever you like. I personally chose to go with a marine colour and then added a little fish to the image and some text to come up with this:
Step 7:
Still not finished! We now need to put that rectangle into action. I told you that it would be useful soon enough. Now, select your bitmap, object and text and group them together. You can press Ctrl+G in Windows to quickly achieve this. Then cut the image (Ctrl+X). Afterwards, select your rectangle, go to Edit > Past Inside. Then your image will re-appear inside the rectangle.
If you’re wondering what that was about, then this is the answer. When using this explosion for web design, and you are creating the layout directly in Fireworks (like I do), then you will often come across the problem of overlapping. Now, by pasting one object inside another, the overlap disappears and the problem is solved. It keeps the design of your site clear-cut. However, “retro” sites are to stay away from this, as they survive by using obnoxious, but effective, layering.
Stay tuned for more tutorials.
--mik
for low-intensity graphics design -> mid-intensity. People like you guys that constantly make sigs, would need PS. But great job man, and Pilgrim, no the tutorial wouldn't apply specifically, some feature-names would probably be different, however, it's a similar process.
