Gifneo @ - How to Create Animated GIFs
Home | About
Click to enter
Final Gifneo animated GIF

This tutorial is about creating animated GIFs online using Gifneo, an application provides for free. We’ll walk you through creating the animation shown above.

Note: You can create animated GIFs with applications such as Adobe Photoshop, Windows GIF Animator, iPhone applications, Android applications, WinPhone applications, and many other desktop programs and web applications out there. After trying Gifneo you will discover that Gifneo is one of the easiest applications to create animated GIFs.

Note: The pictures were taken at the Botanical Building in Balboa Park, San Diego, California, USA. If you happen to be nearby or visiting San Diego, don't hesitate and stop by.

Launching Gifneo application

Open a browser such as Internet Explorer or Firefox. Enter in the URL box then press enter. Once the application has been loaded you should see an interface like the one shown in Pic. 1.

Note: You may be prompted to install Microsoft Silverlight. This application requires Silverlight to run.

bizineo landing
Pic. 1 Gifneo landing interface

Loading Pictures

Drag and Drop

Once you have loaded the application, load your pictures using the Drag and Drop feature. Locate your picture in your hard drive (1), selected it, drag and drop it (2) onto the drawing canvas as shown in Pic. 2.

Image drag and drop
Pic. 2 Loading your picture using the "Drag and Drop" feature

Setting picture properties

Selecting an image

Select an image by clicking on it in the list of images (4) as shown in Pic. 3.

Note: Every time you select an image or click on the 'Image properties' Image properties icon in Control Panel (3), the Image Properties window will display.

Setting image dimension

Note: The dimension (width and height) of an image is displayed as a reference only (read only). The dimension of an image will be resized to fit the final dimension of your animated GIF. The dimension or size of your animated GIF will be set later on GIF properties.

When an image is loaded, the application resizes its dimension to fit in the drawing canvas. In our case, the dimension of our images are width = 540 pixels and height = 405 pixels. We will use this size to set the GIF dimension.

Setting image speed

Enter a value in the text box (1) provided as shown in Pic. 3. This is the time in milliseconds before showing the next image in the GIF animation. In our case, we leave it at 500ms.

Applying image effects

Click on the drop down list (2) and select the image effect of your preference as shown in Pic. 3. Each image effect has its own properties. In our case we apply 'Contrast Adjust Effect'.

Note: In case you don't like your changes you can always use the undo/redo option in Control Panel (3) or reload your picture again.

Image properties - Effects
Pic. 3 Setting image properties

Setting properties of an animated GIF

Click on the 'Gif properties' GIF properties icon in Control Panel (3) as shown in Pic. 3.

Setting Resizing mode

Make sure to check the 'Keep aspect Ratio' check box. We want to make sure our images keep their aspect ratio when resized to fit our animated GIF size.

Setting GIF size

Click on 'Width' textbox, enter 540 and press enter. Click on 'Height' textbox, enter 405 and press enter.

Setting GIF repetition

Click on 'Repeat' textbox, and enter '0' to make sure our animated GIF repeats forever.

Note: The 'Repeat' property specifies the number of extra repetitions an animated GIF should run. For instance, if you enter 3 your animated GIF will run 4 times (3 extra repetitions) before stopping.

Setting GIF speed

Make sure to check the 'Override' check box. This will allow us to set speed per image. In our case, we left at 500ms. If preferred, you can click on each image to change its speed.

In case you want to apply the same speed for all of your images, make sure to uncheck and set a speed of your preference.

GIF properties
Pic. 4 Gif properties

Previewing GIF animations

Click on the 'Preview' button (Pic. 4) to see how your animated GIF will look like. Messages are displayed to help you set up the speed per image and the number of repetitions. You can stop previewing by clicking on the 'Stop' button (Pic. 4) to go back to GIF settings.

GIF properties - Preview
Pic. 5 Previewing an animated GIF

Creating animated GIFs

Click on the 'Create GIF' button (Pic. 4) to create your animated GIF. A 'Save As' dialog will display where you can select the folder and name your animated GIF.

GIF properties - Create
Pic. 6 Creating an animated GIF

Final Animated GIF

Animated GIF

That's all. Thank you!

Virtual Learning Instruments Logo. Provides web based technologies for virtual learning that can be accessed from anywhere providing real-time interactivity offering a new synchronous learning approach.