"Не забудь вставить текст, Синдзи" 👏🗿👏🗿👏🗿
* * *
Оглавление:
К делу.
* * *
"Чем больше и чаще сменяются пиксели, тем больше необходимо сократить их сменяемость" - помним такую фразу из предыдущего видео-гайда, что содержит небольшую визуальную демонстрацию к этим словам? Эта фраза отсылает нас к первому посту, к месту, где показаны "огромные", "большие", "средние" и "маленькие" по изменениям файлы. Если ничего не меняется - то сколько бы не прошло времени – вес сохранится тот же.
Возможно, сейчас вы поймете о чем я. Пронаблюдайте за изменениями от мертвого файла к состоянию живого. В некоторых случаях я пропущу примеры мертвости и сразу покажу живые варианты. Все варианты без альтернативы являются живыми.
* * *
Здесь вы можете взглянуть на сам процесс создания анимаций для недавнего теста (мечтают ли роботы о смерти).
Возможно, материал по ссылке вам также немного поможет. (Я обещал 10 часов видео, но на самом деле там 7. Также, ошибок было достаточно, потому я ускорил весь процесс в 3, а местами и вовсе в 4 раза... Итог: полтора часа интенсивного визуала. Будет звучать как оправдание, но в авторе закончилось топливо. Чтобы сгладить ошибки – я посчитал решение об ускорении правильным и интересным).
* * *
* * *
Если вы это читаете, то вы большой молодец и я возьму вам кофе при встрече. Это было интересное приключение, было классно пройти этот путь вместе. Одна серия материалов закончена, следующая обучающая тетралогия: фишки и костыльная автоматизация.
^ Благодаря некоторым хитростям был создан скелет данного теста:
Планируемая дата публикации подробностей по автоматизации и другим фишам: через пол года. Вероятно, к тому моменту и не придется ничего выпускать, так как похожей темой сейчас занимается пользователь Svetoi_Den. Пользователь надежный! Вот кстати, рекомендую ознакомиться с его начинаниями в этой стезе! Если вам его материал покажется интересным, то не поскупитесь на сабку. Информация достаточно легко теряется или в нужное время не попадается на глаза 😉
* * *
* * *
1. Обыгрывание механики задержки времени || этот тест дает понять то, что размер файла не меняется, если все детали будут стоять на месте
2. Обыгрывание механики этих таймингов в виде более активной реакции для действия || в середине этого теста вы можете побыть игроком guitar hero. Я правда подумывал после этого теста сделать какую-нибудь битву с Гастером или симулятор печатной машинки, но пока не обнаружил какого-либо большого отклика, потребности в этом. Был бы я чуточку сильнее, то непременно сделал бы и это, не дожидаясь реакции
3. Также, пока никто не видел – я переработал свой старый неудачный конкурсный тест (тяночек из того теста я планировал анимировать костной анимацией для пары проектов, но руки так и не дошли... ну и ну...). Ранее в тесте приводились "пары изображений" и обыгрывалась функция "шаг назад". Функция "шаг назад" была по тем временам нова и уникальна. Чтобы юзеры быстрее к ней привыкли – я и создал тот тест. Как показала практика, активное использование шага назад может быть не очень приятным занятием. || Ремастер содержит удобные сравнительные анимации. Изображения сменяют друг-друга автоматически с определенным интервалом. Тест по-прежнему странный, но эстетичный 😉
4. Вот несколько тестов, что обыгрывают эстетику гиф. Не каждый день увидишь гифки, что не принадлежат своему типу тестов.
5. Финалочка на любителя кожевенного ремесла || Тест обыгрывал перевод видосов в гифки и испытывал влияние дизеринга на получение доп. кол-ва кадров. Итог: чем больше дизеринга - тем больше можно отодвинуть допустимую границу по кадрам. Эффект усиливается, если вы приближаете стороны изображения к максимальному квадратному значению 600х600. (Небольшое напоминание: не забывайте, что одна из сторон обязательно должна быть равна 600 пикселям)
* * *
• Вы встретили Мэйва. Выберите действие •12
Конвертируйте выживших.
Приветствую всех восставших и случайно пришедших. Сегодняшняя тема урока – «Метаморфоза»!
* * *
Оглавление:
* * *
Что такое «конвертер» – это инструмент, позволяющий переделывать один формат (вид) файла в другой. Мы не можем просто взять «хлеб_падает.gif», стереть ему "gif" и написать "webp". Это так не работает, файл сломается. Для подобных операций и существуют конвертеры.
Напомню, что все файлы на сайте хранятся в формате webp. Сайт конвертирует все pngшки, jpgшки и прочие форматы в единый вид, затем немного уменьшает им размер и совсем незаметно притрагивается к качеству. Качество файла получается такое же, как если бы мы сохраняли файлос в фотошопе при 100% качестве и «с потерями» (ФШ «сохранить как –> webp», «условие –> лучшее качество, 100%», «с потерями»).
✅ Для тех, кто делает анимации – всё немного сложнее. Напомню, что гифки нельзя подгрузить без их предварительной подготовки и перегонки в webp.
❌ Отступление по GIPHY (напоминание о написанном и база для создателей-новичков):
Если вы не хотите заморачиваться с изложенным по ссылке выше и вам хватает функционала «гиф-турниров» (без возможности подгрузить гифки в другие типы тестов), то существует сервис GIPHY. Он тоже в своем роде конвертер, так как перегоняет видео в гифки или гиф в гиф более плохого качества. После обработки сервисом – в редакторе сайт потребует от вас только ссылку. Кратко по качеству сервиса GIPHY: многие датели могут замыливаться, рябить, уменьшаться в разрешении, и отображаться на некоторых мобильных устройствах многократно меньше ожидаемого вида... в посте по этой ссылке было описано решение, но оно нуждается в дополнениях.
🤓 ... Также недавно для меня стало открытием: GIPHY может сохранять файлы 600х600 (ранее я считал максимумом 480х480). Как это происходит – не ясно... Если у вас будет информация по теме загрузки с максимальным разрешением, то я с радостью залью карточку вашего поста под этот текст.
На момент 21.07.24 гифки от GIPHY нельзя использовать вне типа теста «гиф-турнир». Такого функционала пока нет. (Схожая ситуация с видео: вы можете подгрузить видео только в «видео-турнир» и пост... о типе видео-викторин «угадай мелодию/звук» пока просто приятно мечтать 😏)
Перейдем к теме загрузки webp(гиф) куда угодно...
Для аниматоров (на данном сайте) конвертировать файлы в webp – умение такое же важное, как и постобрабатывать [1, 2], если вы хотите использовать анимации вне основного типа тестов.
Ниже предоставляю список конвертеров с их главными плюсами и минусами:
Чтобы избежать перегруза поста - я разберу только сверхбазу, т.е. самое сложное, полезное и незаменимое.
* * *
* * *
⭐ Консоль открывается клавишами WIN + R и введением cmd (равнозначно пути: пуск -> выполнить -> cmd).
Если это кажется вам слишком пафосным, то можете прописать в пуске «Командная строка»;
Немного о навигации и редактировании, на всякий ( ⓛ ω ⓛ *):
⭐ Команда для конвертации gif в webp:
ffmpeg -i название_входящего_файла.gif -vcodec webp название_выходящего_файла.webp
Более короткий вид, чтобы было удобнее копировать и стирать лишнее:
ffmpeg -i вход1.gif -vcodec webp выход2.webp
> Ниже поясняю за каждое слово и букву в команде. Профессионально эти штуки называются "параметры" и "ключи параметров".
⭐ Команда для смены диска в командной строке:
«Буква диска» и «:»
> Примеры:
⭐ Команда для смены директории в командной строке (другими словами – указание пути):
«cd» «путь»
> Примеры:
⭐ Команда для конвертации всех файлов одного формата в другой:
for %i in (*.mp4) do ffmpeg -i "%i" "%~ni.webp"
Команду менять не нужно. Достаточно иметь в папке файлы .mp4. При желании можете изменить «.mp4» на «.gif»
> Пояснения за магию:
По ffmpeg как конвертеру пока всё. Не перегружаю.
* * *
Возможно, вы спросите: "а как этот бонус относится к конвертерам?"
Поясняю: это видеорекордер. И он содержащий внутри себя конвертер, так что формально всё в тему.
В обычной ситуации базовые ребята воспользовались бы видеорекордером, однако их проблема в том, что чтобы изменить фреймрейт и размер окна – нужно постоянно залезать в глубокие дебри настроек, да и после сохранения получается видеофайл который нужно перегнать через конвертер...
В общем, ScreenToGif упрощает этот процесс и удовлетворяет запросы лени... Скачать его можно здесь.
Как всё это выглядит:
Пресеты для сохранения в gif/webp:
При смене режима кодировщика webp на "расширенный" ПО предложит вам использовать документацию и фильтры по FFMPEG. Используйте это, если вы достаточно ЖЕСТКИЙ (я бы не рекомендовал в это влезать, если вы не планируете стать гением ffmpeg). || Пару сомнений по гиф: возможно, стоит подыскать другой квантователь. Иногда крайне заметно что формат старается вместить всё в 256 цветов, но не может и выдает артефакты. || К WEBP вопросов нет. Идеальное качество и отсутствие шумов.
Мораль видоса: если вам лень морозить шум (артефакты) по максимуму, то сразу сокращаем анимацию до 2-4 кадров.
Важные горячие клавиши для работы с холстом и временной линией (собственные каты):
*Ссылка на скрипт для сокращения кадров вдвое*. Закидывать в папку Aseprite -> Scripts.
* * *
⭐ Что будет в следующей части:
• Пошаговая схемка по алгоритму работы (дополнение к первому посту);
• [На бис]. 10-ти часовой видос в котором Мэйв будет безостановочно переделывать гифки в Aseprite. Взглянем сколько возможно переделать гифок за весь выходной. Ради науки, разумеется;
• Возможно выпущу видос в котором будут сравнения анимаций "до" и "после" изменений.
• Домашка;
• Расширения для браузера, которые позволят вам скачивать гифки;
• Спойлер по ближайшей тетралогии обучающих материалов.
⭐ Связанные с GIF (WEBP) работы:
[Часть 1]: Вставка WEBP, начальное руководство, условия [мы были здесь];
[Часть 2]: Режим хардкора, тонкости WEBP, видос по аве и подгрузке [и здесь мы были];
[Часть 3]: Конвертеры, видеорекордер гиф, практический видос [мы здесь];
[Часть 4]: Вставка WEBP, наглядное руководство, финал [Скоро]
* * *
⭐ Тесты сквада за еще одну июльскую неделю:
Doshi: Лучшая вайфу из визуальных новелл - топовая дизайнерская работа главной булочки сквада. Минусы: нет электроника. Плюсы: можно выбрать Сайори
Cien': Угадай слово по картинке (Русский язык) - Сиен показывает вам картинку, а вы должны написать слово, которым называется объект. Минусы: мой результат не превышает 50% хд. Плюсы: интересная идея.
Meiv: 💪 Грязный тест на гачимученика - действительно странный по дизайну (и юмору) тест обыгрывающий тему видео переведенных в анимации. В ходе эксперимента выяснилось, что гигантское количество дизеринга может спасти много кадров. Также квадратные 600х600 пикчи выживали чаще. Минусы: автор clown. Плюсы: может быть смешно
Это конец игры.
Приветствую всех, кто пережил первую часть. Для вас припасено самое вкусное. В этой части вы определенно умрете 💗
* * *
Оглавление:
* * *
Вопрос = 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).
✅: Чаще всего гифку (вебпку) спасает насыщенный желтый или циановый цвет на пикселях дизера. Все остальные цветовые варианты работают реже, особенно те, что близки к черному: синий, фиолетовый, маджента... Зеленый и оранжевый имеют немного больше шансов, но также руинят подгрузку анимации.
На этом испытательном полигоне я испытывал свою теорию;
На этих испытательных полигонах тоже присутствует часть тестов.
* * *
Доп инфа по видео:
Мы пропустили этап рескейла так как аватарка подходит под условия 300х300. В следующем выпуске мы это исправим! (След. выпуск будет посвящен упрощению целой анимации: кадров, цветов, затронет перемасштабирование. Возможно, я возьму какую-нибудь простую работу чтобы всё показать должным образом, а возможно – сдержку обещание и достану самую больную и шумную гифку).
Эту запись немного сложно назвать гайдом, но всё же это в какой-то степени он. Я попытался немного раскрыть тему "как происходит упрощение цветов". Где-то в начале года эта тема меня убивала. О ней нигде не было рассказано нормально, потому – цвета сокращались поштучно, а иногда и не сокращались вовсе (исчезали только из первого кадра, но не исчезали из других... ууух, мы к этому еще вернемся)💀.
Перейдем к важным горячим клавишам для работы с цветом:
⭐ Здесь должен был быть более сложный гайд, но я посчитал нужным оставить его на следующий тематический выпуск 😉
* * *
⭐ Что будет в следующей части:
- Разбор конвертеров на типы: плохие, хорошие, недотягивающие и ультимативные;
- Выбор лучшего конвертера, выделение его особенностей: конвертация множества файлов, *спойлер-спойлер*;
- Покажу каким образом были сделаны гифки для этого и предыдущего поста. Затрону тему записи экрана.
- Выпущу видос, в котором буду сокращать анимацию по всем пунктам описанным в первом посте. По горячим клавишам буду акцентироваться на временную линию с кадрами.
* * *
⭐ Связанные с GIF (WEBP) работы:
- [Часть 1]: Вставка WEBP, начальное руководство, условия [мы были здесь];
- [Часть 2]: Режим хардкора, тонкости WEBP, создание авы [мы здесь];
- [Часть 3]: Конвертеры, дополнительное ПО, сокращение анимации для теста [мы скоро будем здесь];
- [Часть 4]: *Засекречено* [об этом мы ничего не знаем, но здесь круто!].
* * *
⭐ Тесты сквада за очередную июльскую неделю (если вдруг вы захотите нас поддержать или выразить "СПС"):
- [Doshi]: выпустил тест-идентификацию, в которой вы можете стать трагическим главным героем, что проиграл себе или окружению. В основном тест содержит альтернативные версии персонажей мультипликации.
- [Cien']: выпустил работу на ассоциации. Если ваши ответы совпадут – вы проиграли (￢‿￢ ).
- [Meiv]: выпустил турнир по доте, в котором вы сможете сразить между собой героев имеющих 7 способностей и множество уникальных приколюх. Герои ассоциируются с пользователями. Тест можно проходить без опыта игры в доту.
Постскриптум:
Подумываю написать своё руководство по ПО, когда обучающие материалы по гифкам подойдут к концу...
Хотели бы вы услышать мой голос в следующей части?14
С какого-то неизвестного периода времени блог начал называться "Эксперименты Meiv"... С тех пор я провёл тысячи небольших экспериментов. Пора показать результаты. Пора быть кому-то полезным.
* * *
Оглавление:
* * *
⭐ Первое что нужно знать – подгружать нужно не GIF, а WEBP. Формат WEBP – это не только картинки, но и анимации. Любые файлы сайт конвертирует в этот формат. Если вы попытаетесь подгрузить ГИФку вместо ВЕБПки, то вы получите статичную картинку вместо анимации. Также важно знать, что просто переконвертировать GIF в WEBP вручную – мало. Необходимо подогнать работу под условия с помощью которых сайт сможет переварить файл. Условия указаны в справочнике (раздел ниже).
⭐ В работе с гиф я рекомендую использовать Aseprite. Aseprite – это крутая программка для пиксель арта и анимации. || Фотошоп не поможет. Он плох как для анимаций, так и для сокращения цветов. Его действия распространяется только на 1 кадр. Также он не поддерживает формат webp как "анимации".
Так выглядит Aseprite. Каждый этап будет сопровождаться анимациями из рабочего пространства этого ПО.
* * *
✨ Условия подгрузки для тестов:
Не переживайте, если у вас не получается подгрузить анимацию с первых трёх раз. Всё нормально. Вы привыкните ;)
Эта "анимация" весила 91,4 кб, она соответствует анимациям ниже, однако в процессе загрузки она умерла... Теперь мы имеем картинку 87,6 кб... Попробуем загрузить еще раз!
Эта анимация весит 101 кб. Мы сильно испортили работу дизер-наложением, но анимация работает! Из плюсов можно выделить то, что в тесте этот эффект работает очень интересно! При наводке на изображение создается иллюзия параллакса!
Предыдущая картинка выглядит несколько некрасиво, согласен, но есть вариант лучше! Мы можем сделать "дизер-рамку" и всё это будет работать (если вам не нравится рамка, то можете обойтись уголком. Главное чтобы пиксели были слева и сверху)! Итоговый вес нашего файла: 92,1 кб (т.е. отличается от оригинала на 1 кб). Для обнаружения пришлось немного сойти с ума.
* * *
✨ Рекомендации по подгрузке для тестов (повтор, кратко):
✨ Рекомендации по подгрузке для аватарок:
✨ Рекомендации по подгрузке для подложки авы:
✨ Рекомендации по подгрузке для прочего (глубоко не тестировалось):
⭐ На что нужно обращать внимание в первую очередь (по убывающей важности, [1-3]):
* * *
⭐ Что будет в следующей части:
• 🤓 Терминология;
• 🤓 |: Разница между gif и webp;
• 🤓 |: Объяснение алгоритмам работы;
• ❗ Видеогайд или гайд из гифок, работа в Aseprite. || Зависит от кол-ва голосов в опросе;
• ❗ [В гайде] |: Процесс работы с затруднительными (шумными) гиф;
• ❗ [В гайде] |: Скрипт для Aseprite;
• ❓️ Ответы на вопросы по теме (задавайте вопросы в коммах). Пример: "как добавить новый цвет в палитру", "как заменить определенный цвет на определенный цвет", "как много было проведено экспериментов? Есть больше примеров?", "какие горячие клавиши ты используешь", "с какой даты ты проводишь эксперименты с анимациями", "даст ли мне админ бан за приколы с дизерингом?", "на сколько сильно по весу обычные картинки отличаются от анимаций?", "на сколько сильно сайт жмакает цвета обычных картинок (допускаю)" и тд, и тд...
* * *
⭐ Связанные с GIF (WEBP) работы:
• [Часть 1]: Вставка WEBP, начальное руководство [мы здесь];
• [Часть 2]: Режим WEBP-кора, продвинутое руководство [мы скоро будем здесь];
• [Часть 3]: Конвертеры и дополнительное ПО [мы точно будем здесь];
• [Часть 4]: *Засекречено* [и здесь мы тоже будем!], [конечная станция по анимации].
* * *
⭐ Тесты сквада за июль (если вы захотите нас поддержать 😉):
• [Doshi]: "Тест-турнир на лучшего участника Майншилда 4"
• [Cien']: "Тест на величину вашей красоты или не красоты"
• [Meiv]: "Короткий тест где вы можете судить преступников (большинство из аниме)".
В каком формате вы хотели бы увидеть большинство контента следующей части?20
