как сделать свой значок для приложения

Lepzon.ru

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Opera Mini

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

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

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

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

Источник

Суперполезный гайд по созданию иконок для интерфейсов

Иконка, значок, символ, образ — каких только названий нет у этих атрибутов. Зачем они нужны, как их правильно использовать и что нужно знать, чтобы не запутать пользователя – всё это расскажем ниже.

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

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

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

Будьте внимательны, сетка должна помогать, а не ограничивать. Если значок визуально лучше с некоторыми торчащими элементами, пусть так и будет.

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

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

Сцентрированные однопиксельные границы делают значок размытым в масштабе 100%, однако он кажется чётче при увеличении масштаба.

Задайте начальную и конечную точки диагоналей в соответствии с сеткой пикселей. Диагонали с углами 45 °, 30 ° и 60 ° выглядят более острыми, чем диагонали с неравномерными углами, такими как 13,7 ° или 81 °.

Лучше начать набор значков с самого сложного значка. Он определит уровень детализации и поможет сделать иконки того же визуального веса.

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

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

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

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

Если целевой пользователь уже понимает, с чем он или она работает, нет необходимости повторять это снова и снова. Например, без иконок «@» на конвертах люди всё равно знают, что речь идёт об электронной почте.

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

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

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

Лучше иметь два варианта каждого значка в интерфейсах. Значок линии — для отключённого или обычного состояния. Заполненный значок — для состояния щелчка.

Восьмипиксельная сетка и 12-колоночная компоновка используются для многих интерфейсов как более гибкие, по сравнению с десятичной матрицей. 12 можно разделить на два, три, четыре и шесть. Таким образом, 24- или 48-пиксельные области значков стали стандартными. Эти значки можно масштабировать, если требуется больший размер.

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

Та же история с раздражающими размерами «8.999 px» или «100.001 px». Если фиксирующие фигуры расположены точно, края иконок выглядят острыми. И вы не рискуете получить чрезмерные якоря и промежутки при объединении фигур.

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

Смотрите, в Sketch всё выглядит хорошо.

Откройте этот SVG в другом редакторе (например, Adobe Illustrator). Вы заметите пустые слои, ненужные группы и иногда обрезающие маски. Всё это может вызвать проблемы, когда фронтенд-разработчики конвертируют значки в иконку или используют SVG на веб-странице.

Вы можете удалить этот мусор и пересохранить иконку.

Как видите, Sketch SVG (picture.svg) и отредактированный Illustrator SVG (picture_new.svg) имеют разные предварительные просмотры в вашем средстве просмотра файлов. Кстати, можно избавиться от мусора в значке в редакторе кода. Если вы знаете, как выглядит SVG-код, попробуйте удалить ненужные строки данных напрямую.

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

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

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

Статья переведена и адаптирована на русский язык студией Netlab. Оригинал тут.

Источник

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

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

Создайте свой логотип онлайн. Более 50 тысяч брендов по всему миру уже используют логотипы от Турболого.

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

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

Иконка и логотип: в чем разница?

Ошибочно думать, что иконка и логотип — одно и то же. Рассмотрим основные отличия данных составляющих фирменного стиля.

Иконка:

Логотип:

Советы по дизайну иконок

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

1. Выбирайте простоту

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

2. Грамотно подберите цвета

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

3. Создайте гармоничный знак

Важно, чтобы иконка выглядела согласованно и целостно. Для этого учитывайте следующие аспекты выбора дизайна:

4. Избавьтесь от лишних элементов

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

5. Делайте ставку на уникальность

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

Как создать иконку приложения: 3 способа

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

1. Сделать иконку в графическом редакторе

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

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

2. Разработать иконку в онлайн-сервисе

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

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

3. Заказать иконку у дизайнера

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

Подведем итоги

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

Продуктовый и графический дизайнер с опытом работы более 10 лет. Пишу о брендинге, дизайне логотипов и бизнесе.

Источник

Как создать свой собственный Icon Pack на Android

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

Как создать свой собственный пакет иконок

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

Как адаптировать новый пакет ко всем программам запуска

И это то, что это приложение имеет небольшое ограничение, поскольку, будучи создателями SmartLauncher, оно совместимо только с их разработками, а с Nova Launcher их больше нет. Для всех других пусковых установок это изменение дизайна не будет применено к иконкам. К счастью, есть решение, чтобы облегчить эту проблему.

Для этого мы добавляем виджет Adapticons, нажимаем и выбираем приложение, для которого мы собираемся изменить дизайн. После того, как мы войдем в меню редактирования, важно выбрать опцию «Исходная форма», прежде чем перейти в раздел «Изменить значок», который находится чуть дальше по меню. Появится плавающее окно, в котором мы дадим «Значок импорта», чтобы загрузить созданный нами дизайн. Так что со всеми приложениями мы хотим изменить. Во всяком случае, мы рекомендуем использовать Nova Launcher для лучшей реализации иконок.

Источник

Как создать логотип для приложений: правила и способы

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

Зачем нужен значок мобильному приложению?

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

6 советов по созданию логотипов для приложений

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

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

1. Масштабируемость

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

2. Распознаваемость

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

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

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

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

ищите новые смыслы в комбинациях цветов и символах. Экспериментируйте и делайте много попыток;

вдохновляйтесь иконками игровых приложений: в этой нише меньше формальных требований к изображениям и больше возможностей для творчества;

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

4. Умеренное количество букв

Facebook имеет полное право использовать брендированную в своем стиле букву F для иконки приложения. Десятки известных сервисов — тоже. Если ваш фирменный стиль развит настолько, что пользователи будут узнавать вас по 1-2 буквам — отлично. Но не пишите в иконке полное название компании. И вообще — откажитесь по возможности от слов. Если вы решили вставлять слова — значит, не до конца используете преимущества визуальных элементов.

Слова и изображения — противоположные инструменты. Иконка — графическое представление программы. Уделите внимание визуальным деталям, потому что:

Если название короткое— можно попробовать использовать его в качестве центрального элемента. Так поступила новозеландская компания Xero.

5. Соответствие логотипа функционалу

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

Удачный пример целостного визуального решения — у Dropbox:

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

Тенденции дизайна логотипа мобильного приложения

Как сделать иконку для Андроид приложения или программы под iOS, учитывая дизайнерские тренды? Мы собрали несколько рекомендаций, актуальных для дизайна логотипов в ближайшем будущем:

1. Упрощение. Удаляйте лишнее из композиции — делайте акцент на главном. Чем проще изображение — тем лучше оно будет распознаваться на любом типе экрана. Планировщик Smartsheet имеет именно такой логотип:

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

3. Акцент на деталях. Выделите одну из деталей вашего значка. Или сделайте лого немного ассиметричным. Это привлечет пользовательское внимание. Так сделали разработчики Todoist:

4. Градиенты. Это тренд 2018 года, и он остается актуальным. С помощью градиента картинку можно сделать более объемной и глубокой, добиться уникальных визуальных эффектов. Instagram вполне соответствует тренду:

5. Неоновые оттенки. Минималистичные логотипы можно оживить с помощью ярких неоновых цветов в градиентных лого. Это тренд взяли за основу дизайнеры Spotify:

6. «Ручная работа». Новая тенденция — изображения, нарисованные от руки: с размытыми линиями, естественной цветовой гаммой. Такой вариант выбрали в MetLife:

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

Значок приложения для Android нужно разрабатывать с учетом существующих параметров гаджетов и экранных разрешений. Для измерения качества графики в приложениях используют показатель количества пикселей на дюйм — DPI. Классификация по показателям DPI выглядит таким образом:

Иконку приложения нужно разрабатывать специально под требования Android.

Требования к значкам для запуска программы

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

Минимальный размер иконки для MDPI — 48dp, края — 1dp. Детализация зависит от показателя DPI. Варианты размеров для других показателей (в px):

Требования к иконкам для публикации в Google Play

Значок мобильного приложения должен иметь размер 512х512 пикселей и высокое разрешение. Эту иконку разрабатывают специально под Google Play. Она отличается размерами от иконки, которая используется как ярлык для запуска программы. Но в то же время изображения на разных вариантах иконки должны быть идентичными.

It differs in size from the icon, which is used as a shortcut to launch the program.

Советы и правила по разработке иконок для Android-приложений

Пользуйтесь такими рекомендациями:

Создание значка для мобильного приложения Android можно проводить для достижения определенной цели. Например:

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

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

Для каждого приложения под iOS нужно сделать вариант маленького и большого значка. Маленький необходим для отображения на домашнем экране и в системе (после установки приложения). Большая отображается в App Store.

Spotlight icon size

120px×120px (40pt×40pt @3x)

80px×80px (40pt×40pt @2x)

iPad Pro, iPad, iPad mini

80px×80px (40pt×40pt @2x)

Settings icon size

87px×87px (29pt×29pt @3x)

58px×58px (29pt×29pt @2x)

iPad Pro, iPad, iPad mini

58px×58px (29pt×29pt @2x)

Notification icon size

60px×60px (20pt×20pt @3x)

40px×40px (20pt×20pt @2x)

iPad Pro, iPad, iPad mini

40px×40px (20pt×20pt @2x)

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

General icon requirements:

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

Правила дизайна для значков приложений iOS

Придерживайтесь в работе следующих рекомендаций:

Как создать логотип для приложения: лучшие сервисы

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

Logaster

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

Makeappicon

Генератор иконок для Android и iOS в правильных размерах. Вы можете загрузить собственное изображение, на основе которого сервис создаст логотипы. Они будут соответствовать актуальным требованиям.

IconsFlow

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

Font Awesome

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

Заключение

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

Источник