THE UL­TI­MATE TOOLKIT FOR GIF DE­SIGN

A GIF can cap­ture a mood or con­vey a mes­sage in sec­onds. Lisa Has­sell shares some es­sen­tial tips on how to get started making your own

net magazine - - COVER FEATURE -

We’re in a world where communicat­ion in­creas­ingly takes place on­line, and GIFs are on the rise. They now per­me­ate ev­ery­thing from pop­u­lar cul­ture to ad cam­paigns. For the next gen­er­a­tion of de­sign­ers and de­vel­op­ers, know­ing your way around mo­tion graphics and hav­ing a good un­der­stand­ing of the ba­sics of cre­at­ing a GIF is es­sen­tial.

A good GIF can be play­ful and full of dy­namism, or it can be slow and smooth; what­ever de­scribes the feel­ing be­hind the mov­ing im­ages. The key is to un­der­stand what makes for an eye­catch­ing GIF and cre­ate a lan­guage that fits the mood of the mes­sage. How­ever, there are some rules to learn and tools that can help you on your way. I asked cre­atives from lead­ing stu­dios, as well as some well-known free­lancers, for their tips for mas­ter­ing the art of the GIF.

So­cial side

With so­cial me­dia us­age hit­ting an all-time high (the aver­age teenager now spends over 27 hours a week on­line, if re­cent re­ports are to be be­lieved), it’s per­haps no sur­prise that the trend for GIFs in ad­ver­tis­ing is ris­ing rapidly.

“Us­ing GIFs in so­cial con­tent can be re­ally pow­er­ful if ex­e­cuted right,” says Tom Grant, a de­signer at Fiasco De­sign in Bris­tol. He sees GIFs as the ul­ti­mate at­ten­tion-seek­ing de­vice, bring­ing what would be a flat, static post to life in “eye-catch­ing, en­gag­ing and in­for­ma­tive ways”.

For de­sign­ers, there are a few rules to making ef­fec­tive GIFs for so­cial plat­forms. “The main tech­ni­cal chal­lenge is keep­ing them be­low the file size lim­i­ta­tions of each so­cial me­dia plat­form,” sug­gests James Cur­ran, se­nior di­rec­tor at global pro­duc­tion com­pany Par­ti­zan. “Tum­blr in par­tic­u­lar is al­ways tricky as it has a 2MB limit, so I some­times need to be cre­ative with

ways of short­en­ing loops to keep the size down.”

There are also some par­tic­u­lar rules for cre­at­ing GIFs that will be com­pressed: first off, stick to a lim­ited colour palette. Avoid­ing gra­di­ents is es­sen­tial, as you’ll end up with ei­ther grubby shad­ing or huge file sizes. Semi­trans­par­ent pix­els are also a no-no, as the trans­parency is ei­ther fully on or fully off – some­thing to keep in mind to avoid those jagged edges.

On Disp lay

Al­though dif­fer­ent types of web­sites use GIFs in dif­fer­ent ways, most de­sign­ers agree that it’s bet­ter not to have a huge amount of GIFs play­ing at the same time on one page. Cur­ran rec­om­mends us­ing rollovers to avoid slow­down, and keep the an­i­ma­tions play­ing at the speed they were in­tended to.

And it’s worth bear­ing in mind the kind of de­vices your GIF is go­ing to be viewed on. Cur­ran’s tip is to de­sign with a small screen in mind: “Keep ev­ery­thing sim­ple and bold so it works well on any de­vice.”

Rus­sell Etheridge, a mem­ber of An­i­made’s cre­ative team, favours de­sign­ing in a square. “Many of our GIFs start in that shape and get cropped if need be. Also, you tend to scroll so­cial sites in por­trait on your phone, so it’s bet­ter to have a de­sign closer to a square as nar­rower im­ages will look smaller.” For his Olym­pops [see p80] Etheridge an­i­mated ev­ery­thing in 4:3, which could then be cropped to a square or stan­dard 16:9 video.

In the loop

Parisian de­signer Valentin Adam, who works as Play­ground Paris, ar­gues that rather than think­ing about GIFs specif­i­cally, it’s the con­cept of the ‘loop’ for­mat that is gain­ing pace: “It’s re­ally fun to make a two-sec­ond animation that plays in­fin­itely and looks like it’s dif­fer­ent at ev­ery loop.”

Cur­ran agrees, and sug­gests think­ing about GIFs as be­ing con­tin­u­ous, rather than hav­ing a def­i­nite start and end point. “Try to tell a story that works within the loop,” he sug­gests. “I think that helps to keep peo­ple watch­ing GIFs for longer.”

If the animation is short in length, it’s good prac­tice to limit the loops to no more than three times be­fore halt­ing the animation com­pletely, rec­om­mends

Lewis. How­ever, if you’re de­sign­ing the GIF to go on so­cial me­dia plat­form such as Twit­ter you don’t need to worry so much, as built-in func­tions only play GIFs when they are in view.

Fi­nally, it’s es­sen­tial to get your loops nice and smooth – and there’s one par­tic­u­lar pit­fall to avoid. “Hav­ing the last frame of your animation the same as your start re­sults in a tiny lit­tle hold where you see the same frame twice, caus­ing an un-smooth loop,” Etheridge points out. “Make sure you re­move that one at the end to avoid this.” For the ma­jor­ity of de­sign­ers, mas­ter­ing Pho­to­shop is pretty much key when it comes to making your own GIFs. Cur­ran rec­om­mends YouTube as a go-to re­source for on­line tu­to­ri­als to pick up soft­ware ba­sics: “Once you’ve got a good un­der­stand­ing you can fig­ure out how to adapt those prin­ci­ples to the style of work you want to cre­ate..”

Grant sug­gests play­ing around in CodePen: “It holds great sources of in­spi­ra­tion and of­fers a place to learn and get cre­ative with code; whether you’re a novice or a sea­soned pro.”

For more com­plex GIFs, Af­ter Ef­fects is many de­sign­ers’ tool of choice. “There is much greater con­trol over the move­ment and tim­ing func­tions, as well as some ex­tra tools to cre­ate re­ally pow­er­ful an­i­ma­tions,” re­veals Nick Lewis, a de­signer and fron­tend de­vel­oper at Fiasco De­sign.

If you’re look­ing to brush up your Af­ter Ef­fects skills, try the on­line GIF­mak­ing tu­to­rial Cur­ran hosted ear­lier this year ( netm.ag/AE­tut-287). It has been watched nearly 60,000 times.

It is pos­si­ble to ex­port your designs as GIFs di­rectly, but Lewis sug­gests ex­port­ing as a video first: “It seems to be eas­ier to com­press that way and re­duce the file size.”

Keep­ing it sim­ple

With all these dif­fer­ent op­tions, it’s easy to get over­whelmed. “Be­cause there are many vari­ables to con­sider, there is a lot of test­ing and tech­ni­cal know-how re­quired. It can take twice as long as a usual il­lus­tra­tion turn­around to cre­ate a loop­ing GIF,” says Mel­bournebase­d il­lus­tra­tor Ellen Por­teus.

Her ad­vice to begin­ners is to keep things sim­ple: “Start with a few el­e­ments, to un­der­stand how things move, and slowly build up to more com­pli­cated animation. I started out by cre­at­ing a lot of bouncing balls.”

Adam mas­tered the art of keep­ing things sim­ple when he was work­ing on ex­pand­ing his GIF port­fo­lio. “I had in mind to make a huge mis­cel­la­neous mo­tion with a lot of silly and crazy things, but to make it hap­pen I had to pub­lish a GIF ev­ery day – partly to avoid over­think­ing it,” he ex­plains.

By em­ploy­ing a range of tricks he man­aged to get his aver­age cre­ation time down to around an hour. See the re­sults of his month-long chal­lenge at www. in­sta­gram.com/play­ground­paris.

“It’s fun to make a two-sec­ond GIF that plays in­fin­itely and looks like it’s dif­fer­ent at ev­ery loop”

Video GI Fs

Cre­at­ing GIFs need not be the sole do­main of il­lus­tra­tors – you can im­port any video into Pho­to­shop to con­vert it into a GIF. For those whose Pho­to­shop skills are lack­ing, Grant rec­om­mends ex­per­i­ment­ing with Gi­phy, which pro­vides a free, sim­ple way to break your videos down into frames.

“I don’t re­ally use the frame animation sys­tem in Pho­to­shop, as video lay­ers are much more in­tu­itive,” com­ments Etheridge. “If I’m an­i­mat­ing graphics I’ll an­i­mate in Af­ter Ef­fects and im­port into Pho­to­shop as a ren­dered video file be­fore con­vert­ing.” How­ever, he points out that if you’re making a GIF from live ac­tion video footage, achiev­ing a smooth loop is go­ing to be much trick­ier, as is get­ting an even colour.

Full ac­cess

To en­sure con­tent can en­gage with a wider au­di­ence, de­vel­op­ers need to be mind­ful of ac­ces­si­bil­ity and web stan­dards. “Web animation should al­ways be used to pro­gres­sively en­hance the ex­pe­ri­ence,” ar­gues Grant. He sug­gests de­scrib­ing an­i­ma­tions and an­i­mated GIFs in text so they can be un­der­stood by screen reader-users, and avoid­ing too much blink­ing or flash­ing so they re­main suit­able for view­ers with pho­to­sen­si­tive epilepsy.

An­i­made co-founder James Cham­bers agrees that ac­ces­si­bil­ity should be built in from the start: “Ba­sics like pro­vid­ing alt tags on im­ages – an­i­mated GIF or oth­er­wise – should be a base­line.”

He also points out that for vec­tor animation, us­ing in­line SVGs can dras­ti­cally im­prove ac­ces­si­bil­ity. Sim­ply put, an SVG is a XML-based vec­tor im­age for­mat for twodi­men­sional graphics that sup­ports in­ter­ac­tiv­ity and animation. “From an ac­ces­si­bil­ity stand­point, in­line SVGs con­tain more in­for­ma­tion when com­pared to a blank <can­vas> tag, and can there­fore be bet­ter in­ter­preted by the browser,” he ex­plains.

For animation-heavy sites, Cham­bers sug­gests com­bin­ing SVG with thought­ful use of ARIA la­belling. Out of the box, screen read­ers work with reg­u­lar HTML, but adding ARIA can pro­vide screen

reader users with more con­text and greater in­ter­ac­tiv­ity with con­tent. Yet ARIA has no ef­fect on how el­e­ments are dis­played or be­have in browsers – it is meant only to act as an ex­tra de­scrip­tive layer. An in­cred­i­bly useful tool for web de­vel­op­ers.

Knowl­edge and in­tu­ition

So why have GIFs be­come so pop­u­lar? For many de­sign­ers, they of­fer a new out­let for cre­ative ex­pres­sion. “I think it’s partly be­cause the core au­di­ence for GIFs is younger, [clients] are more in­ter­ested in con­tent that is a bit off-beat,” says Cur­ran. “For what­ever rea­son, brands seem more open to al­low­ing cre­ators to be more cre­ative with GIFs than they would be with more con­ven­tional “As the core au­di­ence for GIFs is younger, clients are more in­ter­ested in con­tent that is a bit off-beat” con­tent. Be­cause GIFs are smaller projects with gen­er­ally smaller bud­gets, it’s less of a risk for brands to use this for­mat to try some­thing dif­fer­ent.”

Por­teus agrees: “It’s all about making the most of the flex­i­bil­ity of the dig­i­tal medium. Tra­di­tional il­lus­tra­tions are great, but GIFs can be re­ally en­gag­ing, fun and clever. For me, the most en­gag­ing GIFs are the ones that loop seam­lessly and in­fin­itely, with a lot of move­ment and play­ful­ness.”

As for what makes a great GIF, in­tu­ition has some­thing to do with it. “It’s about hav­ing an un­der­stand­ing of ba­sic animation prin­ci­ples, a sense of rhythm, and be­ing able to think of an idea,” con­cludes Cur­ran. “I’m still learn­ing all of those things my­self af­ter over 10 years of an­i­mat­ing!”

These lively and en­er­getic GIFs were in­spired by the Rio Olympics. Fiasco teamed a vi­brant colour palette with quick, flashy frame speeds, and ex­per­i­mented with a type­face that would be leg­i­ble at dif­fer­ent sizes

For its pop­u­lar Olym­pops GIFs, An­i­made re­placed Olympic ath­letes with awk­ward bal­loons with felt-tip faces

Fiasco De­sign

An­i­made

Play­ground Paris Valentin Adam built his ‘silly and crazy’ port­fo­lio by cre­at­ing a GIF a day for a month

SlimJim James Cur­ran – aka SlimJim Stu­dios – cre­ates play­ful GIFs that have pro­pelled him to a giddy level of pop­u­lar­ity

Com­mer­cial clients Ellen Por­teus was brought on board for Quant­cast’s re­design. This loop­ing GIF sat in­side the big data com­pany’s new logo

Ellen Por­teus With a back­ground in graphic de­sign, Por­teus’ pat­terned, sur­real GIFs have won her a slew of high-pro­file com­mer­cial clients

Newspapers in English

Newspapers from Australia

© PressReader. All rights reserved.