Решение, изложенное в статье, расписано для пользователей 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
