Создание иконок товаров не так сложно, как может показаться на первый взгляд. Узнайте больше о том, как создать свой первый значок приложения для Android с нуля!
Независимо от того, через какую торговую площадку или сервис распространяется приложение, его значок приложения — это первое, что заметит потенциальный пользователь. Первое впечатление имеет первостепенное значение при попытке привлечь новых пользователей, а это означает, что значки являются ключевыми компонентами любого приложения. И, независимо от цели приложения, создание красивой иконки приложения должно быть важной частью этапа разработки каждого приложения. Хотя многие разработчики технических приложений оставляют графику преданным дизайнерам, понимая основы дизайна и их применение — это то, что может сделать каждый, если у него есть талант к экспериментированию и анализ. Иконки приложений не являются исключением!
В этом руководстве рассказывается о создании адаптивного значка для примера приложения Android с использованием программного обеспечения с открытым исходным кодом. Хотя конечный результат может быть не в том формате, который вам нужен, многие советы по дизайну, обсуждаемые здесь, будут справедливы для разных платформ.
После выпуска «адаптивных значков» в Android Oreo значок приложения может состоять из трех основных слоев: непрозрачный фоновый слой, слой переднего плана с поддержка прозрачностии маска который определяет форму значка. Все эти слои имеют размер 108 x 108 dp, хотя пользователю может быть виден только внутренний слой 72 x 72 dp; другая область, отрезанная маской сверху, используется для специальных эффектов в пользовательском интерфейсе, чтобы значок выглядел динамично. Для непосвященных, дп или независимый от дисплея пиксель выступает в качестве единицы измерения для всего интерфейса Android и определяется как размер один пиксель на дисплее с разрешением 160 точек на дюйм.)
Ник Батчер из Google рассказывает о круге размером 66 dp в центре значка, который не может быть отсечена маской, называемой «безопасной зоной». Именно здесь позже будут располагаться основные элементы нашего дизайна иконок, когда мы приступим к реальному проектированию. Все, что выходит за пределы этого радиуса 33 dp, может быть не видно на значке, пока на нем включена маска формы.
Поскольку из-за масштабирования пользовательского интерфейса значкам лучше быть векторными изображениями, для создания значка нам понадобится редактор векторной графики. Инкскейп имеет открытый исходный код и является отличной альтернативой более дорогому программному обеспечению, поэтому для целей данного руководства мы выберем его. Я также разработал файл проекта доступна здесь у него выделена безопасная зона и собственная ключевая линия дизайна Google, а также изящная маска слоя, которая позволяет нам предварительно просмотреть форму значка.
Когда файл проекта открыт в Inkscape и Заливка и обводка (Shift+Ctrl+F), Экспорт PNG изображения (Shift+Ctrl+E) и Слои (Shift+Ctrl+L) панели открываются, и мы готовы приступить к работе. Панель «Слои» — это то место, где находится основная часть проекта, с передний план и Фон слои, предназначенные для размещения их титульных компонентов, и Методические рекомендации и Маска предназначено для включения и выключения (нажатием на маленький значок глаза рядом с ними) для справки.
Значок — это выражение индивидуальности приложения. Таким образом, оно должно учитывать как индивидуальность приложения, так и рекомендации по дизайну для конкретной платформы, например те, которые используются в Android. Язык материального дизайна может предложить. В целях демонстрации предположим, что мы работаем над приложением погоды, которое использует элементы Material. Мы могли бы использовать классический мотив солнца и облаков, чтобы сообщить пользователю о цели приложения, и добавить немного доработайте этот базовый дизайн, используя тени и геометрию, чтобы он хорошо вписывался в среду Android.
Фон
Начнем с настройки фона, который будет состоять из голубого неба и желтого солнца в центре. Превращение Маска невидимый, я выбираю и делаю видимым Фоновый слой, заполните весь холст Создание прямоугольников и квадратов инструмент (F4) и установите цвет заливки прямоугольника в Заливка и обводка до 64B5F6FF (голубой) в соответствии с Цветовая палитра материала. Затем я выбираю Создание кругов, эллипсов и дуг (F5) и, удерживая Shift и Ctrl, нарисуйте круг от центра ключевой линии до второго по величине круга и установите его цвет на FFEE58FF, что дает нам маленькое теплое солнце. Всегда полезно придерживаться базовой геометрии при любом проектировании, а язык дизайна Android особенно поощряет простоту. Чтобы соответствовать рекомендациям по материалам, я также добавляю солнцу легкую тень через Фильтры → Тени и свечение → Тень.
передний план
Подходит к передний план, Я рисую группу облаков вокруг солнца, рисуя круги из окружностей других кругов и присваивая им цвет заливки EEEEEEFF. Затем я группирую круги соответствующим образом, щелкнув правой кнопкой мыши несколько объектов и выбрав Группаи запустите генератор теней на двух финальных фигурах, которые я получу в итоге. Превращение Методические рекомендации невидимый и переключаемый передний план и Фон в качестве альтернативы можно увидеть составляющие слои значка нашего погодного приложения. Если значок приложения когда-либо перетащить на главный экран, облака накроются каскадом против неподвижного солнца!
Результат
Маска теперь можно сделать видимым и настроить с помощью Редактировать пути по узлам (F2), чтобы попробовать смоделировать маски различной формы. Кроме того, два слоя можно экспортировать отдельно, используя команду Экспорт PNG изображения панель для использования в Android-студии, и вместе для Значок Google Play.
При создании значка продукта всегда полезно попытаться понять цель приложения, выделить ее в наиболее абстрактную визуальную форму и представить ее с помощью простой геометрии. Чем проще какой-либо компонент в дизайне, тем лучше и надежнее он обычно работает, и это справедливо и для графического дизайна. В большинстве случаев форма объекта на переднем плане и сплошной цвет или узор на заднем плане (или наоборот) работает нормально, но, как и в нашем примере, можно использовать другой слой объектов, если он чувствуется. необходимый; слишком много наложений или использование теней только усложнят дизайн значка.
Подробнее о дизайне иконок можно прочитать в разделе «Интерфейсы материалов» на официальном сайте. Сайт материалови получите бесплатные системные значки для использования в дизайне значков с сайта тот же сайт.