Генерация иконок для android

Еще один 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-иконки в какую-нибудь директорию и сделать:

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

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

После этого остается только забрать готовые наборы и положить их в проект.

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

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

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

Источник

Как создать свой собственный Icon Pack на Android

Во многих случаях мы спрашиваем себя, откуда берется столько значков? Это вопрос, на который уже есть ответ, и который совсем не сложен. Дело не в том, чтобы изучать компьютерную инженерию или программирование, это гораздо проще, чем все это. Таким образом, мы увидим, как вы можете создавать пакеты значков полностью с нуля .

По нескольким причинам, две из которых выделяются над остальными. Во-первых, из-за всего того, что мы имеем в наличии, большое количество его не убеждает нас, или просто у нас есть творческая идея, которую мы хотим поставить на службу всем пользователям через приложение, хотя для этого потребуется некоторые знания по программированию.

Как создать свой собственный пакет иконок

Практически существующий метод является единственным, который дает хорошие результаты при установке их на смартфон с использованием загрузки приложения. Эта программа, которую мы собираемся использовать, называется Icon Pack Studio это будет инструмент для создания всех пакетов значков, которые мы хотим получить от создателей SmartLauncher, так что это очень важное одобрение приложения.

Его работа очень проста, так как только при входе в него мы можем сразу создать нашу персонализированную иконку. Мы рекомендуем покинуть это меню как можно скорее, поскольку это быстрый редактор, который не имеет всех параметров, которые действительно включает приложение. Идем к знаку «+», где появятся все параметры настройки.

Мы можем изменять такие аспекты, как граница, форму, которую он будет иметь, выбирать дизайн логотипа, перемещать его положение и регулировать его размер, среди прочего. Любопытно, что по цвету значка можно выбрать, хотим ли мы, чтобы приложения имели одинаковые цвета, или изменить в зависимости от того, какой . То есть мы можем заказать приложение, чтобы настроить цвета Instagram к фиолетовому, Spotify на зеленый и т. д. Для этого в разделе «Заливка» нажмите «Цвета приложения» в раскрывающемся меню.

Как только дизайн будет решен, мы нажимаем на глазок, который находится в верхнем правом углу, что приведет нас к предварительному просмотру, чтобы проверить, как было создано наше творение. Если мы удовлетворены, мы сохраняем и даем имя этому пакету, но он еще не будет установлен на смартфоне. Мы ждем, пока не появится уведомление от приложения, нажмите на него и затем «Установить». Теперь да, этот новый пакет значков будет реализован в терминале, но мы можем найти проблему .

Как адаптировать новый пакет ко всем программам запуска

И это то, что это приложение имеет небольшое ограничение, поскольку, будучи создателями SmartLauncher, оно совместимо только с их разработками, а с Nova Launcher их больше нет. Для всех других пусковых установок это изменение дизайна не будет применено к иконкам. К счастью, есть решение, чтобы облегчить эту проблему.

Благодаря приложению Adapticons мы можем применить то, что создали в любом средстве запуска, от разработчика, или если мы хотим применить его к слою персонализации, который у нас есть по умолчанию на мобильном устройстве. Это действительно программа, которая также служит для создания пользовательских пакетов, но она работает с редактором несколько более нестабильно, чем в предыдущем приложении Поэтому его сильной стороной является то, что мы можем загрузить созданный нами пакет, импортировать его в Adapticons и автоматически применить его. на любой лаунчер.

Для этого мы добавляем виджет Adapticons, нажимаем и выбираем приложение, для которого мы собираемся изменить дизайн. После того, как мы войдем в меню редактирования, важно выбрать опцию «Исходная форма», прежде чем перейти в раздел «Изменить значок», который находится чуть дальше по меню. Появится плавающее окно, в котором мы дадим «Значок импорта», чтобы загрузить созданный нами дизайн. Так что со всеми приложениями мы хотим изменить. Во всяком случае, мы рекомендуем использовать Nova Launcher для лучшей реализации иконок.

Источник

Векторная иконка приложения для Андроид — полное руководство.

Aug 15 · 4 min read

Однажды копаясь в Андроид документации я с большим удивлением заметил, что в SDK к версии 26 были до б авлены не только адаптивные иконки, но и возможность совсем отказаться от растровых иконок лаунчера на новейших версиях Андроид. Это значит, что вам вовсе не нужно создавать по растровому ассету к каждому разрешению экрана воспользоваться одним/двумя векторными файлами для всех возможных разрешений! Так как растровые иконки достаточно увесистые вы можете таким образом сэкономить много килобайтов в размере приложения. Тут как и везде есть свои моменты и к сожалению я не нашел в интернете полного описания всего процесса. Ну что же, значит пришла моя пора заполнить этот пробел! Ниже вы найдёте видео процесса изготовления единой векторной иконки для приложения, а руководство также доступно на английском и чешском языках.

Прежде чем мы начн ём

Избавится от растровых изображений в целой аппликации — мечта многих оптимизаторов. Особенно если приложения не большое а растровые иконки, при неправильном изготовлении весят почти четверть общего размера приложения. Но тут как и везде есть свои недостатки, давайте поговорим о них, возможно в вашем случае векторная икона — не вариант. Итак:

• Векторный формат в ОС Андроид был введен в версии 21, в качестве иконки приложения в лаунчере векторные изображения можно использовать только в версиях 26 и выше. Это значит, что если Ваше приложение должно поддерживать и более старые версии — Вам все равно придется иметь в наличии растровые иконки. Так что бонус тут не большой.
• Векторный формат который используется в ОС Андроид это не привычные нам SVG/EPS/AI и так далее, это формат XML, а это значит очень ограниченное использование. Этот формат не поддерживает атрибуты стилей, т.е. какие либо эффекты, блендинг, даже простейшие тени, блюр. Вы можете видеть начале видео, что происходит с тенями — они просто пропадают. Если у вас достаточно умелый график в команде, то в принципе это ограничение можно обойти переведя например тени в простые градиенты от полного цвета в абсолютно прозрачный итд. Если же у вас вовсе нет векторного оригинала или там слишком много эффектов — возможно игра не стоит свеч.

На этом минусы заканчиваются. Если ваше приложение должно запускаться лишь на устройствах которые ещё получают закладки безопасности (т.е. в момент написания статьи SDK версии 27+) или же использует какие то новшества современных Андроид систем/датчиков/устройств — векторная иконка отличный выбор. Вы можете сэкономить в несколько раз как на размере так и на файлах для иконки, имея лишь 1-2 файла изображения и пару файлов с их описанием! Звучит круто? Тогда ниже вы найдете рецепт того как это все приготовить.

Подготовка файлов

Я не буду вдаваться в подробности создания файлов иконки, так как они абсолютно идентичны остальным адаптивным иконкам. В интернете буквально тонны всевозможных шаблонов для адаптивных иконок и руководств для них. Можно использовать их все, с той лишь разницей, что в результате мы будем использовать файлы SVG а не PNG. Т.е. это будет один или два файла: первый с задним фоном, который должен иметь область для параллакс эффекта и файл переднего плана. В моем примере я использую вариант где задним фоном служит просто цвет, так что у меня будет один файл с описанием цвета и один файл с векторной графикой.

Итак если вы имеете файл(ы) SVG, то в следующем шаге нам понадобится Android Studio, впрочем если вы занимаетесь разработкой для ОС Андроид, вы и так знаете этот софт. Это бесплатное ПО можно скачать по адресу:

Важно! Векторные ассеты можно создавать лишь в версии 4.2.2 и выше.

Запустите студию, откройте свой проект, после загрузки выберете вкладку Project (первая вкладка слева сверху). В папке с ресурсами с помощью правого клика мыши выведите контекстное меню. В нем выберете первый элемент — New, затем Vector Asset. Откроется Asset Studio, в нем выберете тип: Локальный файл и путь через кнопку с папкой. Проверьте как иконка выглядит и нажмите кнопку Next. Тут вы увидите путь и название к вашему XML файлу с векторной иконкой. Повторите для второго файла если вы используете вектор как в переднем так и на заднем плане. Готово.

Настройка файлов конфигурации

И так изображения готовы, но ваш проект пока не знает пути к ним и как их отобразить. Вам нужно будет добавить/изменить несколько файлов:

• build.gradle — здесь необходимо включить поддержку векторных файлов, просто добавьте эти две строки в конфигурацию и зависимости:

• в папку с ресурсами добавьте папку “ mipmap-anydpi-v26”, т.е. как видно из названия это ассеты для любого DPI в версиях ОС выше 26. В нем будут два файла: ic_launcher_round.xml и ic_launcher.xml в которых необходимо описать что использовать как фон а что как передний план. В моем случае это цвет для фона и векторная графика для переднего плана.
• Ну и на конец то что мы описали в предыдущем пункте нужно добавить в папку drawable а также если вы использовали цвет в качестве фона — описать этот цвет в colors.xml.

Теперь система знает как, где и что, использовать в качестве иконки приложения в лаунчере. Запустите чистую инсталляцию и проверьте результаты своей работы. Как видите, техническая часть достаточно простая (если сравниватъ с PNG иконками).

В результате VCS должна показать вот такие изменения:

Как минимум две новые строки в файле:
./app/build.gradle

Новая папка “ mipmap-anydpi-v26” с двумя файлами:
./app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml
./app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml

Один XML файл с изображением переднего плана:
./app/src/main/res/drawable/ic_launcher_foreground.xml

И либо описание цвета в качестве фона:
./app/src/main/res/values/colors.xml
либо изображение:
./app/src/main/res/drawable/ic_launcher_background.xml (в данной конфигурации отсутствует).

В ссылке ниже вы найдете все необходимые файлы из примера показанного в видео. Можете использовать их как пример для своего приложения. Спасибо за внимание!

Источник

Как правильно подготавливать иконки для разработчика Андроид?

В гайде показано следующее:

Т.е. сама иконка вписывается в квадрат 24х24dp, а потом этот квадрат вписывается в квадрат 48x48dp. И когда я нарезал у меня так и получалось, что для mdpi размер png получался 48x48dp с иконкой 24х24dp внутри него.
Но потом кодер сказал мне, что когда вставил в приложение, иконка оказалась маленькой и сказал, что эти отступы вокруг самой иконки (Touch target) при нарезке делать не нужно.
Прикрепил иконки.
— это то, что я отдал кодеру

— это то, что я должен был ему отдать по его словам

• Вопрос задан более трёх лет назад
• 1189 просмотров

Оценить 1 комментарий

Ознакомьтесь более внимательно с гайдами от гугла. В «Clearance» как раз говорится о том, что размер самой иконки 24dp, а Touch target 48dp. Поэтому от вас требуется иконка 24dp под разные разрешения, а программист уже сам сделает отступы по 12dp со всех сторон:

Вообще, рекомендуется использовать стандартные гугловские иконки, если это возможно. В вашем случае лучше так и сделать. Зайдите на гугловский сайт, либо на materialdesignicons.com и скачайте архив с этой иконкой для разных разрешений. В результате у вас получится 5 папок со всеми нужными иконками, которые вы передадите программисту.

Если же вы не нашли подходящую иконку, то можете обратиться к восхитительному ресурсу. Загружаете свою иконку для максимального расширения (xxxhdpi) размером 96х96 px. На выходе получите 5 иконок, которые уже лежат в нужных папках.

Таким образом, вы предоставите программисту все необходимые иконки на блюдечке с голубой каемочкой, и он не будет вас материть.

И еще, как мне кажется, вы делаете неправильно, когда режете иконку прямо вместе с фоном. Более разумно передавать иконку с прозрачным фоном, а цвет самой иконки сделать белым. Потому что в случае изменения цветовой схемы приложения, придется перерисовывать все иконки (менять их фон или цвет). В коде же можно будет добавить пару строк:

Источник