Unlimited PS Actions, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Design & Illustration
  2. GIF

10 Способів оптимізації GIF Анімації

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called Animation in Adobe Photoshop.
How to Create an Animated Pixel Art Sprite in Adobe Photoshop
Create Your Own Animated Pre-loader in Photoshop

Ukrainian (українська мова) translation by Andy Yur (you can also view the original English article)

GIF - стандартний формат стиснення зображень з великими областями однотонних кольорів і чітких елементів, таких як line art, логотипи або текст. Маючи всього лише 8 розрядність, він міг би зникнути з просторів Інтернету після введення форматів JPEG і PNG, але GIF і раніше є популярним веб-форматом завдяки його можливостям анімації кадру. У цьому уроці, ми докладніше розглянемо можливі варіанти, як конвертувати відео в GIF анімацію, і як оптимізувати розмір файлу. Давайте почнемо!

Крім того, якщо вам часто доводиться мати справу з GIF анімацією, ви можете використовувати автоматизоване рішення: Gift Export- екшен для Photoshop, доступний на Envato Market, який дозволить вам взяти кілька зображень, автоматично завантажити їх в Photoshop, і експортувати їх як GIF.


1. Нарізка Анімація

Для початку вам потрібно відкрити відео файл в Photoshop. У більшості випадків для GIF анімації, вам не потрібні всі кадри, тому вам треба буде обрізати відео в панелі Timeline. Увімкніть опцію Loop і спробуйте знайти підходящі місця для обрізки вашого відео.

10 Ways to Optimize a GIF File

2. Зменшення Розміру Зображення

Ви можете зменшить розмір зображення використавши опції меню Image або зробити це пізніше, використавши діалогове вікно Save for Web. Я вважаю за краще робити це на початку за допомогою діалогового вікна Image Size, так як це дозволить скоротити вам значну кількість часу на завантаження, коли ви будете відкривати діалогове вікно Save for Web. Ваш шар з відео буде перетворений в Смарт-об'єкт, якщо ви зміните розмір зображення, але ви можете не турбуватися з цього приводу, це не вплине на хід роботи.

10 Ways to Optimize a GIF File

3. Опція Save for Web

Що я люблю в такому підході, так це те, що нам не потрібно робити ніяких перетворень в панелі Timeline, при збереженні кадрів для анімації, так як діалогове вікно Save for Web зробить роботу за нас, після того, як ми виберемо GIF як формату на виході. Зауважте, що опції для Анімація з'являться в нижньому правому куті діалогового вікна. Якщо ви вирішите ще зменшити розмір ваших зображень, то ви можете зробити це тут.

10 Ways to Optimize a GIF File

4. Зменшення Числа Кадрів

Ви можете ще більше зменшити розмір вашої GIF анімації, якщо відкриєте результат експорту в GIF знову в Photoshop, і видаліть кожен другий або третій кадр в панелі Timeline. Далі ви повинні виділити всі залишилися кадри і збільшити їх тривалість, щоб компенсувати вилучені кадри. Якщо ви цього не зробите, то ваша анімація буде програватися швидше оригінальною. Якщо у вас все готово, ви можете зберегти нову версію, яка буде набагато менше оригінальної.

10 Ways to Optimize a GIF File

5. Кількість Квітів

Найбільш важливий параметр, який дозволяє оптимізувати розмір GIF файлу - це кількість кольорів використовується в Кольоровий Таблиці. Максимальна кількість - 256, яке відповідає обмеженню глибини кольору в 8-bit. Насправді добре обмежитися 64 квітами або меншою кількістю, але в залежності від оригінального відео, можливо вам доведеться збільшити цю кількість квітів щоб отримати результат трохи краще.

10 Ways to Optimize a GIF File

6. Який Алгоритм для Зменшення Кольоровості Вибрати?

  • Perceptual (перцепційний) призначений для створення таблиці кольорів користувача, в якій перевага віддається тонам, до яких людське око є чутливішим.
  • Selective (Селективний), створює таблицю кольорів подібну перцепції, але використовує найбільш часто повторювані кольору в зображенні і перевага віддається кольорам, використовуваним в Web. Використання цієї таблиці кольорів дає найбільшу колірну цілісність. (Ця опція стоїть за умовчанням).
  • Adaptive (Адаптивний) призначений для створення користувальницької таблиці кольорів на основі спектра кольорів зображення. Наприклад, для зображення з відтінками зеленого і блакитного, буде створена таблиця переважно складається із зелених і блакитних квітів. У багатьох зображеннях кольори зосереджені в якійсь конкретній частині спектра.
  • Restrictive (Обмежений) застосовує стандартну палітру, що складається з 216, стандартну колірну web-таблицю загальну для 8 бітних (256-кольорів) палітр для Windows і Mac OS. Цей параметр гарантує, що жоден браузер не застосує дизеринг до днем ​​тижня їх збереження з 8 бітової глибиною кольору. Якщо зображення має менше, ніж 216 кольорів, то кольори, що не використовуються видаляються з таблиці.
10 Ways to Optimize a GIF File

7. Дизеринг

Так як кольорова палітра GIF файлів обмежена, ми можемо захотіти імітувати відсутні кольори, тими що у нас є, використовуючи дизеринг. В меню "Dither", ми вибираємо один з алгоритмів для такої імітації. Метод "Diffusion" дозволяє регулювати кількість змішання. У разі використання "Pattern" і "Noise", ми не можемо нічого регулювати. Чим більше дизеринг, тим більше розмір файлу. Дизеринг додає різним чином пофарбовані пікселі, використовуючи апроксимацію, імітуючи додаткові кольори і згладжуючи кольорові переходи. Деякі зображення можуть виглядати дуже добре, з використанням цієї техніки, але краще використовувати її мінімально, що б зберегти маленький розмір файлу.

10 Ways to Optimize a GIF File

8.Опціі: Web Snap, Lossy, Transparency and Interlaced

  • Web Snap - використовується, щоб запобігти використанню дізерінга браузерами. Робиться це шляхом прив'язки деяких квітів до web-кольорів. Чим більше web-кольорів присутня в GIF, тим менше буде дизеринг в браузері. Величина 0% не змінить ніяких квітів, в той час як величина 100% змінить все кольору на web.
  • Lossy (Втрати) - ця опція контролює ступінь втрат візуальної інформації, яка здатна зменшити розмір файлу.
  • Якщо зображення містить Transparency (Прозорості), виберіть Transparency для збереження прозорих пікселів; приберіть галочку, щоб повністю або частково прозорі пікселі заповнилися матовим кольором.
  • У разі вибору Interlaced файли формату GIF в браузері будуть завантажуватися в кілька проходів.


9. Порівняйте Оригінальну і Оптимізовану Версії

Після того, як ви внесли різні зміни, ви можете перевірити різницю розмірів файлів і різницю в якості, використовуючи режим 2-Up.

10 Ways to Optimize a GIF File

10. Перегляд, Збереження Настройок і Оптимізація Розміру файлу

Якщо ви задоволені вашими настройками, подивіться вашу GIF анімацію в режимі Перегляду в браузері і не забудьте зберегти настройки як прессета. Ви можете так само задати обмеження на розмір файлу, використовуючи опцію з Optimize Menu і після того, як ви її застосуєте, програма Photoshop автоматично спробує підігнати файл під розмір з найкращою якістю зображення.

10 Ways to Optimize a GIF File
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.