⭐️ Учимся работать с GIF/WEBP || Обучающие материалы ✨️

Это конец игры.

Приветствую всех, кто пережил первую часть. Для вас припасено самое вкусное. В этой части вы определенно умрете 💗

* * *

⭐ Обучающие материалы #2 – работа в Aseprite⭐

 Оглавление:

1. 🤓 Разбираем формат WEBP в формате вопрос - ответ. Коротко и о главном. Постепенно всё переходит к макроблокам, сжатию и дизерингу.
2. 🤓 Еще глубже в дизеринг || То, что поможет вам в случае чего при подгрузке работы. 
   
3. ❗ Мини-гайд по Aseprite: сокращение цветов и по мелочи
4. ⌛ Ближайшие посты по теме, связанные работы.
   
      Ремарка: главы разделяются звёздочками « * * * ».  
   

* * *

⭐ Попробуем разобраться в WEBP в формате вопрос-ответ⭐

Вопрос = Q;
Ответ = A.

Q: Что такое WEBP?
A: Формат от Google стремящийся заменить GIF/PNG/JPG/APNG форматы. 

Q: В чем главная особенность WEBP?
A: Его картинки весят на 30% меньше, чем у любых других форматов (особенно gif). Особое сжатие позволяет сайтам работать быстрее и хранить больше.

Q: Какие главные недостатки WEBP?
A1: Это тот самый формат, который невозможно закинуть в пэинт.
A2: Это тот самый формат, который открывается через браузер, а не через утилиту для просмотра фоток.  
A3: Это тот самый формат, который в дискорде кидается "файликом доступным для скачки", а не картинкой или гифкой. (Телега и вовсе переделывает анимацию в статичную картинку).
A4: Это тот самый формат, который интересен только проггерам (и то он требует на себя пару сотен кода, а потом еще и дыры имеет).
A5: Это тот самый формат, который не имеет встроенной поддержки для МАКов. То есть, пользователям макинтошей нужно качать плагин (за наводку спасибо Мэйнстриму).
A6: Это тот самый формат, из-за которого в турниры с картинками можно заливать гифки (а ведь вы просто хотели насладиться картинками!)
A7: Это тот самый формат, который в облачном хранилище отображается некорректно, с зернистостью и мылом.
A8: Это тот самый формат, который вообще не отображается на каком-нибудь старом корыте при заходе на сайты (у меня такое есть). Поддержку можно посмотреть здесь.
A9: Если скачать этот файл на мобильное устройство, то скорее всего файл не будет воспроизводиться или вовсе откиснет.
... В общем, формат имеет дурную славу. ¯\_(ツ)_/¯

Q: Где можно найти всю инфу по WEBP?
A: [Официальная документация WEBP].

Q: Что важно знать из всей документации?
A1: WEBP поддерживает прозрачность цветов, gif – нет.
A2: WEBP поддерживает 16 777 216 цветов, gif – 256 (число можно умножить на количество "блоков". (Оптимизацию помянем)); 

A3: WEBP поддерживает максимальное разрешение 16383 x 16383. Такое же разрешение поддерживает PNG.
A4: WEBP делит картинку на "мелкие сегменты", макроблоки. 
⏯️ A5: WEBP – это отчасти "видео". Он имеет видеокодек VP8 использующийся в видео + юзает хранилище RIFF. В будущем посте мы к этому вернемся.

Q: Что такое "макроблоки"?
A: Это деление на "яркость" и "насыщенность".

Условный пример что такое "насыщенность";

Условный пример что такое "яркость".

Q: Как работают макроблоки и зачем это знать?
A: Начнем рассмотр со стороны картинок (PNG и бывших PNG, что переведены в Webp). Тема "макроблоков" вплетена в алгоритм сжатия сайта. Это важно знать в том случае, если вы не брезгуете использовать градиенты, режимы смешивания и прочие безумные штуки в создании пикч, получая пнг файл в 300 кб (разумеется такая вещь будет сжиматься. Непременно должна!).

Для демонстрации пришлось немного упростить цветовую палитру у итоговых вариантов. «Без сжатия» – это оригинальный файл до загрузки на сайт. Его детали насыщенны и светлы. «Сжатие» – файл полученный после загрузки на сайт. У некоторых деталей появилось заметное размытие. Некоторые цвета потеряли немного насыщенности и яркости.

• [ссылка чтобы разглядеть] • || ⏭ Контрится ли это легально? – Разберём в следующем посте. Будет интересно 😎

На этом примере ключевые детали становятся более серыми. Также есть размытие, из-за чего немного теряется акцент и зернистость.

• [ссылка чтобы разглядеть] • 

Плохо ли это? На самом деле нет. Так сайт выживает, сжимая тяжелые PNG и WEBPки в более легкие формы. Всё что мы можем сделать – это принять это и сделать мелкие детали более заметными, плотными, насыщенными и менее размытыми по краям. Последнее особенно важно, так как "те самые размытые серые пиксели вокруг основного объекта" впоследствии могут размывать его собой... || ... Что насчет алгоритма: умные дяди говорят что блоки яркости имеют форму 16x16, а блоки цветности – 8x8, а потом они еще и на подблоки 4x4 разделяются...

Q: Хорошо, как макроблоки работают в анимациях?
A: В анимации они работают немного иначе! Вот отрывок из документации: «Внутри каждого макроблока кодер может прогнозировать избыточную информацию о движении и цвете на основе ранее обработанных блоков. Кадр изображения является «ключевым» в том смысле, что он использует только уже декодированные пиксели в непосредственной пространственной окрестности каждого из макроблоков и пытается заполнить неизвестную их часть. Это называется предиктивным кодированием».

Так это работает: слева-направо и сверху-вниз. || Представим, что белые квадраты залиты дизерингом определенного цвета. Все остальные элементы – это элементы "предсказания" алгоритма. Или, как сказали бы нёрды – «предиктивное кодирование».

• [по этой ссылке точно та же информация, но из документации. Инфа на более сложном языке. Не имеет примера с дизерингом] • Повторим: предсказания работают ЛИБО на основе уже закодированных пикселей слева и сверху, ЛИБО межкадрово (по движениям).

Q: Для чего это нужно знать в анимации?
A: Чтобы получить несколько дополнительных кадров анимации при помощи дизеринга. Об этом ниже.

Дизеринг выглядит *так* и накладывается *так*.

Загрузим другой пример ис... Нет, не загрузим. Анимация не заработала, не смотря на то, что я так на неё рассчитывал 🥳 || Вес файла: 69 кб (что в принципе норма для изображений. От этого я буду дальше отталкиваться). Сейчас изображение не имеет дизеринга, а на следующем предмете – вы можете наблюдать бирюзовую рамку.

Итак, я добавил дизеринг-рамку и... Анимация все еще мертва. В обычной ситуации я бы после этого сократил количество кадров (особенно те кадры, в которых цвета сменяются в большом количестве), но в этот раз я так делать не буду. || Как уже сказал, вес в 69 кб - это нормальный вес. Давайте попробуем добавить тупо ЕЩЕ БОЛЬШЕ дизеринга.

Вот теперь его достаточно 🤗|| Вес увеличился на 15 кб (это из-за того, что WEBP вообще не понял нашего прикола и напредсказывал того, чего быть не может. Вероятно). || Здесь, если обратить внимание не на "рамку", а на "внутреннее окно" - можно заметить как применяется второй вариант дизеринга, «использование на всём холсте». Такой вариант хорошо сокращает количество сменяемых пикселей от кадра к кадру. На сколько вы помните из первого поста: "если пиксель не сменяется – значит он тупо хранится, не повышает вес и не использует вычислительную память на замены". Также в первом посте к этому было приложено небольшое доказательство, тест «Ладдер по потерянному времени | Подожди 19 минут».

Другой работающий пример. На экране анимация пользователя Кофе. || Ранее я попробовал применить "дизер-рамку", но она не сработала. «Полное покрытие» же – заливает базы.

Еще одна анимация Кофейка. || Та же история. Полное покрытие снова играет в человека-паука и спасителя очередного поста от статичных картинок.

⭐ Небольшое отступление, «дизеринг – имба?»⭐

Из этих примеров и предыдущего поста у вас может сложиться впечатление, что жизнь анимации решается одним лишь дизерингом: "и на вес файла можно немного закрыть глаза¹", "и количество кадров можно оставить большое или сделать больше²", "и цветовую палитру я могу расширить³"... Но это не совсем так. Дизеринг - это не чит, не волшебная палочка и даже не то, за что можно получить бан (хотя, насчет последнего я не уверен). Дизеринг не всесилен.
Первое – вы мало когда сможете получить файл для теста, который мог бы перевесить 110 кб. Заниматься таким не стоит. Вам постоянно придется нащупывать какой-то "минимум". Каждая неудачная подгрузка возвращает вас в редактор, где вы будете сокращать те или иные параметры анимации, сохранять, пробовать, пробовать... Делать всё это до тех пор, пока вы не обнаружите, что на значениях 40-70 всё наконец работает, а часть дизера и вовсе оказывается не нужна! В результате всего процесса у вас будет до десяти или двадцати проваленных попыток загрузки и это была всего-лишь одна анимация. || Для создателей анимированных аватарок отметка веса еще более непредсказуема. В одном проекте у вас может быть рекорд в 14 кб, а в другом – вы едва-едва сможете подгрузить работу на 9 кб. Даже при всём "имбалансном" дизеринге, даже при всём мастерстве и знаниях.
Второе – количество дополнительных кадров даваемые от приёма дизером крайне ограничено. Вы получите не более +20-30% по количеству кадров от текущей анимации. То есть, в тяжелых анимациях (где много сменяемых пикселей в кадрах) может быть +1 кадр. В больших – +4; в средних – +8; в малых – +16... || *Подробнее о том, что значит "большой-малый цветовой файл" можно найти в предыдущем гайде. Ссылка ведет на нужный отрывок*.
Третье – та же тема с цветом. Дизер дает +10% к цветам.
* * *
Есть множество вопросов, на которые я пока не могу найти ответ, но опустим сомнения и лишнюю информацию.

* * *

 ⭐ Уходим еще глубже в дизеринг, но не забываем о примерах ⭐

✅: Представим что дизеринг – это карты таро разложенные в шахматном порядке. Эти карты искажают будущее, создают иные предсказания, ложные обещания. Прямо как вот этот паренек.

Вот так делать можно. Это паттерны дизеринга и они создают определенный уровень затемнения в зависимости от частоты возникновения!

Вот так делать можно. ГООООЛ! || Пример положительный!

Так делать тоже иногда нужно. Этот прием позволяет заменить большое количество цветов градиента и некоторые подвижные пиксели (если бы это была анимация). || Пример положительный!

❌: Если мы не будем это использовать и просто зальём всё сплошными прямыми, то это перестанет считаться дизерингом, перестанет считаться шахматишками и перестанет работать в анимации. Другими словами анимация умрет.

Шах и мат, аметисты. Это так не работает. || Пример отрицательный.

❌: Также не стоит путать дизеринг с скринтонингом и халфтонингом. Для наших задач подходит только первое.

Если вы перемасштабируете дизеринг неправильно, то вы рискуете получить "халфтон" или другой паттерн дизеринга. «Паттерн» означает "закономерное расположение" (показано немного выше). Смена паттерна – не так страшна, как раздробление пикселя на дополнительные цвета... "Дизеринг" всегда означает "включенный алиасинг", т.е. недробность, неразмытость пикселя. Он всегда имеет острые углы. 

* * *
Отлично. Мы усвоили большинство инфы по дизеру. Сейчас мы погрузимся на самое дно этого пиксельного безумия.
❓: Документация намекает о том, что сила таро и шахматишек зависит от яркости, насыщенности и разницы с окружением... «Яркий, но ненасыщенный цвет» или «капец черный блэк маттерс цвет» убивают файл чаще других вариантов. || Рассчитывайте на высокую насыщенность цвета и САМ ЦВЕТ (сам цвет имеет "свою яркость в зависимости от насыщенности" по теория цвета... Наиболее быстрое и удобное объяснение моим словам можно найти ниже в видосе. Нужная информация на 4:24). 

✅: Чаще всего гифку (вебпку) спасает насыщенный желтый или циановый цвет на пикселях дизера. Все остальные цветовые варианты работают реже, особенно те, что близки к черному: синий, фиолетовый, маджента... Зеленый и оранжевый имеют немного больше шансов, но также руинят подгрузку анимации.

На этом испытательном полигоне я испытывал свою теорию;

На этих испытательных полигонах тоже присутствует часть тестов.

* * *

⭐️ Гайд с основными моментами при работе с аватаркой • Aseprite! ⭐️

Доп инфа по видео:
Мы пропустили этап рескейла так как аватарка подходит под условия 300х300. В следующем выпуске мы это исправим! (След. выпуск будет посвящен упрощению целой анимации: кадров, цветов, затронет перемасштабирование. Возможно, я возьму какую-нибудь простую работу чтобы всё показать должным образом, а возможно – сдержку обещание и достану самую больную и шумную гифку).

Эту запись немного сложно назвать гайдом, но всё же это в какой-то степени он. Я попытался немного раскрыть тему "как происходит упрощение цветов". Где-то в начале года эта тема меня убивала. О ней нигде не было рассказано нормально, потому – цвета сокращались поштучно, а иногда и не сокращались вовсе (исчезали только из первого кадра, но не исчезали из других... ууух, мы к этому еще вернемся)💀. 

Перейдем к важным горячим клавишам для работы с цветом:

1. Упростить цветовую палитру указанием числа = Ctrl+Alt+C
2. Перейти в режим индексированной палитры = Alt+3
   ✅ Это действие применит все цветовые изменения [п1,п5] совершенные в режиме п.3.
   ✅ При переходе в этот режим – все цвета что не были в палитре будут заменены ближайшими по оттенку/насыщенности/яркости.  
3. Перейти в режим RGB палитры = Alt+1
   ✅ В этом режиме необходимо сокращать цвета.
   ❌ Если вы будете сокращать цвета в п2, то ваш рисунок полностью сломает.
4. Взять цвет пипеткой = Alt+Лкм
5. Добавить взятый цвет в палитру = Alt+E || В случае ошибки цвета можно удалять прямо из палитры (добавлю кат на ctrl+x... как вернусь домой)
6. Отменить последнее действие = Ctrl+Z || регулярная база
7. Отменить отмену, т.е. вернуть всё как было до отмены = Ctrl+Shift+Z || регулярная база
8. = = =
9. Заменить цвет "Х" цветом "Y" = Ctrl+Alt+Q
   ❓ Этого не было в текущем видеоматериале. Покажу эту вещь в следующем гайде. Она будет очень полезна.
   = = = = = = = = = = = =
   
10. Официальные названия горячим клавишам в настройках (чтобы вы смогли поставить свои):
11. Menus || Create Palette from Current Sprite (Color Quantization)
12. Commands || Change Color Mode: Indexed
13. Commands || Change Color Mode: RGB
    
14. Tools || Eyedropper Tool (quick)
15. Commands || Add Foreground Color to Palette
16. Commands || Undo
17. Commands || Redo
18. = = =
19. Menus || Replace Color ... 
    

 ⭐ Здесь должен был быть более сложный гайд, но я посчитал нужным оставить его на следующий тематический выпуск 😉

* * *

⭐ Ближайшие посты по теме, связанные работы ⭐

⭐ Что будет в следующей части:
- Разбор конвертеров на типы: плохие, хорошие, недотягивающие и ультимативные; 
- Выбор лучшего конвертера, выделение его особенностей: конвертация множества файлов, *спойлер-спойлер*;
- Покажу каким образом были сделаны гифки для этого и предыдущего поста. Затрону тему записи экрана.
- Выпущу видос, в котором буду сокращать анимацию по всем пунктам описанным в первом посте. По горячим клавишам буду акцентироваться на временную линию с кадрами.
* * *
⭐ Связанные с GIF (WEBP) работы:
- [Часть 1]: Вставка WEBP, начальное руководство, условия [мы были здесь];
- [Часть 2]: Режим хардкора, тонкости WEBP, создание авы [мы здесь];
- [Часть 3]: Конвертеры, дополнительное ПО, сокращение анимации для теста [мы скоро будем здесь];
- [Часть 4]: *Засекречено* [об этом мы ничего не знаем, но здесь круто!].
* * *
⭐ Тесты сквада за очередную июльскую неделю (если вдруг вы захотите нас поддержать или выразить "СПС"):
- [@@Doshi@@]: выпустил тест-идентификацию, в которой вы можете стать трагическим главным героем, что проиграл себе или окружению. В основном тест содержит альтернативные версии персонажей мультипликации.
- [@@Cien'@@]: выпустил работу на ассоциации. Если ваши ответы совпадут – вы проиграли (￢‿￢ ).
- [@@Meiv@@]: выпустил турнир по доте, в котором вы сможете сразить между собой героев имеющих 7 способностей и множество уникальных приколюх. Герои ассоциируются с пользователями. Тест можно проходить без опыта игры в доту.

Постскриптум:

Подумываю написать своё руководство по ПО, когда обучающие материалы по гифкам подойдут к концу...