Making a Moving HTML Image for your Website

An image that blends well and fits smoothly within a website makes for a professional internet page. The most common image file formats include JPG, PNG, and GIF. Graphics interchange format, or GIF, are typically used for animated or moving images. Here you will find the complete guide to making a moving HTML image.

To create a moving HTML image, you will need full access to an image editor, such as Adobe Photoshop and Image-Ready. Begin by opening your Photoshop application on your desktop. Open a new document by clicking File -> New Document (Ctrl + N) in the menu bar on the top left portion of your screen.

An editor box will appear on your screen which will allow you to name your document, edit the size and contents. Change the name, size and background content to whichever suits your projects needs. Click ‘OK’ to view your fresh document.

Next, you will need to choose a foreground color. This will be the color that you’ll want your final image to be. You can find the foreground color towards the bottom of the ‘Tools’ panel located at the left of your screen. You will see two overlapping boxes with the top box being your foreground color and the underlying box being your background color.

On the right side of the screen towards the bottom, you will see a box labeled ‘layers’. Click on the New Layer icon or click on Layer -> New Layer from the menu bar at the top of the page. Next, select the Marquee Rectangular tool from the ‘Tools’ panel. Create a square on your document by clicking and holding down the shift key while pulling downwards. Use the Paintbucket tool from the ‘Tools’ panel to fill in the square with your chosen color.

Select the ‘Move’ tool from your ‘Tools’ panel. The icon appears as an arrow and smaller ‘x’. Click on your document and slide it a small amount in the way you’d like your object to move on your web page. Next, you’ll want to save your file by going to File -> Save for Web on your top menu bar. Save your image as a GIF.

You will end up with several images which are moved slowly across the screen so be sure to name them in ascending order. (Eg: Object 1, Object 2. etc.) Repeat the ‘Create Frames’ portion again and continue to move the object in the same direction. You will need to create enough frames to complete your animation.

Image-Ready is an Adobe oriented program that usually comes with the Photoshop software. Begin by going to the menu bar and click on File -> Import Folder as Frames. Find the files that you had saved from Photoshop and Image-Ready will put them into order using a time line effect at the bottom of the screen.

Finish your image by clicking on File -> Save as Optimized and save the animated picture to your computer as a GIF. Now when you upload your image to your web page, you will have a moving HTML image. Enjoy impressing your Internet audience with an eye-catching performance of your moving images.