This article shows how to make GIF animation from Openclipart by using a free vector animation editor 9VAe.

What is 9VAe ?

• Unique free 2D animation software which can export SVG SMIL animation .
• Based on 2D keyframe animation such as Synfig Studio.
• Lightweight and stable. It can work well even on RaspberryPi a board computer.
• It can export alternative movie such as Animated GIF / APNG or QuickTime (Macintosh).

You can download 9VAe from the links as follows;

Download (Click in the following links)	Download from Vector	how to
9va-win (Windows)	9va-win (Vector)	windows
9va-mac64 (macOS 10.10-) 9va-mac (Old Ver.10.4-10.9 is here)	9va-mac (Softnic)	mac
9va-pi (Raspberry Pi)	9va-pi (Vector)	pi
9va-pi (Ubuntu/Linux Mint/Xtra-PC (LinuxX86-32bit))		linux
9va-kids (Windows) Kids version)

• If you can't run 9va-mac, check the Gatekeeper setting in System Preferences > Security & Privacy > General > "Allow applications downloaded from:".

What is Openclipart ?

• Library of over 80000 free clip arts.
• Stored in Scalable Vector Graphics (SVG) format, they can be resized without losing image quality.

This article explains how to make a drill rotating animation from Unicorn Openclipart (A) as follows.

Preparing1 : Import SVG from Openclipart

1. Open SVG "Caticorn:222406" from Openclipart
2. Click right mouse button on [DOWNLOAD] button(B). > Click 'Save Link As' in the menu. (The menu item will be different according to your browser.) > Click [Home]. Double click [Desktop]. Click [Save] button.

Now SVG file "ChatLicorne.svg" will be saved on your desktop.

Preparing2 : Download Free animation editor '9VAe'

You can download the software from the links as follows;

• Windows--9va-win
• Macintosh--9va-mac
• Raspberry Pi / Ubuntu-- 9va-pi

Step 1．Open clipart with 9VAe

1. Run 9va-win, 9va-pi or 9va-mac
2. Click [File] on the menu bar(A) > Click 'Open'. Now Open File Dialog Box will appear.
3. Click [Home] > [Desktop] > Click on ChatLicorne.svg. > Click [Open].
4. Then the message "Some Data couldn't be converted. (Filter)" will appear. This message occurs because 9VAe doesn't support Filter object. >Click [OK] button.
5. Click the shape(B) > Hit Command+Shift+G Key(Mac) or Ctrl+Shift+G Key(Ubuntu, RaspberryPi) twice (Ungroup x2). Now you can select the shape separately.

Step 2．Delete unnecessary shapes

In this example, unnecessary shapes except the horn of the unicorn should be deleted. But if you select the parts of the body and delete them, all the purple outlines will be deleted together. To avoid this, register the purple outlines to the area(D or E) and lock them as follows.

1. Click the purple outline (B) and select it.
2. Click [+] button (C). Now the selected shape will be registered in the time control panel (D).
3. If the purple outline appeared in the button (D), Click the button (D) > Click 'Lock' on the menu. Now the purple outline is locked and it cannot be selected.
4. If the white face appeared in the button (D), click the button (D) > Click 'Lock' on the menu. Now you can easily select the purple outline. Click the purple outline(B) and select it. Click [+] button (C). Now the purple outline will be registered in the button. Click the button > Click 'Lock' . Now the purple outline will be locked.
5. If the face is registered in the button, click the face registered button (D or E) > Click 'Lock'. Now the checkmark will disappear and you can select the face again.
6. Confirm the red 'X' marked on the purple outline registered button. Drag a rectangle enclosing eyes, mouth, legs, and the tail.
7. Click [Delete] button(A). Now the shapes except the horn and outline will be deleted.

Step 3．Delete unnecessary outline

1. Click the purple outline registered button (A) > Click 'Select'. Now the purple outline will be selected.
2. Click [Edit Point] button(B). Now control points will appear.
3. Drag a rectangle enclosing unneccessary points on the outline(C).
4. Click [Delete] button(D). Now the selected points will be deleted.

Step 4．Create a new outline

1. Drag a rectangle enclosing points on the outline(A).
2. Click [Zoom in] button(B) several times. Now the selected points will be zoomed up.
3. Click the background of the screen to clear selection.
4. Drag proper control points(C,D) to the position on the horn's outline.
5. Select the unneccessary points and click [Delete] button(E) to delete them.
6. Select points and rotate your mouse wheel, then you can zoom in and out to see the selected points.

Step 5．Round corner and Sharp corner, Add points

9VAe has two types of control points. The one is Round corner and the other is Sharp corner. The rectangle mark stands the Round corner. The triangle mark stands the Sharp corner.

1. Hold down the Shift key and click on the points you want to set the sharp corner type(A).
2. Click [Sharp corner] button(B). Now the selected points will be sharp. Click [Round corner] button(C), if you want to set the round corner type.
3. If you want to add points, Click [Add or delete Point] button(D). Move the mouse pointer on the edge where you want to add a point, then the pointer will change to cross shape. Click mouse button to add a point there.
4. If you want to undo the previous action, click [Undo] button (G), or hit Ctrl+Z or Command+Z Key(Mac).

Step 6．Copy page

In 9VAe the 'Page' means the keyframe of animation.

1. Click the [<] button at the left of the page bar (A) > Click 'Add Previous Page' . Now the new page will appear on the page bar. You can click the [+] button at the end of the page bar (B) > Click 'Add Next Page'. Now the second page will appear on the page bar. In this case you are on the second page. Click the first page to go to the first page.

Step 7．Onion Skin View

1. Fix the zoom factor by using [Zoom] button(A,B) or mouse wheel, to see the horn on the screen.
2. Drag a rectangle enclosing the horn(C) and select all.
3. Click the purple outline registered button (D) > Click 'Add to Time Group'. Now all the shapes will be registered to the button(D).
4. Click the registered button (D) > Click 'Through'(See through). Now all the shapes will be half transparent.
5. Click [View] on the menu bar > Click 'Show Onion Skin'. Now the outline of the shapes on the next page will be drawn.

Step 8．Select and move the twisted poits of the top horn

1. Click [Edit points] button (A).Now the control points will appear.
2. Fix the zoom factor by using [Zoom] button(B) or mouse wheel, to see the top of the horn on the screen.
3. Click the background of the screen to clear selection.
4. Hold down the Ctrl key (Command key, in the case of Mac ) and drag a blue line enclosing the twisted points of the horn(D). Now the points inside the blue line will be selected when you release the mouse button.

1. Drag the center bottom handle of the selection frame(A) toward top. Now the selected points will be resized to the top of the horn.
2. Hold down the Space key and drag the screen toward top. Now you can scroll the screen.

Step 9．Move all the twisted points of the horn upward

1. Hold down the Ctrl key (Command key, in the case of Mac ) and drag a blue line(A) enclosing the next twisted points of the horn. Now the points inside the blue line will be selected when you release the mouse button.
2. Move the selected points to the previous twisted position(B). Transform them to overlap on the outline on the next page. You can move the points by dragging the frame of the selection frame. You can resize them by dragging the corner handle of the selection frame. you can stretch them by dragging the side handle of the selection frame. You can select one point and move it of course. The result is shown as follows.

Repeat this operation. Rough transformation is OK. You can repair the position after watching the animation. The result is shown as follows.

Step 10．Hide outline

You must not change the shape of the bottom horn. So hide the purple outline as follows.

1. Click the background of the screen several times to clear selection.
2. Click the purple outline(A) and select it.
3. Click [+] button (B). Now the outline will be registered in the new button (C).
4. Click the purple outline registered button (C) > Click 'Hide' on the menu. Now the purple outline will be hidden.
5. Click the horn registered button (D) > Click 'Select' on the menu. Now the horn will be selected.
6. Click [Edit Point] button(E). Now the horn points will appear.

Step 11．Create the bottom twisted horn

1. Select each point of the bottom horn and move it upward to the position on the outline of the next page shape. Select some points and try to click on the handles of the selection frame. You may use various transform from the menu(rotation, bend...).

Step 12．Copy the twisted bottom parts from the next page

1. Click the second page(A). Now the second page will appear.
2. Click the purple outline registered button (B) > Click 'Hide' on the menu. Now the purple outline will be hidden.
3. Fix the zoom factor by using [Zoom] button(C) or mouse wheel, to see the whole horn on the screen.
4. Drag a rectangle enclosing the horn and select it.
5. Hit Ctrl+C or Command+C Key(Mac). Now the selected shapes will be copied to the Clip memory(D).

1. Click the first page(A). Now the first page will appear.
2. Hit Ctrl+V or Command+V Key(Mac). Now the selected shapes will be pasted to the first page.

Step 13．Ungroup the parts and delete unnecessary shapes

1. Click the background of the screen several times to clear selection.
2. Click on the edge of the bottom part(A). Now you will select orange gradation shapes or white light shapes.
3. Click the center handle [+] of the selection frame (B) > If you see the item 'Combine Path' with checkmark on the menu, click 'Combine Path'. Now the checkmark will disappear and you will be able to ungroup them. Then hit Ctrl+Shift+G Key or Command+Shift+G Key(Mac). Now the selected parts will be ungrouped.
4. Click on the edge of the bottom part(A) again. Pay attention to select the large object which is still grouped.
5. Click the center handle [+] of the selection frame (B) > If you see the item 'Combine Path' with checkmark on the menu, click 'Combine Path'. Now the checkmark will disappear and you will be able to ungroup them. Then hit Ctrl+Shift+G Key or Command+Shift+G Key(Mac). Now the selected parts will be ungrouped.
6. If you can ungroup all the objects, select the shapes except the bottom twisted parts, and delete them.

1. Drag a rectangle and select the shapes except the bottom twisted parts(A).
2. Drag the frame line(B) of the selection frame and move the selected shapes. Now you can confirm that the bottom twisted part were not selected.
3. Click [Delete] button(C) to delete unnecessary shapes.

Step 14．Copy the bottom twisted part to the next page

1. Drag a rectangle enclosing the bottom twisted part(A) and select it.
2. Click [Copy to next page] button(B) to copy the selected shapes to the next page.
3. Drag the left side handle of the selection frame(C) toward right and make the selected shapes thin.
4. Click [Zoom In] button(D) several times. The result is as follows.

Step 15．Resize and layout

1. Click [o] button (A). Now the hidden purple outline will appear.
2. Drag the corner handle of the selection frame(B) and make the selected shapes smaller.
3. Move the selected shapes to the right bottom of the horn. The result is shown as follows.

Step 16．Add Loop and Set Time

1. Fix the zoom factor by using [Zoom] button(A) or mouse wheel.
2. Click the first page(B). Now the first page will appear.
3. Click [Input] on the menu bar (C) > Click 'Loop'. Now the Loop command will appear.
4. Click [Play] button (D) . You will see the horn rotating animation.
5. Click [Stop] button(E) or ESC key to stop the animation.
6. Click the page time (F) > Click '-0.1 second' five times. Now the time duration between the first page and the second page will become 0.5 second.
7. Click [Play] button (D) . The horn rotating animation will be faster.
8. Click [Stop] button(E) or ESC key to stop the animation.

Step 17．Set Page Size, Change Layout

1. Click [Page] on the menu bar (A) > Click 'Page Size'. > Set the page size '200 200'.
2. Click the page number of the first page(B) > Click 'Select from This Page'.
3. Click the page number of the second page(C) > Click 'Select to This Page'. Now all the shapes in the first page and the second page will be selected.
4. Click the corner handle of the selection frame(D). > Click 'Resize and Rotate' in the menu. Now the selected shapes will be resized and rotated according to your mouse movement.
5. Click the frame line of the selection frame. Now the selected shapes will be moved according to your mouse movement. The result is shown as follows.

Step 18．Zoom up and fine tune

Finally, play the horn rotating animation several times. If you find strange point, zoom up the shape and fix the control point of the shape. You can change anywhere at anytime, because the animation is made of vector shapes.

Step 19．Export animated GIF

1. Click [File] on the menu bar > Click 'Animated GIF Export'.
2. Enter the name of GIF file. Click [Save]. Now the GIF setting panel will appear. Input setting as follows and click [OK] button.

• Picture Size : You can change the GIF picture size here.
• Frame/sec : You can define frames per second here.
• Time Length : Input time duration as 1 second.
• Transparent GIF : Check here, if you want transparent GIF.
• Smoothing : Don't check here, if you want transparent GIF.

Examples of animated GIF Export

• 80x80 and 10 FPS （9.5KB）

• 320x320 and 10 FPS （60KB）

Final words

I hope this article will help you to make GIF animation. Thank you for reading!

Thanks for Openclipart and Schade the writer of Caticorn.

Related article

9VAe Introduction

1. 9VAe Free SVG/GIF Animation editor: Introduction
2. 9VAe Download and Install

9VAe Beginner Tutorials

1. 9VAe Beginner Tutorial 0 - Overview
2. 9VAe Beginner Tutorial 1 - Input, Select, Move, Resize...
3. 9VAe Beginner Tutorial 2 - AnimeCast, Time
4. 9VAe Beginner Tutorial 3 - Edit AnimeCast, Loop
5. 9VAe Beginner Tutorial 4 - Time Curve, Copy Pages, GIF
6. How to make a long animation with 9VAe

9VAe Next Step Tutorials

1. How to make APNG from SVG for LINE animated Stickers?
2. Make Barrel Fish animation from Openclipart SVG
3. Six steps to make SVG Animation from Openclipart
4. How to make Animated GIF from Openclipart?

9VAe Animation Examples

1. 9VAe's GIF/SVG Animation examples in Openclipart

9VAe Technical Information

1. Export Animated GIF in 9VAe