Fireworks Tutorial 1 Creating a fire explosion

[pilgrim_of_mini-monkeys 0]

Fireworks Tutorial 1

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 everyones 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, lets 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 arent 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 isnt 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 were 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 youre 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

[shigajet 0]

Wow! I really like the effect. I'll try it own when I get a chance to create a new sig/banner in the near future. Great tutorial!

[Saint_Michael 3]

not bad for those who use fireworks as their main graphics program.

[BlaqueMajik 0]

I will have to get fireworks and try this out! Very nice effect.

[pilgrim_of_mini-monkeys 0]

not bad for those who use fireworks as their main graphics program.

170322[/snapback]

Thank you. I suppose in Adobe it would be the same process?

[thablkpanda 0]

Great idea,I'm glad to see some Fireworks Tutorials, as I've always found PS to be too complicated (or i'm just too stupid..) But Fieworks is the way to go 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. GJ again man.Mr. Panda

[guangdian 0]

very clearly,i'm just learning it now ...

[mayank 2]

Great idea,

 

I'm glad to see some Fireworks Tutorials, as I've always found PS to be too complicated (or i'm just too stupid..) But Fieworks is the way to go 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.

 

GJ again man.

Mr. Panda

170882[/snapback]

[OFF TOPIC!] hey i dont know whether someone has noticed on your SIG or not that you have written 2X512 GB DDR SDRAM i dont think so that it will be GB i think it must be MB [/OFF TOPIC!]

 

and the tutorial is extremely good....i think same result can be achieved in photoshop as well by using zoom blur...i dont remember exactly as i myself use fireworks

[pilgrim_of_mini-monkeys 0]

Thanks.I will make another tutorial tonight and post it tomorrow at the latest.

[wassie 0]

very nice i like it,but what i like most is that cool fishy

[kraam 0]

Its good just made it doesnt look as good as yours though but hey what can you do. When you say Zoom Blur i dont have that option so i created using 100blur is that still ok.

[pilgrim_of_mini-monkeys 0]

Yeah that is fine. I am using Fireworks MX 2004, so I don't know what older versions have got / haven't got.

[Adamrosso 0]

Nice tutorial. The outcome is quite impressive =D. Anywho, 10/10. Well Deserved =)