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

Содержание

Разработка иконок в Москве — YouDo

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

Что такое иконка?

Иконка — визуальный образ, который, как правило, рисуется в виде трехмерного цветного изображения. Создание иконки для сайта является трудоёмкой работой. Дизайнеру понадобится много времени, если цель – уникальность и привлекательность. В определённых случаях, иконка – небольшое изображения, которое находится во вкладке в браузере при открытии того или иного сайта и имеет расширение ісо (называют favicon.ico).

Индивидуальная иконка – личный стиль сайта

Для начала, иконка – это:

  • индивидуальность;
  • привлекательность;
  • помощник в раскрутке сайта;

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

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

В «Избранном» или в «Закладках» а также в адресной строке любого нынешнего браузера, уникальная иконка всегда будет выделяться среди многих других. Это, конечно же, подтолкнёт каждого на посещения сайта снова и снова. Для разработки иконки такого вида используется favicon – изображение, разрешение которого 16 х 16 пикселей.

Какой должна быть иконка?

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

Роль фрилансера

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

оформлении сайтов. Его профессия является творческой, но он также предоставляет другие услуги, как:

  • оформление сайтов;
  • написание статей;
  • поиск бизнес-партнёров;
  • поддержка сайта.

В общем, услуги фрилансера – это успех сайта. Заказать иконки для сайта можно у этого «разнорабочего» на бирже Юду.

Стоимость работ

Всё зависит от оригинальности и пожелания заказчика. Чем интересней иконка и больше её разрешение, тем выше стоимость. Цена в зависимости от сложности работы и сроков может варьироваться от 5 до 50 долларов.

 

Создание иконок: распространенные ошибки веб-дизайнеров

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

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

Плохая различимость иконок

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

Много элементов в одной иконке

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

Содержание лишних элементов в иконке

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

Иконка не отвечает единому стилевому оформлению

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

Использование слишком оригинальных метафор

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

Иконки не учитывают социальные или национальные особенности

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

Создание иконок сайтов для iOS и Android

iOS, Дизайн

Многие сайты имеют favicons для закладок. А что если сайт добавили на «рабочий стол» в IPhone? Favicons могут использоваться сайтами и веб приложениями.

Представляем Вам небольшую инструкцию как можно установить favicons для устройств на базе IOS и Android.

iOS Размеры иконки

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

Как Вы возможно заметили, что retina иконки в 2 раза больше предыдущих разрешений. Это из-за того, что retina экраны имеют двойную плотность пикселей. То есть для заполнения того же пространства 57х57рх нужно отрисовать 114х114рх.

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

Установка иконок

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

<link rel="icon" href="favicon.ico" type="image/x-icon"/>

Для добавления iOS иконок всё аналогично, просто другой синтаксис. Конечно, каждую иконку нужно прописать отдельно.

Чтобы iOS устройство распознало иконку как favicon необходимо 2 вещи. Сперва, «rel» должно быть прописано как apple-touch-icon, а потом необходимо, что размер был в стиле 57х57. Ниже пример как это должно быть.

<link rel="apple-touch-icon" href="apple-icon-57x57.png" />

<link rel="apple-touch-icon" href="apple-icon-72x72.png" />

<link rel="apple-touch-icon" href="apple-icon-114x114.png" />

<link rel="apple-touch-icon" href="apple-icon-144x144.png" />

Специальные эффекты

Надеюсь, Вы в курсе, что все iOS иконки имеют закруглённые края, небольшую тень и блики. Это делается Apple автоматически, не стоит беспокоится и добавлять это самостоятельно. Делайте иконки квадратными

Для того, чтобы убрать автоматическую обработку необходимо это прописать в «rel»:

<link rel=»apple-touch-icon-precomposed» sizes=»114×114″ href=»apple-icon-114×114-precomposed.png» />

 Android и остальные устройства

Favicons для Apple подходят так же для: Blackberry v6.0 и выше, Android 2.2 и выше. Согласитесь, что это приятно? Не нужно создавать версия для каждого из устройств на Android  и  Blackberry, а так же всех остальных.

Design tips

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

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

Иконки для вдохновления

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

Мне очень нравится набор цветов, использованный с часами. Они хорошо смотрятся с flat дизайном.

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

Здесь очень круто работают с тенями. Серый цвет хорошо смотрится рядом с голубым.

Ещё одна иконка с мега тенями. Радуга смотрится особенно круто. Градиент тоже хорош.

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

Цветы и трава выглядит очень реалистичными.

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

Навигация по публикации
↑ Наверх

Разработка иконок ᐈ【 Оригинальный дизайн иконки】ᐈ【WeLoveBrands】™

Процесс разработки иконок в студии WeLoveBrands осуществляется в несколько этапов:

  1. Поиск максимально подходящего стиля.
  2. Создание иконок в виде нескольких эскизов.
  3. Согласование окончательного варианта с клиентом.
  4. Доработка дизайна иконок при необходимости.

Мы предлагаем дизайн иконок 2-х типов:

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

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

Создание иконок дизайнерами WeLoveBrands: наши преимущества

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

От чего зависит стоимость разработки дизайна иконок?

На цену создания дизайна иконок влияют следующие факторы:

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

Заказать современный дизайн иконок в Днепре вы можете, позвонив в офис студии WeLoveBrands по телефону +38 044 38 44 99 0 или заполнив онлайн-форму обратной связи.

Как создать набор иконок в формате шрифта

Статья, в которой рассмотрим процесс создания иконочного шрифта с помощью сервиса IcoMoon (https://icomoon.io/).

Разработка персонального иконочного шрифта для сайта является одной из основных задач веб-разработчика. Т.к. использование готовых наборов шрифтов, может сильно «утяжелить» загрузку страниц сайта. Это связано с тем, что они содержат большое количество иконок (Font Awesome — 675 иконок, IconMoon — 491, Foundation Icons — 283, Glyphicons Halflings – более 250). В то время как количество иконок, которых реально требуется для оформления среднего сайта, находится в диапазоне от 20 до 50 единиц.

Преимущества и недостатки иконочных шрифтов

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

Использование иконок в таком формате является очень привлекательным решением. Во-первых, такими иконками очень просто управлять, т.е. изменять их размер, цвет и другие параметры. Осуществляется это с помощью таких же свойств CSS, которые применяются для стилизации обычного текста (font-size, color и др.). Во-вторых, в формате шрифта иконки находятся в векторном формате. Это означает то, что они хорошо масштабируются и отлично выглядят на экранах устройств с высокой плотностью пикселей. Кроме этого шрифт — это сжатый формат, а значит, для его загрузки может потребоваться гораздо меньше времени, чем для загрузки аналогичных векторных изображений. Ещё одним неоспоримым плюсом шрифтовых иконок является то, что они поддерживаются всеми браузерами. Осуществляется это благодаря созданию на базе одного пакета иконок шрифтов в различных форматах: eot, ttf, svg и woff. Это необходимо выполнить для того, что браузер использовал тот формат шрифта, который он «понимает». Потому что на текущий момент нет ни одного формата шрифта, который бы поддерживался всеми браузерами.

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

Основный алгоритм действий по созданию шрифта в IcoMoon App

Рассмотрим некоторые основные шаги по разработке шрифта в сервисе IcoMoon App:

  1. Перейти на страницу IcoMoon App, с помощью кнопки, расположенной на главной странице сервиса или используя URL адрес: https://icomoon.io/app/.
  2. Ввести название проекта (значок «Manage Projects»).
  3. Добавить в проект при необходимости шрифт Font Awesome (кнопка с тремя полосочками -> Icon Library).
  4. Добавить в проект пустой набор, который можно использовать для помещения в него пользовательских (своих) иконок (кнопка с 3 линиями -> New Empty Set).
  5. Задать название только что созданному набору (кнопка с тремя полосочками -> View / Edit Info).
  6. Добавить в набор пользовательские (свои) значки (кнопка «3 горизонтальные линии» -> Import to Set).
  7. Выбрать иконки, которые необходимо добавить в результирующий набор, с помощью инструмента «Select».
  8. Выполнить генерацию шрифта (нажать внизу страницы на элемент «Generate Font»).
  9. Нажать на значок шестерёнки и в открывшемся диалоговом окне ввести название шрифта (Font Name), префикс класса (Class Prefix), выбрать опцию «Use a class» (Использовать класс) и указать в поле значение «.icon».
  10. Нажать на кнопку «Download».
Работа в сервисе IcoMoon — Выбор иконок (шаг 1)Работа в сервисе IcoMoon — Указание названий значкам (шаг 2)Работа в сервисе IcoMoon — Установки для генерации шрифта

Подключение иконок в формате шрифта к странице

Для установки иконочного шрифта необходимо распаковать архив, созданный сайтом IcoMoon, и перенести из него в рабочий проект каталог fonts (шрифты) и файл «style.css».

По умолчанию папка со шрифтами должна располагаться в том же каталоге что и файл CSS. Для того чтобы каталог fonts расположить по-другому, необходимо внести соответствующие изменения в файл «style.css».

Подключения шрифта к странице и классов для удобной работы с ним осуществляется посредством файла «style.css».


<!-- path-to - путь до файла style.css -->
<link href="path-to/style.css" rel="stylesheet">

При желании содержимое файла «style.css» можно включить в свой файл стилей. Это позволит сократить количество HTTP-запросов и немного увеличить загрузку страницы.

Использование иконок на странице

Применение иконок созданного шрифта на странице осуществляется с помощью элемента i, к которому необходимо добавить базовый класс icon (определяется на основе настройки «Use a class») и класс иконки.


<!-- icon - базовый класс -->
<!-- icon-ok - класс иконки ok -->
<i></i>

Создание иконок социальных сетей для сайта

Разработку собственных социальных значков для сайта очень просто выполнить в открытом векторном SVG редакторе Inkscape.

Для этого их можно нарисовать или воспользоваться уже существующими изображениями иконок из бесплатных наборов.

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

После подготовки векторных svg-изображений их можно с помощью сервиса IcoMoon собрать в иконочный шрифт.

Создание иконки «Twitter» в Inkscape

Пример иконок социальных сетей в форме прямоугольника со скруглёнными краями.

Сборка шрифта из созданных иконок в IcoMoon

Скачать шрифт с социальными иконками и исходные коды можно по следующей ссылке: https://yadi.sk/d/oaOfUROSyTjDQ.

Использование социальных иконок на странице (классы социальных значков можно посмотреть в файле «style.css»):


<i></i>

Кроме IcoMoon есть ещё и другие онлайн сервисы для создания значков в виде шрифта. К ним относится «fontello.com», «fontastic.me», «glyphter.com», «pictonic.co» и др.

Дизайн, разработка иконок, пиктограмм, значков

Помимо создания сайтов, я предлагаю новую услугу — создание графики на заказ:

  • дизайн, создание пиктограмм
  • разработка, дизайн иконок
  • создание значков
  • создание фавиконов (favicon.ico) для сайтов

Для чего нужен дизайн пиктограмм?

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

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

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

[widgetkit id=1]

Сет иконок на тему фото-видео в монохромном исполнении

Какое отличие между пиктограммой, иконкой и значком?

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

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

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

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

Стоимость и сроки создания иконок, пиктограмм и значков для сайта

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

 Размер, рх Цены, $ / Сроки
4-7 дней 8-14 дней
16х16 6 4
24х24 10 6
32х32 15 9
48х48 17 12
64х64 23 17
128х128 37 25
256х256 70 50

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

5 программ для создания интересных иконок и иконок для вашего сайта

  • Цена — бесплатно

GIMP (GNU Image Manipulation Program) — это бесплатный инструмент для редактирования изображений с открытым исходным кодом, который поставляется со всеми функциями, которые вы бы искали в профессиональной программе для работы с изображениями.

Со всеми прибамбасами, которые он предлагает, одной удобной функцией в GIMP является возможность создавать значки. Если вы знаете, как использовать GIMP и установить его на свой ПК, вам не нужен какой-либо другой инструмент создания favicon.

Создать иконку с помощью GIMP легко (при условии, что вы использовали GIMP раньше). Начните с создания нового файла изображения и установите размер 48 × 48 пикселей. Поскольку размер изображения небольшой, увеличьте масштаб, чтобы настроить рабочую область.

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

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

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

Создать иконку с помощью GIMP

Завершение!

Этот список состоит из премиум, а также бесплатные редакторы иконок. Какой тип редакторов иконок вы хотите использовать, зависит от вашего использования. Если вы являетесь графическим дизайнером или фрилансером, предлагающим свои услуги, вам может потребоваться что-то, обладающее множеством функций, например, Icon Flow, GIMP или даже Photoshop.

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

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

СВЯЗАННЫЕ ИСТОРИИ, КОТОРЫЕ ВЫ МОЖЕТЕ КАК:

Как создать веб-иконку в Adobe Illustrator

Adobe Illustrator • Уроки Андрей Штефан • 28 июля 2014 г. • 11 минут ПРОЧИТАТЬ

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

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

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

Шаг 1. Проведите исследование

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

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

Лучшие ресурсы для этого:

Конструктор электронных писем онлайн

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

Попробуйте бесплатноДругие продукты
  • Словарь : Будь то в Интернете или в твердом переплете, этот маленький парень всегда поможет вам получить первое представление о том, каким должен быть или представлять ваш продукт.
  • Веб-сайт, специализирующийся на работе со значками : попробуйте Iconfinder, в котором есть отличная поисковая система, которая просматривает тонны категоризированных значков, связанных с определенными ключевыми словами.
  • Прогулка по городу : вы будете поражены количеством информации, которую наше окружение может предложить в виде символов.
  • Google: Если есть что-то, что Google делает лучше всего, так это поиск релевантной информации (определения, характеристики и наиболее важные изображения), напрямую связанной с искомым словом.

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

Шаг 2 — Начать рисование

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

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

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

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

Шаг 3 — Запуск Illustrator

Неважно, давно ли вы работаете с пикселями или только начинаете, — одним из самых важных инструментов является Adobe Illustrator.Я не буду говорить о самом программном обеспечении, но проведу вас через настройку New Document и начало создания значка.

3.1. Создать новый документ

Предполагая, что у вас уже есть Illustrator, работающий в фоновом режиме, создайте новый документ, нажав Ctrl + n (или + n , если вы используете Mac) или перейдя в FILE> New… , и давайте рассмотрим некоторые из настроек , которые появятся во всплывающем окне.

  • Имя : Это очевидно; дайте ему любое имя, подходящее для вашего проекта.
  • Профиль : это важно, потому что графика, разработанная для Интернета, будет отличаться от графики, основанной на профиле для печати. Убедитесь, что в раскрывающемся меню выбрано Web .
  • Количество артбордов : Артборд согласно Adobe представляет области, которые могут содержать фактические графические объекты. Я обычно выбираю больший артборд, даже если у меня несколько дизайнов, и кладу их на разные слои, чтобы они были под рукой, и выбираю именно те, которые я хочу увидеть.
  • Ширина и Высота : Меры, в соответствии с которыми вы можете изменять размер монтажной области — в нашем случае мы выберем размер 120 на 120 пикселей.
  • Единицы : Illustrator предназначен для использования в Интернете и печати, поэтому у вас есть много вариантов; для этого проекта мы выберем пикселей.
  • Цветовой режим : еще раз проверьте, подходит ли этот параметр для материала, для которого вы создаете. RGB (красный, зеленый, синий) — это цвет, специфичный для цифрового носителя, тогда как CMYK (голубой, пурпурный, желтый, черный) используется в проектах, связанных с печатью.Для нашего проекта мы будем использовать RGB.

Quick Tip : Узнайте больше о различиях между RGB и CMYK в этом официальном руководстве Adobe (которое хорошо объясняет ключевые различия, о которых вам необходимо знать).

  • Растровые эффекты : можно выбрать одно из трех значений
  1. Экран (72 ppi), — значение по умолчанию. Это стандартный вариант, который вы бы выбрали, если бы создавали дизайн для Интернета (что в нашем случае так и есть).
  2. Средний (150 пикселей на дюйм).
  3. Высокое (300 пикселей на дюйм). Две последние опции предназначены для графики, которая будет использоваться для печати.

Quick Tip : Теперь, когда вы создали иллюстрацию и предположим, что в вашем дизайне используются эффекты из меню Stylize , такие как Drop Shadows , Outer Glow или Inner Glow , вам необходимо убедиться, что качественный. Печатная версия должна выглядеть такой же гладкой и чистой, как и версия на вашем мониторе.Для этого выберите Effect> Document Raster Effects Settings и выберите более высокое разрешение из флажков — вы также можете ввести собственное значение в поле Other .

Хотя мы собираемся разрабатывать дизайн для Интернета ( 72 ppi ), в конечном итоге арт будет как png или jpeg , которые представляют собой растровых изображений . Если вы зайдете на сайт Adobe, то найдете еще один совет, посвященный влиянию ppi на штрихи дизайна:

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

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

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

3.2. Получение основных форм

Сначала создайте круг , который будет служить фоном для всего дизайна. Используя инструмент Ellipse Tool ( L), щелкните левой кнопкой мыши в любом месте Illustrator, чтобы открыть окно настроек Rounded Rectangle Settings Box и установить Width и Height круга. Введите 110 пикселей для и нажмите ОК. Выделите только что созданный объект и удалите цвет с обводки и придайте ему красивую светло-красноватую заливку ( HEX = ff7171 или R = 255, G = 113, B = 113 ).

Возьмите инструмент Rounded Rectangle Tool (находится на левой панели инструментов, там же, что и инструмент Rectangle Tool ), щелкните левой кнопкой мыши на монтажной области и создайте фигуру 55 x 80px с радиусом угла 5px . Используя параметры Align ( Window> Align ), выберите новый объект и по горизонтали, и по вертикали, выровняйте его по монтажной области. Заливка темно-серым цветом # 606060 ( R = 96, G = 96, B = 96 )

Совет : Если вы только что настроили панель «Выравнивание», к выбранным объектам будет применено выравнивание по умолчанию.Чтобы выровнять по монтажной области, посмотрите в правый нижний угол, нажмите « Align To» и выберите Align to Artboard.

Следуя тем же шагам, что и раньше, создайте новый прямоугольник с закругленными углами (ширина = 39 пикселей, высота = 64 пикселя, радиус угла = 1 пиксель ). Выберите новый объект, выровняйте его по горизонтали с монтажной областью и переместите к верхней части большего прямоугольника.

Выделив объект, измените его цвет заливки на более светлый серый D3D3D3 ( R = 211, G = 211, B = 211 ).

Это основная рамка и экран, которые будут представлять Kindle.

3.3 Кнопки наслоения

Следующий шаг связан с кнопками . Выберите инструмент Rounded rectangle tool и создайте объект 5 x 5px с радиусом закругления 2px . Выровняйте его по горизонтали с другими частями и переместите в середину пространства между нижней стороной экрана и нижней стороной тела (вы также можете сделать это, перетащив и создав прямоугольник и выровняв по вертикали кнопку с ним. ).Назначьте цвет заливки ( 474747, R = 71, G = 71, B = 71 ), затем скопируйте его и вставьте на место ( Ctrl + f / + f ). Выделите дублирующую кнопку и переверните ее обводку цветом заливки, оставив 1px .

Теперь у нас есть главная кнопка; далее идут четыре закругленных. Выберите инструмент Ellipse Tool ( L ) и создайте круг 3 x 3px . Выделите его и, удерживая Alt , перетащите влево, чтобы продублировать.Выбрав оба, снова удерживайте Alt ( Option на Mac ) , и перетащите в правую часть основной кнопки. Выделите все круглые кнопки и основную. Щелкните левой кнопкой мыши по центральной кнопке и, используя панель Align , отцентрируйте их по вертикали. Теперь нам нужно разместить их, оставив все объекты выделенными, перейти в левый нижний угол Align to Distribute Spacing , присвоить ему 4px и выбрать Horizontal Distribute Space .

Для боковых кнопок мы создадим объект с закругленными углами (ширина = 5 пикселей, высота = 30 пикселей, радиус угла = 1 пиксель, ) и выровняем его по вертикали относительно основной части значка. Перетащите его немного вправо, чтобы он перекрывал друг друга. Используя инструмент Shape Builder Tool ( Shift + m ), вычтите пересечение двух объектов, и у вас появятся кнопки навигации по страницам.

Выберите новый объект и измените заливку на 3d3d3d ( R = 61, G = 61, B = 61 ).Дублируйте и отразите его по вертикали ( щелкните правой кнопкой мыши> Transform> Reflect> Vertical ), затем выровняйте по правой стороне основного тела.

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

3.4. Добавление деталей

Разложив наш Kindle, мы начнем добавлять последние штрихи к экрану. Возьмите инструмент Rectangle Tool и нарисуйте объект 100 x 55px . Поверните его, нажав R , а затем перетащите один угол влево, удерживая нажатой Shift , чтобы получить хороший угол в 45 градусов.Дублируйте экран Kindle и выберите его и повернутый объект и нажмите Shift + M для инструмента Shape Builder Tool. Вычтите пересеченный путь для красивого отражения.

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

Еще раз выберите экран, скопируйте и вставьте его на место, перевернув заливку обводкой и придав ей более темный серый цвет ( 3d3d3d ).

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

3,5. Добавить длинную тень

Закончим нашу иконку, отбросив длинную тень. Дублируйте основной значок значка ( Ctrl + c, , затем Ctrl + f) , чтобы вставить его на место.Выберите новый объект и перетащите его под углом 45 к правому нижнему углу. Мы сделаем это, удерживая Alt и, перетаскивая вправо, нажимая и удерживая Shift , чтобы вы получили его точно под углом 45 градусов.

Создайте переход между двумя объектами; перейдите в Object> Blend Options и в Specified Steps введите 200 . Теперь, используя тот же путь, выберите Make .

Эти двое объединились в единую форму.Перейдите в Object> Expand> OK , а затем в окне Transform нажмите Unite . Это базовая тень. Придайте ему более темный цвет, чем фоновый круг, а затем замаскируйте его, чтобы он не выпадал из фактического дизайна. Измените цвет на d85d5d ( R = 216, G = 93, B = 93 ), затем скопируйте и вставьте круг перед длинной тенью. Выделите и тень, и расположенный над ней объект, а затем щелкните правой кнопкой мыши > Сделать обтравочную маску .

Мы прибили!

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

Шаг 4. Сохранить для Интернета

У нас есть красивый значок, но как насчет его сохранения, чтобы мы действительно могли использовать его для того, что мы изначально задумали — для Интернета? Экспортируйте иллюстрации с использованием векторного формата SVG (Scalable Vector Graphics) XML.Основные преимущества использования SVG по сравнению с другими форматами (например, PNG):

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

Итак, давайте продолжим и посмотрим некоторые настройки этого формата. Перейдите в File> Save as> и из Save as type щелкните раскрывающийся список и выберите SVG ( *.SVG ) — не забудьте установить флажок Use Artboards , чтобы сохранить только элементы на вашей монтажной области. Должно появиться всплывающее окно — нажмите на опцию еще , чтобы увидеть полный набор опций. Пройдемся по каждому из них:

  • Профили SVG : с августа 2011 года стандартная версия, продвигаемая W3C , — 1.1
  • Шрифты

Тип: Управляет способом встраивания шрифтов в фактический файл.Обычно, если у вас есть текст, Adobe рекомендует , SVG, , но это имеет некоторые недостатки и не поддерживается Firefox.

Подмножество : Используя SVG , вы можете сохранить подмножество глифов (символов) в фактическом файле (что увеличит размер, но позволит вам изменять содержимое), но мы будем использовать Only Glyphs Used , потому что наш дизайн делает это. не включать текст.

  • Расположение изображения : этот параметр во многом определяет способ встраивания изображений в файл SVG .Согласно Adobe, лучшим вариантом является использование Link , а затем изменение параметра href , чтобы он указывал на ваш собственный файл изображения, который вы должны сжать с помощью Photoshop или любого другого программного обеспечения для редактирования изображений.
  • CSS Properties : Используя Style Elements , вы можете изменить код SVG в соответствии с вашими потребностями после экспорта файла и использования его на своем веб-сайте.
  • Десятичные разряды : Значение здесь определяет точность экспортируемых векторов.Чем больше число, тем больше размер файла. Рекомендуется ввести значение 1.
  • Вывести меньше элементов : если ваше произведение включает в себя много текста, используйте этот параметр, чтобы уменьшить общий размер файла SVG — наш значок не зависит от текста, поэтому мы можем не устанавливать этот флажок.

После выбора всех вышеперечисленных параметров нажмите Сохранить .

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

Вот и все!

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

Нравится то, что вы читаете? Подпишитесь на наши главные новости.

6 простых шагов к лучшему дизайну иконок — Smashing Magazine

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

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

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

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

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

Больше после прыжка! Продолжить чтение ниже ↓

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

Переделка иконы

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


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

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

Три атрибута эффективного дизайна иконок

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

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

Форма

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


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

Aesthetic Unity

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


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

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

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


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

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

Шесть шагов

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

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


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

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

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

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


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

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


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

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


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

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


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

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

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

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

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


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

По номерам: края, линии, углы, кривые и углы

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

Уголки

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


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

Кривые

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


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

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


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

Уголки

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


Точно скругленные углы

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


Прогресс нашей переработанной иконки Corgi

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

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

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

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

Толщина линий

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


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

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

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


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

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


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

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


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

Используйте детали и украшения экономно

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


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

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

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

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


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

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

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


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

Заключение

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

У вас есть собственные методы, советы или основы, которыми вы хотели бы поделиться? Оставляйте их в комментариях ниже.

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

(ах, мл, ал, ил)

Как создать набор иконок [+ ресурсы]

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

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

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

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

Почему значки важны на веб-сайте?

Иконки — это ключевые элементы оформления веб-сайта. Они эстетичны и могут улучшить макет сайта. Замена страниц с большим количеством текста узнаваемыми символами облегчает пользователю понимание контекста страницы.

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

Как создать набор иконок

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

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

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

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

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

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

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

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

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

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

Источник изображения

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

Источник изображения

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

Выберите стиль.

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

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

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

Источник изображения

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

Источник изображения

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

Источник изображения

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

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

Начать творить.

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

В соответствии с принципами создания значков в Material Design, вам нужно будет начать с сетки. Это поможет вам сосредоточиться на форме, размере и размещении объектов с помощью значков. Ваш процесс проектирования будет более простым, если все будет правильно подобрано.

Источник изображения

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

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

Вот пример того, что они называют занятым, слишком подробным значком, из Material Design:

Источник изображения

По сравнению с тем, что они обозначают как четкий и простой значок:

Источник изображения

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

Будьте оригинальны.

Если ваши значки являются частью узнаваемого бренда вашего веб-сайта, они должны выглядеть только так, как ваши значки. Давайте посмотрим на значки Waze и Google Maps.

Источник изображения

Источник изображения

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

Протестируйте и внедрите свои значки.

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

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

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

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

Ресурсы для дизайна иконок

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

1. Материальный дизайн

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

2. Streamline Icons

Streamline Icons содержит более 30 000 предварительно разработанных значков, которые доступны для загрузки.Их бесплатный пакет Essential Icons содержит часто используемые символы для электронной почты и музыкальных функций, а их платный «Ultimate Pack» включает нишевые значки, такие как символы путешествий и экологии.

3. Nucleo

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

4. Animaticons

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

5. Бесплатные ресурсы для дизайна.

Free Design Resources предлагает различные пакеты значков для загрузки и использования на вашем веб-сайте, например значки панели вкладок iOS. Некоторые наборы бесплатны, некоторые платные, и вы можете фильтровать значки по их совместимости с вашим любимым программным обеспечением для дизайна, таким как Illustrator, Figma или Sketch.

Иконки — необходимые элементы вашего сайта.

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

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

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

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

20+ лучших премиум и бесплатных пакетов значков для веб-разработчиков и дизайнеров

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

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

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

Плюсы использования иконок в следующем UX-дизайн-проекте
  • Иконки помогают повысить удобочитаемость сайта или приложения;
  • Хорошо оформленные значки помогают уменьшить объем текста. Использование значков делает ваше сообщение понятным без текста;
  • Иконки могут добавить индивидуальности вашему продукту;
  • Иконки могут быть хорошей отправной точкой в ​​знакомстве с продуктом;
  • И последнее, но не менее важное: одна из важнейших функций иконок — помочь пользователям интуитивно понять приложение как при первом знакомстве, так и во время последующего использования.

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

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

  • Бесплатные иконки ;
  • Торговые площадки с наборами иконок. На торговой площадке представлены иконки разных авторов. Здесь можно найти как дешевые и дорогие, так и хорошие и некачественные товары;
  • Значок материала набора и Плоский значок набора;
  • наборов иконок CSS. иконок CSS созданы с использованием — угадайте, что — CSS. Чтобы использовать их, просто скопируйте код на свою страницу;
  • Иконки шрифтов. Согласно Pluralsight, шрифты значков — это фактические шрифты, которые содержат символы и глифы вместо букв или цифр.Они популярны среди веб-дизайнеров, поскольку вы можете стилизовать их с помощью CSS так же, как и обычный текст. Иконочные шрифты обрабатываются браузерами как текст, поэтому вам необходимо нормализовать их, чтобы избежать проблем сглаживания текста, и поддерживаются почти во всех браузерах;
  • SVG-иконки. Scalable Vector Graphics (SVG) — это формат векторной графики на основе XML, который можно масштабировать до любого размера без потери четкости. Они могут отображаться с помощью CSS, тегов объектов, тегов изображений или встроены непосредственно в ваш HTML;
  • Глифы и пиктограммы набора значков.

Список лучших наборов иконок

Флатикон

Веб-сайт: https://www.flaticon.com/packs
Форматы и тип: PNG, SVG, EPS, PSD и BASE 64, Marketplace
Цена и лицензия: Ограниченный бесплатный план и премиум планы от 7,50 $ / месяц

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

Продукт имеет расширение Adobe, которое позволяет легко импортировать значки в Photoshop, Illustrator и After Effects. Если вы хотите использовать веб-шрифт вместо статических файлов для ваших значков, FlatIcon позаботится о преобразовании формата и сгенерирует веб-шрифт, готовый к использованию. Вы также можете настроить загруженные значки.

Ключевые факты:

  • более 90 000 иконок;
  • форматы SVG, EPS, PSD и PNG;
  • иконочных шрифтов;
  • Adobe Extension for CC Suite;
  • Лицензия Linkshare с дополнительными опциями; и
  • новых пакетов значков добавляются каждый месяц.

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

Джем Иконки

Веб-сайт: https://jam-icons.com/
Формат и тип: SVG, CSS
Цена и лицензия: Free, MIT

Иконки Jam — это набор из 896 иконок ручной работы. Этот пакет значков поставляется с версиями SVG и шрифтов.Значки можно использовать как файлы SVG в ваших проектах в Интернете, печати или разработке приложений. Значки также можно использовать в качестве шрифта с заданными таблицами стилей CSS. Есть размеры 16px, 24px и 32px. Вы также можете выбрать заливку или обводку значков.

Пакет значков Fontisto

Веб-сайт: https://fontisto.com/
Формат и тип: CSS
Цена и лицензия: Free, MIT

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

На веб-сайте вы можете найти полную документацию и различные руководства по запуску и настройке продукта. Вы можете начать использовать продукт, просто вставив ссылку на свой сайт. Кроме того, вы можете использовать Fontisto с подходящими для вас менеджерами пакетов: npm, yarn, bower и т. Д.

Iconscout

Веб-сайт: https: // iconscout.com / icons
Формат и тип: SVG, PNG, ICO, ICNS, EPS, AI, PDF
Лицензия и цена: Бесплатные и премиум планы от 11,99 $

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

Ключевые факты:

  • 2,9 млн + иконок, 30 тыс. + Иллюстраций, 3 тыс. + 3D-ассеты, 2,8 тыс. Анимаций Lottie;
  • 5000+ активов добавляются каждый день;
  • Iconscout Приложение доступно для использования прямо с панели инструментов;
  • Интегрированные плагины и инструменты, такие как Icon Editor и Icon Converter.

Iconmonstr

Веб-сайт: https: // iconmonstr.com /
Формат и тип: SVG, EPS, PSD и PNG, Marketplace
Цена и лицензия: Бесплатно

Коллекция иконок

Iconmonstr насчитывает более 4400 иконок. Каждый набор значков предлагает как очертания, так и варианты графики с заливкой, чтобы их можно было использовать в различных дизайнерских приложениях. Каждый значок на этом сайте доступен бесплатно, а файлы значков имеют такие форматы, как SVG, AI, PSD и PNG. Файлы можно использовать в коммерческих и бесплатных целях.

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

Основные характеристики:

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

Библиотека значков материалов Pixsellz

Веб-сайт: https://icons.pixsellz.io/
Формат: SVG, EPS, PSD, PNG, FIG, Material design
Цена и лицензия: бесплатно, Apache License Version 2.0

Огромный набор из более чем 1000 иконок, разделенных на 16 различных категорий. Бесплатный набор значков вдохновлен материальным дизайном и представлен в трех различных визуальных стилях — округлых, контурных и двухцветных. Набор доступен в 6 различных форматах файлов, так что вы можете использовать значки в предпочитаемом вами программном обеспечении для дизайна.

Основные характеристики :

  • 3 стиля,
  • стили Figma,
  • 1000+ значков,
  • 24 × 24 пикселя,
  • стили и символы эскиза,
  • 16 категорий и
  • 6 форматов файлов.

Entypo

Веб-сайт: http://www.entypo.com/
Формат и тип: SVG
Цена и лицензия: Бесплатно, Creative Common License 4.0

Entypo — это семейный набор иконок svg, тщательно созданный несколько лет назад Даниэлем Брюсом из Швеции. Эти значки великолепны: когда дело доходит до бесплатных услуг, они первоклассные. Продукт поставляется в формате SVG с 411 значками, бесплатно с лицензией Creative Commons.

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

Злые иконы

Веб-сайт: https://evil-icons.io/
Формат и тип: SVG, Sketch
Цена и лицензия: Free, MIT

Этот пакет огромен, и в нем есть все, включая SVG и исходные файлы. Это означает, что вы можете загружать SVG вместе с файлами для Illustrator и файлами .sketch для Sketch.

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

Иконки Streamline

Веб-сайт: https://streamlineicons.com/
Формат и тип: ICONJAR, SKETCH, FIG, XD, SVG, AI, PDF, PNG
Цена и лицензия: Бесплатно до $ 411

Streamline Icons — еще один красивый и легко адаптируемый бесплатный набор иконок на веб-рынке. Инструмент разделен на 53 категории с более чем 30000 векторными иконками.

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

У компании есть собственное веб-приложение, которое помогает просматривать, искать и загружать значки прямо из браузера.

Основные характеристики:

  • организовано более 30000 векторных иконок;
  • Smart Strokes для изменения толщины контура;
  • Эскиз, форматы AI, EPS, PDF, PNG, SVG;
  • веб-приложение для поиска и редактирования иконок;
  • каждый значок в Streamline 3.0 имеет три уникальных веса: светлый, обычный и жирный.

Smashicons

Веб-сайт: https://smashicons.com/
Формат и тип: JAR, SVG, AI, SKETCH, Marketplace
Цена и лицензия: Бесплатно до $ 149

Smashicons предлагает обширную коллекцию иконок с более чем 219000 иконок в своей библиотеке. Smashicons работает немного иначе, чем другие: их цена основана на ежемесячном плане 5 долларов в месяц. Это означает, что за 5 долларов в месяц вы получаете доступ ко всей их коллекции существующих значков, а также к любым будущим значкам, которые они выпустят.

Основные характеристики:

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

Иконки 8

Веб-сайт: https://icons8.com/
Формат и тип: SVG, PNG, PDF
Лицензия и цена: Лицензия Good Boy, бесплатно до 24 долларов в месяц

Набор значков от Icons8 включает более 1 20000 значков, охватывающих несколько категорий; от бизнеса и офиса до людей, еды и значков социальных сетей.Иконки созданы, чтобы имитировать внешний вид конкретной операционной системы. Вы можете скачать их в версиях для Windows, iOS и Android.

Иконки работают в Sketch, Photoshop и Xcode. Вы можете использовать веб-редактор перед загрузкой значков в свою систему.

Основные характеристики:

  • форматы SVG, PNG и HTML;
  • значков доступны в различных стилях, например, значок линии, значок с заливкой и полноцветный;
  • все иконки можно скачать через.zip-файл;
  • редактировать перед загрузкой;
  • как бесплатная, так и платная подписка.

Icomoon

Веб-сайт: https://icomoon.io/
Формат и тип: SVG, PNG, PDF
Лицензия и цена: Бесплатно до 139 долларов в месяц

Icomoon представляет собой полноценный инструмент для иконографии и управления иконками. В продукте есть качественное решение для редактирования и управления иконками. Иконки Icomoon созданы вручную в сетке 16X16 и доступны в форматах SVG, EPS, PSD, PDF и AI.Набор иконок также постоянно обновляется его создателями.

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

Основные характеристики :

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

Glyphish Icon Pack

Web-сайт: http: // www.glyphish.com/
Формат и тип: SVG, PNG, PDF, PSD, Glyph, Icon font
Лицензия и цена: Creative Common Attribution, 99 долларов США за весь срок службы

Glyphish предлагает множество различных пакетов значков. Каждый пакет поставляется в различных форматах, включая PNG, SVG, PSD и AI. Набор иконок доступен за 99 долларов. Бесплатная демоверсия включает 50 иконок. Все иконки легко редактируются дизайнерами.

Основные характеристики:

  • иконок для нескольких платформ: iOS, Android, Web, Windows;
  • набор из 50 бесплатных иконок;
  • простое перетаскивание в Xcode;
  • иконок, специально созданных для дисплеев Apple Retina.

Иониконы

Веб-сайт: https://ionicons.com/
Формат и тип: SVG и Webfont, шрифт Icon
Лицензия: MIT

Команда Ionic решила выпустить свои значки в виде веб-шрифта под названием Ionicons. Естественно, они абсолютно бесплатны и доступны на GitHub. Вы даже можете добавить эти значки прямо на свой сайт, используя версию таблицы стилей для CDN. Он полностью поддерживает SVG и веб-шрифты.

Основные характеристики:

  • совершенно бесплатно,
  • простая установка путем копирования и вставки ссылки,
  • поставляется в виде веб-шрифта,
  • нестандартных размеров,
  • более 1100 элементов.

Значки угловых материалов

Веб-сайт: https://material.io/resources/icons/?style=baseline
Формат и тип: SVG, Webfont, Material design
Лицензия и цены: бесплатно, Apache License 2.0

Material Icon — это бесплатный набор значков от Google. Чтобы обеспечить удобочитаемость и ясность, эти значки были оптимизированы, чтобы отлично смотреться на всех платформах и дисплеях. Эти значки материалов абсолютно бесплатны и доступны на GitHub.Этот набор значков огромен и включает более 1000 значков, охватывающих широкий спектр функций интерфейса.

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

Линейные значки

Веб-сайт: https://linearicons.com/
Формат и тип: SVG, Webfont, Icon font
Лицензия и цена: Бесплатно до 59 долларов США, Common Creative License

Linear Icon pack — один из самых популярных и лучших наборов значков для личных или коммерческих целей.Пакет линейных значков доступен как в бесплатной, так и в премиальной версиях. Бесплатная версия этого замечательного набора значков распространяется под лицензией Creative Common. Существуют также различные пакеты, которые вы можете выбрать в соответствии с вашими потребностями, например, Desktop Package.

Основные характеристики :

  • CloudFront CDN;
  • доступна бесплатная версия;
  • имеет разные форматы: SVG, PDF, Webfont.

Фетериконы

Web-сайт: https: // fedicons.com /
Формат и тип: SVG, Webfont, Iconfont
Лицензия и цена: бесплатно, лицензия MIT

Feather — один из самых популярных наборов иконок с открытым исходным кодом. Это значки с открытым исходным кодом, созданные в сетке 24X24. Иконки доступны в формате SVG. Он находится под лицензией Массачусетского технологического института, и в нем содержится около 250+ значков с открытым исходным кодом.

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

Iconfinder

Веб-сайт: https://www.iconfinder.com/
Формат: SVG, PNG, ICO, Marketplace
Лицензия и цена: От 9 до 49 долларов в месяц

Iconfinder — один из самых популярных ресурсов иконок в сети. Он предлагает более 4 миллионов значков, предоставляя пользователям множество вариантов поиска, включая формат значков, цену, размер, фон и т. Д. Существует несколько ежемесячных планов оплаты — от 9 до 49 долларов. Вы также можете выбрать систему «оплата по мере использования».

Файлы значков

доступны в форматах SVG, PNG, ICO, ICNS и Adobe Illustrator, а их размеры варьируются от 16 × 16 до 512 × 512. Вы также можете поработать с некоторыми из лучших дизайнеров сайта, если не можете найти что-то, что вам нравится, или просто хотите, чтобы пользовательские значки были разработаны специально для вас и вашего бренда.

Основные характеристики:

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

The Noun Project

Веб-сайт: https://thenounproject.com/
Формат и тип: SVG, PNG, Marketplace
Лицензия и цена: Creative Commons License, От 39,99 долларов США

The Noun Project предлагает одну из самых больших библиотек иконок, доступных в сети. Большинство значков этого сайта доступны в форматах SVG и PNG, а также в черном и белом стилях.

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

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

Основные характеристики:

  • более 150 000 иконок;
  • форматы SVG, PNG;
  • средства поиска и обнаружения;
  • Creative Common License с дополнительными опциями;
  • бесплатные и платные варианты загрузки;
  • новых иконок загружаются почти ежедневно.

Иконки Fontawesome

Веб-сайт: https://fontawesome.com/icons
Формат и тип: SVG, PNG, шрифт Icon, Marketplace
Лицензия и цена: SIL OFL 1.1

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

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

Основные характеристики:

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

Линейные значки

Веб-сайт: https://lineicons.com/
Формат и тип: SVG, веб-шрифт, шрифт Icon
Лицензия и цена: Бесплатно

LineIcons также предоставляет бесплатный CDN с понятной документацией, что упрощает начало работы.

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

Основные характеристики:

  • 450+ бесплатных иконок,
  • файлов SVG,
  • готовых веб-шрифтов,
  • бесплатных CDN.

Последние мысли о Icon Packs

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

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

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

Возможно, вам понравятся эти статьи:

Как создать свой собственный набор значков веб-шрифтов с помощью IcoMoon

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

В недавней статье «Иконки Webfont: альтернатива изображениям» объяснялось, как можно загрузить один файл шрифта, например Iconic, и применить значки с помощью псевдоэлементов CSS, например

 
<стиль>
.rss: до
{
семейство шрифтов: "IconicStroke";
content: "r";
}


 RSS-канал 
  

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

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

Они также представляют небольшую проблему доступности. Добавление содержимого с помощью псевдоэлементов CSS может заставить программы чтения с экрана произносить текст. В нашем примере выше вы могли услышать, как ваш компьютер заикается «r-RSS feed».

IcoMoon спешит на помощь

IcoMoon — великолепное приложение HTML5, которое решает эти проблемы за вас.Это позволяет:

  1. Сначала просмотрите и найдите 600+ значков IcoMoon
  2. Во-вторых, загрузите отдельные файлы SVG или свои собственные пакеты шрифтов (поддержка шрифтов SVG).
  3. редактировать иконки прямо в браузере
  4. добавить любое количество иконок в коллекцию шрифтов
  5. назначьте эти шрифты любым символам, например, вместо использования «r» вы можете использовать пробел, чтобы ничего не читалось вслух.
  6. Наконец, загрузите пример кода и крошечные пуленепробиваемые стеки шрифтов, содержащие выбранные вами значки.

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

Наведите указатель мыши на любой значок и нажмите изменить , чтобы выполнить базовое редактирование, такое как поворот, зеркальное отображение и сдвиг. Вы также можете загрузить значок как SVG, отредактировать его в Illustrator, Inkscape или SVG-edit и загрузить измененную версию:

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

Наконец, щелкните значок Download Font на нижней черной полосе, чтобы загрузить свой собственный ZIP-файл.

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

Как создать свой собственный набор значков веб-шрифтов с помощью IcoMoon

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

ДИЗАЙН https://visualmodo.com/wp-content/uploads/2017/05/design.zip

ЕДА https://visualmodo.com/wp-content/uploads/2017/05/food-icons.zip

ИНТЕРФЕЙС https://visualmodo.com/wp-content/uploads/2017/05/interface.zip

ЗНАЧКИ ЛИНИИ https://visualmodo.com/wp-content/uploads/2017/05/linearicons.zip

СПОРТ https://visualmodo.com/wp-content/uploads/2017/05/sports.почтовый индекс

Создание и импорт пользовательского набора значков

Вы можете использовать приложение IcoMoon или Fontello для создания и загрузки пользовательского значка установить в качестве веб-шрифта, а затем загрузить его, чтобы Beaver Builder мог его использовать. Вот инструкции для каждой задачи.

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

1. Создайте собственный набор значков #

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

Чтобы создать собственный набор значков с помощью приложения IcoMoon #

  1. Откройте приложение IcoMoon.

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

  3. После того, как вы выбрали свой набор, щелкните Generate font в правом нижнем углу, проверьте свой набор шрифтов, затем щелкните Preferences на панели инструментов.

  4. Измените Название шрифта на то, что поможет вам запомнить набор в Beaver Builder.

    Этот шаг не является обязательным, но имя шрифта по умолчанию — icomoon , поэтому если вы импортируете более одного набора значков IcoMoon, Beaver Builder отобразит одинаковая этикетка icomoon для обоих.

  5. Переименуйте префикс класса с icon- на любое другое.
    Важно: Обязательно укажите пользовательский префикс класса.Если оставить без изменений, несколько значков шрифтов с использованием префикса icon- по умолчанию IcoMoon могут конфликтовать, из-за чего некоторые из них отображаются неправильно или не отображаются в Beaver Builder селектор значков.

  6. Откройте раздел CSS Selector и выберите Use attribute selectors или Use a class .
    Не выбирайте использование тега , потому что он может переопределить все другие шрифты ‘ стилизация в Beaver Builder.

  7. Щелкните X в правом верхнем углу, чтобы закрыть окно Preferences .

  8. Щелкните Скачать .
    Загружаемый файл представляет собой zip-архив с префиксом icomoon .

  9. Следуйте инструкциям ниже, чтобы импортировать набор значков в Beaver Builder.

Чтобы создать собственный набор значков с помощью Fontello #

  1. Перейдите на сайт Fontello.

  2. Выберите нужные значки в своем наборе, щелкнув по ним, или загрузите значки SVG, перетащив их внутрь. Дополнительную информацию см. В справке Fontello.

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

  4. Щелкните Download webfont в правом верхнем углу.
    Загружаемый файл представляет собой zip-архив с префиксом fontello .

  5. Следуйте инструкциям ниже, чтобы импортировать набор значков в Beaver Builder.

2.Импортируйте настраиваемый набор значков в Beaver Builder #

  1. На панели администратора WordPress щелкните Настройки > Beaver Builder> Значки , затем щелкните Загрузить набор значков .
  2. Когда откроется окно загрузки медиатеки, выберите свой zip-файл. После загрузки набора значков щелкните Выберите файл .

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

  • Имя пользовательского шрифта, которое вы присвоили
  • IcoMoon (имя по умолчанию для загрузок IcoMoon)
  • Fontello плюс дата загрузки в библиотеку мультимедиа.

7 основ дизайна иконок

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

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

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

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

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

1. Постоянный визуальный вес 💁🏻‍♂️

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

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

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

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

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

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

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

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

2. Простота и минимализм ✅

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

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

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

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

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

3. Создание значков с помощью единообразного голоса бренда 👏🏼

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

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

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

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

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

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

4. Создание значков с достаточным свободным пространством 💻

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

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

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

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

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

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

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

5. Pixel-Perfect Design 😍

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

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

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

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

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

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

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

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

6. Контрастность и цветовые палитры 🎨

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

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

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

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

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

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

7. Геометрические формы имеют большее влияние 👏🏼

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

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

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

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

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

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

Оставить комментарий

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

© 2019 Штирлиц Сеть печатных салонов в Перми

Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми.