Animated GIFs can be very interested, they are like animated photos or small videos stuck in a photo. They are excellent for short advertisements, and they can be added to websites and links added. In this tutorial, we will show you how to make an Animated GIF in Photoshop.
Create an Animated GIF in Adobe Photoshop
To create your own animated GIF using Photoshop, just follow these quick simple steps:
- Launch Photoshop
- Open your image in Photoshop
- Turn off the layer visibility for each except the first slide
- Next, go to Window then click Timeline
- Here Turn off New Layer Visible in All Frames
- To make a new frame click Duplicate Selected frame
- Select the frame where you want it to start and click Tweens Animation Frames
- You can further customize the animated GIF
- You can change the time it should remain open before switching to the next frame
- Finally set the times you want the GIF to loop
- Preview and save your animated GIF.
Now let us go into detail.
Plan the Content
The key to success with any project is planning. With this animation, it is important to plan what you want the animation to have. These will decide how the animation will look and perform. Ask yourself, what is the purpose of the animation? Is it for advertisement? Is it just for fun? After answering these questions, you will know what resources you will need to make the animated GIF.
Gather the Resources
After planning the content, you have now decided on the purpose of the animated GIF. If it is for advertisement, then there will be key pieces of items that you will need. What is being advertised, the target audience, and the information. Get pictures of the items or services, and get the numbers, addresses, time, and venue if those are the resources needed. The target audience will decide on the colors used and how flashy you will make it.
Make the Animation
Here comes the fun part, making the animated GIF. This is where you put all the fun skills together to make the GIF that will be there for all to see. GIFs are usually small and fast-moving, so it needs to be precise and to the point. The GIF should be compatible with all devices, network speeds and be interesting so others want to watch it over and over and share.
Open Photoshop and choose new, for the image option choose a resolution of 72 pixels, the size as 350 x 300 pixels, color mode as RGB, and in the Advance Option choose sRGB in the Color Profile. The dimensions may seem small but remember that the GIF needs to be small so it will use up space on the internet and will fit on most devices without using up too much space. However if necessary and space is not limited, you can make the GIF bigger, this may be for a banner or to fill a large advertising space on a website.
Add all the content that you want to be a part of the animated GIF. These will be added to different layers. Remember if it is an advertisement you will want to add words to engage the audience. Whatever is needed to be shown on each slide will be controlled by the layer visibility.
As soon as all content is added, turn off the layer visibility for each, except what you want to show on the first slide. Remember that you can also choose to do drawings, this animated GIF can work similarly to a flip page for animation. It can also be like How to do animation where parts of a How to do video or picture show can be put together.
To start creating go to Window then click Timeline. This will open the timeline area so that the content and actions can be added.
On the Timeline window, Turn off the option New Layer Visible in All Frames
To make a new frame click Duplicate Selected frame at the bottom of the time frame window. This option makes it easier because if it is the most recent frame, it allows you to align the new content in the proper place, especially if you need to move one to a different place or angle. This facilitates movements when the slides are playing.
You can add a Fade Transition between slides this is called Tweening. Select the frame where you want it to start and click Tweens Animation Frames. The more frames you add the bigger the file will be so Tween wisely.
Below the timeframe window is a few controls to customize the animate GIF. You can customize each frame to your desired time. However, be sure to make the important information more visible for longer. You can also choose how many times you want the animated GIF to loop before it ends. Three times should be good. This will allow for the content to be viewed properly then the animated GIF end so as not to get boring or use up too much of the viewers’ resources. There are the control buttons with play so that you can preview the animation. All the frames can be given the same duration by holding Ctrl + Click and select all, then select the time.
To save as GIF go to File, Save for Web, and a dialogue box will appear. You can just choose to preview the GIF or press ok if you do not need to make any changes. You can now share the Animated GIF that you have created. The animated GIF will play in any web browser. In the Save for Web dialogue box, there is a preview button, this will preview the GIF and show a copy of the HTML code.
Above is the basic finished GIF animation. observe and see how it plays at a consistent speed. The important information is allowed to stay on the screen long enough to be readable, but not too long to get boring.
Read: Adobe Illustrator Tips and Tricks for Beginners.
Why are animated GIFs important?
Animated GIFs are important because they can be made to be fun advertisements that can be placed on websites. Animated GIFs can be easily created and then placed on websites and links added to test users’ feedback. Still, images as advertisements may not catch the viewers of your website and videos may be too large so animated GIFs are just right to draw interest without sacrificing resources.
Read: How to curve text around an image in Photoshop
Do animated GIFs use a lot of resources?
Animated GIFs are usually small and do not take up a lot of space. When creating them it is best to be precise and use small amounts of content that will get the message out. That way you will use up a small amount of space on your website.
