Пользователь
0,0
рейтинг
12 ноября 2014 в 20:00

Разработка → Еще один cкрипт генерации иконок для Android из песочницы

Привет, Хабр!

Небольшое вступление


Довольно давно я работаю тестировщиком мобильных приложений. Преимущественно, android-приложений (хотя были и WinCE, и iOS). Преимущественно, руками (хотя пробовал и автоматизировать с monkeyrunner и uiautomator). В последнее время все больше времени приходится уделять проектированию интерфейсов, вопросам менеджмента, релизам и другим делам. Одним словом, задачки приходится решать хоть обычно и несложные, но довольно разнообразные. Об одной из них мне бы хотелось рассказать.

В чем, собственно, дело


Недавно мы с коллегой в команде Rumsunrise экспериментировали с поддержкой android 5 и material design в наших приложениях. В процессе подготовки проекта столкнулись с неожиданной мелкой проблемой из области дизайна.

Дело в том, что некоторые иконки из стандартного icon pack мы переименовали, чтобы было удобнее их использовать в своих проектах. А с выходом нового Android и, соответственно, нового icon pack от Google, нам нужно было подложить в проект и новые иконки.

Что это значило для нас? Подобрать новые иконки из material-design-icons для каждого значения dpi и разложить их по нужным директориям. Далее, в каждой директории переименовать иконки в соответствии с тем, как принято в проекте. Когда иконок две-пять, проблем нет — руками это делается быстро и безболезненно. Но если иконок, допустим, штук 25, то переименовывать даже часть из них вручную долго и неинтересно. А если учесть, что кроме иконок есть и другая графика (которая, к слову, может время от времени меняться), то ситуация была совсем грустной.

И тут мы подумали, что было бы неплохо проделать эту работу один раз для иконок и графики, имеющих самое большое разрешение (сейчас это — xxxhdpi), а всю остальную работу сделать скриптом.

Что же Гугл? Беглое исследование вопроса навело нас на некоторое количество скриптов для Gimp и Photoshop и на инструменты вроде генератора иконок из набора Android Asset Studio. Нас это, честно говоря, не очень устраивало. Как минимум, потому, что нужно было делать сразу и много. Чтобы не ресайзить, переименовывать и не раскладывать все иконки и графику вручную, написали простой (можно даже сказать, примитивный) скрипт на python, который теперь делает это за нас.

Итак, у меня есть набор xxxhdpi графики, готовой к употреблению в android-проекте. Из нее мне нужно получить иконки всех необходимых размеров и сложить их по соответствующим директориям.

Все, что мне нужно сделать теперь, это:

Сложить готовые нужные xxxhdpi-иконки в какую-нибудь директорию и сделать:

$ iconic2.py /path/to/xxxhdpi/icons

Что именно делает скрипт:

  • создает в указанной директории поддиректории drawable-*dpi;
  • берет xxxhdpi изображения;
  • уменьшает их до необходимых размеров;
  • раскладывает по соответствующим директориям;
После этого остается только забрать готовые наборы и положить их в проект.

Для изменения размеров иконок мы пользуемся PIL или Pillow (для ubuntu x64). Так что предварительно стоит сделать:
$ sudo apt install pillow

Или то, что вы обычно делаете для установки пакетов в вашем дистрибутиве.

Сам скрипт доступен в mercurial-репозитории на Bitbucket. Хочу сказать, что скрипт не претендует на звание универсального инструмента или образца хорошего кода. Мы знаем, что в нем есть еще много мест, которые можно сделать лучше. Но уже сейчас он работает и экономит нам время. Надеюсь, сэкономит он его и вам.
Alexander Niki @zen_alexn
карма
3,0
рейтинг 0,0
Пользователь
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (15)

  • +5
    А известно ли вам не сильно распространенное, но тем не менее, мнение, что ресайзить иконки — это «фу»?

    Как мне недавно стало известно, истинные эстеты иконок ресайзят их исключительно в векторе, с привязкой к координатной сетке пикселей. Что это даёт? — pixel fitting, резкие края вертикальных/горизонтальных линий.

    Господа разработчики под Андроид редко грешат качеством, но вы всё таки присмотритесь внимательней к тому же material design-у, и к разнице между тем, получается у вас при ресайзе и тем, что лежит у них в пакетах.
    • 0
      Вообще да, хочется иметь инструмент, который генерит иконки на основе svg файлов.
      • –1
        Adobe Photoshop может генерить иконки в svg
        • +1
          Это немного не то, что нам нужно. В идеале, мы ищем способ, уже имея svg-исходник, нагенерить из него png всех нужных нам размеров. Причем, пакетно. Поштучно, как я понял, это можно сделать скриптом для Inkscape или того же Photoshop, например.
          • 0
            Вот статья, в которой автор делал скрипт для генерации картинок под Андроид из svg. По-моему это как-раз то, чего вы хотите.
            • 0
              Интересная статья и комментарии к ней, спасибо! Буду изучать.
          • 0
            Вы можете имея векторную иконку в фотошопе, нагенерить из нее все нужны размеры автоматически.
            • 0
              Понял, что Вы имеете ввиду. В принципе, если у вас 3-4 иконки, то нет проблем сделать в каком-то условном графическом редакторе File->Open и, затем, Tools->Scripts->Convert. Ситуация меняется, когда нужно так обработать не 3-4, а 30-40 исходных картинок (например, когда вы делаете редизайн всего приложения). И тут, как сказал Tishka17, было бы удобно иметь инструмент, которому можно скормить все svg-исходники из указанной папки и забрать уже готовые png нужных размеров.
              Для себя мы придумали быстрое решение — скриптик, который генерирует png из png. Не без побочных эффектов, конечно. Зато одной командой.
              • 0
                На мой взгляд, эту проблему должен решать дизайнер и своими методами. А насчет пакетной обработки, так она в фотошопе тоже есть. Это если нужно скормить 30-40 иконок и получить пнг. Но не совсем понимаю этот кейс, скорее, при редизайне приложения, есть макет, в котором эти иконки используются и находятся в векторном виде, то есть их не нужно скармливать заново фотошопу или скрипту, их нужно лишь экспортировать из макета в нужных размерах. Для этого у дизайнеров есть несколько инструментов, такие как actions и extensions, а в последней версии фотошопа, вообще, отдельный модуль Extract assets. Думаю, дизайнеры в Тостере Вам бы с радостью помогли с решением этой проблемы :)
    • 0
      Мне кажется, простые иконки, используемые в actionbar, ресайзить допустимо. Вот, например, две иконки 36dp, одна сгенерирована скриптом из xxxhdpi, а вторую я взял из набора, предоставленного гуглом. Обе увеличены в 10 раз. Я не могу Вам сказать, какая из них откуда :)
      image
      Согласен, что сложных изображениях разница может быть видна.
      • 0
        Неудачный пример. Возьмите для сравнения иконку с параллелепипедом — например, конверт, смартфон, выноску, батарейку. Любую иконку, в которой доминируют вертикальные и горизонтальные линии, а не кривые или диагональные.
      • 0
        Насчет «какая откуда». Слева — самоделка.
        • 0
          Беру свои слова о неразличимости обратно. Передвинул картинку на другой монитор и увидел «следы». Спасибо, что указали на это.
  • 0
    Google рекомендует использовать xxxhdpi разрешение только для иконки запуска приложения.

    Note: the drawable-xxxhdpi qualifier is necessary only to provide a launcher icon that can appear larger than usual on an xxhdpi device. You do not need to provide xxxhdpi assets for all your app's images.
    • 0
      Действительно, спасибо! Немного раньше, при чтении блога android developers, мне показалось, что для поддержки Nexus6 желательны xxxhdpi ресурсы. Вероятно, я что-то не так понял.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.