Какое разрешение у иконок

Как создать иконки для приложений на Android и iOS

Иконка приложения для Android

1. Разрешение экранов устройств

Приложения для Android разрабатываются с учетом размера устройства и разрешения экрана.

Графика и разметка в приложениях измеряются в единицах — DPI (количество точек на дюйм).

2. Категории DPI

  • Low DPI (LDPI) = 120DPI
  • Medium DPI (MDPI) = 160DPI
  • High DPI (HDPI) = 240DPI (Nexus S, SGS2)
  • Extra High DPI (XHDPI) = 320DPI (Galaxy Nexus, Nexus 4, SGS3)
  • Extra Extra High DPI (XXHDPI) = 480DPI (HTC One и SGS4)
  • Размер и формат иконок запуска приложения (launcher icon) для Android

    Иконка приложения должна разрабатываться специально для Android. Используйте инструкции по разработке иконок от Android в стиле Material Design, не подражайте визуальным элементам и стилям других платформ.

    Базовый размер — 48dp, с краями 1dp — для низкого разрешения. Чем выше плотность пикселей экрана (DPI), тем больше отображается деталей. Для остальных разрешений нужно увеличить масштаб на 400% 192 x 192 dp (с краями 4dp).

    Хотите идеальную иконку для любого разрешения и не ищете легких путей? Сделайте несколько иконок разных размеров для всех вариантов разрешений, воспользовавшись таблицей ниже. Можно включить дополнительные значения для последовательного увеличения размеров. Например, иконки 96 x 96 пикселей xhdpi могут содержать промежуточный размер 88 x 88 пикселей с отступами в 4 пикселя с каждой стороны. Отступы образуют легкую тень и гарантируют четкость иконки на любом фоне.

    Вы, конечно, помните: любое масштабирование должно сохранять пропорции изображения.

    Иконки приложения для публикации на Google Play

    Эта иконка используется только для Google Play и не заменяет иконку запуска приложения (launcher icon). Иконка публикации на Google Play должна содержать тот же контент, что и иконка запуска приложения, за исключением некоторых идентификационных знаков.

    Раздел “Рекомендуемые”

    В разделе «Рекомендуемые» можно продемонстрировать потенциальным пользователям графические возможности приложения.

    Требования к иконке в разделе «Рекомендуемые» :

  • JPEG или 24-битный PNG (без альфа-канала)
  • 1024 х 500 пикселей
  • Расположение

    Картинка для раздела «Рекомендуемые» располагается над сведениями о приложении в Play Маркете. Если загружен проморолик, поверх нее будет расположена кнопка «Воспроизвести».

    • Не размещайте важную информацию по краям, особенно в нижней трети рамки.
    • Логотип поместите по центру, выровняйте по горизонтали и вертикали.
    • Для текста используйте крупный шрифт.
    • Помните, что картинка может показываться отдельно, без иконки приложения.
    • Цели иконки приложения

      У иконки приложения есть 3 основных цели:

      1. Продвижение бренда, рассказ о цели приложения.
      2. Помощь пользователю в поиске приложения в Google Play.
      3. Функция запуска.

      Продвижение бренда

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

      Образцы иконок приложений.

      Помогите пользователю найти приложение в Google Play

      Иконка должна привлекать внимание пользователя во время скроллинга. Качественный дизайн иконки — однозначный сигнал, о том, что Ваше приложение такого же высокого качества.

      Правила дизайна иконки для Android

      • Смотрится детально и четко в небольшом размере.
      • Сочетается с любым фоном.
      • Освещается верхней подсветкой.
      • Может быть уникальной формы.
      • Не является обрезанным вариантом большего изображения.
      • Имеет одинаковый вес с другими иконками.
      • Перспектива не противоречит другим иконкам.
      • Располагается ее по ходу движения.
      • Имеет небольшую глубину.
      • Слишком растянутые в длину иконки, занимающие мало пространства, не привлекают внимания пользователей и плохо сочетаются с различными фонами.

        Правильно и неправильно

        Детали слишком сложного значка плохо различаются в маленьком размере.

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

        Значок со слишком тонким контуром плохо выделяется среди других значков.

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

        Иконка для приложения на iOS

        Размеры

        У каждого приложения должна быть маленькая и большая иконка. Маленькая иконка используется на домашнем экране и в системе после установки. Большая иконка нужна для App Store.

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

        Также маленькие иконки нужны для показа:

      • в поиске Spotlight,
      • в приложении настроек смартфона.
      • Если у вас нет маленьких иконок, iOS уменьшит главную иконку приложения для показа в этих директориях.

        Правила дизайна иконки для iOS:

        Подкупающая простота

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

        Четкий фокус

        Создайте иконку с четким фокусом, который привлекает внимание и идентифицирует приложение.

        Узнаваемость

        Никто не будет анализировать иконку, чтобы понять ее значение.

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

        Без прозрачности, простой фон

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

        Без надписей

        Используйте надписи только как часть логотипа. Название приложения появляется под иконкой на домашнем экране. Не добавляйте в иконку слова, которые повторяют название или являются инструкциями к приложению, например, “Смотри” или “Играй”. Если дизайн иконки включает слова, добавьте только значимые для содержания приложения.

        Без фото, скриншотов и элементов интерфейса

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

        Без точных копий продуктов Apple

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

        Не помещайте повсюду в интерфейсе иконку приложения

        Пользователя может сбить с толку иконка приложения, встречающаяся повсюду в интерфейсе. Просто используйте цветовую схему иконки в интерфейсе. См. Цвет.

        Протестируйте иконку на разных обоях

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

        Сохраняйте углы иконки квадратными

        Система округляет углы иконки автоматически.

        Вот и все! Желаем удачи и много красивых иконок для ваших приложений.

        blog.sbssoft.ru

        Особенности иконок для Windows 7

        Что изменилось в мире иконок с выходом новой версии Windows.

        Операционная система Windows 7 обзавелась новым интерфейсом, который, с одной стороны, более комфортный в работе, а с другой, кардинальным образом не меняет пользовательский опыт, накопленный при использовании предыдущих версий Windows. Описанные изменения относятся и к иконкам.

        Перенеся в «семерку» известный нам по предыдущей версии визуальный стиль Aero, компания Микрософт сохранила внешний вид и основные требования к созданию иконок.

        Для создания иконок по-прежнему, нужно следовать нескольким простым правилам:

      • Стиль иконок должн быть более реалистичный, чем иллюстративный, но не совсем фото-реалистичный.
      • Иконки используются в качестве символа, они должны выглядеть лучше фото-реалистичных!
      • Максимальный размер иконок остался прежним — 256×256 пикселей, что делает их использование пригодными для дисплеев с большим разрешением экрана.
      • Иконки панели инструментов должны быть менее детализированными, для облегчения узнаваемости в небольших размерах.
      • Необходимо помнить хороший дизайн иконок:

      • Улучшает взаимодействие с программой.
      • Облегчает поиск необходимых объектов и действий.
      • Придает приложению привлекательный, законченный вид.

      Иконки в Windows 7 должны быть либо трехмерными объектами, показанными в перспективе, либо двухмерными показанными на плоскости (документы, листы бумаги — т.е. действительно плоские объекты).

      Стандартные размеры иконок используемых в Windows 7 остались прежними: 256х256, 48х48, 32х32 и 16х16 пикселей.

      Не забывайте, при создании иконок, избегать основных дизайнерских искушений.

      Нужны иконки для более поздних версий — Windows 8 и Windows 10? Взгляните на нашу коллекцию иконок Icons8.

      Какое разрешение задавать макету дизайна мобильного приложения?

      Макет должен иметь тот же самый логический размер, что и экран мобилы. Например у айфона 6 это 375х667, у айпада 1024х768 пикселей и т.д. Вот и всё собственно.

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

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

      На примере: мы разрабатывали приложение для туристического гида по Черногории. Только вертикальная ориентация, и два разрешения (мы брали средние по охвату аудитории):
      1600×2400 px (400 dpi)
      900×1800 px (400 dpi)
      и уже с этими исходниками разработчик работал самостоятельно

      toster.ru

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

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

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

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

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

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

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

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

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

      Выбираем правильный размер иконок

      Иконки для Windows, Mac OS X, iOS, Android и Linux

      Для каждой операционной системы существуют свои стандартные размеры иконок. Кликните на названии операционной системы, чтобы прокрутить страницу вниз к интересующему разделу.

      Размеры иконок для Windows Vista, Windows 7 и Windows 8

      Иконки приложений и иконки Панели управления

      Иконки должны быть в формате .ico.
      Полный набор должен включать следующие размеры:

      Иконки для Windows 8 (Metro Design)

    • Иконка приложения 30х30, 50×50, 150×150
    • Иконки панели инструментов 26х26
    • Панель инструментов

      Необходимые размеры: 16×16, 24×24, 32×32.
      Помните, иконки должны быть плоскими даже в максимальном размере 32×32.

      Диалоговые окна и помощники

      Необходимые размеры: 32×32 и 48×48

      Размеры иконок для Mac OS X

      Иконка приложения

      Если вы хотите быть уверены, что ваша иконка будет смотреться одинаково хорошо на экранах любого разрешения, необходимо создать ее в следующих размерах:

      Панели инструментов

      оздавайте иконки в стандартном и высоком разрешении (для мониторов с «Ретина» дисплеем). Необходимо подготовить два размера иконок:

      Сохраняйте иконки в формате PNG.

      Боковое меню

      Создавайте иконки в трех размерах:

    • 18×18
    • 32×32 пиксела (если используете PDF)
    • Если вы сохраните иконки для бокового меню в формате PDF, что рекомендуется компаниемй Apple, OS X автоматически изменит размер вашей иконки для мониторов высокого разрешения. Если же вы сохраняете иконки в формате PNG, необходимо подготовить следующие размеры: