Конвертируйте выживших.
Приветствую всех восставших и случайно пришедших. Сегодняшняя тема урока – «Метаморфоза»!
* * *
⭐ Обучающие материалы #3 – конвертеры ⭐
Оглавление:
- 💾 Конвертеры и запись, список с главными преимуществами и недостатками;
- 💾💻 FFMPEG. Лучший конвертер для перевода из "чего угодно" во "что угодно";
- 💾💻 Нужные команды FFMPEG: работа в консоли, конвертация одного/множества файлов;
- * * * • • • . . .
📱 Доп.материал: запись экрана в gif/webp. Программка ScreenToGif;
* * * • • • . . .
- ❗ Видосик с работой в Aseprite: переделка мертвой артефактной гифки в живую. Опора на первый пост с кратчайшим пересказом самых важных деталей;
- ⌛ Связанные посты и спойлеры по последнему обучающему материалу по гиф (#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 ⭐
⭐ Консоль открывается клавишами 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
> Ниже поясняю за каждое слово и букву в команде. Профессионально эти штуки называются "параметры" и "ключи параметров".
- «ffmpeg» – исполняющий пакетик;
- «-i» – имя входного файла (сокр. "input"). Требует после себя название файла, который вы собираетесь обработать. [п.3];
- «входящий_файл.gif» – обрабатываемый файл который вы хотите изменить;
- «-vcodec» – кодек кодирования видео. Обычно такая команда пишется когда мы хотим переконвертировать один формат в другой. Эта штука требует после себя ввода желаемого формата [п.5];
- «webp» – библиотека кодирования;
- «выходящий файл.webp» – желаемое название для обработанного файла.
Так выглядит процесс обработки:
⭐ Команда для смены диска в командной строке:
«Буква диска» и «:»
> Примеры:
- C:
- B:
- T:
- 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»
> Пояснения за магию:
- «for %i in (*.mp4)» – "для каждого входного файла с (любым названием оканчивающимся на .mp4);
- «do» – "делать следующее...";
- «ffmpeg» – "использовать исполняющий пакетик ffmpeg";
- «-i "%i"» – "... для входного файла", "с полным названием, указанным до этого [п.1]";
- «"%~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 кадров.
Важные горячие клавиши для работы с холстом и временной линией (собственные каты):
- Холст:
- Ctrl-Shift-Alt-3 = перемасштабирование;
- 3 = редактирование границ холста (допустим, вы захотите сделать квадрат и залить в пустоты какой-либо цвет или дизер).
Слои и временная линия: - Ctrl-Alt+Shift-D = дублирование фрейма (кадра) || Shift+X = удаление фрейма
- Ctrl-S = редактирование длительности задержки для фрейма (кадра);
- Alt-W, Alt-S для выделения слоя выше/ниже;
- Ctrl-Alt-W, Ctrl-Alt-S для перемещения выделенного слоя выше/ниже по порядку слоёв (*ссылка на скрипт здесь*);
- Ctrl+E для соединения выделенного слоя с нижним (2 слоя станут одним);
- Shift-A/Shift-D для перемещения по кадрам вправо/влево;
- Shift-G для проигрывания анимации;
- Shift-Z для возвращения в начало анимации.
* * * - Официальный названия комбинаций клавиш для вашего назначения в настройках:
- [2] Sprite Size
- [3] Canvas Size
- [4] Duplicate Cel || Delete Frame
- [5] Frame Properties
- [6] Go to Next Layer || Go to Previous Layer
- [7] Run Script: Move Layer Up.Lua || Run Script: Move Layer Down.Lua
- [8] Merge Down
- [9] Go to Previous Frame || Go to Next Frame
- [10] Play Animation
- [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. Плюсы: может быть смешно
