Създаване на анимиран GIF с GIMP

Съдържание:

Създаване на анимиран GIF с GIMP
Създаване на анимиран GIF с GIMP
Anonim

GIMP е забележително мощен софтуер, като се има предвид, че е безплатен. Уеб дизайнерите, по-специално, може да са благодарни за способността му да създава прости анимирани-g.webp

Анимираните-g.webp

Как да направите анимиран-g.webp" />

Следващите стъпки показват проста анимация с размер на уеб банер, използваща няколко основни графики, малко текст и лого.

Инструкциите в тази статия се отнасят за GIMP версия 2.10.12.

  1. Отворете нов документ. В този пример сме избрали предварително зададения шаблон на Уеб банер голям мобилен 320x100.

    За вашата анимация можете да изберете предварително зададен размер или да зададете персонализирани размери в зависимост от това как ще използвате крайната си анимация.

    За този урок анимацията ще се състои от седем кадъра и всеки кадър ще бъде представен от отделен слой, което означава, че крайният GIMP файл ще има седем слоя, включително фона.

  2. Задаване на първа рамка. Анимацията ще започне с празно място, така че не са необходими промени в действителния слой Background, тъй като той вече е чисто бял.

    Необходима е обаче промяна на името на слоя в палитрата Слоеве. Щракнете с десния бутон върху слоя Background в палитрата и изберете Редактиране на атрибутите на слоя.

    Image
    Image
  3. В диалоговия прозорец Редактиране на атрибутите на слоя, който се отваря, добавете (250ms) в края на името на слоя. Това задава времето, през което този кадър ще се показва в анимацията. ms означава милисекунди и всяка милисекунда е хилядна от секундата. Този първи кадър ще се покаже за четвърт секунда.

    Image
    Image
  4. Задаване на втора рамка. За урока е използвана графика за отпечатък за тази рамка. Отидете на File > Open as Layers и изберете графичния файл. Това поставя отпечатъка върху нов слой, който може да бъде позициониран според нуждите с помощта на Move Tool.

    Image
    Image
  5. Както при фоновия слой, този нов слой трябва да бъде преименуван, за да зададе времето за показване на рамката. В този случай 750ms.

    В палитрата Слоеве визуализацията на новия слой изглежда показва черен фон около графиката, но в действителност тази област е прозрачна.

    Image
    Image
  6. Задайте рамки три, четири и пет. Следващите три кадъра са повече отпечатъци, които ще преминат през банера. Те се вмъкват по същия начин като втора рамка, като се използва същата графика и друга графика за другия крак. Както и преди времето е зададено като 750ms за всеки кадър.

    Всеки от слоевете с отпечатъци се нуждае от бял фон, така че само един кадър да се вижда винаги – в момента всеки има прозрачен фон. Можем да направим това, като създадем нов слой непосредствено под слой с отпечатък, запълним новия слой с бяло и след това щракнете с десния бутон върху слоя с отпечатък и щракнете върху Обединяване надолу

  7. Задаване на рамка шест. Тази рамка е просто празна рамка, пълна с бяло, която ще създаде вид на изчезването на последния отпечатък, преди да се появи последният кадър. Нарекохме този слой Interval и избрахме този дисплей да е само за 250 ms.

    Не е необходимо да наименувате слоевете, но това може да улесни работата с файловете със слоеве.

    Image
    Image
  8. Задаване на рамка седем. Това е последният кадър и показва някакъв текст заедно с логото на Lifewire.com. Първата стъпка тук е да добавите друг слой с бял фон.

    Image
    Image
  9. След това използвайте инструмента за текст, за да добавите текста. Това се прилага към нов слой, но ние ще се справим с това, след като добавите логото или новото изображение, което може да бъде направено по същия начин, по който графиката на отпечатъка беше добавена по-рано.

    Image
    Image
  10. Когато ги подредим по желание, можем да използваме Merge Down, за да комбинираме слоевете с лого и текст и след това да обединим този комбиниран слой с белия слой, който беше добавен преди това. Това създава един слой, който ще формира крайния кадър и ние избрахме да го покажем за 4000ms.

    Image
    Image
  11. Визуализация на анимацията Преди да запази анимирания GIF, GIMP има опцията да го визуализира в действие, като отиде на Filters >Анимация > Възпроизвеждане Това отваря диалогов прозорец за визуализация с бутони за възпроизвеждане на анимацията. Ако нещо не изглежда както трябва, то може да бъде променено на този етап. В противен случай може да бъде запазен като анимиран GIF.

    Анимационната последователност е зададена в реда, в който слоевете са подредени в палитрата Слоеве, като се започне от фона или най-долния слой и се върви нагоре. Ако вашата анимация се възпроизвежда извън последователност, ще трябва да коригирате реда на вашите слоеве, като щракнете върху слой, за да изберете и използвате стрелките нагоре и надолу в долната лента на палитрата със слоеве, за да промените позицията му.

    Image
    Image
  12. Запазете анимирания GIF. Запазването на анимиран-g.webp" />Файл > Запазване на копие и дайте подходящо име на файла си и изберете къде искате да го запишете.

    Image
    Image
  13. След това отидете на Файл > Експортиране като, за да го запазите като анимиран GIF.

    Image
    Image
  14. В диалоговия прозорец Експортиране на изображение, който се отваря, изберете Изберете тип файл и превъртете до-g.webp" />. Ако получите предупреждение за слоеве, които се простират отвъд действителните граници на изображението, изберете бутона Crop.

    Image
    Image
  15. Това вече ще доведе до диалоговия прозорец Запазване като GIF със секция от Опции за анимирани GIF. Можете да ги оставите по подразбиране, но ако искате анимацията да се възпроизвежда само веднъж, трябва да махнете отметката от Вечно повтаряне.

    Image
    Image
  16. Сега можете да споделите своя анимиран GIF.

Заключение

Стъпките, показани тук, ще ви дадат основните инструменти за създаване на ваши собствени прости анимации, като използвате различни графики и размери на документи. Въпреки че крайният резултат е доста елементарен по отношение на анимацията, това е много лесен процес, който всеки с основни познания за GIMP може да постигне.

Препоръчано: