Следвайки реда от предишните седмици, в който от една страна ви казах, че браузърите вече не поддържат Flash файлове, а от друга, ви научих как да създавате анимации в HTML5 като алтернатива. Днес искам да ви обясня още една от възможностите, до които имате достъп, ако искате подгответе банери или някакъв призив за действие на вашия уебсайт в движение.
Става въпрос за Анимирани GIF файлове. Вече се позовах на тях в статията, в която говорих за това как да оптимизирам изображенията на вашия уебсайт, но тази публикация ще бъде много по-изчерпателна, няма да ви кажа само какви са те и какви предимства имат, но също какви инструменти можете да използвате, за да ги създадете и как.
Индекс на съдържанието
Какво е анимиран GIF?
Както винаги, оставям ви определението, което Уикипедия ни дава: „това е графичен формат, широко използван в глобалната мрежа, както за изображения, така и за анимации“. С моите думи ще ви кажа, че това е тип файл, който ви позволява от няколко изображения създайте едно движещо се изображение.
За какво мога да използвам анимиран GIF?
- За по-лесно привличане на вниманието на моите потребители/клиенти
- За да обясните как работи даден продукт
- За създаване на призиви за действие
- За промоционални кампании (например подчертаване на отстъпка)
- За да създадете уроци
- За показване на различните цветове на един и същ продукт
- За маркетингови кампании по имейл (например, уведомяване за предстоящо събитие)
- За да се свържете с вашата общност в социалните медии
- И дълъг и т.н.
Кажи ми за какво си го използвал?
Не забравяйте, че ...
- Не трябва да ги злоупотребявате, защото те могат да наситят
- Трябва да обърнете внимание на теглото му, ако е прекалено, това ще забави уебсайта ви
- Трябва да внимавате със скоростта (нито твърде бърза, нито твърде бавна)
- Те не трябва да са прекалено дълги
Как да създам анимиран GIF във Photoshop?
След това ще ви обясня стъпка по стъпка как да създадете своя видеоклип от Photoshop (Използвам версията CS4, но инструкциите са същите, ако използвате CS5 или CC). Заедно с инструкциите ще намерите и инфографика, която ви препоръчвам да прегледате, тъй като ще ви улесни да ги разберете.
Ако не сте потребител на Photoshop, не се притеснявайте, ако преминете към следващия раздел ще видите, че изброявам други инструменти, от които можете също да подготвите анимирания си GIF.
1. Първо трябва създайте нов файл, за това трябва да влезете в Photoshop, щракнете върху File в горното меню и след това върху New.
2. След това ще се появи екран, където трябва да попълните следните полета:
- Име: Този, който идентифицира вашия документ
- Ширина, височина: Въведете размера на вашия файл (внимавайте с мерната единица, най-добре е да използвате пиксели)
- Резолюция: 72 пиксела/инч
- Цветен режим: RGB (Не забравяйте, че CMYK е за печатни документи)
- Фоново съдържание: Прозрачен (Ще имате време да оцветите фона по-късно от слоевете)
3. След като вашият документ е създаден, първото нещо, което трябва да направите (ако вече не сте го активирали) е да отидете в горното меню, щракнете върху Window и активирайте панела за анимация (трябва да видите отметка отляво).
4. Ще видите, че в долната част на вашата работна маса a времева линия. В долната дясна част ще видите правоъгълен символ и ако застанете върху него ще видите „Преобразуване в рамка анимация”, Щракнете върху него и ще видите как се променя визуализацията, квадратчета като рамка вместо хоризонтални линии.
5. Запомнете! Запазете файла си като .psd. По този начин файлът винаги ще може да се редактира, в случай че има бъдещи модификации.
Е, след като бъде запазена, творческата част пристига. Ти ще трябва да създават различни слоеве (Можете да отворите този панел от менюто Прозорец → Слоеве) и да включите във всеки от тях елементите, които искате да бъдат част от вашата анимация (например в моя случай те са светло тюркоазен фон и GIF икона).
6. Сега ще трябва да се върнете към анимационен панел за създайте в това различни рамки това ще бъде част от вашето анимирано изображение. Трябва да щракнете върху квадратния символ (вижте го в приложената инфографика) и да създадете толкова кадри, колкото искате.
7. За да кажете какво се показва и какво не във всеки от тях, ще трябва да играете с икона на окото че имате до всеки слой от лявата страна. По този начин можете да решите какво изображение, текст, фон и т.н. се появяват във всеки от тях. Например, в моя случай съм създал първи кадър с икона фон + и последен кадър само с фон, целта е логото да изчезне.
8. За да постигнете този ефект, можете да го направите по два начина. Ако щракнете върху долния десен ъгъл на всеки кадър, a меню със секунди искате всеки от тях да се появи. Ако никоя от цифрите, които идват по подразбиране, не ви убеждава, можете да я дадете на „други“ и да изберете тази, която искате. С тази функционалност можете да дадете различни времена за всеки кадър така че преходът на вашия анимиран GIF да бъде повече или по-малко бърз.
9. Предишната опция ще доведе до много груби разрези между рамка и рамка, ако искате да постигнете по-успешен преход, можете да използвате инструмента "Преплитат анимационни рамки”(Вижте инфографиката). За да направите това, трябва да кликнете върху първия кадър, да кликнете върху инструмента, който коментирам, и на екрана, който ще се появи изберете в кои рамки, върху кои слоеве и кои ефекти искате. Това е въпрос на проба и грешка, трябва да побъркате и да видите кой резултат ви убеждава най-много, като щракнете или премахнете кликването върху различните опции, които ви предлага. Но ви уверявам, че можете да имате много готини неща 😉 Разбира се, бъдете внимателни с теглото, тъй като тази опция генерира нови рамки, които ще го увеличат.
10. Следващата точка ще ви помогне да посочите колко пъти ще се повтаря вашето движещо се изображение. Имате следните опции:
- Един път
- Три пъти
- Безкрайно: обикновено обичайното
- Други: можете да изберете колко пъти
11. Вече имате готов анимиран GIF, но си представям, че преди да го експортирате, ще искате вижте как се получи, Недей? Е, много е просто, в менюто под рамките ще видите, че има икона за възпроизвеждане, просто кликнете върху него и на същата работна маса на Photoshop можете да видите как е била анимацията.
12. Трябва да го запишете само като GIF, въпреки че първо не забравяйте да го запазите отново като .psd, за да поддържате актуализираното за редактиране с последните промени. След като направите това, отидете в горното меню и щракнете върху Файл → Запазване за уеб и устройства, и ще се отвори нов екран, в който ще трябва:
- Избирам GIF
- Цветове 256, можете да го намалите, ако теглото е много голямо, стига да не се отрази прекалено на качеството на файла ви
- На дъното проверете че повторение е този, който сте избрали преди (безкраен, веднъж ...)
- От лявата страна можете да cпо дяволите теглото от вашия файл
Ето резултата:
С какви други инструменти мога да създам анимиран GIF?
Почти всички опции, които ще ви представя, са безплатни, препоръката ми както винаги е да ги изпробвате, докато намерите тази, която най-добре отговаря на вашите нужди:
За да инсталирате на вашия компютър:
GIMP: Ето видео урок, в който те обясняват как да създадете анимиран GIF в Gimp.
GifCam: Не се нуждае от инсталация, тъй като е изпълним файл. Позволява ви да правите екранни снимки и няма ограничение във времето.
MakeGIF: Това е разширение за Chrome, което ви позволява да заснемате всяко видео във формат HTML5.
Giffin Tool: важи само за Windows. Като предимство можете да включите различни ефекти.
За да изтеглите на мобилния си телефон:
- За Android:
Gif Creator: Позволява ви да създадете GIF, като използвате изображенията, които имате на мобилния си телефон.
Gifinator: Той е много лесен за използване, позволява ви да създавате вашите GIF файлове бързо.
-За IOS:
Giffer: Плаща се, но е по-лесен за използване и с повече функции от други APP.
GifMill: Той е безплатен и ви позволява да включвате различни филтри и текстове.
Истината е, че той може да включва дълги и други екземпляри, така че ако има такъв, който използвате редовно и който смятате, че работи правилно, не се колебайте да го споделите с нас в коментарите 😉
Как мога да конвертирам анимиран GIF във HTML5 видео?
Знам, че настоявам много по въпроса за теглото на файловете, но е от съществено значение да оптимизираме скоростта на вашия уебсайт. Въпреки че движещите се изображения, както сме виждали преди, имат своите предимства, недостатъкът е в това теглото им обикновено е прекомерно. Решение за избягването му е конвертирате анимирания си GIF в GFY файл, като? Препоръчвам Gfycat, той ще конвертира вашия файл и след това можете да го споделите или вградите, както в моя пример за GFY:
Това са всички приятели. Знам, че това беше интензивна статия, но намерението ми беше да комбинирам в една публикация всичко необходимо за създаване на анимиран GIF и мисля, че го постигнах. Вече знаете, че ако имате някакви въпроси или предложения, коментарите ви ще бъдат добре дошли 😉
Източник на изображението: 1
Графичен и уеб дизайнер с богат опит в областта на онлайн комуникацията. Целта ми е да помогна на професионалистите и малкия бизнес да създадат своята цифрова идентичност.
Моето време извън линия Прекарвам го по пътя към планина, обезсмъртявам момент с фотоапарата си, посещавам отдалечено място в света или просто си прекарвам добре с приятелите си