Решение, изложенное в статье, расписано для пользователей 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.
Пользуйтесь и не тратьте своё время впустую.
ссылка на оригинал статьи http://habrahabr.ru/post/255489/
Добавить комментарий