2 stage animated mouse over web button in CorelDRAW

Hello again,

This is a basic tutorial on making a simple animated mouse over button in CorelDRAW.

The most important part of making animated buttons is having a designated border area for registration. Simply put, an outer edge that will remain stagnant while the content within will be "animated".

Here is a basic rectangle drawn in Corel DRAW X3. I sized it to 500 pixels wide and 230 pixels high, made it yellow and centered it by hitting the P key. Make it any dimension and color you wish. Easy.



Next... I vectored out an image of a cartoon boy and girl.


Then I adjusted only the inner shapes of the cartoons to slightly more enthusiastic expressions. Make sure not to move the rectangle or any part of the cartoon that should not have any motion as that will affect the registration and the illusion of slight animation. The second stage looks like this.

Notice that I filled in the text and enlarged the eyes and the mouthes a little to give the animation a little personality.

Here is the final animated button. (It will be cut to be two separate buttons).

You can publish this button in many ways from here. I just cut this one in half and saved it as a jpeg and coded it in HTML as a button with link.

This can be a lot simpler with maybe just a square turning into a circle or even more elaborate with two photographs changing.

You can see a sample of this button here... It does not link to anywhere yet.

I have built my whole site this way. Here are a few more examples of this method. Thanks!

airbrushing samples

embroidery samples

artists

Keywords: how to make a simple 2 two stage functional animated button for interactive web design using vector graphics and raster methods corel draw coreldraw adobe illustrator photoshop