Как да създадете анимиран GIF или филмов клип
Следвайки реда от предишните седмици, в който от една страна ви казах, че браузърите вече не поддържат 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 икона).