Создавать адаптивные иконки для Android легче, чем вы думаете

04.05.2020
Posted in blog-article
04.05.2020 admin

Создавать адаптивные иконки для Android легче, чем вы думаете

Годнота по созданию адаптивных иконок

Адаптивные значки (иконки) на Android были представлены в Android Oreo, но я обнаружил, что многие приложения до сих пор их не используют. К примеру, одно из приложений, над которыми я работаю сегодня, все еще использует старый значок. Но недавно моя компания решила создать адаптивные иконки под новое приложение, выпуск которого назначен на ближайшее время. К моему удивлению, создание иконок нового образца оказалось смехотворно простой задачей, решением которой я решил сегодня поделиться с вами.

Что Такое Адаптивные Иконки?

Адаптивные иконки через developers.android.com

Перед тем, как переходить к творчеству, коротко объясним, что именно мы создаем. Адаптивные иконки настраивают значок вашего приложения так, чтобы пусковые установки устройств пользователей могли надевать на него маску. Например, если пусковая установка хочет, чтобы все иконки на гаджете имели форму круга, адаптивные иконки позволят вашему значку отображаться как круг. Точно также они смогут по желанию системы принимать формы квадрата, капли и другие очертания, которые вы сможете представить.

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

Эй Schwab, LinkedIn, Bitmoji, Atom и Google … поддержка адаптивных иконок уже!

Как мне создать адаптивные иконки?

Мы надеемся, теперь вы узнали о том, почему адаптивные иконки важны для Android. Перейдем к их созданию своими руками.Конечно, «волшебных формул» существует великое множество, и у каждой есть как плюсы, так и минусы. Лучше всего при работе использовать векторы для переднего плана и фона (или только для сплошного цвета).

Проследите, чтобы инструмент дизайна был способен правильно экспортировать все (текст, по-видимому, не экспортируется из Sketch в формате, который распознает Android). Другой вариант — экспортировать изображение в формате png с разрешением XXXHDPI или выше (я для переднего плана использовал 512×512).

Независимо от того, какой тип изображений вы предоставляете, вам нужно разделить изображение на два слоя — для переднего плана и фоновой части.

На переднем плане, как правило, основной фокус находится на иконке. GIF справа отлично объясняет, о каких слоях я говорю. В данном случае на переднем плане находится голова фигуры Android, на глаза которой наложена прозрачность, что позволяет фону просвечивать.

Фоновое изображение — это все, что отображается за передним планом. Например, в той же GIF мы можем указать на фоне просто сплошной цвет. Мы сделаем это в нашем уроке немного позже,  как только перейдем к Asset Studio. Если ваш фон содержит градиент или что-либо более сложное, чем сплошной цвет (например, как фон у иконок Instagram или Google Maps), следует указать в качестве второго слоя фоновое изображение.

Теперь мы можем соединить слои в одну потрясающую иконку

Если у вас есть необходимые составляющие (векторное или большое изображение), пора переходить к Android Studio. После завершения запуска Android Studio убедитесь, что вы переключили вид на Android. Затем щелкните правой кнопкой мыши по папке res и перейдите к new.

Должно появиться меню с рядом различных опций. Выберите Image Asset. В этот момент на экране появится приветствие с названием Asset Studio — программы, позволяющей создавать различные ресурсы для Android. На момент написания этой статьи в Android Studio по умолчанию был выбран тип значков Launcher Icons (Adaptive and Legacy). Если вы не видите этот параметр по умолчанию, обязательно выберите его.

Сейчас ваш экран должен выглядеть примерно так

Пора установить на передний план наш значок. Для этого я использую инструмент средства запуска переднего плана, предоставленный Android Studio.

Когда вы только загрузили изображение переднего плана, не расстраивайтесь, если оно выглядит не совсем правильно. Вы можете обрезать значок или изменить его размер в настройках масштабирования. К примеру, я решил уменьшить его до 80%, чтобы получить дополнительные отступы.

Эта иконка превзойдет конкурентов, я уверен

Теперь, когда ваша иконка находится в нужной точке переднего плана, пришло время установить фон. По умолчанию программа предложит выбрать любое изображение, но если у вас сложный фон, вам потребуется загрузить actual image или вектор.

Обращаю внимание, вы можете использовать для редактирования фона те же настройки масштабирования, с помощью которых мы поправляли передний план.Я решил использовать в качестве фона обычную заливку цветом. А поскольку фиолетовый относится к моим любимым цветам, я решил установить его в качестве фона по умолчанию.

Проверяем работоспособность дизайна

Перед тем, как экспортировать иконку, давайте удостоверимся, что она выглядит правильно в версии Legacy (это необходимо сделать, поскольку она должна качественно отображаться на API 25 или ниже). По умолчанию в качестве фигуры будет выбран квадрат, поэтому если вы хотите использовать круг, горизонтальный или вертикальный прямоугольник, сделайте это прямо сейчас. Также здесь вы можете создать свой значок для Play Store (если ваш дизайнер уже сделал его, не беспокойтесь об этом).

Пришло время создать иконку и закончить урок.

Когда вы довольны иконкой, нажмите на кнопку next, и вас попросят подтвердить ваше действие. Здесь вы можете указать каталог res, выходные каталоги и предыдущие выходные файлы. Если вы довольны результатом, а также вы используете контроль версий (надеюсь, что да), не забудьте добавить вновь созданные файлы.

Последний шаг — собрать все в приложение и убедиться, что все работает и смотрится правильно. Если результат совпадает с вашими ожиданиями, поздравляем, вы справились с задачей! Урок окончен!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Contact

Давайте работать вместе!

Пишите нам и найдем точки соприкосновения, может станем партнерами, а может поможем вам зайти в нашу чудесную нишу

Вы разработчик?

Пишите! Нам постоянно нужны новые кадры, либо можем помочь в продвижении вашего приложения

Новичок?

Поможем быстро войти в нишу, не тратя годы на понимание

Давно в нише?

Рады будем пообщаться как на темы whitehat, так и blackhat тематики ^_^ + всегда есть что обсудить по поводу рекламных сетей

ПИШИ В TELEGRAM!

Contact