Создавайте иконки онлайн – Бесплатные иконки в редакторе для мобильных и десктопов

Зарегистрируйтесь, чтобы просмотреть отличное предложение

Графические дизайн-иконки пригодятся для самых разных дизайн-задач. Если вам нужно сделать иконку быстро, просто откройте онлайн-конструктор – там создать ее проще всего. В VistaCreate есть удобный конструктор иконок – в нем можно делать их бесплатно и под свои задачи. Создавать иконки еще никогда не было так просто!

Создать иконки

Выберите шаблон для редактирования

Показать больше

Создавайте иконки онлайн в VistaCreate – бесплатном конструкторе иконок для мобильных и десктопов

Выбрать VistaCreate – это как позвать в команду крутого дизайнера иконок. С этого момента забудьте о сложностях в создании иконок – теперь вы можете делать в разы больше крутых логотипов, инфографики и контента для сайтов! Онлайн-конструктор иконок – простое решение, благодаря которому наполнять свою контент-сетку будет по-настоящему просто.

• Создавайте иконки бесплатно

  Без иконок веб-дизайнеру никуда. Ни одна страница, мобильная платформа или приложение без них не обходится. В VistaCreate вы можете создавать иконки онлайн своими руками – бесплатно и экономя массу времени.

• Добавьте надписи

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

• Море бесплатных графических иконок

  Вы можете не только использовать готовые логотипы в шаблонах, но и создавать свои – от иконок для кнопок на сайтах до разделителей для блогов. Хорошо, когда есть разные варианты! Создавайте иконки легко – всего несколькими кликами, используя контент из вкладки «Объекты» в VistaCreate.

• Добавьте фон

  Любой создатель иконок знает, что подход «чем меньше, тем лучше» – ключ к хорошему графическому дизайну. Иконка – это очень простой объект, и чтобы он заиграл по-новому, достаточно добавить фон. В конструкторе иконок VistaCreate сделать это по-настоящему просто.

• Загружайте свой контент

  Если не получается найти или создать ту иконку, которая нужна, добавьте свою! В шаблон можно перенести файлы в форматах jpeg, png, img – и очень быстро встроить их в дизайн-композицию, которую вы создали.

• Загрузить и поделиться

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

Начать сейчас

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

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

• Выбрать стиль

  Вы можете создавать иконки онлайн в любых стилях – в VistaCreate море вариантов. Выбирайте сдержанное ретро или дерзкий иллюстративный стиль – наши дизайнеры сделали иконки, которые идеально сочетаются с остальными объектами из библиотеки VistaCreate.

• Учитывать детали

  Загружая в свой дизайн бесплатные графические иконки, не забывайте о гармоничности. Не нужно использовать минималистичные и детализированные иконки одновременно – иначе композиция получится шероховатой. Чтобы этого избежать, подбирайте иконки нужного стиля в разделе «Объекты» в VistaCreate.

• Учитывайте детали

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

• Сбалансировать элементы

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

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

• 1

  Выберите изображение

  Выбрав шаблон, вы можете изменить в нем любой элемент. Если хотите оставить только иконку, просто наведите курсор на объект, который хотите убрать, кликните на него и нажмите «Удалить» – и готово.

• 2

  Копировать и перевернуть

  Иногда для создания классных иконок много не нужно. В VistaCreate очень просто создать сразу несколько копий и перевернуть их – и правильно их расположить с помощью сетки.

• 3

  Автоматизируйте процесс

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

• 4

  Добавить энергию

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

Частые вопросы

• Можно ли повернуть иконки в VistaCreate?

  Конечно. Если вы выбираете шаблон VistaCreate, в котором главный акцент – на иконке (например, в логотипах), вы можете повернуть ее на 360 градусов. И, конечно, еще ее можно передвинуть, увеличить или уменьшить.

• Можно ли выбрать и повернуть несколько иконок сразу?

• Иконки добавят динамики в мой дизайн?

• Можно ли создавать иконки в VistaCreate, если я работаю на Android-устройстве?

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

ru

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

33 910
просмотров

1. Используйте оптическую сетку

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

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

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

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

2. Учтите пиксельную сетку

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

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

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

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

3. Сохраняйте определённый уровень детализации

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

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

4. Контролируйте минимальный размер зазора

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

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

5. Удалите повторяющиеся части

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

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

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

6. Выберите определённый стиль и следуйте ему

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

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

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

7. Используйте двухмерную систему калибровки

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

8. Следите, чтобы силуэты были чистыми и точными

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

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

9. Очистка SVG от мусора

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

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

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

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

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

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

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

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

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

Как создать значок или другое изображение

• Статья
• 07.12.2021
• 10 минут на чтение

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

Значки и курсоры: ресурсы изображений для устройств отображения

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

При создании нового значка или курсора Редактор изображений сначала создает образ стандартного типа. Изображение изначально заливается экранным (прозрачным) цветом. Если изображение является курсором, горячая точка изначально является левым верхним углом с координатами 0,0 .

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

Создать образ устройства (значок или курсор)

При создании нового ресурса значка или курсора Редактор изображений сначала создает изображение в определенном стиле (32 × 32, 16 цветов для значков и 32 × 32, монохромный для курсоров). Затем вы можете добавлять изображения разных размеров и стилей к исходному значку или курсору и редактировать каждое дополнительное изображение по мере необходимости для разных устройств отображения. Вы также можете редактировать изображение, используя операцию вырезания и вставки из существующего типа изображения или из растрового изображения, созданного в графической программе.

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

Примечание

Если в вашем проекте еще нет файла .rc, см. раздел Создание нового файла сценария ресурсов.

Диалоговое окно New Image Type позволяет создать новый образ устройства указанного типа. Чтобы открыть диалоговое окно New Image , перейдите в меню Image 9.0016 > Новый тип изображения . Включены следующие свойства: Target Image Type и Custom .

В свойстве Target Image Type перечислены доступные типы изображений, в которых вы выбираете тип изображения, которое хотите открыть:

16 x 16, 16 цветов
32 x 32, 16 цветов
48 x 48, 16 цветов
64 x 64, 16 цветов
96 x 96, 16 цветов

16 x 16, 256 цветов
32 x 32, 256 цветов
48 x 48, 256 цветов
64 x 64, 256 цветов
96 x 96, 256 цветов

16 x 16, монохромный
32 x 32, монохромный
48 x 48, монохромный
64 x 64, монохромный
96 x 96, монохромный

Примечание

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

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

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

Используйте диалоговое окно Open Image для открытия образов устройств в проектах C++. В нем перечислены существующие образы устройств в текущем ресурсе (изображения, являющиеся частью текущего ресурса). Включено следующее имущество:

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

Чтобы создать новый значок или курсор

1. В представлении ресурсов щелкните правой кнопкой мыши файл .rc , затем выберите Вставить ресурс . Если у вас уже есть ресурс изображения в файле .rc , например курсор, вы можете щелкнуть правой кнопкой мыши папку Cursor и выбрать Insert Cursor .

2. В диалоговом окне «Вставить ресурс» выберите Значок или Курсор и выберите Новый . Для значков это действие создает ресурс значка с 16-цветным значком размером 32 × 32. Для курсоров создается монохромное (двухцветное) изображение размером 32 × 32.

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

Добавление изображения для другого устройства отображения

1. Перейдите в меню Image > New Device Image или щелкните правой кнопкой мыши на панели Image Editor и выберите New Device Image .

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

Чтобы скопировать образ устройства

1. Перейдите в меню Изображение > Открыть изображение устройства и выберите изображение из списка текущих изображений. Например, выберите 16-цветную версию значка 32 × 32.

2. Скопируйте текущее отображаемое изображение значка ( Ctrl + C ).

3. Откройте другое изображение значка в другом окне редактора изображений . Например, откройте 16-цветную версию значка 16 × 16.

4. Вставьте изображение значка ( Ctrl + V ) из одного редактора изображений окно в другое. Если вы вставляете больший размер в меньший, вы можете использовать маркеры значков, чтобы изменить размер изображения.

Чтобы удалить образ устройства

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

Примечание

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

Для создания прозрачных или инвертированных областей в изображениях устройств

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

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

Примечание

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

Для создания прозрачных или инверсных областей

1. В окне Colors выберите селектор Screen-Color или Inverse-Color .

2. Примените трафаретный или инвертированный цвет к изображению с помощью инструмента рисования. Дополнительные сведения об инструментах рисования см. в разделе Использование инструмента рисования.

Чтобы изменить растр или инверсный цвет

1. Выберите либо селектор Screen-Color , либо селектор Inverse-Color .

2. Выберите цвет из палитры Colors в окне Colors .

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

   Совет

   Если дважды щелкнуть Screen-Color или Inverse-Color , появится диалоговое окно Выбор пользовательского цвета.

Используйте 256-цветную палитру

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

Чтобы создать 256-цветный значок или курсор

1. В представлении ресурсов щелкните правой кнопкой мыши файл .rc , затем выберите Вставить ресурс . Если у вас уже есть существующий ресурс изображения в вашем .rc , такой как курсор, вы можете щелкнуть правой кнопкой мыши папку Cursor и выбрать Insert Cursor .

2. В диалоговом окне «Вставить ресурс» выберите Значок или Курсор и выберите Новый .

3. Перейдите в меню Изображение > Новое изображение устройства и выберите нужный стиль 256-цветного изображения.

Выбор цвета из 256-цветной палитры для больших значков

Для рисования выбором из 256-цветной палитры необходимо выбрать цвета из палитры Colors в окне Colors.

1. Выберите большой значок или курсор или создайте новый большой значок или курсор.

2. Выберите цвет из 256 цветов, отображаемых в палитре Colors в окне Colors .

   Выбранный цвет станет текущим цветом в палитре Colors в Цвета окно.

   Примечание

   Исходная палитра, используемая для 256-цветных изображений, соответствует палитре, возвращаемой CreateHalftonePalette Windows API. Все значки, предназначенные для оболочки Windows, должны использовать эту палитру, чтобы предотвратить мерцание во время реализации палитры.

Установка активной точки курсора

Горячая точка курсора — это точка, на которую Windows ссылается при отслеживании положения курсора. По умолчанию активная точка устанавливается в левый верхний угол курсора с координатами 9.0027 0,0 . Свойство Hotspot в окне свойств показывает координаты горячей точки.

1. На панели инструментов редактора изображений выберите инструмент Set Hotspot .

2. Выберите пиксель, который вы хотите назначить активной точкой курсора.

   Свойство Hotspot в окне Properties отображает новые координаты.

Для создания и сохранения растрового изображения в формате .gif или .jpeg

При создании растрового изображения изображение создается в растровом формате (.bmp). Однако вы можете сохранить изображение в формате GIF или JPEG или в других графических форматах.

Примечание

Этот процесс не применяется к значкам и курсорам.

1. Перейдите в меню Файл > Откройте , затем выберите Файл .

2. В диалоговом окне New File выберите папку Visual C++ , затем выберите Bitmap File (.bmp) в поле Templates и выберите Open .

   Растровое изображение открывается в редакторе изображений .

3. При необходимости внесите изменения в новое растровое изображение.

4. Когда растровое изображение все еще открыто в редакторе изображений , перейдите в меню Файл > Сохранить имя файла .bmp Как .

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

   Примечание

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

6. Выбрать Сохранить .

Преобразование изображения из одного формата в другой

Изображения в формате GIF или JPEG можно открывать в редакторе изображений и сохранять их в виде растровых изображений. Кроме того, вы можете открыть растровый файл и сохранить его в формате GIF или JPEG. Изображения, с которыми вы работаете, не обязательно должны быть частью проекта для редактирования в среде разработки (см. Автономное редактирование изображений).

1. Откройте изображение в редакторе изображений .

2. Перейдите в меню Файл > Сохранить имя файла Как .

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

4. Выбрать Сохранить .

Чтобы добавить новый ресурс изображения в неуправляемый проект C++

1. В представлении ресурсов щелкните правой кнопкой мыши файл .rc и выберите Вставить ресурс . Если у вас уже есть ресурс изображения в файле .rc , например курсор, вы можете просто Курсор и выберите Вставить курсор .

2. В диалоговом окне «Вставить ресурс» выберите тип ресурса изображения, который вы хотите создать (например, Bitmap ), затем выберите New .

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

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

1. В обозревателе решений щелкните правой кнопкой мыши папку проекта (например, WindowsApplication1 ).

2. В контекстном меню выберите Добавить , затем выберите Добавить новый элемент .

3. На панели Категории разверните папку Локальные элементы проекта , затем выберите Ресурсы .

4. На панели Шаблоны выберите тип ресурса, который вы хотите добавить в свой проект.

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

Требования

Нет

См. также

Редактор изображений для значков
Практическое руководство. Редактирование изображения
Практическое руководство. Использование инструмента рисования
Практическое руководство. Работа с цветом Журнал

• 17 минут чтения
• Дизайн,
  Веб-дизайн,
  Графический дизайн
• Поделиться в Twitter, LinkedIn

Об авторе

Скотт Льюис — руководитель отдела контента Iconfinder.com, а также профессиональный дизайнер иконок. Скотт получил степень в области графического дизайна в Восточной Каролине…
Больше о
Скотт ↬

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

В этой статье обсуждается набор рекомендаций по проектированию, состоящий из шести шагов. Шаги соответствуют основам дизайна звуковых иконок, включая согласованность, разборчивость и ясность. Принципы эффективного дизайна иконок подробно обсуждались дизайнером иконок Джоном Хиксом из Hicks Design в его книге «Справочник по иконкам», а также Google в своих рекомендациях по дизайну материалов для системных иконок. Шесть шагов, обсуждаемых в этой статье следует рассматривать как руководство, а не догматический список правил . Чтобы стать великим дизайнером, нужно научиться, когда нарушать правила, а когда следовать им, как мы покажем здесь.

Магазины иконок и векторных изображений, такие как Iconfinder (где я работаю), делают хорошо разработанные векторные значки недорогим и легкодоступным ресурсом для веб-дизайнеров и полиграфистов. Доступны тысячи высококачественных наборов значков премиум-класса и сотни отличных бесплатных наборов.

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

Дополнительная литература на SmashingMag:

• Как создавать привлекательные значки приложений
• Иконки как часть удобного пользовательского интерфейса
• Как создавать значки в Adobe XD
• Простые шаги к улучшению дизайна значков

  3

  2 Еще после прыжка! Продолжить чтение ниже ↓

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

  Переработка значка

  В примерах изображений, которые следуют в этой статье, шесть обсуждаемых шагов будут применены к переработке значка собаки (точнее, корги), который был недавно представлен Iconfinder пользователь по имени Кем Бардли. Значок имел потенциал, но не был достаточно отполирован, чтобы считаться «премиальным качеством». Мы дали Кему несколько простых советов, и после небольшой переделки его иконки были готовы к утверждению в качестве премиального набора иконок. На изображении ниже показаны версии значка Кемь до и после. В следующих разделах мы объясним, как методично переходить от «до» к «после».

  На изображении слева вверху показан исходный значок. На изображении справа показан переработанный значок, в котором реализованы принципы, изложенные в этой статье. (Изображение: Кем Бардли)

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

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

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

  Форма

  Форма — это основная структура значка или способ его создания. Если вы проигнорируете детали значка и нарисуете линию вокруг основных фигур, образуют ли они квадрат, круг, горизонтальный или вертикальный прямоугольник, треугольник или более органичную форму? Основные геометрические фигуры — круг, квадрат и треугольник — создают визуально устойчивую основу для дизайна иконок. В нашем примере с корги Кем Бардли голова собаки состоит из двух треугольников и двух эллипсов. Точно так же, как можно было бы начать рисунок, набрасывая самые большие и простые формы, а затем уточняя все больше и больше деталей, можно было бы начать создание значка с самых простых форм, а затем добавить больше деталей — но только столько деталей, сколько необходимо для передачи концепции. быть представленным, будь то объект, идея или действие.

  Ключевые линии на этом изображении показывают основные основные формы, которые определяют форму дизайна. (Изображение: Кем Бардли)

  Эстетическое единство

  Элементы, общие для одного значка и для всего набора значков, — это то, что мы называем эстетическим единством. Этими элементами являются такие вещи, как закругленные или квадратные углы, определенный размер углов (2 пикселя, 4 пикселя и т. д.), ограниченный и постоянный вес линий (2 пикселя, 4 пикселя и т. д.), стиль (плоский, линейный, заполненный). линия или глиф), цветовая палитра и многое другое. Эстетическое единство набора — это набор элементов дизайна и/или вариантов выбора, которые вы повторяете в наборе, чтобы визуально связать его в единое целое. В приведенных ниже примерах обратите внимание, что каждая из трех собак из набора Кема имеет общие элементы, такие как закругленные углы толщиной 2 пикселя, обводка толщиной 2 пикселя вокруг морды собак и носы в форме сердца.

  Эти три иконы собак имеют общий дизайн и элементы стиля, создавая эстетическое единство. (Изображение: Кем Бардли)

  Узнаваемость

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

  Уникальные качества каждой собаки делают их индивидуально узнаваемыми, а общий дизайн и элементы стиля делают их узнаваемыми как комплект. (Изображение: Кем Бардли)

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

  Шесть шагов

  Всегда начинайте с сетки

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

  Здесь мы видим сетку 32 × 32 пикселя с 2-пиксельной границей (или «запретной зоной») для передышки.

  Внешние 2 пикселя сетки — это то, что мы называем «запретной зоной». Избегайте размещения какой-либо части значка в этом пространстве, если в этом нет крайней необходимости. Цель запретной зоны — создать передышку вокруг значка.

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

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

  Выравнивание круглых значков с сеткой и ключевыми линиями (Изображение: Скотт Льюис)

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

  Выравнивание и размер круглых и квадратных значков относительно сетки (Изображение: Скотт Льюис)

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

  Выравнивание и изменение размеров вертикально и горизонтально ориентированных значков относительно сетки (Изображение: Скотт Льюис)

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

  Выравнивание и размер диагонально ориентированного значка относительно сетки (Изображение: Скотт Льюис)

  Помните, что вам не нужно каждый раз точно следовать сетке и направляющим. Сетка предназначена для того, чтобы помочь вам сделать значки согласованными, но если вам нужно выбирать между созданием отличного значка и соблюдением правил, нарушайте правила — просто делайте это с осторожностью. Как сказал Хеммо де Йонге, более известный под своим прозвищем «Голландская икона»:0017

  Сущность отдельного значка перевешивает важность сплоченности набора.

  Начните с простых геометрических фигур

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

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

  В цифрах: кромки, линии, углы, кривые и углы

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

  Углы

  В большинстве случаев придерживайтесь углов 45 градусов или кратных им. Сглаживание под углом 45 градусов равномерно ступенчатое (активные пиксели выровнены встык), поэтому результат четкий, а идеальная диагональ этого угла — легко распознаваемый узор, который очень нравится человеческому глазу. Этот узнаваемый шаблон создает согласованность в наборе значков и единство в пределах одного значка. Если ваш дизайн диктует, что вы должны нарушить это правило, попробуйте сделать это пополам (22,5 градуса, 11,25 и т. д.) или кратно 15 градусам. Каждая ситуация индивидуальна, поэтому решайте в каждом конкретном случае. Преимущество использования половины угла в 45 градусов заключается в том, что пошаговое сглаживание будет по-прежнему достаточно равномерным.

  Крупный план обычного сглаживания углов под углом 45 градусов

  Кривые

  Одна из наиболее заметных областей, которая может ухудшить качество значка и может означать, что разница между профессиональным и любительским видом меньше — чем идеальные кривые. В то время как человеческий глаз может обнаруживать очень небольшие отклонения в точности, зрительно-моторная координация не всегда может обеспечить высокий уровень точности. Полагайтесь на инструменты формы и числа, чтобы создавать кривые в максимально возможной степени, а не рисовать их вручную. Если вам нужно нарисовать кривую вручную, используйте клавишу модификатора ограничений Adobe Illustrator (или вашего векторного программного обеспечения) (клавиша Shift) или, что еще лучше, используйте VectorScribe и InkScribe от Astute Graphics для еще более точного управления кривыми Безье.

  Ручное рисование углов дает плохие результаты. (Изображение: Кем Бардли)

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

  Эти очень точные кривые были созданы с помощью инструментов Безье в Illustrator, а не от руки.

  Углы

  Обычное значение закругленного угла (или радиуса) составляет 2 пикселя. В значке размером 32 × 32 пикселя радиус в 2 пикселя достаточно велик, чтобы его можно было четко увидеть закругленным, но не настолько, чтобы смягчить углы, чтобы изменить индивидуальность дизайна (придавая вид «пузыря»). Значение, которое вы выберете, будет зависеть от индивидуальности, которую вы хотите придать дизайну. Если вы используете закругленные углы, это эстетическое решение, которое должно быть принято с учетом общей эстетики набора.

  Точно закругленные углы

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

  Прогресс нашего переработанного значка корги

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

  Совершенство пикселей

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

  Как уже упоминалось, 45-градусные углы лучше всего подходят (после прямых линий), потому что пиксели, используемые для определения угла, расположены стопкой или ступенчато, от края до края по идеальной диагонали. То же самое относится к углам и кривым: чем они точнее математически, тем четче будет сглаживание. Обратите внимание, однако, что совершенство пикселей менее важно, по крайней мере, для сглаживания, при больших размерах и на экранах с более высоким разрешением, таких как дисплеи «Retina».

  Толщина лески

  Когда дело доходит до толщины лески, идеально подходят две, но иногда необходимы и три. Цель состоит в том, чтобы обеспечить визуальную иерархию и разнообразие, не вводя слишком много разнообразия и, таким образом, не нарушая согласованности набора. Больше трех и сет может потерять свою связность. Преимущество 2- и 4-пиксельных весов линий заключается в том, что они кратны 2 и, следовательно, легко масштабируются вверх и вниз с одинаковыми приращениями. В большинстве случаев избегайте очень тонких линий, особенно в глифах и плоских значках. Если вы намеренно не создаете значки в «линейном стиле», полагайтесь на свет и тень, а не на линии, чтобы определить форму.

  Этот значок iPhone демонстрирует постоянную толщину линий. (Изображение: Скотт Льюис)

  Используйте согласованные элементы дизайна и акценты в иконках

  Хеммо де Йонге из Dutch Icon выступил с блестящей речью на Icon Salon 2015, в которой подробно рассказал об этом аспекте дизайна иконок. В своем двухлетнем проекте системы значков для правительства Нидерландов Хеммо и его партнер по дизайну сделали выемку на каждом из значков. Не у каждого значка есть выемка, но у большинства она есть. Этот вид акцента, используемый консервативно, но постоянно в наборе иконок, действительно может связать набор воедино.

  Использование общих элементов дизайна (Изображение: Dutch Icon)

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

  Использование общих элементов дизайна с нашими значками собак (Изображение: Кем Бардли)

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

  Использование общих элементов дизайна в наших значках собак, но в другом стиле (Изображение: Кем Бардли)

  Экономное использование деталей и украшений

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

  Минимум деталей сообщает, что это за объект. (Изображение: Кем Бардли)

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

  Сделайте его уникальным

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

  Нос в форме сердца у корги делает эту иконку уникальной и индивидуальной. (Изображение: Кем Бардли)

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

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

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