...

пятница, 10 апреля 2015 г.

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

Решение, изложенное в статье, расписано для пользователей 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/http://ift.tt/1ijKEPM

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.


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


This entry passed through the Full-Text RSS service - if this is your content and you're reading it on someone else's site, please read the FAQ at http://ift.tt/jcXqJW.


Комментариев нет:

Отправить комментарий