Making a .gif

Screen Shot 2014-09-30 at 3.24.24 PM

Web visibility is important for developing your brand. But you know that. Original content helps showcase your ability, style, and diversity. But you know that too. Gifs (.gif files) are a really easy form of content to produce and share. They can stand alone, act as a preview, or be used to enhance a block of text. Oh, you don't know how to make a gif? That's ok. Velvet Cartel will teach you. Producing a gif is truly a very simple process with a lot of room for interesting customizations. You're going to need a mov, avi, mpg or mpeg and Photoshop. At Velvet Cartel, we use Photoshop CC, but older versions should work similarly. I know what some of you are already thinking- "Why use an expensive program like Photoshop when there are websites designed to do this for me?" The answer, my dears, is customization. By outsourcing your .gif production to a website, you're cheating yourself out of the perks of production. Also, we tried a few of the best ranked .gif creation websites to compare the product to our own and we came across a lot of frustration and unattractive watermarks.

First you'll need to choose your video clip. We prefer shorter clips with a distinct movement or action across the frame.

Upload your clip into Photoshop (File, Import, Video Frames to Layers).

During the upload, you will be given the choice to trim your video. Gifs should be short. We recommend trimming your video to only a few seconds.

You will now see your video as Layers. If a Timeline does not automatically appear at the bottom of your workspace, choose to open a Timeline from your Window menu at the top of your screen.

For the purpose of the tutorial, we are going to skip some optional customization steps and head right to the finale. From your File menu, select Save for Web.

Now you will see a screen that looks like this: Screen Shot 2014-09-30 at 3.24.24 PM


The most important adjustments to make to your gif are Image Size, Dither, Lossy and Colors.

You want your gif to be less than 1 MB so that it will load quickly on the web. To achieve this, you can reduce the Image Size (widths around 250-400 work well), keep your Dither at 100% (think of it as filler), bump up your Lossy (this is an intentional loss of quality) and lower your number of Colors (we try to stay around 115-140).

Now all you have to do is hit Save and spread your creation all over the internet.

Bonus: In between bringing your clip into the timeline and saving for web, you can take all kinds of artistic liberty. Feel free to adjust the colors, speed (select all frames in timeline and change the delay), quality and fill.

finalHave a nice Tech Tuesday!