Иконки вектор в иллюстраторе

Сегодня вы узнаете, как создать набор из десяти топовых UI-иконок при помощи базовых фигур и инструментов, которые предлагает Illustrator.

Если вы ищете больше иконок в разных стилях, переходите на GraphicRiver.

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

Видео:КАК РИСОВАТЬ ИКОНКИ С ИЛЛЮСТРАТОРЕ. Урок Adobe Illustrator.Скачать

1. Как настроить новый файл проекта

Откройте Illustrator и настройте Новый документ (Файл > Новый или Control-N), применив следующие параметры:

• Количество монтажных областей: 20
• Расстояние: 20 пикселей
• Ширина: 64 пикселей
• Высота: 64 пикселей
• Единицы измерения: пиксели

Во вкладке с Расширенными настройками:

• Цветовой режим: RGB
• Растровые эффекты: осветление (72 точек на дюйм)
• Режим предпросмотра: по умолчанию

Видео:Уроки Adobe Illustrator CC | Как нарисовать line иконкуСкачать

2. Как настроить пользовательскую сетку

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

Шаг 1

Перейдите в Редактировать > Установки > Направляющие и сетка и задайте следующие параметры:

• Сетка через каждые: 1 пиксель
• Разделы: 1

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

Шаг 2

Когда настроите пользовательскую сетку, для чёткости фигур нужно активировать функция Привязки к сетке и Привязки к пикселям под меню Вид, которые трансформируются в Привязку к пикселям всякий раз при входе в Режим предпросмотра пикселей (если вы используете старую версию Illustrator).

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

Видео:Как перевести любое изображение в векторное в иллюстраторе | illustrator tutorialСкачать

3. Как настроить слои

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

Откройте панель Слоёв и создайте два слоя, которые назовём следующим образом:

• слой 1: координатные сетки
• слой 2: иконки

Видео:Adobe Illustrator Полный курс №4_1 Рисуем простые иконкиСкачать

4. Как создать координатные сетки

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

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

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

Шаг 1

Перейдите на нужный слой (первый) и Инструментом «Прямоугольник» (М) создайте оранжевый ( #F15A24 ) квадрат 64 х 64 пикселей, который выровняем по центру первой Монтажной области и используем для определения общего размера наших иконок.

Шаг 2

Добавьте маленький квадрат 56 х 56 пикселей ( #FFFFFF ), который поместим на предыдущую фигуру, т.к. она будет нашей активной областью рисования, создав круговую прослойку толщиной 4 пикселя.

Шаг 3

Выделите и сгруппируйте два квадрата при помощи комбинации клавиш Control-G, а затем создайте оставшиеся сетки из 19-ти копий (Control-C > Control-F), которые поместим на каждую пустую Монтажную область. Когда будет готово, заблокируйте текущий слой перед тем, как перейти к следующему разделу.

Видео:РИСУЕМ ИКОНКИ В ИЛЛЮСТРАТОРЕ. Векторная графика в Adobe Illustrator.Скачать

5. Как создать иконки навигации

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

Шаг 1

Создайте основную фигуру первой иконки из круга 48 х 48 пикселей, окрасьте его в цвет #DCEEFF и выровняйте по центру первой Монтажной области.

Шаг 2

Создайте контур при помощи метода Обводки, создав копию фигуры (Control-C), которую вставим на передний план (Control-F), изменим цвет на #629CF9 и поменяем Заливку с Обводкой(Shift-X). Установите Толщину получившегося контура на 8 пикселей, выделив и сгруппировав все составляющие фигуры текущей секции, нажав Control-G.

Шаг 3

Начните работать над маленькой стрелкой влево, создав её фигуру из линии Обводки шириной 24 пикселя и толщиной 8 пикселей (#629CF9 ) со Скруглёнными концами, а затем выровняйте её по центру большой монтажной области.

Шаг 4

Завершите создание иконки, нарисовав кончик стрелки из Обводки толщиной 8 пикселей ( #629CF9 ) со Скруглёнными концами и Стыками. Когда будет готово, выделите и сгруппируйте две фигуры (Control-G), а затем сгруппируйте все составляющие фигуры иконки перед тем, как перейти к следующему шагу.

Шаг 5

Создайте переднюю иконку из копии (Control-C) предыдущей иконки, вставьте (Control-F) на вторую Монтажную область и отразите по вертикали (щелчок правой кнопкой > Трансформировать > Зеркально отразить > По вертикали).

Шаг 6

Создайте иконку прокрутки вверх из копии (Control-C) предыдущей иконки, которую вставим (Control-F) на следующей монтажной области и повернём на -90 градусов при помощи Инструмента «Поворот» (щелчок правой кнопкой > Трансформировать > Поворот >-90º).

Шаг 7

Добавьте иконку прокрутки вниз из копии (Control-C) только что созданной иконки, которую мы вставим (Control-F) на четвёртую монтажную область и отразим по горизонтали (щелчок правой кнопкой > Трансформировать > Зеркально отразить > По горизонтали).

Шаг 8

Для кнопки обновления создайте круг 36 х 36 пикселей с Обводкой толщиной 8 пикселей ( #629CF9 ), который выровняем по центру нижнего края активной области рисования.

Шаг 9

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

Шаг 10

Создайте кончик стрелки из прямоугольника 18 х 24 пикселей, окрасьте его в цвет #DCEEFF и расположите, как на картинке.

Шаг 11

Превратите прямоугольник в стрелку влево, добавив новую опорную точку в центре его левого края при помощи Инструмента «Добавить опорную точку» (+), а затем удалите внешние левые точки, нажав на них Инструментом «Удалить опорную точку» (-).

Шаг 12

Завершите создание стрелки и самой иконки, создав для получившейся фигуры контур толщиной 8 пикселей ( #629CF9 ) со Скруглённым стыком, выделив и сгруппировав (Control-G) обе фигуры, а после этого и всю иконку.

Видео:Adobe Illustrator Полный курс №4_2 Панель слоев и экспорт иконок в SVGСкачать

6. Как создать иконки поиска и увеличения

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

Шаг 1

Создайте область лупы иконки поиска из круга 40 х 40 пикселей ( #DCEEFF ) с контуром толщиной 8 пикселей ( #629CF9 ), сгруппируйте (Control-G) и выровняйте по верхнему левому углу активной области рисования.

Шаг 2

Нарисуйте область ручки из Обводки толщиной 8 пикселей ( #629CF9 ) со Скруглёнными концами, как на картинке.

Шаг 3

Укоротите длину ручки, выделив её верхнюю опорную точку Инструментом «Прямое выделение» (А) и затем перетащите её по диагонали вниз, удерживая Shift для создания прямой линии. Когда будет готово, выделите и сгруппируйте (Control-G) все составляющие фигуры перед тем, как перейти к следующей иконке.

Шаг 4

Создайте иконку увеличения из копии (Control-C) только что созданной иконки, затем поместите её (Control-F) на следующую Монтажную область, добавив знак плюса в центре линзы из двух линий Обводки длиной 16 пикселей и толщиной 8 пикселей ( #629CF9 ) со Скруглёнными концами. Когда будет готово, выделите и сгруппируйте (Control-G) все составляющие фигуры перед тем, как перейти к следующему шагу.

Шаг 5

Добавьте иконку уменьшения из копии (Control-C) только что созданной иконки, вставьте (Control-F) на следующей монтажной области и дважды кликните на знаке плюса, чтобы его изолировать. Затем разгруппируйте (щелчок правой кнопкой > Разгруппировать) и удалите вертикальную линию Обводки.

Видео:Как перевести фотографию в вектор в Adobe illustrator | Трассировка изображения в иллюстратореСкачать

7. Как создать иконки видимости

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

Шаг 1

Создайте эллипс 48 х 32 пикселей, окрасьте в цвет #DCEEFF и выровняйте по центру Монтажной области.

Шаг 2

Ухватите левую и правую опорные точки Инструментом «Опорная точка» (Shift-C) и превратите эллипс в фигуру, похожую на глаз.

Шаг 3

Создайте контур получившейся фигуры толщиной 8 пикселей ( #629CF9 ) со Скруглённым стыком, выделите и сгруппируйте две фигуры при помощи комбинации клавиш Control-G.

Шаг 4

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

Шаг 5

Добавьте маленькой отражение из круга 8 х 8 пикселей, окрасьте в цвет #DCEEFF и выровняйте по верхнему правому углу зрачка, а после этого сгруппируйте (Control-G) обе фигуры. Когда будет готово, выделите и сгруппируйте (Control-G) все составляющие фигуры перед тем, как перейти к следующей.

Шаг 6

Создайте копию (Control-C) только что созданной иконки, вставьте на десятую монтажную область и нарисуйте диагональную линию из Обводки толщиной 8 пикселей ( #629CF9 ), после чего выделите и сгруппируйте (Control-G) все фигуры.

Видео:КАК НАРИСОВАТЬ ИКОНКИ ПОГОДЫ. ВЕКТОРНАЯ ГРАФИКА. ADOBE ILLUSTRATOR. УРОК ДЛЯ НАЧИНАЮЩИХСкачать

8. Как создать иконку совместного доступа к файлам

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

Шаг 1

Сначала создадим иконку загрузки, создав основные фигуры для коробки из прямоугольника 48 х 12 пикселей ( #DCEEFF ) с контуром толщиной 8 пикселей ( #629CF9 ), который сгруппируем (Control-G) и выровняем по центру нижнего края активной области рисования.

Шаг 2

Добавьте маленькие сегменты из линий Обводки высотой 8 пикселей и толщиной 8 пикселей ( #629CF9 ) со Скруглёнными концами, которые разместим по бокам только что созданных фигур, выделив их и создав большую группу (Control-G).

Шаг 3

Добавьте стрелку вверх из копии (Control-C) только что созданной стрелки для иконки навигации, затем вставьте (Control-F) на текущую монтажную область и выровняйте по центру верхнего края активной области рисования. Когда стрелка будет на месте, выделите и сгруппируйте все составляющие фигуры иконки, нажав Control-G.

Шаг 4

Создайте иконку скачивания из копии (Control-C) иконки, которую мы только что создали, затем вставьте её на следующую монтажную область и зеркально отразите по горизонтали маленькую стрелку (щелчок правой кнопкой > Трансформировать > Зеркально отразить > По горизонтали).

Видео:Как быстро перекрасить вектор в иллюстраторе / Выделить объекты одного цвета в Adobe illustratorСкачать

9. Как создать кнопку информации

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

Шаг 1

Создайте основную фигуру иконки из круга 48 х 48 пикселей ( #DCEEFF ) с контуром толщиной 8 пикселей ( #629CF9 ), затем сгруппируйте (Control-G) и выровняйте по центру 13-й монтажной области.

Шаг 2

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

Шаг 3

Добавьте отрезок линии из Обводки высотой 12 пикселей и толщиной 8 пикселей ( #629CF9 ), а затем расположите над точкой на расстоянии 4 пикселя. Выделите и сгруппируйте (Control-G) две фигуры, а после этого сгруппируйте всю иконку перед тем, как перейти к следующей.

Видео:КАК ПЕРЕВЕСТИ ЛЮБОЕ ИЗОБРАЖЕНИЕ ИЗ РАСТРА В ВЕКТОР в ADOBE ILLUSTRATOR? ТРАССИРОВКА. ПРИМЕРЫСкачать

10. Как создать иконку общего доступа

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

Шаг 1

Создайте основные части иконки из трёх кругов 16 х 16 пикселей ( #DCEEFF ) с контуром толщиной 8 пикселей ( #629CF9 ), а затем по отдельности сгруппируйте (Control-G) и расположите, как на картинке.

Шаг 2

Нарисуйте отрезок линии, соединяющий все три части при помощи контура толщиной 8 пикселей ( #629CF9 ) со Скруглёнными концами и Стыками. Когда будет готово, отправьте получившийся контур на задний план, щёлкнув правой кнопкой > Монтаж > Отправить на задний план, а после этого выделите и сгруппируйте все составляющие фигуры иконки, нажав Control-G.

Видео:Трассировка в иллюстраторе // Как перевести растр в вектор? Adobe Illustrator🔥Скачать

11. Как создать иконки переключения

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

Шаг 1

Начните создавать иконку с выключенным состоянием, создав основную фигуру из скруглённого прямоугольника 48 х 32 пикселей ( #DCEEFF ) с Угловым радиусом 16 пикселей и контуром толщиной 8 пикселей ( #629CF9 ), затем сгруппируйте (Control-G) и выровняйте по центру следующей монтажной области.

Шаг 2

Добавьте индикатор состояния из круга 16 х 16 пикселей с цветом #629CF9 , затем выровняйте по центру больших фигур, расположив его на расстоянии 4 пикселя от левого края контура. Когда будет готово, выделите и сгруппируйте (Control-G) все три фигуры перед тем, как перейти к следующей иконке.

Шаг 3

Создайте включённое состояние из копии (Control-C) только что созданной фигуры, которую вставим на следующую монтажную область (Control-F), а затем зеркально отразим по вертикали (щелчок правой кнопкой > Трансформировать > Зеркальное отражение > По вертикали).

Видео:Как рисовать простые иконки в Adobe Illustrator.Скачать

12. Как создать иконку меню «гамбургер»

Следующий объект из нашего списка стал универсальным символом.

Шаг 1

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

Шаг 2

Добавьте перекладину из линии Обводки шириной 36 пикселей и толщиной 8 пикселей ( #629CF9 ) со Скруглёнными концами, затем выровняйте по центру правой стороны активной области рисования. Когда контур будет на месте, выделите его и круг и сгруппируйте их вместе, нажав Control-G.

Шаг 3

Добавьте верхнюю и нижнюю части из двух копий (Control-C > Control-F дважды) фигур, которые мы только что сгруппировали, затем расположите на расстоянии 8 пикселей от оригинала. Когда будет готово, выделите и сгруппируйте (Control-G) все составляющие фигуры перед тем, как перейти к следующей иконке.

Видео:КАК СДЕЛАТЬ ПРОСТЫЕ ИКОНКИ ДЛЯ САЙТА. УРОКИ ДЛЯ НАЧИНАЮЩИХ. ИЛЛЮСТРАТОР. Adobe IllustratorСкачать

13. Как создать иконку настроек

Мы все можем согласиться, что иконка настроек с шестерёнками или ползунками – нужная вещь в любом UI-наборе, т.к. мы любим вносить изменения, если вы понимаете, о чём я.

Шаг 1

Создайте ползунки иконки из трёх линий Обводки шириной 48 пикселей и толщиной 8 пикселей ( #629CF9 ) со Скруглёнными концами, которые расположим по вертикали на расстоянии 16 пикселей друг от друга, выровняв их по центру пустой монтажной области.

Шаг 2

Добавьте ручки регулировки из трёх кругов 12 х 12 пикселей ( #DCEEFF ) с контуром толщиной 8 пикселей ( #629CF9 ), затем по отдельности сгруппируйте (Control-G) и расположите на ползунках, как показано на рисунке. Когда будет готово, не забудьте выделить и сгруппировать (Control-G) все составляющие фигуры иконки перед тем, как перейти к следующей.

Видео:ТРАССИРОВКА. ПЕРЕВОД РАСТРА В ВЕКТОР. ИЛЛЮСТРАТОР. Adobe Illustrator. Рисуем сердечки.Скачать

14. Как создать иконки лайков

Мы переходим к последней, самой приятной группе иконок – к маленьким сердечкам.

Шаг 1

Начните работать над верхней областью кнопки лайка, создав круг 28 х 28 пикселей, затем окрасьте его в цвет #DCEEFF и расположите на расстоянии 8 пикселей от верхнего края активной области рисования и 4 пикселя – от левого края.

Шаг 2

Создайте ещё один круг 28 х 28 пикселей ( #DCEEFF ), затем расположите его на противоположной стороне активной области рисования, сохранив одинаковые промежутки. Когда обе фигуры будут на месте, выделите и объедините их в один большой объект при помощи Режима объединения фигур на панели Обработки контуров.

Шаг 3

Включите режим Предпросмотра пикселей (Alt-Shift-Y), выделите и удалите нижнюю половину получившейся фигуры, а затем привяжите верхнюю центральную опорную точку к Пиксельной сетке.

Шаг 4

Возьмите Инструмент «Перо» (Р) и нарисуйте нижнюю фигуру сердца, сгладив боковые опорные точки при помощи функции «Преобразовать выделенные опорные точки в плавную линию». Выделите и переместите некоторые точки указателей, как показано на картинке, отключив режим Предпросмотра пикселей (Alt-Control-Y) перед тем, как перейти к следующему шагу.

Шаг 5

Создайте контур получившейся фигуры толщиной 8 пикселей ( #629CF9 ) со Скруглёнными стыками, выделите и сгруппируйте (Control-G) две фигуры перед тем, как перейти к следующей.

Шаг 6

Создайте последнюю иконку из копии только что созданной фигуры, затем поместите на последней монтажной области и превратите в кнопку дизлайка, добавив диагональную перекладину из Обводки толщиной 8 пикселей ( #629CF9 ) со Скруглёнными концами. Когда будет готово, выделите и сгруппируйте (Control-G) все составляющие фигуры перед тем, как сохранить проект.

Видео:Знакомство с Adobe illustrator. Создание SVG иконкиСкачать

Отличная работа! Наш маленький набор UI-иконок готов!

Как обычно, надеюсь, что вам понравилось это пошаговое руководство, и вы узнали что-то новое и полезное!

Видео:Простая и эффективная техника рисования в Adobe IllustratorСкачать

Поэтапное руководство по созданию иконок

Статья была опубликована на smashingmagazine автор статьи Scott Lewis.

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

В данной статье приводится руководство по дизайну векторных иконок, которое включает в себя шесть этапов. Мы рассмотрим эти этапы после того, как разберем основные принципы успешного дизайна иконок. Эти принципы хорошо известны и подробно рассмотрены в таких работах, как Руководство по дизайну иконок Джона Хикса, а также в руководстве от Google Материальный дизайн в разработке системных иконок. Шесть этапов, которые мы будем рассматривать в данной статье, должны восприниматься, как рекомендации, а не как догмы. Способность чувствовать, где нужно следовать правилам, а когда их лучше нарушить – это важное качество, которое должен развить в себе каждый хороший дизайнер, и мы наглядно это продемонстрируем.

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

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

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

Три составляющие эффективного дизайна иконок

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

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

Форма

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

Красными линиями очерчены основные геометрические фигуры, образующие форму иконки

Эстетическая целостность

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

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

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

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

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

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

Шесть этапов

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

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

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

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

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

Выравнивание круглой иконки относительно сетки и основных линий

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

Выравнивание и выбор размера круглого и квадратной иконки относительно сетки

На следующих картинках внутри сетки 32х32 пикселя вы заметите прямоугольники размером 20х28 пикселей, которые сориентированы горизонтально или вертикально – в зависимости от дизайна иконки.

Выравнивание и выбор размера вертикально и горизонтально ориентированных иконок

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

Выравнивание и выбор размера диагонально ориентированных иконок

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

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

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

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

Основа иконки Корги – это простые геометрические фигуры: два треугольника и два эллипса

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

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

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

Крупный план сглаживания контура под углом 45°

Кривые

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

Линии, нарисованные от руки, получаются низкого качества

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

Эти идеальные кривые созданы в Adobe Illustrator с помощью инструмента для построения кривых Безье

Самым распространенным размером для скругления углов является 2 пикселя. Для иконки размером 32х32 пикселя такое значение радиуса дает хорошо видимое скругление, и при этом не слишком «смягчает» углы (что приводит к «размытому» виду). Размер радиуса закругления зависит от характера, который вы хотите предать своему дизайну. Решение о том, использовать ли закругленные углы, основывается на анализе эстетической привлекательности всего набора.

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

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

Первый этап переделки Корги

Уже просматривается основная идея нового дизайна: скругленные углы и плавные кривые.

Оптимизация пикселей

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

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

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

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

Эта иконка iPhone показывает пример взвешенного использования толщины линий

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

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

Использование общих элементов дизайна

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

Общие элементы, использованные для дизайна иконок с собаками

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

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

Умеренное использование деталей и декоративных

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

Минимальное количество деталей эффективно передает смысл

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

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

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

Уникальность дизайна Корги состоит в форме его носа

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

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

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

Видео:ПРОСТЫЕ ВЕКТОРНЫЕ ИЛЛЮСТРАЦИИ В ПРОГРАММЕ ADOBE ILLUSTRATOR. КАК НАРИСОВАТЬ РАСТЕНИЕСкачать

Фигуры и символы для Adobe Illustrator.ai

• Vector Portal
• Дополнительно
• Фигуры и символы для Adobe Illustrator.ai

Видео:Google AutoDraw быстрое создание иконок!Скачать

Фигуры и символы для Adobe Illustrator.ai

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

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

Печать (книги, листовки, журналы, плакаты, шаблоны и т. Д.) — добавьте атрибуцию, как в этом примере «Изображение птицы от Vectorportal.com».

Товары (футболки, одежда, Etsy, Caffe Press, Zazzle) — вставьте ссылку на страницу описания товара.

Видео (Vimeo, Youtube и т. Д.) — вставьте ссылку на страницу описания видео.

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

📹 Видео

Открытые пути не надо закрывать? Правила для стоков о векторных контурахСкачать

Как Перевести Растр в Вектор в Фотошопе? Трассировка в Adobe Photoshop!🔥Скачать