Cre­ate an An­i­mated GIF with Ease

ADOBE PHO­TO­SHOP You can sub­scribe to var­i­ous pack­ages at

Maximum PC - - R&D - –IAN EVENDEN

DE­SPITE BE­ING AT THE HEIGHT of its pop­u­lar­ity on Geoc­i­ties back in 1999 (it was the third most vis­ited web­page at the time of its takeover by Ya­hoo!), the an­i­mated GIF re­fuses to die. Now a sta­ple of the witty re­ply on Twit­ter (where the GIFs are con­verted into more ef­fi­cient video files, as Twit­ter doesn’t have in­fi­nite stor­age), the GIF seems like it’s never go­ing to go away. Even Face­book caught up even­tu­ally, adding sup­port for GIFs, orig­i­nally launched in 1987, in 2015.

An­i­ma­tions came about as an ex­ten­sion to the re­worked 1989 GIF spec­i­fi­ca­tion. Each frame is stored within the same file, and they are dis­played in suc­ces­sion with a time de­lay be­tween. GIFs don’t have to loop, and you can set the num­ber of times they re­peat—a set­ting of “0” pro­duces a GIF that loops in­def­i­nitely.

There’s also a de­bate over its pro­nun­ci­a­tion. The cre­ators of the Graph­ics In­ter­change For­mat in­sist it should be pro­nounced “Jif,” like the peanut but­ter. How­ever, the first word is clearly “graph­ics,” not “gi­raffe,” so we fa­vor the hard G. It makes no dif­fer­ence to the writ­ten word, so pro­nounce it in your own head any way you like.


It’s not of­ten we start with a com­pletely blank doc­u­ment, but here we need to. We’ve cre­ated one at 1920x1080 pix­els

[ Im­age A], mainly so we have some­thing large that will look good in screen­shots, but you may choose to make yours smaller in or­der to cre­ate a smaller file at the end. GIFs can dis­play a full range of col­ors through a block-tiling trick, but the pal­ette ta­ble of each block only has 256 en­tries, mean­ing 256 col­ors (com­monly 255 plus trans­par­ent). This means an an­i­mated GIF isn’t the ideal for­mat for pho­to­re­al­is­tic im­ages, es­pe­cially if you care about such things as qual­ity and file size. What it is good for, how­ever, is graph­ics, car­toon-like im­ages, and text.


Sim­ple, eh? Cre­ate some­thing. What you cre­ate needs to be rea­son­ably sim­ple, so you can draw it again and again, only slightly dif­fer­ently each time as you cre­ate the frames of your an­i­ma­tion, or some­thing that can be copied and pasted mul­ti­ple times be­fore be­ing tweaked for each frame. We’ve cre­ated two lay­ers of text at 300pt, and flipped one so it looks a bit like a shadow un­der the other. We also re­moved the back­ground layer, us­ing the trash­can but­ton at the bot­tom of the Lay­ers pal­ette, so we have the checker­board pat­tern of a trans­par­ent doc­u­ment.


De­cide how your im­age needs to change be­tween the first and last frame, and cre­ate the frames by chang­ing your im­age, with each com­plete frame hav­ing its own layer. We copied and pasted the text we’d cre­ated on to 20 lay­ers [ Im­age B]— 10 for the red text and 10 for the black—and changed each black one a lit­tle more us­ing “Edit > Trans­form > Skew,” and its blend­ing opac­ity on the Lay­ers pal­ette, so that the shadow text ap­peared to move and strengthen be­low the red, which never moves. Then we used “Layer > Merge,” along with the Lay­ers pal­ette and Ctrl-Left Click to se­lect mul­ti­ple lay­ers, to cre­ate 10 fi­nal lay­ers, each with red

and black text, mov­ing from the be­gin­ning at the bot­tom of the pal­ette to the end at the top. Show­ing and hid­ing lay­ers us­ing the eye icon at the left of their en­try in the Lay­ers pal­ette can make this eas­ier to man­age, and if you’re du­pli­cat­ing lay­ers, try link­ing them by se­lect­ing them both, and choos­ing “Layer > Link Lay­ers” be­fore du­pli­ca­tion—this keeps red and black to­gether. Just re­mem­ber to unlink them be­fore you start edit­ing, or you could get un­wanted ef­fects.


Make all your lay­ers vis­i­ble, then use Ctrl-Left Click to se­lect a red and black pair, be­fore merg­ing them with “Layer > Merge Lay­ers.” Once this is done, make sure they’re all vis­i­ble, and open the Time­line from the “Win­dow” menu

[ Im­age C]. It ap­pears at the bot­tom of the screen, and at first doesn’t have any­thing on it ex­cept a drop-down with two op­tions: “Video” and “Frame an­i­ma­tion.” Choose “Frame an­i­ma­tion” and, in a mo­ment of counter-in­tu­itive de­sign un­usual for Adobe, it be­comes a but­ton. Click it. The time­line opens, but still looks bare. To fix this, open the three-line menu at its far-right, and choose “Make Frames from Lay­ers.” Now you have one frame for each of the lay­ers you pre­pared ear­lier. Hit the play but­ton at the bot­tom-left of the Time­line to pre­view the fi­nal ef­fect.


Each frame in the Time­line has a lit­tle drop-down at its base, which cur­rently reads 0 sec. This is the de­lay on that frame be­fore the next one is shown, and cur­rently there are no de­lays. You can change this to up to 10 sec­onds with a click, or en­ter a cus­tom value [ Im­age D]. Be­ware, though, that it can make your GIF look jerky, and isn’t ideal for an­i­ma­tion. If you’re us­ing the GIF to dis­play a slideshow, how­ever, this is the per­fect way to make your im­ages stay on screen longer.


Once you’re happy with how your an­i­ma­tion looks, you need to ex­port it. Save the file first as a PSD, in case you want to come back later and edit any­thing or check your set­tings. Then head to the “File” menu, and choose “Ex­port > Save for Web (Legacy).” Adobe has been try­ing to re­place this relic of pre-CC Pho­to­shop for a while, but it al­ways has its uses, and this is one of them. It cor­rectly guesses you want to ex­port a GIF, but there are color pal­ette op­tions you can play with to keep the file size down. A “Re­stric­tive” pal­ette pro­duced the small­est file, but watch out for dither­ing if you’ve got too many col­ors in your an­i­ma­tion. Set­ting the num­ber of col­ors to “Auto” also pares down the ta­ble for a smaller file, but the best way to shrink it down is to re­duce the res­o­lu­tion, even if you cre­ated it at a higher one. You can do this from the “Save for Web” win­dow by choos­ing new pixel di­men­sions at the bot­tom­right, where you can also choose how many times the GIF will loop, or whether it will go on for­ever. A quirk of this win­dow is that hit­ting the “Done” but­ton doesn’t mean your im­age gets saved—you need to specif­i­cally press the “Save” but­ton [ Im­age E].






Newspapers in English

Newspapers from Australia

© PressReader. All rights reserved.