Мобильный разработчик
0,0
рейтинг
27 марта 2015 в 11:26

Разработка → Автоматизация ресайза PNG для iOS и Android приложений из песочницы

Я уже несколько лет занимаюсь разработкой мобильных приложений под Android и iOS. Предыдущие проекты содержали достаточно мало графики, в пределах 10 элементов, но недавно я взялся за большой проект, содержащий несколько десятков различных изображений — иконок, фонов и т.п.

Как известно всем мобильным разработчикам, все эти ресурсы нужно сохранять для разных размеров экрана DPI для наилучшего качества отображения. В последнее время различных DPI развёлся целый зоопарк — под Android их 5 основных (mdpi, hdpi, x/xx/xxxhdpi), и под iOS уже минимум 3 ( @1x, @2x, @3x, кроме того, некоторые ресурсы нужно оптимизировать под ~ipad отдельно).

Если ранее я справлялся с этим в общих графических редакторах типа Paint.NET или Photoshop, то сейчас подгонка размеров стала занимать слишком много времени. В связи с этим было решено раз и навсегда избавиться от этой рутины.

Изначально был написан небольшой консольный скрипт на Python (<1kb исходников), который принимал на вход путь к png, запрашивал размеры и сохранял копии изображения в отдельные подпапки. Это было весьма неудобно и я стал улучшать его.

Финальная версия решения насущной проблемы стала гораздо удобнее:



Пользваться ей просто:
  1. Открыть исходную картинку в большом разрешении (путь к картинке запоминается программой, ведь часто все ресурсы лежат в одной папке);
  2. Выбрать исходный размер (для drawable-mdpi или @1x для Android и iOS соответственно);
  3. Если введена только высота или ширина, то можно подогнать второе измерение нажатием одной кнопки. Удобно, если известно, что элемент интерфейса должен иметь определённую высоту, но подгонять ширину автоматически;
  4. В версии для iOS (скриншот ниже) есть возможность выбрать чекбокс "~ipad", который добавит соответствующий суффикс;
  5. По нажатию кнопки «DO IT!» картинки масштабируются и сохраняются.

Для Android png сохраняются в отдельных папках drawable-*dpi, а для iOS — в папке result-images с соответствующим суффиксом @*x(~ipad).

Версия для iOS не сильно отличается по интерфейсу (скриншот с Windows, ибо она была под рукой):



Скрипт написан на Python, для GUI использует TkInter, для ресайза изображений — Pillow (форк Python Imaging Library).
Размер скрипта — всего 6 кб. Тестировал на Windows и Mac.

Исходники:
Android Drawable Downsampler: pastebin.com/1sJPnuUs
iOS ImageAsset Downsampler: pastebin.com/8sdyPaqZ
На GitHub заливать не стал, потому что просто-напросто лень было для такого небольшого скрипта создавать отдельный репозиторий.

Сборка для Windows:
Android Drawable Downsampler: Скачать
Сборки для OS X:
Android Drawable Downsampler: Скачать
iOS ImageAsset Downsampler: Скачать

Надеюсь, эта крошечная утилита будет полезна.

Спасибо за внимание!
Егор Аристов @Egor3f
карма
4,0
рейтинг 0,0
Мобильный разработчик
Реклама помогает поддерживать и развивать наши сервисы

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

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

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

  • +1
    На GitHub заливать не стал, потому что просто-напросто лень было для такого небольшого скрипта создавать отдельный репозиторий.

    Для этого GitHub придумал Gist

    А за скрипт огромное спасибо, до этого использовал труды romannurik
  • 0
    А минимизация изображений не предусмотрена? Или этот pillow сам жмёт png?
    • 0
      Нет, к сожалению, я это не предусмотрел.
      В pillow есть опции оптимизации размера и уровня компрессии png, но я их не использовал.
      Спасибо за замечание!
      • 0
        Это я не как замечание, а идея исключительно. Сравните на всякий случай со специализированными optipng/pngcrush/… Думаю, их несложно и потом на группу папок натравить. Разница у меня получается 2904 байт против 1205 байт (перевод из rgb в indexed палитру и более сильное сжатие). Я в итоге вообще воспользовался гуглом с "optimize png online" / "resize png online" после неудачной попытки разобраться с скриптами в gimp.

        Ну и мне бы ваш скрипт месяц назад:)
  • +1
    Пара альтернатив:
    PNG Express для Photoshop
    Sketch (Mac only)
    Волшебный пендель дизайнеру и пусть он всё делает как надо.

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