Creating animated gifs using Photoshop
Images always do well on a webpage, as they largely determine the look and feel of a page. However, using only normal imagery and photos, can make the page look just a little too static, and often the addition of a small animated object is exactly the thing it needs to make the page complete.
Today we are going to show you how to create animated images, using Photoshop, in just a few simple steps:
- Start up the program and select new file, and select the desired size in pixels. The proper resolution would be 72 and the correct color mode would be RGB. Animated images can be any size, but remember that the larger they are the slower they will load on a webpage, so it is advisable to keep the dimensions as small as possible. In other words, don’t use 200 x 200 pixels when 100 x 100 will suffice.
- Make sure that Layers are selected in the windows menu at the top of the screen. When selected a layer menu will appear on your screen.
- On the menu at the left of your screen select the draw tool, and create a picture.
- Now go to the layer menu, and click on the tiny arrow icon on the top right to bring up the layer menu and choose “Duplicate Layer”.
- Now select the bottom layer at the layer menu by clicking the eye icon. Now you can use the pencil tool to add more to the image, or remove parts of it by using the eraser.
- Click on file on the menu at the top, and select Adobe Image ready. When asked click ok to store the file on your hard drive.
- Image ready will now start up, and once running, select “Show Animation” from the “Window” menu at the top. Once selected the Animations menu will appear.
- At the top of the floating animations menu Click on the small arrow icon to bring up the menu, and from there select “Make Frames from Layers”.
- You are done. Click on the save icon, or choose the option from the file menu, and when presented with option, choose “Save Optimized” and enter the desired name of your new animated gif.
The above is a very simple example on how to create animated gifs in Photoshop. And is merely intended to display which steps to take, in order to create animated images which you can use on any web page. When creating them you are not limited to the pencil and eraser tools to create your images. By using the various other features in the program, you can add images, photos and alter them with the tools available. As you gain more experience in making the animations, you will be able to make detailed and awesome animated graphics, which will be eye-catching.
It should be noted that by adding existing images to any type of animated gif, you may be in violation of the copyright laws. Therefore, either only use images or photos that you actually own, or have permission to use, for this kind of purpose.
Happy designing!
M.A.H.
If you enjoyed this post, make sure you subscribe to my RSS feed!
