Иконка рекомендации: Значок для приложения: как создать, технические характеристики, аспекты дизайна


17.11.2020 Facebook Twitter LinkedIn Google+ Разное


Содержание

Значок для приложения: как создать, технические характеристики, аспекты дизайна

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

  1. Что такое значок приложения
  2. Технические характеристики иконок для Android и iOS
  3. Топ-пять аспектов дизайна иконок
  4. Три способа создать иконку
  5. Заключение

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

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

По статистике 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-эффект, значит, пора сменить значок.

Source: by Jakub Kuik

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

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

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

Всегда актуальные и современные тенденции иконок / WAYUP

Задумывались ли вы, читатели, что иконки тоже подвластны моде и трендам? Люди так часто говорят о дизайне в целом, о логотипах, графике и типографике, но только вскользь уделяют внимание иконкам. А ведь они на сайте играют если не самую важную роль, то весьма значительную. И в течение года тренды иконок могут тоже подвергаться изменениям. Впрочем, здесь ситуация обстоит несколько похоже на ту, что и у логотипов. Существуют проверенные временем стандарты и стили, от которых впоследствии и отталкиваются художники и дизайнеры.

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

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

Линейные иконки

Практически вечная и не стареющая тенденция линейных иконок будет жить еще долго, радовать глаз пользователей и вдохновлять художников. Причин тому много, но одна из них – универсальность. Неважно, какой общий стиль дизайна сайта или приложения, линейные иконки вписываются отлично, скорее даже – идеально. Любой фон, любой цвет, с анимацией или без. И если присмотреться ко многим пакетам готовых иконок, то они включают в себя линейный вариант. Как раз из-за универсальности и вечной моды.

Достаточно подробно о линейных иконках мы рассказывали  в отдельном материале, но увидеть практическое их использование можно на:  agostinetto-win, northwest, expressbank, creative_agency, appinstitute. И как наглядно видно — везде разные стили дизайна, разные тематики, даже места размещения. Но иконки легки для восприятия, не кажутся лишними и даже наоборот, подверждают представление пользователей о том, на что указывают ссылки или контент. Кроме того, стоит обратить внимание, что линейные иконки могут быть не просто контурными, но и с небольшим заполнением. И именно – с небольшим. В противном случае, они превращаются в «упрощенные».

Эскизы и простота

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

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

Чтобы было немного понятнее, о чем речь, посмотрим на coldservice. Иконок много, и каждая из них характеризует раздел сайта. Но выполнены они в кубическом стиле. То есть основной элемент – маленькие квадратики, прямоугольники, которые благодаря анимации создают потрясающий эффект «живого» сайта, будто бы он имеет собственную жизнь, ведет активность.

Аналогично, элемент треугольник был положен в основу иконок на manhattanmiami. Если прокрутите страницу главную вниз, то увидите и другие интересные вариации.

Окружность была взята за основу на modeltheme и если вы подумаете, что иконка «А» отличается, то присмотритесь к нижним засечкам – они выпуклые, немного изогнутые, а значит, часть окружности использована. Аналогичные иконки есть и на cadovani.

Графическая раскраска – «комикс»

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

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

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

На примере appinstitute мы видим раскрашенную линейную иконку. Причем в окрашивании использовалось три основных цвета – два оттенка зеленого и серый (квадратики красного и оранжевого рассматривать не будем). Если учесть, что весь дизайн сайта создан в зеленом цвете, то использование такой раскраски вполне оправдано. Но благодаря двум оттенкам художники смогли добавить объемность, немного художественности.

Весьма эффектно выглядят и иконки от Alexey Gushin, которые могут использоваться и на сайтах, и как стикеры.

Аналогичные варианты цветных иконок можно увидеть и на peoplegrove, eatlambs, reneza, make-my-persona, checkout.

Плоские и толстые

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

Что же касается плоских иконок, то они похожи на графические раскрашенные, но представляют более художественный вариант. Да в целом дизайн сайтов немного ушел от 100% плоскости, веб-мастера стараются придать немного объема, структурности. Но вот иконки плоские используются в разных стилях, так как сочетать их удобно.

Примеры обоих вариантов можно увидеть на: kinfo, hflu, fitnessamp, juicymo, hashworks, mentelocalebrescia, maydayhealthcareplc.

Особенности создания иконок

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

Так на что обратить внимание, если решили создать две-три иконки самостоятельно?

  • Сетка. Четко разметьте иконку по клеточкам, при необходимости нарисуйте её на бумаге. Потом перенести гораздо проще или отсканировать прототип.
  • Геометрия. Используйте правильные фигуры и формы. Сочетайте их под четкими углами (30,45,90 градусов и т.д.).
  • Уникальность формы. Полукруг, угол, переходящий в овал – ищите что-то оригинальное и необычное.
  • Пространство. Не тесните иконку. Между элементами сделайте отступы, чтобы было понятно, что нарисовано.
  • Цвета. Цвета и оттенки обычно используют не просто дизайна сайта, а всего бренда.  Вот, предположим, сайт МТС. Он бело-красный, синие иконки или сиреневые будут чужими.  В крайнем случае, можно сделать их нейтрально черными, серыми.
  • Без эффектов. Не украшайте иконку звездочками, бликами и прочим. Это лишнее, если иконка маленькая или схематичная. Если вы создаете более-менее художественную, то небольшую звездочку еще можно, и то, если это уместно по стилю дизайна сайта. Но обычно такого не делают.
  • Детали. Если иконка создается маленькой, то она должна быть четкой. Поэтому линейный стиль в большем приоритете, чем любой цветной или эскизный. Посмотрите на сайт agostinetto-win и вы поймете о чем речь.

Дополнительно можно почитать и наш материал о логотипной сетке, её использовании. Для иконок идеи все те же, поэтому материал, наверняка, не покажется лишним.

Кроме того, всегда стоит наблюдать за стандартами и руководствами по стилю. Принимая во внимание частые нововведения в веб-дизайне, Apple и Google публикуют разные материалы по работе с цветами, плоскостями и прочим. Относится это и к иконкам, тем более что у этих компаний они менялись быстро и часто (то с тенями, то с линиями, то объемные и так далее). Иконки Apple, иконки Google 1 и Google 2 (причем с курсом рисования по сетке и прочими полезными мелочами).

Завершение

Иконки невероятно полезный инструмент веб-дизайна, несмотря даже на то, что используются они не на каждом первом или втором сайте. Используется ли значок соцсети, элементы логотипа, картиночки-пояснения к услугам или олицетворение ссылок меню – это все равно иконка (статическая или динамическая). И выполняет она всю ту же цель – визуальное представление того, что написано рядом. Некоторым пользователям вполне достаточно пробежаться глазами «по диагонали» по сайту и понять, что им нужно, а что – нет. И достигается это именно благодаря понятным иконкам, вне зависимости от их размера, стиля, цветности и прочего.

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

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

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

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

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

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

В этой статье мы расскажем о всех подводных камнях создания иконок и попутно рассмотрим новые требования к иконкам для приложений на iOS 8 и Android Lollipop.

С чего начинается иконка?

Иконка начинается с общей идеи приложения и множества версий, как эту идею передать в соответствии со следующими параметрами:

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

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

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

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

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

Тенденции

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

На упрощение иконок также повлиял flat design. В иконках он особенный лаконичными логотипами или знаками, которые отбрасывают прямую тень (flat shadow icon). Объём, градиенты и лишний смысл уже не актуальны, потому что усложняют восприятие интерфейса самой операционной системы. Плоский дизайн иконок ненативных (сделанных сторонними разработчиками) приложений отлично вписывается в экосистему iOS, начиная с 7 версии, в Android — c релиза 4.4 Kit Kat.

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

Изучаем матчасть

Существуют гайдлайны производителей операционных систем по дизайну иконок. Игнорировать их нельзя, потому что приложение не будет допущено в мобильный маркет. И в AppStore, и в Play Market иконку приложения обязательно проверят на пригодность по стандартам производителей.

Некоторые особенности иконок iOS 8

У иконок iOS имеются спецификации, по которым Apple рекомендует их создавать.
Иконки iOS имеют вид скруглённых прямоугольников. Этим они создают общую гармоничность в экосистеме платформы. Для иконок операционной системы iOS разработана размерная сетка, которая информирует дизайнера, как размещать элементы на иконке. С выходом iOS 8 размерных сеток стало больше.

Основные рекомендации разработчикам и дизайнерам от Apple:

  • использовать универсальные образы, которые люди смогут
  • узнавать;
  • 1 иконка = 1 объект, которые передаёт суть приложения;
  • умеренно использовать прозрачность и соблюдать края иконки.

Изображение должно

  • иметь все углы по 90 градусов;
  • не иметь блеска;
  • не использовать альфа-прозрачность.

Дизайнерам следует избегать изображения иконок, которые будут слишком похожи на системные иконки iOS или других продуктов Apple.

«Материальные» иконки Android Lollipop

С появлением «материальной» философии для иконок Android появились специальные требования по дизайну.

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

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

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

И даже уголок папки только справа! Уголок влево делать нельзя. Вряд ли дизайнерам Google не понравились уголки слева. Это требование исключает разнородность иконок в общем списке системы.

 

Анатомия иконки для Android

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

1. Отделка
2. Фон
3. Передний план
4. Цвет
5. Тень

В анатомии чётко прописаны даже параметры наложения теней и цвета цветных элементов, света, градиентов и оформления контура.

Размер имеет значение

Для иконки предусмотрено несколько разрешений (ширина х высота картинки в пикселях) изображения:

  • изображения для маркета,
  • иконка запуска в приложении.

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

У iOS с размерами иконок полная ясность и порядок. Причина этому — уникальная линейка мобильных устройств от Apple с iOS на борту. Размеры иконки приложения чётко установлены.

Дублируем их ещё и здесь:

 

Кстати, все эти параметры — для квадратных иконок. iOS округляет их самостоятельно и «подставит» файл нужного размера.

Для иконок Android картина совершенно иная. Эта платформа имеет более 18 тысяч видов устройств! И несколько разрешений экранов:

  • mdpi – 160 dpi;
  • hdpi – 240 dpi;
  • xhdpi – 320 dpi;
  • xxhdpi – 480 dpi;
  • xxxhdpi – 640 dpi.

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

ppi (Pixels per inch) Кол-во пикселей в дюйме

dpi (Dots per inch) Кол-во полутоновых точек в дюйме (полутоновая точка больше 1 пикселя)

lpi (Lines per inch) Кол-во линий в дюйме

pt (Points) Кол-во физических пикселей в экране

dp (Density independent pixels)  Кол-во пикселей, независимых от плотности. В 1 физическом (реальном) пикселе — 160 dpi

 

Иконка приложения для маркета у Android — 512 х 512 пикселей, а для запуска — 48 х 48 dpi.

Как видите, иконки требуют особого подхода. Почти как картина маслом. Как создать иконку и не сойти с ума от всей этой информации? Сами в шоке. Тем не менее, у нас получается:)

Сайты с бесплатными иконками и логотипами – База знаний Timeweb Community

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

Иконки

Captain Icon

https://mariodelvalle.github.io/CaptainIconWeb/

Здесь можно найти более 350 векторных иконок. Их можно легко масштабировать без потери качества. Форматы разные: eps, psd, png, svg, а также веб-шрифты и Sketch.

Иконки распространяются под лицензией CC BY-SA, то есть материалы можно использовать в личных и коммерческих проектах.

Ego

https://www.ego-icons.com/

На этом сайте есть 3600 иконок, но бесплатно можно скачать только 100 из них. Если хотите использовать все из них, то придется заплатить 217 долларов. Форматы: Sketch, ai, svg, pdf, eps, iconjar.

Иконки представлены в синих и серых оттенках.

Endless Icons

http://www.endlessicons.com/

Здесь есть множество бесплатных черно-белых иконок. Помимо общего каталога, иконки можно выбрать по тематическим группам: fashion, food, shopping, social media и так далее. Есть еще разбивка по тегам.

Все иконки можно использовать как в личных, так и в коммерческих проектах.

Flaticon

https://www.flaticon.com/

Один из самых крупных сайтов с бесплатными иконками: здесь представлено больше миллиона векторных иконок. Бесплатно использовать их можно при условии, если вы укажете авторство. Если желания указывать нет, то вам нужно купить платную подписку. Она стоит 9,99 евро в месяц либо 89,99 евро за год (т.е. 7,50 евро в месяц).

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

Icofinder

https://www.iconfinder.com/

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

Логотипы и favicon

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

Logomakr

https://logomakr.com/

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

Online Logomaker

https://ru.onlinelogomaker.com/

Это более продвинутый по функциям конструктор. Здесь можно добавлять разноцветные символы; большой выбор латинских шрифтов, но и для кириллицы есть несколько вариантов. Помимо логотипа, можно создать визитку.

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

Canva

https://www.canva.com/ru_ru/sozdat/logotip/

Известный в кругах дизайнеров и SMM-щиков проект, который часто используют для создания красивых изображений. Не все элементы бесплатны — часть из них можно купить отдельно либо приобрести подписку за 12,95 долларов в месяц. Но перед этим есть бесплатный 30-дневный тестовый период.

Designimo

https://www.designimo.com/

Здесь нужно просто ввести название своей компании (и слоган, если есть) — и онлайн-сервис автоматически сгенерирует несколько сотен возможных логотипов. Выбор разнообразен: есть абстрактные варианты, есть тематические — медицина, сфера красоты и ухода за собой, спорт, любовь, праздники… После выбора подходящего логотипа его можно доработать: изменить цвет и положение элементов, развернуть, сделать больше или меньше.

иконок рекомендаций — 586 бесплатных векторных иконок

  • Авторы
  • Пакеты
  • Дополнительные инструменты

    Прочие товары

    Freepik Бесплатные векторы, фото и PSD Онлайн-редактор Freepik Редактируйте свои шаблоны Freepik Slidesgo Бесплатные шаблоны для презентаций Набор историй Бесплатные редактируемые иллюстрации

    Инструменты

    Образец значка Создавайте шаблоны значков для своих обоев или социальных сетей

    Google Workspace

    Иконки для слайдов и документов +2.5 миллионов бесплатных настраиваемых значков для ваших слайдов, документов и таблиц
  • английский
    • Español
    • английский
    • Deutsch
    • Portuguès
    • Français
    • 한국어
  • Стать автором
  • Стоимость
  • Бесплатная регистрация
  • Войти

иконок рекомендаций — 586 бесплатных векторных иконок

  • Авторы
  • Пакеты
  • Дополнительные инструменты

    Прочие товары

    Freepik Бесплатные векторы, фото и PSD Онлайн-редактор Freepik Редактируйте свои шаблоны Freepik Slidesgo Бесплатные шаблоны для презентаций Набор историй Бесплатные редактируемые иллюстрации

    Инструменты

    Образец значка Создавайте шаблоны значков для своих обоев или социальных сетей

    Google Workspace

    Иконки для слайдов и документов +2.5 миллионов бесплатных настраиваемых значков для ваших слайдов, документов и таблиц
  • английский
    • Español
    • английский
    • Deutsch
    • Portuguès
    • Français
    • 한국어
  • Стать автором
  • Стоимость
  • Бесплатная регистрация
  • Войти

рекомендуемых иконок — 586 бесплатных векторных иконок

  • Авторы
  • Пакеты
  • Дополнительные инструменты

    Прочие товары

    Freepik Бесплатные векторы, фото и PSD Онлайн-редактор Freepik Редактируйте свои шаблоны Freepik Slidesgo Бесплатные шаблоны для презентаций Набор историй Бесплатные редактируемые иллюстрации

    Инструменты

    Образец значка Создавайте шаблоны значков для своих обоев или социальных сетей

    Google Workspace

    Иконки для слайдов и документов +2.5 миллионов бесплатных настраиваемых значков для ваших слайдов, документов и таблиц
  • английский
    • Español
    • английский
    • Deutsch
    • Portuguès
    • Français
    • 한국어
  • Стать автором
  • Стоимость
  • Бесплатная регистрация
  • Войти

ᐈ Значок запаса большого пальца вверх для рекомендации, Роялти-фри векторов значка рекомендации

icon Значок запаса большого пальца вверх для рекомендации, Роялти-фри векторы значка рекомендации | скачать на Depositphotos®Рекомендуемая золотая этикетка, векторная иллюстрацияПиктограмма-пиктограмма человеческих ресурсов для бизнеса Значок Facebook Кнопка «Нравится» Сказать «да», понравиться другим, концепция любви — простой векторный значок. Пузырь с рекомендациями — с похожим знаком. Предупреждающие знаки GHS помогают VektorConcept добиться успеха и работать в команде.Рекомендуемый штамп Утверждение, как подтверждение и значок ОК, — векторное понятие. Мне нравятся Правила здорового сна. Векторная иллюстрация Инфографика. Милая девушка спит на кровати. Полезные советы для хорошего ночного сна. Лучший векторный символ выбора — жест рукой, как значок, хорошо Концепция отзывов клиентов, бизнес, обратная связь, голосование и обзоры. Большие пальцы руки вверх и вниз знак руки значкиОтзывы висящий знакВекторные этикетки и значкиНабор векторных наклеек и лентРедакторы Выбор качества продуктаПредварительный просмотр гранж штамп на белом фоне, векторные иллюстрацииЗначок темы отзываКоронавирус COVID-19 вирус концепция социальной дистанции.Набор наклеек и лент, значок лестницы, плоский значок лояльности потребителей. Довольные клиенты и деловые отношения. Пузырьковый чат, диалог, диалог, социальная сеть, логотип сообщества Понятие лайков и положительных отзывов. Набор векторных иконок управления проектом. 2Кнопка отзывов клиентов.Набор старинных и современных винных элементов этикеток для ресторана anStaircase symbol setStyle ищет предложение о работе Большие пальцы руки вверх силуэт Инфографика Ишемической болезни сердца. Признаки, симптомы и лечение. Информационный плакат с текстом и символом. Плоские векторные иллюстрации, горизонтальные. Социальные сети, вирусный маркетинг, забавный человек в костюме и галстуке, показывает свою руку, как значок. Значок за лучший продукт премии «Выбор редакции». Большие пальцы руки вверх, одобрение, согласие или как векторные иконки на круге используются значки концепции искусственного интеллекта (AI), установленные в современный стиль иконки линии для пользовательского интерфейса, пользовательского интерфейса, Интернета, дизайна мобильных приложений и т. д.Концепция социальной дистанции вируса коронавируса COVID-19. Совет по безопасности и болезням Кнопка — ЛУЧШИЙ ПРОДАВЕЦ Цветной прямоугольник, иллюстрация социальной кампании, значок Значки концепции искусственного интеллекта (ИИ), установленные в современном стиле значка линии для пользовательского интерфейса, ux, Интернета, дизайна мобильных приложений и т. Д. Нравится и не нравится. Векторная плоская иллюстрацияРекомендация пузырь — с похожим знакомРекомендуемая векторная печатьGHS предупреждение об опасности Пожарный знак ВекторГастроэнтеролог рекомендовал этикетку или штампНабор векторных наклеек и лент — ретро-стильКрасная лучшая цена стикер Набор иконок линии управления проектом.Значок рекомендации

на GetDrawings | Бесплатно скачать