Как да създадете анимирано изображение за вашата медийна публикация

От CSS към GIF

Този невероятен GIF бе намерен тук

Хареса ни идеята да имаме анимирана корица за нашата публикация. Medium не позволява на потребителите да персонализират изцяло оформлението на публикацията, но все пак можете да си поиграете с някои визуални елементи, за да постигнете оригинални резултати и да направите вашата публикация да се откроява.

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

GIF файлове на средни публикации

Medium ви позволява да качите две изображения в заглавката на вашата публикация: едното е фоновото изображение, а другото е изображението на логото.

И в двата случая се поддържа формат GIF, така че можете да попълните корицата на публикацията си с няколко приятни анимации.

Ето два вдъхновяващи примера:

  • Backchannel (GIF като фоново изображение)
  • Магента (GIF като изображение на лого)

От CSS към GIF

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

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

Актуална анимирана корица на Radar

Стъпка 1 - html и CSS

Първата стъпка беше да адаптираме съществуващия код и да създадем HTML страница, съдържаща нашата анимация и същия фон като фоновото изображение, което искахме да използваме в нашата публикация.

Ако искате да играете с подобни ефекти за анимация на думи, можете да направите това писалка от Амрит Леоне.

Стъпка 2 - Запишете екрана

Quicktime Player има удобна функция за запис на екрана, която ви позволява да изберете областта на екрана, която искате да запишете. Видеоклипът е заснет с около 30 FPS, така че вашата анимация не трябва да бъде по-дълга от 15 секунди (15 секунди = 450 кадъра).

Ако използвате Windows, можете също да опитате един от тези софтуерни програми за запис на екрана.

Стъпка 3 - Трансформирайте .mov в GIF

След като приключите със записа, ще имате .mov файл.

Отворете Photoshop и отидете на File> Import> Video Frames to Layers.

Можете да изберете частта от записа, която искате да импортирате и преобразувате в слоеве. Не забравяйте да поставите отметка в квадратчето „Make Frame Animation“.

Photoshop ще ограничи кадрите до 500 и не трябва да имате повече от това, в противен случай файлът ще стане твърде тежък.

Ако отворите панела на времевата линия във Photoshop, ще видите всичките си кадри.

Сега просто трябва да експортирате кадрите като GIF. За да направите това, отидете на File> Save for Web.

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

Важно е да запазите размерите на вашия GIF двойно по-големи от необходимите, защото Medium ще го преоразмерите до половината.

„Предполагаме, че всички лога са ретина, което означава, че логото е качено на два пъти по-голям размер, отколкото предполагаме, че ще бъде показано. Ако качите лого с ширина 2000 и 1000 пиксела, Medium го интерпретира като 1000 px и 500x високо. “
- Среден блог

Финалният ни GIF има 475 кадъра и около 2MB.

Стъпка 4 - Качете го в Medium

Качете вашето фоново изображение и изображение на лого във вашата публикация и това е всичко.

Вече имате анимирано изображение на корицата!

Надяваме се да намерите това полезно. Дайте и ни уведомете, ако използвате и GIF файлове в своята Medium публикация. Ще се радваме да видим още няколко страхотни примера! За да прочетете още истории, просто натиснете бутона „следвайте“.