Как делать иконки для андроид



Как создать иконки для приложений на 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 часто обновляются, иконка при этом будет выглядеть устаревшей.

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

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

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

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

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

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

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

Источник

Lepzon.ru

Как сделать свои иконки для телефона Android и iPhone

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

Изменить иконку для Android

В Google Play полно приложений с большим набором готовых значков для приложений на разный вкус. Но далеко не каждое из них умеет создавать с нуля иконку. В X Icon Changer вы сможете заменить скучные шаблонные картинки своими. Выберите из галереи телефона фотографию и обрежьте её, чтобы сделать из неё иконку для приложения.

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

1. Запускаем приложение. Перед вами на экране появится список уже установленных программ. Выберите ту, иконку которой желаете заменить.
2. На следующем экране можно изменить название программ. Нажмите на маленький карандаш в строке с именем.
3. Ниже расположено три вкладки: Library — библиотека со значками из приложения, выберите любую они бесплатны; Photo — откроется галерея с вашими изображениями, выберите своё изображение для иконки; Apps — добавление значков из других приложений (в том числе установленных).
4. Установите свою иконку и нажмите вверху кнопку Ok.

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

Скачать X Icon Changer в Play Market.

Как добавить свои иконки на Айфоне

У мобильных устройств с IOS со значками дела обстоят лучше. Здесь о них заботятся сами разработчики. Для настройки рабочего стола своего смартфона нужно перейти в приложение Команды. Оно есть во всех последних версиях операционной системы от Apple.

1. Нажмите пустую плашку под названием Создать команду и далее Добавить действие.
2. Выбираем иконку с буквой X и названием Скрипты.
3. Листаем список вниз и находим пункт Приложения.
4. Нажмите кнопку Выбрать и найдите программу, на которой желаете заменить иконку на рабочем столе телефона.
5. Затем нажмите вверху три точки и выберите Добавить на экран Домой.
6. Нажмите на значок внизу и кнопку Выбрать фото.
7. В галерее iPhone выберите заранее подготовленную иконку.
8. Введите также название программы, если это необходимо. Или запишите прежнее.

Завершите настройку новой команды и откройте главный экран. На нём должен быть расположен новый значок. Запуск программы с новой иконкой теперь будет происходить через мимолётный экран с командами. Это можно считать небольшим недостатком. Но оно практически не мешает.

Набор иконок для телефонов Xiaomi

Однообразный рабочий стол на телефоне может быстро надоесть. Чтобы смартфон выглядел привлекательным используйте разные обои и наборы значков. Приложение MIU 11 содержит огромный набор разнообразных иконок, которые вы сможете бесплатно использовать на смартфонах с Android.

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

Скачать MIU 11 в Play Market.

Сделать иконку ссылкой на рабочем столе

Телефон постепенно заменяет компьютер. На нём мы можем смотреть фильмы и посещать интересные форумы. Чтобы каждый раз не писать в поисковой строке название интересующего сайта, добавьте значок-ссылку на рабочий стол в Android или Айфон. Для этого отдельное приложение не понадобится.

Каждый браузер для мобильных устройств имеет функцию для добавления ссылки на главный экран.

Мобильный Яндекс Браузер

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

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

Откройте главный экран и найдите ссылку-значок. Теперь при нажатии на него будет сразу открываться нужный сайт. Миниатюра браузера, через который будет открываться ссылка, указана на значке.

Google Chrome для телефона

В браузере Хром аналогичным способом добавляется ярлык сайта на рабочий стол.

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

Opera Mini

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

Как уменьшить иконки рабочего стола на телефоне

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

1. Нажмите иконку настроек.
2. Найдите в списке пункт Расширенные настройки или Специальные возможности.
3. В списке параметров найдите раздел, отвечающий за размер элементов на экране.

Параметры иконок можно попытаться найти через поисковую строку настроек. Используйте также слово «значки». Некоторые модели не позволяют настраивать их. Используйте приложение Mi Launcher. В нём можно изменять размеры любых виджетов и иконок на рабочем столе телефонов Android.

Источник

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

Обновлено 6 февраля, 2022

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

Что такое значок приложения

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

По статистике 70% мобильных приложений загружаются после поиска в App Store или Google Play (остальные — в результате рекламных кампаний, промо в соцсетях, обзоров и т.д.). Поэтому ваша задача — создать дизайн, который мгновенно привлечет внимание и вызовет желание узнать, что стоит за визуальным образом.

Технические характеристики иконок для Android и iOS

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

Google Play Store (Android)	App Store (iOS
Размер	512 px × 512 px	iPhone: 180px × 180px (60pt × 60pt @3x), 120px × 120px (60pt × 60pt @2x) iPad Pro: 167px × 167px (83,5pt × 83,5pt @2x) iPad, iPad mini: 152px × 152px (76pt × 76pt @2x) App Store: 1024px × 1024px (1024pt × 1024pt @1x)
Формат	32-разрядный PNG	PNG
Цветовое пространство	sRGB	sRGB или P3
Форма	Полный квадрат. Google Play автоматически скругляет углы (радиус скругления — 20% от размера) и добавляет тени	Квадрат без закругленных углов и теней

Топ-пять аспектов дизайна иконок

21% миллениалов удаляют мобильное приложение, если им не нравится, как иконка выглядит на экране. Поэтому важно продумать не только функциональность, но и эстетическую составляющую.

1. Простота

Лаконичность — это ключ к удачному дизайну. Вот какие нюансы нужно учесть:

• Отсекайте лишнее. Чем больше деталей — тем сложнее будет распознать и запомнить изображение, а также масштабировать его. Помните, что иконка должна быть хорошо различима в разных размерах: в магазине приложений, меню телефона и на панели настроек.
• Используйте символику. Сфокусируйтесь на одном узнаваемом элементе, как сделали Pinterest (кнопка), Snapchat (привидение) или Instagram (камера). В качестве иконки может выступать главный визуальный символ бренда — логотип, если он отвечает принципам минимализма.
• Лайфхак: изучите значки ваших любимых приложений и проанализируйте, какие символы использованы в их разработке.

2. Цвет

Этот элемент брендинга может стать решающим при выборе приложения. Рассказываем, как правильно подобрать цветовую гамму:

• Используйте не больше двух-трех цветов, как большинство популярных компаний, например, Airbnb, Pandora или Dropbox. Большое количество оттенков будет сливаться в одно нечеткое пятно.
• Берите пример с топ-брендов. Исследование показало, что чаще всего они выбирают для графики синий цвет (Google Calendar, Safari, Twitter, LinkedIn). Второе и третье места делят красный и белый, причем красный чаще всего используют бренды, связанные с едой и напитками.
• Убедитесь, что выбранные цвета соответствуют вашему бизнесу, привлекают целевую аудиторию и согласуются с остальными элементами фирменного стиля.
• Проверьте, как значок смотрится на разных фонах — цветном, черном и белом.

3. Согласованность

Визуальный символ приложения должен соответствовать его содержанию. Гармоничный образ помогает воспринимать продукт как единое целое и вызывает более сильную эмоциональную привязанность.

• Используйте один язык дизайна: цветовую палитру, стиль и приемы. В вашем приложении присутствует градиент, необычная геометрия или ретро-стиль? Примените их и в иконке.
• Если у вас несколько приложений, оформите их в едином стиле, как сделал Adobe для своих продуктов: Photoshop Sketch, Illustrator Draw, Lightroom, Skan и других.
• Привяжите символику к функциональности приложения, чтобы пользователь с первого взгляда понял, о чем ваш продукт. К примеру, винный рейтинг Vivino использует виноградную гроздь, а музыкальный сервис Spotify — символ громкости динамика.

4. Лишние элементы

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

• Люди воспринимают изображения в 60 тысяч раз быстрее, чем слова, а при выборе приложения скорость может иметь решающее значение.
• Помните: если вам приходится использовать слова, значит, вы не исчерпали весь потенциал визуальных образов. Подбирайте метафоры к вашему бизнесу, пока не найдете подходящий символ.
• Исключения — короткие названия брендов (BBC News, Uber) или использование первой буквы («F» у Facebook и Foursquare).
• Тот же принцип работает и с фотографиями, детали на которых будут неразличимы в маленьком разрешении. Если у вас есть любимый снимок, который характеризует бизнес, используйте для брендинга его элементы, создав из них векторное изображение.

5. Уникальность

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

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

Source: by Ramotion

Бонусные советы:

• Проведите A/B-тестирование. Если не можете выбрать между двумя вариантами иконок, перед запуском организуйте маркетинговое исследование. A/B-тестирование — это метод, который позволяет запустить в работу оба варианта одновременно и сравнить, какой из них эффективнее.
• Учитывайте сезонность. Подумайте, как вы можете «оживлять» иконку к праздникам или громким событиям: Рождеству, «черной пятнице» или Хэллоуину. Это может быть изменение цвета или добавление небольшого характерного элемента.
• Следите за трендами. Соблюдайте грань между слепой погоней за модой и актуальностью. Не нужно обновлять иконку каждый сезон, но следить за глобальными трендами стоит. Например, если все конкуренты уже перешли на модную плоскую графику, а вы до сих пор используете 3D-эффект, значит, пора сменить значок.

Три способа создать иконку

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

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

2. Онлайн-сервисы:

• Logaster. Онлайн-генератор создаст логотип, который вы можете кастомизировать и скачать бесплатно в небольшом размере, подходящем для иконки мобильного приложения.
• Canva. Бесплатный редактор с тысячами шаблонов графики и возможностью персональной адаптации.
• Iconsflow. Сервис с более чем 200 тысяч значков: просто выберите подходящий, измените цвет, размер и добавьте эффекты.
• Appicon. Этот редактор адаптирует готовое изображение под размеры иконок для iOS и Android.

Мечтаете о собственном лого?

Введите название компании в поле ниже и наш генератор предложит вам лучшие дизайны!

3. Дизайнер. Если вам недостает опыта, но вы готовы выделить бюджет на брендинг, наймите графического дизайнера, который специализируется на иконках приложений: обратитесь на биржи (Upwork, Fiverr), попросите рекомендаций у знакомых или поищите в соцсетях.

Заключение

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

• Позаботьтесь о простоте, узнаваемости и уникальности.
• Следите за трендами, чтобы оставаться актуальным.
• Учитесь у топ-брендов. Например, из этого списка самых популярных мобильных приложений 2019 года:

1. Facebook Messenger
2. Facebook
3. WhatsApp
4. TikTok
5. Instagram
6. SHAREit
7. Likee
8. Snapchat
9. Netflix
10. Spotify

Обновлено 6 февраля, 2022

Редактор блога компании Logaster, контент-маркетолог. Эксперт по веб-маркетингу и брендированию. Умеет писать просто о сложном. По ее статьям можно построить успешный бренд и начать успешное продвижение в интернете.

Источник