MaCo Graphics
 

Animated Envelope - Part I

Software: Ulead PhotoImpact 7,  Gif Animator 5

Skill Level:  Intermediate

Featured Tools: Path, Transform, Eraser, Stamp Tools

Additional Tools:   None

Note:  Create an animated envelope that would look great on a web site to use as a link to contact you.

 

Back to Tutorial Index


create an animated envelope

This animation consists of seven different images of an envelope.  These will be brought into Gif Animator after creating them in PhotoImpact.

Note:   Each canvas will be 102x100 in dimension.  After creating the first image, you will save your image and open a new 102x100 canvas to create the second image, and so on until all seven canvases have their images, are completed and aligned and ready to bring into Gif Animator 5..

 

Image One

Open a new canvas 102x100.  With the Path Drawing Tool  Path Tool, select Shape: rectangle, Color: light blue (#B1C9DA), Mode: 3D Round. 

Shape, Color, Mode

 

Draw a rectangle approximately 95 in width by 60 in height.  To check your dimensions you can go to Format, Image Size.  From the drop down menu click on Pixel and check your sizing.   You can resize it here if it's off.

Click on the material tab (shown in the screen shot above).

Add Some Lighting

Click on the Light tab and from the dropdown menu, change the lighting from direct to spot.  Set ambient at 80.  

In the Path Panel box, set the border and depth at 1.

Path Panel Box

Your rectangle should look like the one shown below.

Rectangle

* Position the rectangle by using the Align tools.  Click center horizontally to center it and Align to bottom to bring it to the bottom of your canvas.   Right click on the active rectangle and go to Properties.  Click on the Position and Size tab.  It should be aligned as Position:  Left: 2 and Top: 41.   Throughout all of your images, you'll want the base rectangle to be in this exact position. 

Click on the Path Tool, Custom Shape.  Click on custom shape A08.

Custom Shape

Custom Shape

Draw a triangle approximately 98 in width.  The top of the triangle is too long for the flap of the envelope.  To resize this, go to Format, Image Size.  Check "Apply to Selected Object" and in User Defined put in 98 for the width and 40 for the height.  Uncheck "keep aspect ratio".  Click OK.  Align the top flap of the envelope directly over the rectangle.  It should look like the image shown below.

Envelope

Duplicate this triangle.  Change the color of the duplicated triangle to a darker color blue.  Go to Edit, Rotate and Flip, click on Rotate 180.  Place the triangle as shown below.

Envelope

With the Path Tool, Shape: rectangle, Color: white, Mode: 3D Round, create a rectangle approximately 45 in width x 55 in height. 

Envelope

Using the Rotate by Degree tool, put in a 45 and rotate clockwise.   Rotate  Rotate

Click on the Transform Tool.  Transform Tool Choose Slant.  Using your mouse at the corners of the note paper, manipulate the rectangle to fit the corners of the triangle.

Slant

Envelope

 

You can change the lighting of the note paper by clicking on the 3D tab of the Path Panel.  Click on the "lamp" underneath Lighting.  Move your mouse over the paper until you get the desired lighting effect.  You're image should now look like the one shown below.

Path Panel Box

Envelope

Save your image:  To save this first image, click on the spacebar to deselect all objects.  Go to View, Base Image.  When the Show/Hide Base Image Confirmation box pops up, click ok.  Your background is now transparent.  Go to Web, Image Optimizer.   Click on Gif.  Check the transparency box.  Your background will appear transparent.  Save this in a separate folder and name it 1.gif. 

Save your image

Image One

Image One

 

You've just completed the first image for your animation.  This was the hardest part.  The rest of your images will be much easier as you will be cutting and pasting and doing a bit of resizing.   All of your images will be saved as noted above

 

* Note:  Remember, the most important thing about making each image will be your positioning of the original rectangle (the base of your envelope).  Make sure you check the properties in each.   If one image is off by 1 pixel, your animation will not appear smooth and appear as if it's jumping.

 

Part 2     Part 3

 

Back to Tutorial Index

 

© Copyright MaCo Graphics.
MaCo Inc.
All rights reserved. Please read our copyright statement. This document may not be translated, duplicated, redistributed or otherwise appropriated.

 

bottom.jpg (15884 bytes)