Создание иконки: Создание – Бесплатные иконки: образование

17.05.2023 Разное

Содержание

7 принципов дизайна иконок. На что нужно обращать внимание при создании иконок

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

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

Понятность

Основная цель иконки – быстро донести до пользователя идею.

Иконки на приборной панели Toyota Prius Prime (Источник: 2020 Manual)

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

Примерно так они выстраиваются для меня по уровню понятности:

Когда иконка использует незнакомую метафору, ее трудно понять.

«Сигнал напоминания о ремне безопасности» (3-й слева) довольно буквальный, и мы можем его быстро понять. «Сигнал электроусилителя рулевого управления» (крайняя справа) намного сложнее.

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

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

Знакомые метафоры из семейства иконок Phosphor Carbon

Стрелка является мощным символом, используемым для навигации:

Знаки Нью-Йоркского метрополитена (Источник: Capture of an original copy of NYC Transit Authority Graphic Standards Manual)

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

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

В этом случае добавьте к иконке текстовую метку или найдите альтернативу.

Читабельность

Если у вас есть понятный символ, убедитесь, что он читабелен.

Иконки в мобильном приложении Amtrak

Сложно разглядеть иконку Station в приложении Amtrak (первая строка), потому что ее детали слишком мелкие.

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

Иконки в мобильном приложении Transit

Небольшая корректировка значительно улучшит иконки:

Улучшенная иконка

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

Google Maps отлично справился с задачей – иконки удобочитаемы при очень маленьком размере:

Иконки Google Map

Выравнивание

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

Хотя в этой иконке “Play”, треугольник расположен в центре круга, нашим глазам он кажется смещенным. Широкая часть треугольника кажется «тяжелее», чем точка, и смещенной влево.

Точно так же, как художники-шрифтовики точно настраивают шрифты для создания оптической иллюзии баланса (обратите внимание на смещенные точки на «i» и «j» и на выступ буквы «O»)

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

Так лучше.

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

Краткость

Идея, выраженная в нескольких словах, кажется эффективной и элегантной.

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

Как сказал Роберт Хайнлайн:

Когда один преподаёт, двое учатся.

Прекрасно.

Material Design довольно хорошо иллюстрирует краткость в своем системном руководстве по иконкам. Вместо того чтобы говорить:

Чрезмерно сложная иконка корабля (Источник: Material)

Скажите проще:

Лаконичная иконка корабля (Источник: Material)

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

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

Telegram лаконичные и приятные:

Иконки Telegram

Иногда иконки интерфейса приобретают более иллюстративный стиль. Иконки Yelp – это восхитительные изображения популярных продуктов питания. Креветка в иконке тайской кухни изысканна:

Иконки Yelp от Scott Tusk

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

Иконки приложений Apple

Последовательность

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

До iOS 13 иконки Apple имели всевозможные штрихи, заливки и размеры:

Иконки Apple в меню быстрых действий до iOS 13

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

Apple недавно выпустила введение в SF Symbols, впечатляющее дополнение к шрифту San Francisco. SF Symbols охватывает графический стиль иконок в 9 весах и 3 масштабах (возможно, немного сложное, но дотошное руководство). Из-за этого иконки кажутся более гармоничными.

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

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

Подмножество семейства иконок Phosphor Carbon

Индивидуальность

Каждый набор иконок имеет вкус. Что делает его уникальным? Что он говорит о бренде? Какое настроение он создает?

Иконки Waze

Интерфейс Waze во многом зависит от иконок. Эти красочные, лаконичные иконки говорят: «Мы причудливы!»

Иконки Twitter легкие и четкие:

Иконки Twitter

Иконки Sketch утонченные и воздушные:

Иконки Sketch от Janik Baumgartner

Freemojis очень милые:

Freemojis от Streamline

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

Сверху вниз, слева направо: iJUK, PixBit, Crayon, Linebit

Простота использования

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

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

Организованный

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

Sketch-файл Nucleo, упорядоченный по типу

Хорошо задокументированный

Сформулируйте основные принципы семейства иконок:

Примеры принципов семейства иконок Phosphor:

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

Перечислите технические правила:

Примеры технических правил семейства иконок Phosphor:

Используйте холст 48x48px
Используйте
centered stroke 1.5px
Используйте закругленные концы
Используйте сплошные линии, за исключением случаев, когда ломаные сегменты полезны для понимания
Используйте прямые сегменты, идеальные изгибы и приращение угла 15° там, где это возможно
При необходимости отрегулируйте кривые, чтобы следовать принципам дизайна
Используйте, по возможности, приращения целых, четных чисел; уменьшите до 1px и 0. 5px при необходимости
Используйте следующие контуры фигур: 28x28px круг, 25x25px квадрат, 28x22px ландшафтная ориентация, 22x28px портретная ориентация
Keep a 6px thick trim area

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

Иконки Material System
Иконки интерфейса,иконки приложений и руководство по иконкам от IBM
Иконки Shopify Polaris
Иконография Atlassian

Проверенный

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

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

Тестовые листы, используемые в Phosphor

Специальные инструменты

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

Material делает иконки легко доступными с помощью собственной библиотеки иконок. Найдите нужную иконку и загрузите разные стили («темы»), цвета и размеры в выбранном вами формате файла:

Простая в использовании библиотека иконок Material

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

Ресурсы

Библиотеки иконок

Feather – великолепный набор из более 200 контурных иконок, которые хорошо масштабируются
Material system icons – свыше тысячи утилитарных иконок для интерфейса в 5 стилях
Nucleo – набор из примерно 30 тысяч иконок в 3 стилях: контурный, плоский / цветной и глиф
Streamline – набор более 30 тысяч красиво нарисованных иконок в 3 весах

Агрегаторы иконок

Noun Project – отличный способ поиска вдохновения в стилях и метафорах

Менеджеры иконок

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

Перевод статьи medium.com

‍Принципы дизайна для идеального набора иконок

12 шагов, которые необходимо выполнить, если вы хотите создать выдающийся набор иконок

Привет! Меня зовут Дима, я дизайнер и создатель универсального набора иконок. Не так давно я выпустил версию 2.0 этого набора. Работая над версией 1.0, я четко не определил правила построения единой системы иконок. В результате возникли некоторые несоответствия.

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

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

За основу я взял принципы Material Design и руководства IBM Design Language. В версии 2.0 я изменил дизайн всех значков и добавил новые. Теперь здесь 1671 иконка (557 для каждого стиля).

В общей сложности у меня получилось 12 правил. Продолжайте читать, в этой статье я делюсь своим опытом.

Ясность

Каково основное назначение иконки? Быстрое понимание ее смысла. Человеческий глаз обрабатывает визуальные образы гораздо быстрее, чем текст. Кроме того, это универсальный способ понимания информации на любом языке. Поэтому, чем точнее метафора вашей иконки, тем быстрее она будет «прочитана». И это первое, на что следует обратить внимание при создании иконок.

Ясность (примеры)

✅ “Используйте четкие образы”

❌ “Избегайте сложных для понимания образов”

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

Простота

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

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

Простота (примеры)

✅ “Сделайте свои иконки как можно более простыми”

❌ “Не используйте в своих иконках много деталей”

Стиль набора иконок

Если вы зайдете на Dribbble и наберете в строке поиска «иконки», вы увидите множество вариантов различных стилей иконок. Каждый стиль подходит для своих нужд. Все иконки в наборе должны быть выполнены в одном стиле, не забывайте об этом.

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

Стиль набора иконок (примеры)

✅ “Придерживайтесь единого стиля в рамках одного набора иконок”

❌ “Не используйте разные стили в рамках одного набора”

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

Базовая сетка

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

Сетки различаются в зависимости от задачи. Наиболее распространенные размеры — 16×16, 24×24, 32×32, 48×48, 64×64, 96×96;

Размер сетки зависит от причины использования иконок, рекомендаций и особенностей операционной системы. Например, для Android размер сетки составляет 24 x 24 dp (dp — density independent pixels — плотность независимых пикселей).

Базовая сетка (примеры)

✅ “Расположите иконку внутри пиксельной сетки”

❌ “Не помещайте иконку на десятичные значения координат x- и y-”

Область обрезки

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

Область обрезки (примеры)

✅ “Иконка должна размещаться внутри области обрезки”

❌ “Избегайте размещения частей иконки на область обрезки”

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

Основные формы

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

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

Начнем с площади круга:

d — высота безопасной зоны

В нашем случае диаметр «d» равен 20 пикселям, а радиус «r» — 10 пикселям, площадь круга приблизительно равна 314 пикселей².

Далее найдем стороны квадрата и его площадь:

а — округлите до ближайшего четного значения

Сторона ‘a’ будет равна приблизительно 17,7 пикселям. Округлите до ближайшего четного числа. В нашем случае — 18 пикселей. Площадь квадрата составит 324 пикселей².

Теперь давайте найдем стороны прямоугольника:

b — высота безопасной зоны

В нашем случае сторона «b» составляет 20 пикселей, а сторона «c» — 16 пикселей.

Это дает нам размеры наших основных фигур:

Основные формы (примеры)

Ширина линии

После того как мы настроили основные параметры нашей сетки, мы можем приступить к созданию значков. Нам нужно выбрать ширину линии для иконок. Чтобы ваши иконки выглядели пиксельно идеально на любом устройстве, я рекомендую придерживаться целочисленного значения. Например, 1 px или 2 px.

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

Ширина линии (примеры)

✅ “Будьте последовательны в использовании ширины линии и минимального свободного пространства”

❌ “Не используйте разные веса начертания и минимальный пробел меньше ширины линии”

Углы

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

Например, у меня для основных объектов установлено закругление от 2 до 4 px в зависимости от размера.

Углы (примеры)

Угол наклона

Вы можете указать базовые значения или один шаг (например, 15 градусов) для выравнивания угла наклона косых линий. Это ограничение также поможет вам при создании иконок.

Угол наклона (примеры)

Оптический баланс

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

Оптический баланс (примеры)

✅ «Используйте оптический баланс”

❌ «Не полагайтесь только на цифровые значения”

Перспектива (2D / 3D)

В дополнение ко всем принципам, для единообразия иконок важно придерживаться одной перспективы. В большинстве случаев подойдет двухмерный вид значка. Это может быть вид сверху или спереди. Можно использовать 3D-вид, но тогда необходимо использовать одну и ту же перспективу для всех иконок в наборе.

Перспектива (2D / 3D) (примеры)

Здравый смысл

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

Здравый смысл (примеры)

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

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

Заключение

Вместо скучного вывода я хочу показать вам видео, которое я сделал для Universal Icon Set v2.0.

Спасибо, что дочитали до конца. Надеюсь, эта статья была для вас полезной.

Как создать значок в Windows 10 [Упрощенное руководство]

Узнайте, как легко создать значок в Windows 10

by Мэтью Адамс

Мэтью Адамс

Эксперт по Windows и программному обеспечению

Мэтью — фрилансер, написавший множество статей на различные темы, связанные с технологиями. Его основной задачей является ОС Windows и все такое… читать дальше

Обновлено 12 января 2023 г.

Рассмотрено Alex Serban

Alex Serban

Windows Server & Networking Expert

Отойдя от корпоративного стиля работы, Алекс нашел вознаграждение в образе жизни постоянного анализа, координации команды и приставания к своим коллегам. Обладание сертификатом MCSA Windows Server… читать далее

Партнерская информация

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

Получите правильное программное обеспечение для поддержки ваших идей! Creative Cloud — это все, что вам нужно, чтобы воплотить свое воображение в жизнь. Используйте все приложения Adobe и комбинируйте их для получения потрясающих результатов. Используя Creative Cloud, вы можете создавать, редактировать и визуализировать в различных форматах:

Фотографии
Видео
песен
3D модели и инфографика
Многие другие работы

Получите все приложения по специальной цене!

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

Если вы хотите немного изменить Windows, настройка значков на рабочем столе — хороший способ сделать это. Вы можете создавать собственные значки для ярлыков на рабочем столе. Все, что вам нужно для создания собственных значков, — это одно приложение для художественного (или графического) дизайна и это руководство, так что давайте начнем, не так ли?

Что мне нужно знать перед созданием иконки?

Перед созданием значка необходимо выполнить следующие рекомендации:

Используйте подходящее программное обеспечение . Вы можете создавать значки в любой программе для рисования, но для простоты вместо этого вы можете использовать программу для создания значков.
Установите правильный размер — значки требуют использования определенного размера, а наилучшие результаты достигаются при использовании размеров 16x16px, 20x20px, 24x24px и 32x32px.
Использовать формат ICO — Для работы всех значков требуется формат ICO, поэтому обязательно сохраняйте их в этом формате. Вы также можете использовать программное обеспечение для преобразования значков, чтобы преобразовать их в нужный формат.

В этой статье

Что мне нужно знать перед созданием иконки?
Как сделать значок в Windows 10?
1. Используйте Adobe Illustrator
2. Создайте иконку с помощью Paint 3D
Настройка холста
Дизайн иконки
Сохранить дизайн значка как изображение
Как преобразовать JPEG в значок в Windows 10?

Как сделать значок в Windows 10?

1.

Используйте Adobe Illustrator

Загрузите Adobe Illustrator и установите его.
Перейдите к файлу и выберите New .
Установите единицу измерения на пикселей и установите ширину и высоту на 256px . Нажмите на Создать .
Создайте свой значок, используя доступные инструменты.
Когда вы закончите, перейдите к File и разверните раздел Export . Выберите Экспорт для экранов .
Установите формат PNG и щелкните значок шестеренки .
Измените цвет фона на Прозрачный . Нажмите на Сохранить настройки .
В Экспорт в укажите место сохранения и нажмите Экспорт монтажной области .

2. Создайте значок с помощью Paint 3D

Настройте холст

Сначала нажмите кнопку Start .
Щелкните Paint 3D в меню «Пуск» указателя программного обеспечения.
Нажмите Новый в Paint 3D.
Выберите Canvas, чтобы открыть параметры, показанные непосредственно ниже.
Введите 32 в оба поля Ширина и Высота, чтобы изменить размер холста до 32 x 32.
Поверните колесо мыши, чтобы увеличить масштаб и развернуть холст.
Включите параметр Прозрачный холст .

Дизайн значка

Вы можете нарисовать изображение на холсте значка, выбрав Кисти . Вам нужно будет выбрать Marker или Pixel Pen с весом 1 пиксель.
Чтобы добавить линии и двумерные фигуры, выберите вкладку 2D-фигуры . Затем выберите линию, кривую или форму.
Вкладка «3D-фигуры» в Paint 3D содержит различные параметры для добавления трехмерных фигур и моделей к значку. Нажмите 3D-фигуры , чтобы открыть эту вкладку.
Выберите параметр 3D-объекта или модели на боковой панели. Затем, удерживая левую кнопку мыши, перетащите курсор вправо, чтобы расширить выбранную фигуру, чтобы она поместилась на холсте вашего значка.
Щелкните фигуру на холсте, чтобы открыть параметры ее поворота, как показано на снимке ниже.

Сохранить дизайн значка как изображение

Когда вы закончите свой дизайн значка, нажмите Меню и выберите Сохранить как . Наконец, выберите Изображение .
Если вы добавили к значку 3D-модель, откроется предварительный просмотр изображения, как на снимке экрана ниже. Выберите PNG в меню Сохранить как тип .
Нажмите кнопку Сохранить .
Выберите папку для сохранения изображения PNG.
Выберите 2D – PNG в качестве формата файла.
Введите название изображения и выберите параметр Сохранить .

Как преобразовать JPEG в значок в Windows 10?

Вы можете преобразовать файлы PNG, JPEG и JPG в значки на веб-сайте Online-Convert. Итак, откройте страницу онлайн-конвертации изображений этого веб-сайта в браузере.
Нажмите Выберите файлы , чтобы выбрать значок PNG, который вы установили в Paint 3D.
Нажмите кнопку Начать преобразование .
Затем нажмите кнопку Кнопка загрузки .

Совет эксперта:

СПОНСОРЫ

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

Если вы используете формат PNG, обязательно ознакомьтесь с нашим руководством по преобразованию PNG в ICO в Windows.

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

Какой метод вы используете для создания иконок? Дайте нам знать в комментариях ниже.

Была ли эта страница полезной?

Есть 2 комментария

Делиться

Копировать ссылку

Информационный бюллетень

Программное обеспечение сделок Пятничный обзор

Я согласен с Политикой конфиденциальности в отношении моих персональных данных

7 принципов дизайна иконок. Создание качественного семейства иконок… | Хелена Чжан

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

 Другие материалы из серии «Иконография»:• Основы иконографии• 5 способов создания значка настроек• Демистификация сеток и ключевых линий значков• Привязка к пикселям в дизайне значков• 3 классических семейства значков

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

Основная цель значка — быстро передать идею.

Значки на комбинации приборов Prius Prime (Источник: Руководство 2020 г.)

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

Вот примерно как они складываются для меня:

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

Некоторые из самых непонятных значков, с которыми мне приходилось сталкиваться, находятся в приложении для фотографии VSCO . Можете ли вы догадаться, что они означают?

Значки в приложении VSCO

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

Со временем абстрактное может стать привычным при многократном использовании. Вот почему автомобильные контрольные сигналы стандартизированы; цель состоит в том, чтобы построить общее понимание. В 1984 году Susan Kare было поручено создать значок для функциональной клавиши на клавиатурах Apple. Она пришла к этому абстрактному символу, который также встречается в скандинавских знаках достопримечательностей.

Значок команды в SF Pro

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

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

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

Знакомые метафоры из семейства значков Phosphor Carbon

Стрелка — простой, но мощный используемый символ в навигации: знак метро

NYC (Источник: Руководство по стандартам)

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

Получив понятный символ, убедитесь, что он читаем.

Значки в мобильном приложении Amtrak

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

Приложение Transit имеет аналогичную проблему. Их значок буфера обмена читается как капля, потому что расстояние между доской и зажимом слишком мало:

Иконки в мобильном приложении Transit

Небольшая корректировка приводит к большому улучшению:

Измененный значок буфера обмена

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

Карты Google отлично справляются со своими значками общественного транспорта — очень удобочитаемы при очень маленьком размере:

Значки Google Map

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

Несбалансированная иконка воспроизведения

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

Точно так же, как типографы делают точную настройку, чтобы создать оптическую иллюзию баланса в шрифте (обратите внимание на смещенные от центра точки на «i» и «j» и на «O») —

— иконописцы вносят аналогичные коррективы, чтобы сбалансировать икону. Чтобы исправить приведенный выше пример, немного сдвиньте элементы:

Значок сбалансированной игры

Лучше.

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

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

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

Мы могли бы сказать более кратко (от Роберта Хайнлайна):

Когда один учит, двое учатся.

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

Чрезмерно сложная иконка лодки (Источник: Материал)

Просто скажите:

Лаконичная иконка лодки (Источник: Материал)

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

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

Значки Telegram

Иногда значки пользовательского интерфейса приобретают более иллюстративный стиль. Эти многоцветные значков Yelp — восхитительный способ отобразить популярные поисковые запросы о еде. Креветка на значке тайской кухни восхитительна:

значков Yelp от Scott Tusk

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

Значки приложений Apple для Procreate, Firefox и Netflix

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

До iOS 13, Значки Apple имели всевозможные штрихи, заливки и размеры:

Значки с главного экрана Apple. Быстрые действия до iOS 13

Прищурьтесь на этот набор. Некоторые значки кажутся тяжелее других?

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

Компания Apple недавно скорректировала курс, представив символы SF, впечатляющий компаньон Сан-Франциско. SF Symbols включает в себя более графический стиль значков с 9 весами и 3 масштабами (возможно, немного сложным, но определенно тщательным). От значка к значку и между вариантами заливки и контура они кажутся гораздо более гармоничными.

Значки из Apple SF Symbols

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

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

Выборка значков из Phosphor для Android

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

Набор иконок из коллекции Phosphor Icons

У каждого набора иконок есть своя изюминка. Что делает его уникальным? Что он говорит о бренде? Какое настроение он создает?

Иконки Waze

Любимый интерфейс Waze во многом зависит от их иконографии. Эти красочные массивные значки говорят: «Мы причудливые!»

Иконки Twitter мягкие, легкие и четкие:

Иконки Twitter

Иконки Sketch нежные и воздушные:

Иконки Sketch Яника Баумгартнера

Freemojis — милые и привлекательные:

Freemojis от Streamline

Наборы иконок для Android предназначены для самых разных тем оформления главного экрана — вот абстрактный, пиксельный, пузырьковый и неоновый стиль:

Сверху вниз, слева направо: iJUK , PixBit, Crayon, Linebit

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

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

Систематизировано

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

Файл Nucleo Sketch, организованный по типам на страницах

Хорошо документированный

Сформулируйте ключевые принципы семейства иконок:

 Примеры принципов семейства иконок Phosphor (отсылка к тому, что мы рассмотрели выше):  • Ясность. Будьте ясны в первую очередь.  Сделать значок узнаваемым и читаемым. Никогда не жертвуйте ясностью того, что представляет значок.  • Краткость. Используйте как можно меньше деталей. Стиль  Phosphor упрощенный. Будьте лаконичны и преднамеренны в каждом штрихе, чтобы передать суть того, что изображается.   • Персонаж. Будьте причудливыми.  Аккуратно добавляйте уникальные детали, чтобы привнести немного тепла и игры в то, что в противном случае могло бы показаться очень строгим.

Перечислите технические правила:

 Примеры технических правил из семейства значков Phosphor:  •  Используйте холст  48 x 48 пикселей,   •  Использовать  смежных штрихов , если только разорванные сегменты не помогают для понимания  •  Использовать  прямые сегменты, идеальные дуги и шаг угла 15° , где это возможно  • При необходимости отрегулируйте кривые  для соблюдения принципов проектирования  •  Используйте  целых, четных приращений чисел  для измерений, где это возможно;  •  Используйте следующие  ключевых линий формы  : 28 x 28 пикселей кругов, 25 x 25 пикселей квадратов, 28 x 22 пикселей горизонтальных прямоугольников, 22 x 28 пикселей портретных прямоугольников  •  Сохраните  6 пикселей толщиной зона

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

Значки Material System
Значки пользовательского интерфейса IBM, значки приложений и руководство для участников по значкам . Убедитесь, что значки работают в контексте, в соответствующих размерах. Убедитесь, что они работают в гармонии с более крупной зрительной системой.
Размещение значков рядом друг с другом полезно для подтверждения наших принципов, изложенных выше — ясности, удобочитаемости, выравнивания, краткости, последовательности и индивидуальности:
Тестовые листы, используемые в процессе контроля качества Phosphor для Android
Пользовательские инструменты
Более того, создавайте инструменты, облегчающие создание, производство и использование значков.
Для значков Phosphor мы создали специальный веб-инструмент для тестирования значков рядом друг с другом и на месте.
Тестирование значка бабочки на испытательном стенде Phosphor
Материал делает их значки легкодоступными благодаря собственной библиотеке значков. Найдите тот, который вам нужен, и загрузите различные стили («темы»), цвета и размеры в предпочитаемом вами формате файла.

Comments

Leave Comment