🙀 Говорят, это случается
Представьте, у меня закончилась лицензия на фотошоп. Говорят, это случается время от времени. Следуя закону мерфи, тут же потребовалось срочно нарисовать картинку — анонс августовского митапа Frontend Mix. Я стараюсь помогать сообществу PiterJS с организацией митапов по части проджект-менеджмента, СММ и графики.
В общем, я расстроился. Меня постигло неистовое разочарование. Грусть за мою неспособность, депрессия об безысходности, вот это всё. Написал ребятам, что я временно беспомощен — не могу рисовать. Мол, пусть сами как-нибудь справляются. Накрайняк пусть просто вставят лого PiterJS в анонс, как это часто делали раньше.
🖌 Можно и без редактора
Но я же не могу так быстро сдаться...
В очередной раз загуглил альтернативы фотошопу для редактирования растровой графики (делаю это примерно раз в год). В очередной раз убедился, что ничего толкового нет. Большинством GUI просто невозможно пользоваться. Они отвратительны.
Но это меня не остановило. Ведь картинки можно редактировать и без редактора! Вот уж что мне удобно, так это command line interface. Далее отправился изучать доки консольной утилиты imagemagick. Через 20 минут изучения доков, нарисовал это
Нагуглил и склеил две картинки, добавил подпись и всё. Работа элементарная. Никакого фотошопа. Никаких сложностей. Оказалось, запилить картинку для анонса не так и сложно. А однажды приобретя этот навык, в будущем будет совсем просто. Так и от фш можно будет напрочь избавиться.
Нарисовал я это примерно так:
curl -o yandex-money.png http://www.4androidapk.net/data/programs/images/yandex-money-online-payments_1086.png
curl -o piterjs.png https://raw.githubusercontent.com/piterjs/resources/master/logo/PiterJS.png
convert piterjs.png -resize 512x512 fm-2piterjs.png
convert yandex-money.png -crop 588x588-38-38\! -flatten -resize 512x512 fm-1yandex-money.png
convert +append fm-*.png fm.png
convert -fill black -font Trebuchet -pointsize 72 -size 450x100 -gravity center label:Frontend\ Mix +antialias text.png
convert -append -gravity center text.png fm.png result.pngТут в целом происходит всякая фигня. Давайте разберём по шагам.
👆 Предустановки
Конечно, предварительно должен быть установлен обработчик картинок - imagemagick. Можно его скачать отсюда, затем установить + добавить переменные окружения. Однако я предпочёл пойти привычным мне путём: поставить через homebrew.
brew install imagemagick🔍 Поиск
В первую очередь я провёл не консольную работу.
Не умеешь гуглить - не сможешь жить
Митап проводят Яндекс.Деньги в их офисе при поддержке PiterJS. Не хочется подчёркивать чью-то важность, ибо для PiterJS это очередной ежемесячный митап, а не присоединение к чужому митапу, а для яндекс.денег это свой митап на своей территории. Поэтому я постарался уровнять логотипы. Оттого: логотипы нужны одинаковых пропорций — квадраты.
С PiterJS всё просто. Есть специальный репозиторий, где хранятся ресурсы стайлгайда. Там же я откопал и логотип. Растровый. В png.
С яндекс.деньгами получилось сложнее. Официального стайлгайда я найти не смог. Пришлось гуглить картинки. Держу в памяти и настраиваю в поиске, что мне нужен квадрат, по меньшей мере 512px. Вначале я нашёл подходящий, но маленький квадратный логотип андроидовского приложения яндекс.денег, а затем нашёл его крупнее. Его я и использовал для анонса.
↭ Скачиваем и меняем размеры
Ну, тут всё просто: для скачивания, у всех есть замечательный curl с опцией --output, которую я привык сокращать до -o. После этого первым аргументом имя нового файла, вторым — ссылка, откуда его скачать. Так мы скачиваем две картинки в папочку, в которой находимся.
curl -o yandex-money.png http://www.4androidapk.net/data/programs/images/yandex-money-online-payments_1086.png
curl -o piterjs.png https://raw.githubusercontent.com/piterjs/resources/master/logo/PiterJS.pngЛого piterjs слишком крупное для анонса, 1024px. Нужно пропорционально уменьшить, изменить размер.
Любая конвертация картинок с помощью imagemagick выполняется командой convert. А конкретно изменение размера делается простым и логичным аргументом resize.
Я сохраняю в отдельный файл, чтобы суметь увидеть «прогресс», когда всё закончится. Чтобы знать постфактум, на каком шаге что пошло не так, если вдруг это случится. Почему я называю новый файл, начиная с fm — разберу чуть позже.
convert piterjs.png -resize 512x512 fm-2piterjs.pngДальше интереснее. Картинка логотипа яндекс.денег — 512x512px, как надо. Но с «воздухом» беда. Не хватает места по краям. Нужно просто добавить белого фона со всех сторон на 7-10%. Я наобум округлил до 550px. И тут пошла математика (я её не люблю):
- 550-512 = 38. Столько нужно добавить по краям.
- 550+38 = 588. Так надо «обрезать» (в большую сторону) картинку, чтоб добавить место с краёв.
convert yandex-money.png -crop 588x588-38-38\! -flatten -resize 512x512 fm-1yandex-money.png🙏 Склеиваем
Теперь, когда у нас есть два обрезанных лого, нам нужно их склеить. Я использую маску со звёздочкой * для поиска нужных файлов. +append означает, что нужно добавлять их один за другим. А fm- вначале я добавлял специально заранее, чтобы на этом этапе было проще картинки, которые нужно склеить.
convert +append fm-*.png fm.png✍️ Подписываем
Конечно, склеенные картинки - это здорово. Но ни о чём не говорит любому, кто лисает ленту новостей. Поэтому пост нужно подписать. Причём сделать это нужно на картинке. Это важно, потому что концентрирует внимания больше текста поста.
Для начала создадим картинку, на которой будет написан текст. Тут почти css. -fill это color цвет для текста, -font это font-family семейство шрифта, -pointsize это font-size размер шрифта в пикселях, -size - размеры картинки, в которые текст будет вписан, -gravity - как background-position указывает положение в пространстве картинки, label указывает сам текст, и наконец +antialias добавляет человеческое сглаживание. Последним аргументом - имя файла.
convert -fill black -font Trebuchet -pointsize 72 -size 450x100 -gravity center label:Frontend\ Mix +antialias text.pngБудьте осторожнее с -font, он берёт не те же шрифты, что ваш css. Список шрифтов для него можно получить командой
convert -list font | grep "Font:" | sed "s/Font: //g"Но можно и передать в -font путь до локального .ttf файла со шрифтом, может сработать.
Дальше остаётся только добавить текст к склеенным картинкам по аналогии с предыдущим склеиванием.
convert -append -gravity center text.png fm.png result.pngЗдесь append указан с минусом вначале. Это говорит о том, что вставлять нужно вертикально.
ImageMagick✨ же!
Вот и всё, картинка для анонса готова.