GIF Creation as Smooth as Peanut Butter
Have you seen those cute, little animated images called GIFs?
If you thought GIFs (graphic interchange format) were just a trend used in BuzzFeed articles to show the best celebrity faux pas, think again.
Whether you post them to social, feature them in an email or advertise on an industry website, their ability to transmit multiple messages and images within the same space and a short time are incredibly useful to businesses looking to grab the attention of audiences.
In fact, here's one that we created to promote a Meetup in Nashville:
Impressive...I know. But don't give up just yet!
GIF Creation Video Tutorial
If you're not confident in your design skills or just don't know how to use Photoshop, this tutorial will leave you with the knowledge you need to make your own.
In this video, you will see every step of creating a GIF email header with Canva and Photoshop.
So, sign up for a free Canva account, and let the designing begin!
Video Tutorial Transcript:
Welcome to the Inbound Marketing Agents gif tutorial. Today, I am going to show you how to create an email header image that is an animated GIF using Canva.com and Photoshop.
Make an Image in Canva
Template or Not to Template?
Let’s start by pulling up your Canva account. You can either select Canva’s nifty new email header template or create your own custom header dimensions on the top right. To optimize your header image on multiple devices, you’ll want to stick with 600 pixels wide.
On the left of the screen, you’ll notice that Canva has some predesigned templates for you with varying typefaces and images that are available for purchase. You can start with a fresh space or select one of these by dragging and dropping on top of your blank canvas.
Even if you have to stick to your company branding standards or have a different font in mind, I’ve found that selecting one of these helps inspire design, get the creative juices flowing and lays a good foundation, which can help save time. It’s also a proven confidence booster for all those non-tech or design-savvy people.
Now you can select and change the text to what you would like featured in the header of your email. This may or not be your email title or H1 text, a call to action, the product or service you are promoting or your ex-boyfriend’s phone number. You’ll just want to make sure it is readable, relevant and typo-free.
By selecting each text box while holding the shift key, you are able to scale your text to the size you want and place it where it looks best.
Now that we have our text in place, we are going to upload our images we want in our GIF. Depending on your Internet connection, you may want to only upload a few at once.
You will select the upload tab in the left sidebar and drag your images on top of the canvas or sidebar until you see the upload symbol.
Then you will select your first image and once again, drag it on top of your canvas. You can either drag it onto the previous image to replace it and keep the filter’s look or delete the previous photo for your image’s original appearance.
You can crop the image or reposition it within the frame by selecting the “Crop” tool. When you have found where you would like the image to be cropped, select the checkmark at the top. One useful aspect of doing this in Canva rather than Photoshop is that you can quickly and easily change this later. Let’s say that we don’t want the image to take up the entire canvas, we can resize the image frame and re-crop the image.
When you have your image in place, you can either select a background color or select the search option in the side toolbar. This shows you many tools and graphics that are at your disposal, but for now, we will select a shape to place behind our text. This shape is easy to resize, move, change color and send to the back of the canvas.
If you decide you want to edit or add a filter to your image, you’ll select the photo and the “filter” option. As you can see here, there are many different presets to choose from, but you can also custom edit by selecting “advanced options.”
Further editing options, such as flipping the image, are available on the image bar. And if you decide that cat is actually mean-mugging you, you can delete it off the face of the canvas.
Canva provides some really useful graphics, images, frames and banners for free. So let’s drop in a new banner just to show its functionality. Canva offers many typefaces that will help you look like a typography pro, but compared to font available for download online, it is rather limited. If your company’s website has a more standard sans-serif font, such as Arial, you can most likely find a font that is similar, such as Open Sans.
You can also maintain your company’s branding standards by matching your text or graphic colors using a Hex color code. The eyedropper plugin extension for Chrome is helpful when pulling a color code from within your browser.
Downloading Your Images
When your first image is ready, click download in the top right of your screen and select “as an image.” You can also save as a PDF.
If you happened to create multiple canvases within this project, which you can do by copying your previous canvas, you can download them all at once or a range of pages. This will also help keep your text in the same place.
How to Make a GIF in Photoshop
Create Document & Import Photos
Once you have downloaded all of your images, you’ll open one in Photoshop. If you are using Photoshop CS6, the animation timeline will most likely already be visible at the bottom of your screen. To make it visible in earlier versions, go to “Window” and select “Animation.” Change the layout from timeline to frames by selecting the option in bottom right of the window. You should be able to see your first image within a frame.
Now you will insert the rest of your photos by dragging and dropping them on top of your previous image. This makes each photo an individual layer, which you can see in the “Layers” window to the right. I’ve chosen to insert each individually to ensure that they are not opened as separate documents.
After you have inserted all of your photos as layers, create a new frame for each layer. I have 13 photos, so I have added 14 frames to include my company logo in the 14th.
Select your first frame within the “Animation” window and make all but your first layer invisible within the “Layers” window. Then select the second frame and deselect all but your second layer, and so on.
After you have done this for all of your frames, review the order of your frames for the GIF will play in this order. If you decide to rearrange your GIF, you can drag the frame to where you prefer it be placed. So for this GIF, I will group some of the Christmas hats together.
Set Your Speed
You can change the speed of your frames from a dropdown menu or insert a custom time. For an email header, the frame timing should be short enough to grab their attention before they exit or scroll down yet long enough to avoid giving them vertigo.
Play it a few times to see what works best for your eye. For this GIF, I have selected 2 seconds per cat frame and 5 seconds for the logo frame.
At the bottom left of the window, select “forever” to make your gif play in a continuous loop.
Now I am inserting my logo into the final frame. The order of this step is inconsequential.
Occasionally, when you insert new layers after creating frames, it can mess up your timeline. So you will need to review your frames and make sure multiple layers are not visible. If you struggle with this, it’s always a good idea to start with the first frame and layer again.
Saving a GIF for the Web
When you think your GIF is ready for publication, select “save for web” under the file menu. Don’t worry - there’s no need to feel overwhelmed by these options. You will only need to change a few of them.
First, you will want to make sure that your default file format is GIF. You can change the range of colors to reduce file size, which is best for email under 1 MB. You can also decrease your file size by reducing your “Dither”. Keep in mind that by doing this, you also compromise the quality of your image.
You’ll notice that the files size and noise within the image is also affected by “Lossy”. If you are concerned about your file size, you need to find a good balance of dither, lossy, file size and image quality.
Viewing Your GIF
Your image size should automatically be set to your original image dimensions, but you are able to adjust it within this dialog box. Make sure that your GIF is set to loop forever and select save.
Also save your project as a Photoshop document in case you have changes to make later.
When you open your GIF in a viewer, it may display as frames and lack animation. So, let’s open it in Chrome by dragging and dropping in the browser.
Let me know if you have any questions! If you’re interested in purchasing a cat hat, we might have some bigger problems on our hands.
Thanks for watching and please comment.