сколько пикселей иконка приложения

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

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

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

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

Размер и формат иконок запуска приложения (launcher icon) для Android

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

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

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

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

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

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

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

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

Цели иконки приложения

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

Размеры иконок для Android приложений

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

Ну а точнее — все картинки можно подобрать под конкретную плотность экрана.

Для этого в проекте сразу создаются папки:

В них нужно положить адаптированные изображения.

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

В своих проектах я часто пользуюсь только разными размерами иконки для запуска (их рекомендуют именовать с префиксом ic_launcher).

То есть вам нужно сделать файлы с одним названием, различные только разрешением, и расположенными по соответствующим папкам.

Вот размеры в пикселях для каждой плотности экрана:

Когда плотность экрана не критична, я создаю папку простую папку drawable и храню все картинки в ней.

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

Во время публикации в маркете (play.google.com), понадобится ещё и иконка 512×512 и картинка для рекламы 1024×500.

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

Вот код примера получения плотности через getResources().getDisplayMetrics().densityDpi:

Если поставить этот код при создании активности (т.е. в методе OnCreate), мы получим сообщение с плотностью экрана текущего устройства.

А вот таким способом можно получить размер экрана устройства с помощью класса Configuration:

Ширину и высоту дисплея можно получить так:

Обратите внимание на проверку версии апи на устройстве, для версии 13+ размеры получаются по-другому.

Источник

Сколько пикселей в значках приложений?

Сколько пикселей должно быть у иконки?

Крупные значки — 96 x 96 пикселей (автоматически отображаются в Windows начиная с версии 256). Средние значки — 48 x 48 пикселей. Маленькие значки — 16 х 16 пикселей. Список — 16 х 16 пикселей.

Какого размера значки приложений?

Размеры значков приложений

Сколько пикселей у значка приложения Iphone?

Иконки для приложений только для iPhone

Что делает значок хорошего приложения?

5 советов по созданию идеального значка мобильного приложения

Как конвертировать JPG в ICO?

Как конвертировать JPG в ICO

Какой самый лучший размер иконок?

Выбор правильного размера и формата значков

Какого размера файл значка?

Требуется формат файла ico. Для классического режима полный набор — 16×16, 24×24, 32×32, 48×48 и 64×64.
…
Для высокого разрешения.

Могу ли я увеличить значки на моем Iphone?

На экране настроек нажмите «Дисплей и яркость». Затем нажмите «Просмотр» на экране «Дисплей и яркость». На экране «Масштаб дисплея» нажмите «Увеличено». Значки на экране примера увеличены, чтобы показать, как будет выглядеть увеличенное разрешение экрана.

Как изменить размер значка?

Сначала зайдите в меню настроек. Вы можете сделать это, потянув панель уведомлений вниз (дважды на некоторых устройствах), а затем выбрав значок шестеренки. Отсюда прокрутите вниз до записи «Показать» и коснитесь ее. В этом меню найдите параметр «Размер шрифта».

Сколько пикселей у iPhone?

Сводка по дисплею устройства iOS

Что такое 1x 2x 3x в iOS?

@ 2x, @ 3x: когда вы можете разместить больше пикселей на одной и той же площади экрана, вам также потребуются изображения с более высоким разрешением. Здесь на помощь приходят 1x, 2x и 3x. Вы предоставляете файлы изображений с более высоким разрешением для тех же ресурсов, которые автоматически выбираются iOS, когда ваше приложение работает на модели iPhone с высоким PPI.

Какое самое высокое разрешение на iPhone?

Какое максимальное соотношение пикселей доступно на iPhone? iPhone X с разрешением 2436×1125 пикселей при 458 ppi.

Как выбрать значок приложения?

Изменить отдельные значки на вашем Android-смартфоне * довольно просто.

Как сделать иконки для iPhone?

КАК НАСТРОИТЬ ЗНАЧКИ iOS 14 НА СВОЕМ IPHONE

Как создать иконку?

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

Источник

О формате ICO

Графический формат ICO применяется в Windows для системных значков, которыми тот или иной файл или формат файла обозначается в графическом интерфейсе. Обозначение ICO – сокращение от Icon (иконка, значок).

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

Формат ICO включает в себя не один файл значка, а целый набор. Дело в том, что в разных видах отображения показываются разные размерные варианты значка. Уменьшенный автоматически большой вариант может оказаться неразборчивым, а увеличенный маленький – размытым. Поэтому ICO – это файл, включающий в себя несколько размеров иконки.

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

Стандартная иконка имеет «квадратное» соотношение сторон. В файле ICO предполагаются следующие размеры: 16х16, 32х32 и 48х48 пикселей. Существуют и менее употребительные варианты, со стороной от 24 до 128 пикселей. Теоретически предельное допустимое значение стороны квадрата – 256 пикселей, однако на практике такие иконки употребляются редко. Некоторые файловые менеджеры способны масштабировать иконки (например, Total Commander). Пользователь компьютера обычно довольствуется стандартными иконками, которые поставляются с каждой программой. Но можно и украсить свой компьютер и упростить нахождение нужных файлов и папок, если сопоставить им отличающиеся иконки. Часто в файловых менеджерах есть собственный набор стандартных иконок, но можно и создать собственные.

Существует такая разновидность файла ICO, как Favicon. Она отображается в браузере как «иконка» веб-сайта. Для favicon установлен стандартный минимальный размер – 16х16 пикселей. Более подробно о иконке для сайта читайте в статье «Иконка сайта».

Конвертация

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

Исходный файл может иметь практически любой формат (список поддерживаемых форматов). Рекомендуем позаботиться о том, чтобы исходный файл был максимально качественным. Это могут быть PSD, TIFF и другие файлы. Если ваша иконка – результат дизайнерских усилий в профессиональном графическом редакторе, рекомендуем использовать в качестве исходного файла непосредственно файл «родного» формата редактора.

Установите максимальное значение стороны иконки. Если вы её не установите, конвертер автоматически уменьшит файл до максимально допустимого значения – 256х256 пикселей.

Наш конвертер предлагает автоматически сгенерировать наиболее популярные варианты размера значка. При конвертации файла в формат ICO вы можете выбрать не только размеры значков, представленные в конечном файле, но и глубину цвета. Для иконок размера 256х256 пикселей она может составлять 32 бита, для меньших иконок она автоматически будет составлять 8 бит.

Размер полученного файла ICO будет несколько превышать суммарный размер входящих в него файлов. Причина этого – то, что все файлы отдельно взятых иконок хранятся в ICO-файле в несжатом виде.

Источник

Что такое плотность пикселей и как её учитывать при проектировании мобильных интерфейсов

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

Редакция рубрики «Интерфейсы» публикует перевод материала, выполненный командой Sketchapp.

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

С тех времен технологии экранов заметно продвинулись вперед, — сейчас даже самые простые дисплеи имеют разрешение между 115 и 160 пикселей на дюйм (PPI— pixel per inch). Но новая глава в этой истории началась в 2010 году, когда Apple представила iPhone с Retina-дисплеем — суперчетким экраном, удвоившим количество пикселей на дюйм. В результате графика стала четче, чем когда-либо.

Чтобы поддерживать те же физические размеры элементов пользовательского интерфейса, пришлось увеличить количество пикселей на дюйм. Кнопка, которая раньше занимала 44px, стала занимать 88px.

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

Решением стали пункты (points), или pt. Один пункт соответствует одному пикселю на экранах до поколения Retina и двум пикселям на экранах с Retina. Теперь, если дизайнеру говорят, что высота какого-либо элемента — 44 пикселя, он может адаптировать этот размер под любой коэффициент плотности пикселей — 1х, 2х или 3х в случае с iPhone 6 Plus.

PT и DP

Конечно, это все актуально не только для устройств Apple. Каждая операционная система — десктопная или мобильная — поддерживает экраны с высоким ppi/dpi. В Google придумали свою независимую от пикселей единицу измерения для Android, которая называется DIP — пиксель, не зависящий от плотности, сокращенно «dp». Это не эквивалент пунктам в iOS, но идея похожа. Это универсальные единицы измерения, которые можно конвертировать в пиксели с помощью масштабного множителя устройства (2x, 3x ).

Возможно, вас интересует физический размер пункта. На самом деле, дизайнеры интерфейсов не должны об этом думать, так как у них нет контроля над аппаратными особенностями экранов разных устройств. Дизайнерам нужно знать, какие плотности пикселей принял производитель для своих устройств, и позаботиться о подготовке интерфейсов в 1x, 2x, 3x и так далее.

В устройствах Apple нет единой плотности пикселей, которая представляет один пункт — это зависит от конкретного устройства (см. «Восприятие масштаба» ниже). В iOS пункт варьируется от 132 точек на дюйм до 163 точек на дюйм. На Android DIP всегда равен 160 ppi.

Контролируемый хаос

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

Дизайн в векторе

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

Второй урок: мы должны все рисовать в масштабе 1х. Другими словами, создавайте дизайн, используя точки для всех измерений, затем масштабируйте в различные более крупные пиксельные плотности при экспорте. Масштабирование 2x-графики на 150% для создания версии в 3х провоцирует появление размытых контуров, поэтому это не лучший вариант. А вот масштабирование графики 1х в 200% и 300% позволяет сохранить четкость.

Разрешение макетов приложений для iPhone должно быть не 750×1334, а 375×667 — это как раз то разрешение, в котором приложение будет отображаться. Большинство инструментов дизайнера не отличают пункты от пикселей, так что можно считать, что пункты и есть пиксели, а затем просто экспортировать исходники в двукратном и трехкратном размерах.

Притворяйся, пока это не станет правдой

Стоит упомянуть, что иногда устройства лгут. Они делают вид, что их коэффициент преобразования пикселей в пункты, например, 3х, а на самом деле, он 2,61х, а сам исходник масштабируется в 3х для удобства. Так поступает, например, iPhone Plus. Он сжимает интерфейс, сделанный в 1242×2208 до разрешения экрана в 1080×1920.

Так как графика лишь немного уменьшается (87%), результат по-прежнему выглядит достойно — линия толщиной в 1px на экране почти в 3x выглядит все равно невероятно четкой. И есть шанс, что в будущем Apple представит настоящий 3x iPhone Plus, так как нужные аппаратные возможности вполне могут быть доступны для продукта, выпускаемого в таких огромных количествах.

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

Такое масштабирование нежелательно, так как все, что вы хотите сделать четким, станет размытым из-за интерполяции. К сожалению, по мере того, как плотность пикселей доходит до 4x и выше, размытость, вызванная нецелочисленным масштабированием, становится гораздо менее уловимой, так что я прогнозирую, что производители устройств со временем будут все больше использовать этот подход. Мы можем только надеяться на то, что недостатки в производительности их сдержат.

Восприятие масштаба

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

Вот менее драматичный и очень правдивый пример: иконки приложений на планшете должны быть больше таких же иконок на телефоне. Это реализуется двумя способами: с помощью меньшей плотности пикселей или разных размеров иконок.

Низкая плотность пикселей

Крупные экраны, на которые мы смотрим на расстоянии, обычно располагают меньшей пиксельной плотностью. У телевизора может быть 40 пикселей на дюйм — и, как правило, этого хватает. Плотность пикселей Retina-дисплеев на iPad составляет около 264 ppi; на iPhone — 326 ppi. Так как пиксели на iPad больше (а плотность меньше), весь интерфейс становится немного больше. Это объясняется дополнительным расстоянием между глазами пользователя и экраном iPad.

Разные размеры

Иногда низкой плотности пикселей недостаточно — отдельные элементы дизайна должны быть еще больше. Это случилось с иконками на iPad. На iPhone их размер 60×60 пикселей, но экран на iPad больше, так что практичнее иконки размером 76×76 пикселей.

Изменение размера элементов интерфейса под разные устройства — дополнительная работа дизайнера.

Материалы по теме

Мы только что обсудили массу сложностей, с которыми сталкиваются дизайнеры. К счастью, в разработке интерфейсов используются единицы, которые не зависят от плотности (как pt или dp).

Список ресурсов по данной теме:

Есть еще некоторые ресурсы по пиксельной плотности для дизайнеров.

Источник