Photo Paint Lesson 4: Animated Gifs

Complete the project, use the notes below to help you learn techniques for working with the
software.

Project 4: Create an animated GIF, with at least 20 frames. Save it as paint4.

 Make a new image in Photo Paint

 Click on "Create a Movie", choose 8-bit Paletted as the colour type
 Set the size no bigger than 7" by 5" , and the resolution to 96
 Create a new image in Corel Draw
 Change your page size to 7" by 5" (or the same size as you made the movie in Paint),
and the resolution to 96 (under Layout/Page Setup)
 Test that your 2 images will be exactly the same size - draw a rectangle that fills the
whole page in Corel, and fill it with a color. Now, copy and paste it into your photo paint
movie frame 1. It should fill the entire page. If it doesn't, adjust your page size in corel
draw until it does.
 Now draw your first frame in corel draw. When you are done, copy and paste it into your
Paint movie, in frame 1, then choose Objects/ Combine all objects with Background.
 To add more frames to your movie, choose Movie/ Insert Frame.
 Go back to corel draw, change your drawing into what you want it to look like in the 2nd
frame, copy and paste it into frame 2 in your Paint movie, and combine it with the
background.
 Repeat the above steps to draw your movie frame by frame.
 When you are done, make sure to Save it as an Animated Gif file.

Samples

Hoops The Cliff Mask

Eric Lee Brandon Weber Laura Bilokryly

The Storm
Skateboarder Booger
Travis Braun James Garland
Jessica Edinger
DragonSlayer Fishsticks Confused
Dustin Zeeb David Sime Angela Hoban
Johnny's New Red
Jimmy's Rebels Flowers
Bike
James Garland Nicole Hansen
Shea Weber
Skate
Curtis Witowski
Notes:
Gif Animation

An animated gif is created by drawing,, and then playing a series of images fast enough that
objects appear to be moving. Animated GIF files contain one or more images that display
sequentially to produce an animated effect, much like a traditional cartoon flipbook. You can add
as many images to an animation as your computer memory allows. More images with smaller
movements provide smoother motion, but create larger files and longer download times.

Animations are a tricky balance of the number of frames (fewer frames = choppier animation)
and the length of time to download them (more frames = longer download time).

Photo Paint lets you create a gif animation, by inserting pictures frame by frame, until you build
an animated graphic. The pictures that you insert can either be drawn directly in Photo Paint, or
you can draw them in Corel Draw, and copy/paste them frame by frame into Paint. Once you are
done, your movie is saved as a .gif file, which makes it into a nice small file size.

Example:

Frame 1 Frame 2 Frame 3

Frame 4 Frame 5 Frame 6

Frame 7 Frame 8 Frame 9

Frame 10 Frame 11 Frame 12

 The Finished Animated Graphic

Creating an animated gif in Photo Paint:

1. Create a New Animated Movie file:

 Click on File/New
 Choose a color mode
 Choose a paper color
 Set the dimensions of the image (no
bigger than 4 x 5 inches or 5 x 4
inches).
 Set the resolution to about 96 dpi.
 Click on the Create a movie check
box
 Type in the number of frames to
include in the animation (start with
10, you can always add more later)

2. Create a new Corel Draw Image

 Choose Page Setup and change your page to the SAME SIZE and RESOLUTION as
your photo Paint page
 Start by drawing a background for your image that fills the entire page (even if it is just a
white rectangle)
 Try copying and pasting it into frame 1 in Paint to make sure it's the same size. If not,
resize the photo paint paper size so the image from Corel draw is exactly the same size.
DO NOT resize the corel draw image, or your animation will appear to jump around.
 In Corel Draw, draw the image for your first frame
 Use Edit/Select All or the selection tool to SELECT your OBJECTS and the
BACKGROUND
 Copy them
 Go to Photo Paint and PASTE them into your FIRST FRAME
  From the 1st frame choose, objects/Merge with background (if you skip this step, your
image will appear on all the frames)
 In Corel Draw, draw the image for your 2nd frame (it might be easier to have several
pages of images in Corel Draw, so you can back up a few steps if you need to- just copy
and paste your original image to a new page and change that one instead of the original)
 Copy and Paste your objects and background into FRAME 2 in Paint
 From the 2nd frame, choose objects/merge with background
 REPEAT the above steps for as many frames as you need
 When you are done adding all your frames, choose File/Export then choose .gif as the
file type. Your animation is now ready for putting on a Web Page.

Viewing and Navigating through animation frames:

You can use the controls in the Movie menu or the controls at the bottom of the movie window
to view your animation and navigate through its frames.

 To Play : Movie/Control/Play movie

 To Stop: Movie/Control/Stop movie
 Start over: Movie/Rewind to beginning
 Go to end: Movie/Fast forward to end
 Forward: Movie/Control/Step forward one frame
 Backward: Movie/Control/Step back one frame

Web Developer Tutorial: Create Animated GIFs with CorelDRAW and

PHOTO-PAINT

By Nathan Segal

Animated GIFs can add a great deal to your project and are a favorite item in online advertising, where
one creates banners of various types. In this tutorial we will create a GIF animation using CorelDRAW
and PHOTO-PAINT.

Here's the finished animation.

To begin, we will start in CoreDRAW by creating some text on a textured background. To
simplify the file creation, we have the ability to use multiple pages in CorelDRAW. The only
thing that will change is the text.

To elaborate, for this animation, we will create a master size of 728x90 pixels, which we will
maintain throughout the entire animation. Note the number of pages on the bottom left of the
screen shot.
Here is the sequence of images that we will use for the animation.
The next step is to go to each page and make sure all the elements are selected (Ctrl+A). From
there go to File: Export (Ctrl+E). In the list at the bottom of the dialog box, make sure that the
Selected only checkbox is enabled. In the Save as type popup, choose PNG and click on Export.

Note: Save each image in sequence. i.e. frame1.png, frame2.png. All of these images need to be
stored in the same folder.
This brings up the Convert to Bitmap dialog box. In this step, there are several things to observe:

 Make sure the dimensions match the size of your animation, in this case 728x90 with a screen
resolution of 96 pixels/inch
 Enable the Maintain Aspect ratio checkbox
 Enable the Anti-aliasing checkbox
 Set the Color mode to RGB Color 24-bit

NOTE: Do not save palleted 8-bit files. These won't work in an animation. You must start with 24-bit files
first, then save those as an animated GIF once the sequence is complete. Now that we have saved the
images as bitmap files, we now need to launch the PHOTO-PAINT application, which is a bitmap image
editor.
To get started, click on File: Open. Choose the folder where the file is stored and double-click on
it. When it opens in PHOTO-PAINT, go to Movie: Create from document in the menu bar. The
image is now the first frame.

This also brings up the Movie docker on the right of the workspace. Note that at the right side of
the image, the time is set to 200ms.

We will now add frames to the animation coming directly from the image files without opening
them first. To do this, go to the main menu and click on Movie: Insert from file.
This brings up the Open an Image dialog box. Choose the file (frame2.png) and click on Open.

This brings up the Insert File dialog box, which governs the position of the frame in the
animation. Here, we want to accept the default setting settings, which are:
Insert: After
Frame: 1
Click on OK to accept.

Continue using this process to load all the frames. Here is what the Movie docker looks like with
all the frames loaded.

To get a feeling for the animation, click on the Play button at the top of the Movie docker
window. The animation will play back in the active window area at a consistent frame rate of
200ms. After some experimenting, I changed the frame rates to:

Frame1: 2,500ms
Frame2: 200ms
Frame3: 200ms
Frame4: 200ms
In the Movie docker are 13 frames. This is because I loaded frames two through four, four times to
create a blinking effect in the animation.

Now it's time to save the movie.

To do so, click on File: Save as. Choose the folder where you want to save the file. From the
Save as type list box, choose GIF Animation. In the Sort type box, choose Animation. Click on
the Save button
In the Convert to Palleted dialog box, accept the default settings and click on OK (you can
reduce the number of colors here if your sequence only uses a few colors, which will make the
file size smaller).
The GIF 89 Animation Options dialog box gives you a great deal of control over the animation.
The first thing to do is activate the Frame Settings tab and use the following settings:

Transparency: None
Enable Use global (uses the same color palette for all frames)
Frame Delay: For the first frame, I used 250/100 of a second, for frames two to four, 20/100 of a
second (these were set in a previous step and do not need to be changed here).

Leave all other settings at their defaults.

Next, click on the File Settings tab and use the following settings:

Page Size: Automatic

Color Options - Convert To: 256
Frame Repetition: Loop Frames enabled.
Set Stop After to: 5 Repetitions
Test the Animation using the Preview button. When you are satisfied, click on
OK.
As a final step, load the animation in your browser to see how it plays back. If necessary, go back into
PHOTO-PAINT to adjust it further.

Conclusion
You have now learned the basics of how to create GIF animations with CorelDRAW and PHOTO-PAINT.
There is much more that you can do. I invite you to explore this process in more depth.

Make a Comment

 Lovesaid on March 31, 2014 at 9:51 am

I'm very grateful for this awesome tutorials... Thanks so much

Reply

 justicesaid on June 11, 2013 at 10:36 am

 thanks very much.Has been very helpful.it gives an end to my GIF Design drought

Reply

 Msaeedsaid on February 13, 2013 at 1:27 am

http://www.Saeedbaba.com nice post and nice blog

Reply

 Lucysaid on August 31, 2012 at 3:17 am

Thank you so much for this tutorial, man i just love designing and learning new things!!

Reply

 Franksaid on August 17, 2012 at 10:57 am

This is great but my animation is hiden under my first frame. How do I fix that?

Reply

o mattsaid on February 14, 2016 at 3:02 am

yes. I have the same problem... when playingback or in exporting box, my first
frame replaces all the others...? where is the catch? I checked everything....

Reply

 Dietrichsaid on June 9, 2012 at 3:05 pm

Thank you, I was looking for ages to find thre easiest way to create animated gifs with
corel draw. We design websites and we use corel draw but this feature I needed to learn.
It looks a bit complicated, thec detour via png but once we get the hang of it it is quick.

Reply

 Theresasaid on April 25, 2012 at 5:25 am

Thank you for this awesome tutorial!

Reply

 Princesaid on March 8, 2012 at 3:29 pm

 I was struggling to make gif file. But U made it so easy for me... Now I can also create
animated files... wow... thanks...

Reply

 kevin russelsaid on October 24, 2011 at 2:11 am

I make neon signs and sometimes a client really needs to visualize the flashing sequence
of multiple neon tubes. This tutorial just helped me design an emailable sequence gif that
convinced my customer how his signs will look when flashing. thank you for the
tutorial... I'm pretty good with Corel but could not figure out PhotoPaint.

Reply

o James Coopersaid on January 1, 2015 at 10:19 pm

Why dont you just use the photoshop to make a gif file? Is it not the perfect
choice of making it? I have seen some of the sample gif images have been done in
photoshop in www.clippingpathindia.com website and I did find them good
enough.

Reply