Решение, изложенное в статье, расписано для пользователей OSX. Но его достаточно просто можно адаптировать и под другие популярные операционные системы.
Началось все с нетривиальной задачи: когда создается веб-сервис и мобильное приложение, неизбежно возникает потребность сделать под него презентабельную или не очень презентабельную иконку. Но стоит начать создание приложения для IOS в XCode, как тут же узнаешь, что от тебя требуется не одна иконка, а примерно десяток, причем разных размеров. Вот только часть из них:
А теперь внимание: практически для каждого пункта из этого списка есть еще и свои собственные размеры — в зависимости от типа устройства и версии iOS. Подробная спецификация иконок для веб-приложения и приложения для ios находится здесь.
Решение «в лоб» — в каждом случае делать ресайз и сохранять в файле со своим уникальным именем. Отлично, уже потратили минут 30 на данную процедуру. Но иногда возникает странное желание что-то поменять в иконке. И такое желание может возникнуть несколько раз.
Теперь каждая итерация переработки иконки потребует от вас очередной ресайз и пересохранение.
В тот самый момент, когда начнет казаться, что делать обезьянью работу — не лучшая затея для человека обремененного интеллектом, возможно, вы начнете искать в интернете решения и наткнетесь на эту статью.
Оказывается, процесс ресайза и сохранения иконок в разных форматах, разных размеров и с разными префиксами, которые указывают на назначение иконки, можно полностью автоматизировать.
Что для этого требуются:
Inkscape — бесплатный векторный редактор, доступный на всех популярных ОС. В данном случае, его прелесть заключается в том, что Inkscape можно управлять с помощью командной строки. Автоматизировать процесс поможет bash-скрипт.
Для начала готовим bash-скрипт:
Скрипт разбит на блоки, которые описывают ресайз иконок для разных назначений.
Что в данном случае делает bash-скрипт? Запускает терминал inkscape, берёт исходный файл, изменяет его размер и сохраняет под именем, которое состоит из BASE (постоянной части) и приставки, которая указывает на размер иконки. И так для всех размерностей, которые заданы в скрипте. Если требуются какие-то другие размеры иконок или названия конечных файлов, можно отредактировать bash-скрипт.
Теперь, используя всё тот же xCode, создаем файл rezise.sh, копируем в него bash-скрипт и сохраняем файл в ту же директорию, что и исходник иконки в формате svg.
1. Открываем terminal.app.
2. В terminal переходим в директорию с исходником и скриптом, используя стандартную команду сd + путь к дирректории.
3. В terminal запускаем команду:
Вуаля! Через мгновение в папке вместе с исходником появился набор иконок в нужных размерах и с нужными именами.
Если вы изменили исходник и повторно выполнили команду, файлы перезапишутся. Поэтому экспериментировать с дизайном иконок можно теперь сколько угодно.
Вот, собственно, и все.
Решение подсмотрено мной на одном англоязычном сайте и было мной немного переработано. Там же можно скачать resize.sh.
Пользуйтесь и не тратьте своё время впустую.
Началось все с нетривиальной задачи: когда создается веб-сервис и мобильное приложение, неизбежно возникает потребность сделать под него презентабельную или не очень презентабельную иконку. Но стоит начать создание приложения для 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.
Пользуйтесь и не тратьте своё время впустую.
Комментарии (15)
Kirpa
10.04.2015 21:04Есть ещё одно решение этой проблемы, хотя оно подойдёт только пользователям photoshop. Есть замечательный набор шаблонов и встроенных скриптов для экспорта под все размеры: appicontemplate.com
wholeman
10.04.2015 21:06Также использую Inkscape, но для Android и вместо скрипта на bash правила make. Удобство в том, что не надо следить за изменением векторного рисунка — это делает make.
masterdrew Автор
10.04.2015 21:09если возможно, приведите, пожалуйста, пример
wholeman
10.04.2015 21:54+1Как-то так (это - фрагмент):all: icons ant debug application_icons: res/drawable-xhdpi/ic_launcher.png res/drawable-hdpi/ic_launcher.png res/drawable-mdpi/ic_launcher.png res/drawable-ldpi/ic_launcher.png icons: application_icons res/drawable-xhdpi/%.png: images/%.svg mkdir -p res/drawable-xhdpi inkscape -e $@ -C -w 96 -h 96 $< res/drawable-hdpi/%.png: images/%.svg mkdir -p res/drawable-hdpi inkscape -e $@ -C -w 72 -h 72 $< res/drawable-mdpi/%.png: images/%.svg mkdir -p res/drawable-mdpi inkscape -e $@ -C -w 48 -h 48 $< res/drawable-ldpi/%.png: images/%.svg mkdir -p res/drawable-ldpi inkscape -e $@ -C -w 36 -h 36 $< icons_clean: rm -fv res/drawable-*dpi/ic_launcher.pngJIghtuse
11.04.2015 06:41+1Заинтересовала задачка. Сделать список png несложно, примерно так:
formats = xhdpi hdpi mdpi ldpi application_icons = $(addsuffix /ic_launcher.png, $(addprefix res/drawable-,$(formats)))
Думаю, можно и правила автоматически сгенерировать, но нужно подумать, как ассоциировать формат с размером.wholeman
11.04.2015 23:51Пока, наверное, остановлюсь на таком:formats = xhdpi hdpi mdpi ldpi iconset = $(foreach icon_name,$(1),$(addprefix res/drawable-,$(addsuffix /$(icon_name).png,$(formats)))) res/drawable-xhdpi/%.png: images/%.svg mkdir -p res/drawable-xhdpi inkscape -e $@ -C -w 96 -h 96 $< res/drawable-hdpi/%.png: images/%.svg mkdir -p res/drawable-hdpi inkscape -e $@ -C -w 72 -h 72 $< res/drawable-mdpi/%.png: images/%.svg mkdir -p res/drawable-mdpi inkscape -e $@ -C -w 48 -h 48 $< res/drawable-ldpi/%.png: images/%.svg mkdir -p res/drawable-ldpi inkscape -e $@ -C -w 36 -h 36 $< icons: $(call iconset,ic_launcher sport_running sport_biking sport_generic)
devnseven
10.04.2015 21:27makeappicon.com — и нет проблем с иконками.
ticons.fokkezb.nl — и нет проблем со сплэш скринами.
Lerg
11.04.2015 13:25Мне кажется очень много разработчиков так или иначе решали эту задачу. Для себя я сделал скрипт с использованием ImageMagick и специально для Corona SDK.
gist.github.com/Lerg/b0a643a13f751747976f
nickolaym
13.04.2015 09:54А не тяжеловато ли запускать инкскейп сто раз на один файл? Юникс-вей, но с признаками извращения.
masterdrew Автор
13.04.2015 10:07+1с точки зрения скорости решения вопроса, исполнение приведенного выше bash-скрипта занимает 1-2 секунды
pvasili
13.04.2015 11:39Там иконок гораздо поболее…
Поделюсь сервисом: www.gieson.com/Library/projects/utilities/icon_slayer/#.VSg5W5PvRiJ
Надеюсь, что автору не положат сайт :)
cher11
Спасибо, удобно. В свое время тоже столкнулся с проблемой, но скрипты писать не стал, а нашел вот что: ticons.fokkezb.nl — все сводится к загрузке одной большой иконки, на выходе получаем архив со всеми размерами и для iOS и для Android. Еще больше радует то, что проект открыт под лицензией Apache — при желании можно и дополнить и локально копию запустить :)