Ознака: Веб

Ко воли да сурфује нетом, сусрео се са анимираним рекламама (банерима) на разним страницама. Иако умеју да изгледају фасцинантно, такође умеју да одају утисак како их је веома тешко направити. Али није баш тако. Потребни су GIMP, идеја, мало времена и већ следећег тренутка анимација је ту. Веома је лако, показаћу вам како ;)

Структура анимираног GIF-а

Анимирани GIF је битмапирана слика састављена из слајдова (фрејмова) које чине цртежи у палети од највише 256 боја (дакле, у индексној палети боја). У Layers панелу GIMP-а сваки фрејм анимираног GIF-а представљен је појединачним слојем поређаним од првог фрејма на дну листе до последњег на врху листе слојева. Ако већ готов анимирани GIF отворите у GIMP-у, приметићете да сваки слој има назив у формату „Frame 1 (100ms) (combine)“ или „Frame 1 (100ms) (replace)“. Јасно је да први део назива „Frame 1“ нема неку посебну улогу у самој анимацији осим што представља визуелну ознаку слоја у листи слојева Layers. Међутим, следећи део „100ms“ представља једну од битнијих ставки у анимацији – одређује временски период (у милисекундама) за који ће тај фрејм бити приказан у току анимације. Вероватно наслућујете да у GIF анимацији не мора сваки фрејм да има исти временски период за који ће бити приказан, за разлику од класичних видео формата (XviD, рецимо). Ипак, због самог система рендеровања, није могуће приметити разлику између фрејма од 1 и 10 ms. Последњи део назива „combine“, одн. „replace“ означавају начин смене фрејмова. Како и сам назив говори, „combine“ каже интерпретеру GIF анимације да садржај фрејма треба да се сједини са претходно приказаним фрејмом. Овако се омогућава да фрејм не садржи целу композицију, т.ј. позадину претходног фрејма поред измене за тај фрејм, већ само разлику пиксела који се не појављују на претходном фрејму. На овај начин се знатно смањује укупна величина крајње GIF датотеке, што код комплекснијих анимација може износити и на десетине KB. За разлику од њега, „replace“ говори да фрејм треба да замени претходни, што значи да он садржи комплетну слику а не само разлику у односу на претходни фрејм. Уједно пре приказивања тог, претходни фрејм мора да се сакрије у току анимације. По правилу, оваква врста анимираог GIF-а уме да буде приметно већа од анимације са комбинованим фрејмовима.

Реч-две о GIMP-у

На почетку живота GNUzilla магазина писао сам о историји и развоју GIMP-а, али није на одмет поновити шта овај програм ради. Реч је о напредном слободном софтверу за уређивање битмапиране гафике. Није најсрећније решење за професионалну примену (нпр. за DTP), али је зато победник када је реч о веб графици. Неки аутори су већ описивали разне алате и акције који се налазе у GIMP-у, а ја вам овога пута показујем како се он може искористити за прављење ефектних анимираних GIF банера.

Шаблонски банери

Пре него што почнете, у глави или на папиру треба да имате концепцију како банер треба да изгледа. Ја сам замислио да на десној страни стоји део лица GNUzilla маскоте (која још увек нема званично име) и у току анимације намигује једним оком (оним које гледа у посматрача), док се са леве стране смењује текст са кратким паузама довољно дугим да се прочита приказана порука.

Загрејавање

За почетак покрените GIMP на уобичајени начин (ако до сада нисте научили како то да урадите, прво то научите а онда наставите да читате ово упутство), Из менија File изаберите опцију New… (пречица ‘Ctrl+N’) и појавиће се дијалог за креирање новог документа. Из падајуће листе Template треба изабрати предефинисану ставку Web common banner 468×60, или ручно унети жељене димензије банера, а потом кликнути на дугме ‘OK’. У овом упутству сам користио димензије најчешће виђених банера на нету.

Отворио се празан документ поменутих димензија.

Маскота

Већ припремљени део лица GNUzilla маскоте убацио сам као нови слој у новонаправљени документ са белом позадином. Селектовао сам део маскоте са слике отворене у GIMP-у, ископирао селекцију у clipboard (пречица ‘Ctrl+C’), прешао у документ за банер и уметнуо садржај clipboarda (пречица ‘Ctrl+V’). На овај начин направљена је плутајућа селекција, па сам из менија Layer изабрао ставку New Layer, чиме је плутајућа селекција претворена у нови слој. Уметнути детаљ сам померио у десну страну.

Како је детаљ који сам убацио имао транспарентну позадину и провидну сенку, а како GIF у индексној палети не омогућава фине провидне преливе (alfa blending), као што то омогућава PNG формат, одлучио сам да маскоту сјединим са белом основом па сам на дијалогу Layers кликнуо десним тастером миша на слој са маскотом и из контекстног менија изабрао ставку Merge Down.

Слој „Background“ сам сакрио кликом на индикатор приказа слоја представљеног иконицом ока са леве стране ставке слоја у листи на дијалогу Layers.

Поруке

Следеће што сам урадио је креирање слојева са текстуалним порукама. Напомињем да GIMP сваки пут када се на површину платна документа кликне док је активна алатка Add text to image (пречица ‘T’) креира нови слој на коме је омогућено куцање текста. Врста, стил, величина и карактеристике фонта одређују се на дијалогу Tool Options, најбоље пре него што се кликне на површину документа. Тиме је омогућено да се што прецизније одреди место од кога ће започети испис текста имајући у виду да је место клика горњи леви угао будућег поља за текст.

Кликнуо сам поменутим алатом на површину документа и фонтом Liberation Sans Bold величине 58px исписао „GNUzilla“. Укључио сам још и опције Hinting, Force auto-hinter и Antialiasing на палети Tool Options, како би текст имао умекшане ивице.

Како би умекшане ивице остале и након пребацивања у индексну палету боја, додао сам белу позадину за овај текст на следећи начин: десним тастером миша кликнуо сам на слој „GNUzilla“ на дијалогу Layers и из контекстног менија изабрао ставку Alpha to Selection.

Пошто је текст селектован, из менија Select одабрао сам опцију Grow… и поставио вредност на 2px.

На овај начин је селекција проширена за 2px.

Прешао сам на доњи слој тастером Page Down, из менија Layer изабрао ставку New Layer… и направио транспарентни слој. На новонаправљеном слоју креирао сам позадину текста „GNUzilla“ попуњавањем селекције бојом позадине, т.ј. белом бојом (пречица ‘Ctrl+тачка’), и након тога укинуо селекцију тастерском комбинацијом ‘Ctrl+Shift+A’ и спојио слој „GNUzilla“ са слојем који садржи белу позадину, те овако добијени слој назвао „GNUzilla“ (напомињем да спајањем више слојева назив циљног слоја задржава назив слоја који се налази на дну групе сједињених слојева).

Искључио сам видљивост слоја „GNUzilla“. Други текстуални слој са текстом „Septembar/Oktobar 2007“ исписао сам фонтом Liberation Sans величине 22px.

Као и за претходни слој, додао сам белу позадину тексту са селекцијом широм за 2px од основне ширине текста.

Када се укључи приказ претходног текстуалног слоја, евидентно је да се делови текста, који иначе не треба да се виде, ипак виде.

Зато правим селекцију у облику слоја „GNUzilla“ тако што десним тастером миша на дијалогу Layers кликнем на тај слој и из контекстног менија изаберем ставку Alpha to Selection. Потом правим нови слој избором опције New Layer… из менија Layer и на њему селекцију попуњавам белом бојом (пречица ‘Ctrl+тачка’), укидам селекцију (пречица ‘Ctrl+Shitt+A’) и горњи слој спајам са овим слојем (опција Merge Down из контекстног менија добијеног десним кликом миша на слој на дијалогу Layers).

Фонтом Liberation Sans Bold величине 30px исписао сам текст „GIMP radionica“. Фонтом Liberation Sans, такође величине 30px исписао сам „Animirani GIF“ а потом позиционирао ова два слоја, пошто ће они представљати једну допуњену целину, и спојио их опцијом Merge Down из контекстног менија дијалога Layers.

На ова два слоја сам такође додао белу позадину са маском за слој „Septembar/Oktobar 2007“.

Миг на једно око

Како бих додао мало живости на банер, реализовао сам у уводу поменути детаљ када маскота намигује оком којим гледа у посматрача.

Изабрао сам слој „Background“ а потом алатом за селекцију Select rectangular regions (пречица ‘R’) селектовао око на којем ћу радити анимацију.

Умножио сам селектовану површину системом Copy&Paste и направио нови слој од плутајуће селекције (опција New Layer… из менија Layer).

Овај слој сам назвао „kapak“.

Пошто капак који ће прекривати око у три пролаза треба да има две нијансе зелене боје (ради дочаравања сенке), пипетом (Pick colors from the image, пречица ‘O’) кликнуо сам на тамнију нијансу зелене боје која се налази одмах изнад ивице ока, чиме је та боја постављена као боја исписа. Преокренуо сам боје за испис и позадину тастером ‘X’ а онда кликнуо на површину са светлијом нијансом зелене боје која се налази изнад поља са тамнијом нијансом. На овај начин сам поставио две боје које ћу користити за цртање капка.

Слој „kapak“ умножио сам опцијом Duplicate Layer из менија Layer и назвао га „kapak 1“. На њему сам четкицом (Paint fuzzy brush strokes, пречица ‘P’) исцртао део капка светлијом нијансом а потом тастером ‘X’ поставио тамнију нијансу зелене боје за боју исписа и доцртао доњу ивицу капка. Пошто се ради о мањем делу слике, зумирао сам радну површину за обраду како бих лакше цртао по њој.

Умножио сам овај слој опцијом Duplicate Layer из менија Layer и нови слој назвао „kapak 2“. На исти начин као и у претходном кораку, нацртао сам доњи део капка, који у потпуности прекрива око.

Ради симулације подизања капка, умножио сам слој „kapak 1“, нови слој назвао „kapak 3“ и поставио га изнад слоја „kapak 2“. Слој „kapak“ преместио сам изнад слоја „kapak 3“, да би око након симулације намигивања било цело отворено.

Планирање фрејмова за анимацију

Генерално, направио сам основне фрејмове за анимацију.

Уследило је распоређивање основних слојева, и то: на дну слој „Background“ као позадина, следи слој „GNUzilla“, потом четири слоја „kapak“ за анимацију мига, изнад слој „Septembar/Oktobar 2007“ и на врху слој „GIMP radionica“.
Да бих унео још више живости у целу причу, јер један миг не чини константну анимацију, умножио сам четири слоја „kapak“ и поставио прву копију са истим распоредом изнад слоја „Septembar/Oktobar 2007“, а другу копију изнад слоја „GIMP radionica“.

Завршни радови

Када су фрејмови припремљени за анимацију, остаје још пар корака.

Први корак у припреми материјала за извоз у анимирани GIF јесте претварање композиције у индексну палету боја. Што мање боја има (у свим фрејмовима заједно), то ће коначни документ имати мању величину у KB. Из менија Image изабрао сам подмени Mode, и са њега ставку Indexed…, након чега се отворио дијалог за подешавање параметара конверзије у индексну палету боја. За овај пример сам изабрао 35 боја у оптималној палети. Битна ставка је и то да сам искључио симулацију прелива (Dithering) постављањем ове опције на вредност None.

Следећи корак је опцимизација свих слојева. Како ћу користити комбиновани режим претапања фрејмова у циљу добијања што мањег документа, из менија Filters и подменија Animation изабрао сам ставку Optimize (Difference). На овај начин су прецизно уклоњени сви сувишни делови (пиксели) на свим слојевима. На слици која следи приказани су оптимизовани слојеви „GNUzilla“ и „kapak 3“.

Поред оптимизације саме слике, постављени су и почетни параметри анимације за сваки слој. Наиме, назив сваког слоја је сада у формату „GNUzilla (100ms) (combine)“. Значење ставки у заградама нећу понављати јер сам о томе писао на почетку чланка.

Предпреглед и отклањање недостатака

Већ у овом моменту се може видети како будућа анимација може да изгледа. Кажем „може“, из тог разлога што се динамичност анимације постиже променом тајминга за фрејмове. Плејер за репродукцију анимације добија се када се из менија Filters у подменију Animation изабере ставка Playback…

Овде се поред увида у тајминг фрејмова могу увидети и недостаци. На пример, ја сам превидео да ће први фрејм бити без исписаног назива магазина „GNUzilla“, па сам ту грешку исправио спајањем слоја „GNUzilla“ са позадинским слојем „Background“.
Следеће што сам урадио је промена тајминга. За сваки текстуални фрејм поставио сам трајање на 2 секунде (2.000 ms), осим за слој „GNUzilla“ који сам поставио на 4 секунде (4.000 ms). Фрејмове за анимацију капака поставио сам на 50 ms, осим слојева „kapak 2“ и његових копија које сам оставио на подразумеваних 100 ms. Коначне поставке фрејмова пре извоза у анимирани GIF изгледају као на доњој слици.

Нека буде банер…

Преостао је још један, завршни корак: извоз у анимирани GIF. Из менија File изабрао сам ставку Save As… и на дијалогу Save Image уписао назив датотеке у коју ћу сачувати анимирани GIF са екстензијом („GNUzilla_GIMP_radionica.gif“ у пољу Name). За екстензију сам изабрао GIF Image (*.gif), мада ово није обавезно радити јер на основу екстензије уписане у пољу Name, GIMP сâм препознаје врсту датотеке у коју ће сачувати документ.

Када се кликне на дугме Save (или притисне тастер ‘Enter’) отвара се дијалог Export File на коме треба изабрати опцију Save as Animation и потом кликнути на дугме Export.

Последњи у низу је Save as GIF дијалог за одређивање параметара анимације. Овде сам активирао опцију Interlaced која код већих слика омогућава парцијално рендеровање на екрану. Поље GIF comment није обавезно попунити, али је информативно. Активирао сам и опцију Loop forever чиме се GIF интерпретеру налаже да анимацију непрестано понавља, т.ј. да након последњег фрејма поново прикаже први, и тако у круг.

Пошто сам у GIMP-у већ припремио слојеве за извоз у анимирани GIF и задао тајминге и режиме преклапања фрејмова, опције Delay between frames where unspecified и Frame disposal where unspecified нисам посебно подешавао. Међутим, ове опције су корисне код прављења анимације од претходно неприпремљеног GIMP документа.

Коначна анимирана GIF датотека напраљвена у циљу писања овог упутства тешка је свега 13 KB, састављена је од 15 фрејмова а један „круг“ анимације траје 8,75 секунди.

Одјава и најава

Овде можете видети још анимираних банера које сам радио у GIMP-u.

банер форума часописа „Свет компјутера“

удружење корисника SBB кабловског интернета KGHUB

банер захвалница за торент трекере

И на послетку, зашто статично кад може да се мрда и уз помоћ ГНУ/Линукс алата.