add_action( 'wp_footer', function() { if ( ! defined( 'ELEMENTOR_VERSION' ) ) { return; } ?>

Custom GIF Designer

GIFs are a powerful way to capture someone’s attention. They can be used in a number of different ways, but one of the most popular is in marketing. GIFs can be used on social media, websites, and even in emails. They are eye-catching and engaging.

When it comes to marketing, GIFs can be used in a number of ways. Read on below about common GIF uses and best practices.

How To Use a GIF

Quick Tips…

This page contains a lot of GIFs and animations, I don’t recommend doing this on any single page (but of course examples are needed here). Typically it’s recommended to use GIFs sparingly and consider load page load time (more on this later).

Too many GIFs can be overwhelming and distracting. Only use them when they really add value to your website.

Components of a Custom GIF

When considering where and how to embed a GIf on a website, it can be as easy as drag-and-drop installation or you might need the assistance of your developer. While GIFs can be the easiest to install, sometimes it can be beneficial to use an embedded HD video or another animation type for lower file sizes (while maintaining quality).

It’s no secret, if you compress GIFs to smaller file sizes you will lose out on quality and resolution.

Components of a Custom GIF

Timed Duration

Shorter GIFs require less memory and space requirements

Background Colors

GIFs do a terrible job with transparent backgrounds and resolution

Message Needed

What text, if any, would you like to incorporate into a GIF?

Jon Gomes Motion Graphic Custom GIF Designer

Placement

What's the purpose of your GIF? Banner ads, landing pages?

Size/Dimensions

Just as a photo, GIF animations have borders and size considerations

Seamless

Do you want your GIF to play once or loop continuously (no skips)?

Phases of GIF Creation:
Where To Start

When creating a custom GIF for your company, website, or social media, there are a few considerations to take into account. In a nutshell, these four stages below condense the GIF creation process into the order of how one should make them (regardless of software used).

Step 1. Size & Placement

Depending where your GIF will go, this will affect the dimensions and file-size requirements.

Step 2. Style Considerations

Do you have preferences for clean and minimal animation or real creative assets (photos & icons).

Step 3. Design Creation

Once you have determined the GIF style and placement, the design creation begins.

Step 4. Animate Accordingly

Incorporate your headlines, photos, or 2D Motion Graphic preferences

Dynamic Business Card Creator

GIF Style & Format

For starters, you’ll need to determine where the GIF will be utilized. Is it for an email signature (Gmail, Outlook, etc.) or will it be utilized on social media or the web? This is an important stage because size requirements will vary depending on the medium (i.e. smaller file sizes and less effects for a smaller space such as email). 

The attached is a business card GIF that features a clean and corporate animation-style.

GIFs for Landing Pages

Have a squeeze page (also known as a landing page) that you want a visitor to take a specific action on? This could be clicking a button onto the next page, filling out a form or visually-directing their attention span to a specific part of the page. 

These animated landing page GIFs can do wonders to help show the non-readers what your process or business does in a nutshell. 

Landing Page GIFs

Photos & Banner Ad GIFs

Like the GIF banner example from above, the ecommerce mobile device, animated ads can depict a message or story. Typically these are quite short, the one above is exactly 10 seconds in length. 

Banner GIFs can have a URL embedded within your website that could act as a button to an affiliate site or a product that you may be selling. 

Animated GIF ads are great for platforms like social media and WordPress websites where inserting them is as easy as pie. 

Enhance Your User Experience

UX (otherwise known as “user experience”) is similar to a landing page GIF but does not necessary mean your site visitor needs to take some kind of action just yet. 

A user experience animation or GIF can do wonders to help supplement the visual-learners flow of information from the site. Pages of text can get quite boring and GIF animations are simply a step above static images. 

Artificial Intelligence Icon GIF

Logo and Icon GIFs

Your logo is your brand’s face and digital snapshot. Minimal-looping animation can go a long way of sticking in your client or customers mind. 

Logo GIFs can be clean and corporate (plenty of empty space perhaps) or fun and colorful with animated shapes and lines. 

GIF Resolution Export & File Size

An important consideration when creating a GIF is the placement. Something too large or too in-depth with the animations, effects and amount of text will quickly ramp up a larger file size. 

Small icons and minimal charts and graphs for something like powerpoint however will typically take up a lower amount of space. 

If page-load time is an important factor to you, a smaller GIF file size will be far better so that your SEO efforts can also be taken into account. The example above (with the drone and online shopping) is pushing the limits for effects and size, starting at about 1,500 mb before compression. 

Banner Advertisement GIFs

Social Media GIFs

One of the great things about social media platforms and 3rd party channels, besides the cats in hats, is that platforms like Twitter or Facebook will automatically play GIF formats once you drag and drop them in. 

Of course the GIF has to be created to loop and a seamless stop and end point needs to be designed, but once you have your GIF ready and the dimensions are good-to-go, drag and drop and watch the animations go!

What’s going on behind-the-scenes?

Creating an Animated GIF

Let’s use the example from above, just because it’s already here and you’ve seen it at least once by now. So, what’s actually going on behind the scenes from a design-perspective? Let’s take a look…

Jon Gomes Motion Graphic Custom GIF Designer

GIF Specs:

Where Will GIFs Play?

Popular placements for GIFs include landing pages, social media, and even video formats.

Everything you see moving on this page was creating using a GIF format.

How Are GIFs Made?

I make GIFs using a variety of software but the first two I would recommend is Adobe After Effects and a GIF plugin called GIFGUN.

My animation style and preference lives in the 2D-realm and I prefer to incorporate shapes,buttons and micro-animations to mimic an online environment.

Can GIFs be Videos?

Let's take Instagram for example, while they don't necessarily support the .GIF extension, they DO support video files (1080x1080 dimensions). These video files can be created just as a GIF would and designed to loop seamlessly.

How Can I Get a GIF

Get in touch using the form below for any animated GIF projects or ideas? Animated GIFs can range from simple icon animations all the way to custom landing page GIFs.

GIFs for Powerpoint

Quite often, animated charts and graphs are used to be placed into a presentation or slideshow that you might be creating .

Whether for education or business-purposes, animated GIFs and icons can help supplement the level of audience engagement.

Convert Video To GIF

Video can be converted to a GIF format but keep in mind a GIF is almost like a memory card that holds all your video, photos or information. It can only hold so much before quality is affected (think somewhere between 8-12 seconds) depending on the type of content used.

Need a Custom GIF or Have Questions?

Get in touch using the form below and I’d be glad to chat further about any GIF questions or projects you might have. I’ll get back to you ASAP!

Get In Touch

Questions and Conversations

Submit Your Project Info

Questions, comments or feedback on anything you’ve seen here. I’ll get back to you as soon as possible.