⭐️ Конвертация в Gif/Webp || Обучающие материалы ✨️

Конвертируйте выживших.

Приветствую всех восставших и случайно пришедших. Сегодняшняя тема урока – «Метаморфоза»!

* * *

⭐ Обучающие материалы #3 – конвертеры ⭐

 Оглавление:

1. 💾 Конвертеры и запись, список с главными преимуществами и недостатками;
2. 💾💻 FFMPEG. Лучший конвертер для перевода из "чего угодно" во "что угодно";
3. 💾💻 Нужные команды FFMPEG: работа в консоли, конвертация одного/множества файлов;
   
4.  * * * • • • . . .
   📱 Доп.материал: запись экрана в gif/webp. Программка ScreenToGif;
    * * * • • • . . .
   
5.  ❗ Видосик с работой в Aseprite: переделка мертвой артефактной гифки в живую. Опора на первый пост с кратчайшим пересказом самых важных деталей;
   
6. ⌛ Связанные посты и спойлеры по последнему обучающему материалу по гиф (#4)
   
   Ремарка: главы разделяются звёздочками « * * * ».    
   
   

* * *

⭐ Конвертеры ⭐

Что такое «конвертер» – это инструмент, позволяющий переделывать один формат (вид) файла в другой. Мы не можем просто взять «хлеб_падает.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], если вы хотите использовать анимации вне основного типа тестов.

Ниже предоставляю список конвертеров с их главными плюсами и минусами:

• 💞 [База]: сайт ezgif.
  || ✅ Плюсы: может заменить вам настоящий редактор в какой-то степени.
  || ❌ Минус конвертера: работает только с одним файлом.  
  || ❌ Минус редактора: не может сокращать цвета до индексированных палитр.
  
• * * *
  💫 [Норм]: сайты-конвертеры cloudconvert, convertio и т.п.
  || ✅ Плюсы: конвертируют множество файлов одновременно;
  || ❌ Минусы: сайты имеют лимит на конвертации.
• * * *
  💩 [Кринж]: программа-конвертер Movavi.
  || ❌ Минусы: артефактное говно. Генерит помехи. Деньги на ветер. (Не путайте с видеоредактором Movavi. Тот тоже говно, но хотя бы простецкие задачи выполняет).
• * * *
  💞 [База]: программа Aseprite.
  || ✅ Плюсы: слишком долго перечислять. Это тот инструмент, которым можно сделать или отредачить фулл анимацию и переконвертировать её в gif/webp
  || ❌ Минусы: постоянно будет напоминать о том, что вам нужно перейти в RGB режим перед сохранением файла Webp. Сам он в этот режим не переходит (если вы конечно не написали ему скрипт на Lua);
  || ❌ Из минусов несвязанных с конвертацией: неудобно трансформировать объекты, мало горячих клавиш, функционал ограничен простыми операциями (если сравнивать с фотошопом или клип студио), нуждается в полезных плагинах
• * * *
  💩 [Почти норм, но нужно обновиться]: программа Adobe Photoshop.
  || ✅ Плюсы #1: может упростить цвета для одного изображения.
  || ✅ Плюсы #2: может сохранить файл в webp, но... [читать минус #2].
  || ❌ Минусы #1: он на своем градиенте вертел ваши анимации. Делать анимации в фш супер неудобно.
  || ❌ Минусы #2: он может сохранить файл в webp, но не может сохранить анимацию в webp.
  || ✅ Важное замечание: фотошоп поддерживает анимации вебп только на новейших версиях. Для старых версий необходимо скачать плагин. 
• * * *
  💩 [Норм, но не в том месте]: программа-конвертер FileConverter
  || ✅ Плюсы #1: бесплатен;
  || ✅ Плюсы #2: может конвертировать видосы и webp'ки в gif'ки;
  || ❌ Минусы #1: не может конвертить видосы и gif'ки в webp'ки.
• * * *
  💩 [Кринж]: программа-конвертер ZamZar (да, у сайта есть своё ПО)
  || ✅ Плюсы #1: 20 фри спинов на качественные крутки;
  || ❌ Минусы #1: где мои деньги?
  || ❌ Минусы #2: не работает без подключения к интернету.
• * * *
  💩 [хз]: программа-конвертер от самих Google
  || ❓ ???: Не тестировалась, но по описанию в *официальной документации* она может перегонять картинки и гифки.
  || ❌ Минусы #1: в первое время может быть сложновато, если взглянуть на документацию с командами [1], [2];
  || ❌ Возможные минусы #1: не может переконвертировать видео.
  || ❌ Возможные минусы #2: на свой вопрос вы вряд ли найдете практически готовый ответ на каком-нибудь англоязычном форуме. В этом плане разработка от гугл проигрывает следующему варианту в списке...
• * * *
  ⭐💖 [Дар богов]: FFMPEG
  || ✅ Плюсы #1: на этой штуке работает ютуб, большинство видеохостингов (в т.ч. стриминговых), большинство конвертеров и большинство видеоредакторов.
  || ❌ Минусы #1: сложен в установке;
  || ❌ Минусы #2: сложен в освоении.
  

Чтобы избежать перегруза поста - я разберу только сверхбазу, т.е. самое сложное, полезное и незаменимое.

* * *

⭐ FFMPEG – лучший конвертер и отец видеоформата ⭐

• FFMPEG это основа для всего видео формата. *Почитать подробнее можно здесь. Ссылка ведет на хабр*.
  🤓 Название происходит от MPEG (Moving Picture Experts Group) + FF (Fast Forward. Не путать с Fast Finish).
  
• FFMPEG устанавливается так: *ссылка на сторонний сайт. Содержит покадровый гайд*;
  Примечание: вместо п4 в том гайде вы можете вбить в пуске "изменение системных переменных среды".
  Примечание 2: если вам кажется, что вы можете ошибиться и уничтожить себе устройство, то вот видеогайд исключающий возможность недопонимания документального варианта.
  Довольно страшно, но если вы это преодолели и были внимательны, то для вас открываются большие возможности.
• Безопасно скачать FFMPEG можно отсюда: *сайт разработчиков*;
  ... Однако, от вас все еще требуются действия, описанные в гайде.
• После установки самые нужные команды приведены ниже.

* * *

⭐ Командная строка и команды для FFMPEG ⭐

⭐ Консоль открывается клавишами WIN + R и введением cmd (равнозначно пути: пуск -> выполнить -> cmd).
Если это кажется вам слишком пафосным, то можете прописать в пуске «Командная строка»;

Немного о навигации и редактировании, на всякий ( ⓛ ω ⓛ *):

• Стереть команду в консоли можно клавишей «ESC» или «Backspace <–»;
  
• Перемещение по тексту осуществляется стрелками. С зажатым CTRL можно пропускать целый слова. С зажатым CTRL-SHIFT слова можно выделять;
• Стрелка вверх выдает предыдущую использованную команду. Это может быть полезно, если вы ошиблись;
• Инициализация команды производится клавишей «Enter»;
• В случае некорректного написания одной из команд ниже – ничего плохого не произойдет. Вам всего лишь выдадут ошибку.
  
                  Демонстрация:

⭐ Команда для конвертации gif в webp:
ffmpeg -i название_входящего_файла.gif -vcodec webp название_выходящего_файла.webp

Более короткий вид, чтобы было удобнее копировать и стирать лишнее:
ffmpeg -i вход1.gif -vcodec webp выход2.webp
> Ниже поясняю за каждое слово и букву в команде. Профессионально эти штуки называются "параметры" и "ключи параметров".  

1. «ffmpeg» – исполняющий пакетик;
2. «-i» – имя входного файла (сокр. "input"). Требует после себя название файла, который вы собираетесь обработать. [п.3];
3. «входящий_файл.gif» – обрабатываемый файл который вы хотите изменить;
4. «-vcodec» – кодек кодирования видео. Обычно такая команда пишется когда мы хотим переконвертировать один формат в другой. Эта штука требует после себя ввода желаемого формата [п.5];
5. «webp» – библиотека кодирования;
6. «выходящий файл.webp» – желаемое название для обработанного файла.
   
                    Так выглядит процесс обработки:

⭐ Команда для смены диска в командной строке: 
«Буква диска» и «:»

> Примеры:

1. C:
2. B:
3. T:
4. D:
   
                    Процесс изменения диска:

⭐ Команда для смены директории в командной строке (другими словами – указание пути):
«cd» «путь»

> Примеры:

• cd S:\Soft\Downloads\Pikuco\Kenterville_Legs_Collection
  
• D:
• cd D:\Видео\Как я вынес Глюка 1х1 на миду прострелом
• M:
• cd M:\Инсайды\Коллекция сохранёнок с самых разных ТГ
  Разумеется, вы можете вставлять путь в консоль при помощи CTRL+V.
  
                      Так это выглядит:

⭐ Команда для конвертации всех файлов одного формата в другой:
for %i in (*.mp4) do ffmpeg -i "%i" "%~ni.webp"

Команду менять не нужно. Достаточно иметь в папке файлы .mp4. При желании можете изменить «.mp4» на «.gif»
> Пояснения за магию:

1. «for %i in (*.mp4)» – "для каждого входного файла с (любым названием оканчивающимся на .mp4);
2. «do» – "делать следующее...";
3. «ffmpeg» – "использовать исполняющий пакетик ffmpeg";
4. «-i "%i"» – "... для входного файла", "с полным названием, указанным до этого [п.1]";
5. «"%~ni.webp"» – "на выходе создать множество файлов, заменить им название, дописать к ним webp"
   
   ... Немного бесполезный факт (🤓): команду можно уточнить, как в первом примере.
   for %i in (*.mp4) do ffmpeg -i "%i" -vcodec webp "%~ni.webp"
   ... Однако ничего не изменится, потому что ffmpeg умный и догадливый.
   

По ffmpeg как конвертеру пока всё. Не перегружаю. 

* * *

⭐ ScreenToGif или «как записывать видео, но сохранить его сразу в gif или webp» ⭐

Возможно, вы спросите: "а как этот бонус относится к конвертерам?"
Поясняю: это видеорекордер. И он содержащий внутри себя конвертер, так что формально всё в тему. 
В обычной ситуации базовые ребята воспользовались бы видеорекордером, однако их проблема в том, что чтобы изменить фреймрейт и размер окна – нужно постоянно залезать в глубокие дебри настроек, да и после сохранения получается видеофайл который нужно перегнать через конвертер... 

В общем, ScreenToGif упрощает этот процесс и удовлетворяет запросы лени... Скачать его можно здесь.

Как всё это выглядит:

• Заметки по окошку записи:
• Для записи в посты достаточно 9 fps (+ редактирование цветов с длительностью в Aseprite). || Для дискорда/руководств стима/вики вы можете использовать 24 fps. || В случае записи какого-то экшончика - можете поставить 60 и установить соответствующий способ захвата в настройках (но я бы на вашем месте уже бы взял видеорекордер, так как файл будет весить слииииишком много). 
• Удобное разрешение для постов: 800хN, где "N" может быть от 75 до 800.
  
     По записи это всё.

Пресеты для сохранения в gif/webp:

При смене режима кодировщика webp на "расширенный" ПО предложит вам использовать документацию и фильтры по FFMPEG. Используйте это, если вы достаточно ЖЕСТКИЙ (я бы не рекомендовал в это влезать, если вы не планируете стать гением ffmpeg). || Пару сомнений по гиф: возможно, стоит подыскать другой квантователь. Иногда крайне заметно что формат старается вместить всё в 256 цветов, но не может и выдает артефакты. || К WEBP вопросов нет. Идеальное качество и отсутствие шумов.

⭐️ Гайд с основными моментами при переделки гифки (ультра краткий первый пост) • Aseprite! ⭐️

Мораль видоса: если вам лень морозить шум (артефакты) по максимуму, то сразу сокращаем анимацию до 2-4 кадров.

Важные горячие клавиши для работы с холстом и временной линией (собственные каты):

1. Холст: 
2. Ctrl-Shift-Alt-3 = перемасштабирование;
3. 3 = редактирование границ холста (допустим, вы захотите сделать квадрат и залить в пустоты какой-либо цвет или дизер). 
   
   Слои и временная линия:
4. Ctrl-Alt+Shift-D = дублирование фрейма (кадра) || Shift+X = удаление фрейма  
5. Ctrl-S = редактирование длительности задержки для фрейма (кадра);
6. Alt-W, Alt-S для выделения слоя выше/ниже;
7. Ctrl-Alt-W, Ctrl-Alt-S для перемещения выделенного слоя выше/ниже по порядку слоёв (*ссылка на скрипт здесь*);
8. Ctrl+E для соединения выделенного слоя с нижним (2 слоя станут одним);
9. Shift-A/Shift-D для перемещения по кадрам вправо/влево;
10. Shift-G для проигрывания анимации;
11. Shift-Z для возвращения в начало анимации.
    * * *
12. Официальный названия комбинаций клавиш для вашего назначения в настройках:
13. [2] Sprite Size
14. [3] Canvas Size
15. [4] Duplicate Cel || Delete Frame
16. [5] Frame Properties
17. [6] Go to Next Layer || Go to Previous Layer
18. [7] Run Script: Move Layer Up.Lua || Run Script: Move Layer Down.Lua
19. [8] Merge Down
20. [9] Go to Previous Frame || Go to Next Frame
21. [10] Play Animation
22. [11] Go to First Frame

*Ссылка на скрипт для сокращения кадров вдвое*. Закидывать в папку Aseprite -> Scripts.

* * *

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

⭐ Что будет в следующей части:
• Пошаговая схемка по алгоритму работы (дополнение к первому посту);
• [На бис]. 10-ти часовой видос в котором Мэйв будет безостановочно переделывать гифки в Aseprite. Взглянем сколько возможно переделать гифок за весь выходной. Ради науки, разумеется;
• Возможно выпущу видос в котором будут сравнения анимаций "до" и "после" изменений.
• Домашка;
• Расширения для браузера, которые позволят вам скачивать гифки;
• Спойлер по ближайшей тетралогии обучающих материалов.

⭐ Связанные с GIF (WEBP) работы:
[Часть 1]: Вставка WEBP, начальное руководство, условия [мы были здесь];
[Часть 2]: Режим хардкора, тонкости WEBP, видос по аве и подгрузке [и здесь мы были];
[Часть 3]: Конвертеры, видеорекордер гиф, практический видос [мы здесь];
[Часть 4]: Вставка WEBP, наглядное руководство, финал [Скоро]
   * * * 
⭐ Тесты сквада за еще одну июльскую неделю:
@@Doshi@@: Лучшая вайфу из визуальных новелл - топовая дизайнерская работа главной булочки сквада. Минусы: нет электроника. Плюсы: можно выбрать Сайори
@@Cien'@@: Угадай слово по картинке (Русский язык) - Сиен показывает вам картинку, а вы должны написать слово, которым называется объект. Минусы: мой результат не превышает 50% хд. Плюсы: интересная идея.
@@Meiv@@: 💪 Грязный тест на гачимученика - действительно странный по дизайну (и юмору) тест обыгрывающий тему видео переведенных в анимации. В ходе эксперимента выяснилось, что гигантское количество дизеринга может спасти много кадров. Также квадратные 600х600 пикчи выживали чаще. Минусы: автор clown. Плюсы: может быть смешно