Power of Adobe Fireworks is not only in fast web and app prototyping but also in mighty vector handling. This tutorial is going to show you how you can create cute character using some of the basic tools and techniques. Fist of all characters are not my thing but I was inspired by this cute creatures made by great designers from Turbomilk. I have tried to recreate at least something similar. I will explain how i made this cute cat you can see below.
The tutorial
Start your Fireworks and create new 500px x 500px white canvas. That should be just fine to start with. Basic outline of the head shape should be created first. Take the ellipse tool(U) draw a circle than take the Subselection tool (white arrow) and click the drawn circle. You should see the points at the top and at the bottom. Adjust these two points a little with subselection tool by moving them few pixels up and down.
The is the main head part. Color used for fill is solid #FADD99. Give that transformed circle inner glow effect. Filters > Shadow and Glow > Inner Glow and apply these settings from below.
Now to draw the ears I use pen tool. Special tutorial on using Pen tool(p) maybe some other time but it is really important to know how to use this tool. Anyway use pen tool(p) draw the ear and use the same inner glow filter as for the head.
Now using the pen tool (p) again draw another shape that will represent the inner ear. Fill this shape with some pinkish color (#F29193) and apply inner glow effect (filter) twice. As seen on the image below.
Pen tool again and draw yet another shape for that place where ear is folding. Fill this shape with a bit darker color than the base of the head (#F4B317).
That is one ear. For the other ear select all the shapes that make ear copy (Ctrl+c) and paste them (Ctrl+v). Select the three ear shapes on the top on go to menu Modify > Transform >Flip Horizontal and position the other ear to to right place.
Now to make eye(s) draw an ellipse, some 70px x 70px and fill it with linear gradient fill from #FADD99 to #F2EAC7 and apply these two filter from the image below.
Than draw circle, 60px x 60px solid fill #CEF5A6, for pupil. And apply Inner glow filter.
For a bit more details draw a star by using the star shape and set it to 36 points, fill it with white and set its opacity to around 35.
On top of that another circle, with linear fill made like display at the screenshot.
Just one more small white circle with opacity 70% and the eye is done.
Now select all the eye shapes copy and paste them and move them to the right for the other eye. And now all should look like this.
For the nose draw one circle with the ellipse tool and two more circle over it. Now select all 3 shapes and choose punch from the path palette.
Nose shape fill with radial gradient fill with white in the center and rose at the end.
Mouth are made by 3 lines drawn with pen tool. Draw mouth using 3px soft rounded line (color #9E7107).
Now to add a bit of 3d impression draw a circle and by using subselection tool transform it a bit.
Then draw another shape with pen tool and join these two shapes by selecting union paths from the path palette.
Now move this shape below all other shapes (pres ctrl + arrow down) but the head shape, set its opacity to 30% and set edge to feather 6px.
Ok the end is near. To distinguish this cat from a pig 
I decided to give it a spotty look. There are many ways to do that and I decided to use more natural texture. I found neat cat texture (leopard) and resized it to 400px x 400px and pasted it on canvas with cat.
Now copy and paste all the head shape elements (head and ears basic shape) and join them with union path option from the path palette. This shape will be used as a mask.
First select the newly created head shape and press ctrl+c, than select the leopard texture and go to Edit > Paste as mask.
Hide or delete the shape we used for creating a mask. Position the masked layer behind the eyes but above the basic head shape. Set its blending mode to overlay and opacity to around 40%. And there you go.
You can also use that mask shape that we used, make it visible again, move it all the way to the back and add it drop shadow effect.
Not bad I think. Sure it can be done a lot better but I think I covered lot of stuff with this tutorial. If still not sure how to do something I give you original source file so you can check it out yourself.
Free Adobe Fireworks png file with all the layers and styles. Use it as you wish without any restrictions. It is Adobe Fireworks CS5 png file, you will need at least CS3 version in order to use it properly.
