Автоматический ресайз иконок для мобильных приложений, или как Inkscape + bash упрощают жизнь

в 14:04, , рубрики: app icon, bash, inkscape, ios development, mobile development, веб-дизайн, дизайн мобильных приложений, иконки, метки: ,

Решение, изложенное в статье, расписано для пользователей OSX. Но его достаточно просто можно адаптировать и под другие популярные операционные системы.

Началось все с нетривиальной задачи: когда создается веб-сервис и мобильное приложение, неизбежно возникает потребность сделать под него презентабельную или не очень презентабельную иконку. Но стоит начать создание приложения для IOS в XCode, как тут же узнаешь, что от тебя требуется не одна иконка, а примерно десяток, причем разных размеров. Вот только часть из них:

  • иконка для отображения на вкладках браузеров;
  • иконка веб-приложения, отображаемая в safari mobile;
  • иконка мобильного приложения, отображаемая на главном экране в ios;
  • большая иконка для app store;
  • маленька иконка для app store;
  • иконка для поиска в spotlight.

А теперь внимание: практически для каждого пункта из этого списка есть еще и свои собственные размеры — в зависимости от типа устройства и версии iOS. Подробная спецификация иконок для веб-приложения и приложения для ios находится здесь.

Решение «в лоб» — в каждом случае делать ресайз и сохранять в файле со своим уникальным именем. Отлично, уже потратили минут 30 на данную процедуру. Но иногда возникает странное желание что-то поменять в иконке. И такое желание может возникнуть несколько раз.

Теперь каждая итерация переработки иконки потребует от вас очередной ресайз и пересохранение.

В тот самый момент, когда начнет казаться, что делать обезьянью работу — не лучшая затея для человека обремененного интеллектом, возможно, вы начнете искать в интернете решения и наткнетесь на эту статью.

Оказывается, процесс ресайза и сохранения иконок в разных форматах, разных размеров и с разными префиксами, которые указывают на назначение иконки, можно полностью автоматизировать.

Что для этого требуются:

  • Иконка в формате svg (для нашего примера, файл называется icon.svg)
  • Inkscape
  • Короткий bash-скрипт
  • Terminal

Inkscape — бесплатный векторный редактор, доступный на всех популярных ОС. В данном случае, его прелесть заключается в том, что Inkscape можно управлять с помощью командной строки. Автоматизировать процесс поможет bash-скрипт.

Подготовительный этап

Для начала готовим bash-скрипт:

#!/bin/bash

INK=/Applications/Inkscape.app/Contents/Resources/bin/inkscape

if [[ -z "$1" ]] 
then
	echo "SVG file needed."
	exit;
fi

BASE=`basename "$1" .svg`
SVG="$1"

# favicon tmpl 16pt
$INK -z -C -e "favicon.ico" -f 	$SVG -w 16 -h 16

# iPhone Spotlight iOS5,6 Settings iOS and iPad 5-7 29pt
$INK -z -C -e "$BASE-29.png" -f 	$SVG -w 29 -h 29
$INK -z -C -e "$BASE-29@2x.png" -f 	$SVG -w 58 -h 58

# iPhone Spotlight iOS7 40pt
$INK -z -C -e "$BASE-40@2x.png" -f 	$SVG -w 80 -h 80

# iPhone App iOS 5,6 57pt
$INK -z -C -e "$BASE-57.png" -f 	$SVG -w 57 -h 57
$INK -z -C -e "$BASE-57@2x.png" -f 	$SVG -w 114 -h 114

# iPad Spotlight iOS 7 40pt
$INK -z -C -e "$BASE-40.png" -f 	$SVG -w 40 -h 40

# iPad Spotlight iOS 5,6 50pt
$INK -z -C -e "$BASE-50.png" -f 	$SVG -w 50 -h 50
$INK -z -C -e "$BASE-50@2x.png" -f 	$SVG -w 100 -h 100

# iPad App iOS 5,6 72pt
$INK -z -C -e "$BASE-72.png" -f 	$SVG -w 72 -h 72
$INK -z -C -e "$BASE-72@2x.png" -f 	$SVG -w 144 -h 144

# iPad App iOS 7,8  60pt
$INK -z -C -e "$BASE-60@2x.png" -f 	$SVG -w 120 -h 120
$INK -z -C -e "$BASE-60@3x.png" -f 	$SVG -w 180 -h 180

#iTunes Artwork
$INK -z -C -e "$BASE-512.png" -f 	$SVG -w 512 -h 512
$INK -z -C -e "$BASE-1024.png" -f 	$SVG -w 1024 -h 1024

cp "$BASE-512.png" iTunesArtwork.png
cp "$BASE-1024.png" iTunesArtwork@2x.png

Скрипт разбит на блоки, которые описывают ресайз иконок для разных назначений.

  • INK — адреcс запуска командной строки inkscape;
  • SVG — адрес исходного файла;
  • BASE — название исходного файла, без указания формата;
  • цифры в конце каждой строки — размерность необходимых иконок;
  • -z -C -e -f -w — стандартные операторы командной строки Inkscape (полный перечень здесь).

Что в данном случае делает bash-скрипт? Запускает терминал inkscape, берёт исходный файл, изменяет его размер и сохраняет под именем, которое состоит из BASE (постоянной части) и приставки, которая указывает на размер иконки. И так для всех размерностей, которые заданы в скрипте. Если требуются какие-то другие размеры иконок или названия конечных файлов, можно отредактировать bash-скрипт.

Теперь, используя всё тот же xCode, создаем файл rezise.sh, копируем в него bash-скрипт и сохраняем файл в ту же директорию, что и исходник иконки в формате svg.

Этап запуска

1. Открываем terminal.app.
2. В terminal переходим в директорию с исходником и скриптом, используя стандартную команду сd + путь к дирректории.
3. В terminal запускаем команду:

./resize.sh icon.svg

Вуаля! Через мгновение в папке вместе с исходником появился набор иконок в нужных размерах и с нужными именами.
Если вы изменили исходник и повторно выполнили команду, файлы перезапишутся. Поэтому экспериментировать с дизайном иконок можно теперь сколько угодно.

Вот, собственно, и все.

Решение подсмотрено мной на одном англоязычном сайте и было мной немного переработано. Там же можно скачать resize.sh.

Пользуйтесь и не тратьте своё время впустую.

Автор: masterdrew

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js