Как рисовать иконки: Поэтапное руководство по созданию иконок / Хабр

Как сделать свой первый набор векторных иконок | by Arsentii Horelik | Official Russian

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

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

Шаг четвертый: Размер

Это вообще самое важное: определиться с минимальным размером.
Для чего это нужно? Если вы хотите, чтобы ваши иконки были с четкими краями, pixel perfect и масштабировались правильно, нужно определиться с размером и толщиной объектов в самом маленьком размере (x1). Рекомендую использовать четные размеры иконки.

Шаг пятый: Процес

Создайте документ со значениями

Где Spacing — расстояние между артбордами.

Width и Height — высота и ширина артборда.

Raster Effects — разрешение (ppi) для иконок подойдет 72

Align New Objects… — эта галочка отвечает за привязку точек к пиксельной сетке. Советую включать, но в ходе работы, ее всегда можно выключить.

1. Выберите первый артборд, в нем будет делать все иконки, а готовые будет вставлять на соседние артборды.
2. Создайте квадрат под размер рабочей области.
3. Расставьте направляющие, чтобы облегчить процесс рисования.
4. Используйте Pixel Preview
5. Отмечайте готовые иконки в списке образов, так наглядно можно следить за своим прогрессом.
6. Придерживайтесь советов и прошлой статьи о 5-ти простых правилах создания красивых иконок.
7. Не делайте свой первый сэт слишком большим, можно быстро устать и бросить это дело на половине. Нормальной скоростью будет около 20 иконок в день, потом они могут быстро надоесть…
8. Оформите исходник, и не забудьте навести порядок в слоях, подготовить файл для фотошопа и sketch например.
9. Подготовьте шот для dribbble и behance, оформите пост для социальных сетей. Это лучший пиар для ваших работ и выход на новые заказы. Не забудьте о хэштегах: #design #best #mamalubitmenya #kupiteikonky

Где можно продавать:

graphicriver.net — свободная площадка для торговли любым цифровым контентом.

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

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

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

Как нарисовать офисные иконки в Иллюстраторе

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

Пример HTML-страницы

Как нарисовать офисные иконки в Иллюстраторе

Рисуем базовые фигуры

Начнем с создания документа в Adobe Illustrator со следующими параметрами:

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

Начнем с чашки. Создайте два прямоугольника с толщиной обводки в 4 pt при помощи инструмента Rectangle/Прямоугольник (M). Размер первого прямоугольника — 48x51px, второго — 48×48 px.

Теперь нарисуем ручку для кружки. Создайте ее из трех прямоугольников, объединив которые получится фигура буквой C. Затем объедините все три прямоугольника инструментом Shape Builder/Создание фигур (Shift+M) или в палитре Pathfinder/Обработка контура. Скруглите углы при помощи функции Живые углы для ручки и нижней части чашки.

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

На очереди стакан с карандашами. Создайте прямоугольник размером 43x60px и еще один размером  50x7px. Составьте из них стакан. Для создания карандаша нарисуйте прямоугольник размером 70x7px и еще один поменьше в качестве ластика (скруглите два правых угла). Нарисуем еще один карандаш — с грифом, а также линейку из прямоугольника размером 100x15px. Нарисуйте два деления инструментом Pen/Перо (P) и дублируйте их на всю линейку. Поверните объекты, чтобы поместить их в стакан, и скруглите углы нижней части стакана.

Теперь возьмемся за создание папки.

Создайте прямоугольник размером 14x67px и скруглите нижние два угла при помощи инструмента Direct Selection/Прямое выделение (A). Копируйте фигуру и вставьте копию на передний план (CTRL+C & CRTL+F). Создайте еще один прямоугольник (83x50px) и выровняйте его по первому, как показано ниже. Выделите оба прямоугольника и, при помощи инструмента Shape Builder/Создание фигур (Shift+M) сотрите левую часть. Скруглите нижний левый угол.

Продолжаем работать над папкой. Создайте прямоугольник, который станет задней стенкой папки. Объедините его с левой фигурой (копию которой мы создали в прошлом шаге) в палитре Pathfinder/Обработка контура. Затем пошлите получившуюся фигуру на задний план. Немного скруглите верхние углы фигуры. Инструментом Pen/Перо добавьте несколько опорных точек, чтобы создать форму папки как на картинке ниже. Для завершения инструментом Pen/Перо нарисуйте линии, которые украсят папку.

Перейдем к созданию компьютера.

Нарисуйте прямоугольник размером 75x50px и скруглите углы. Инструментом Line/Отрезок линии (\) проведите черту, отделяющую четверт прямоугольника снизу. Инструментом Shape Builder/Создание фигур (shift+M) разделите прямоугольник на две разные фигуры по линии. Теперь нарисуем подставку из прямоугольника размером 18x20px. Трансформируйте его при помощи инструмента Free Transform/Свободная трансформация (E). И простым линиями создайте плоскую подставку и несколько строк на мониторе.

Создание ноутбука начнем с прямоугольника размером 80x10px  со скругленными углами. Нарисуйте еще один прямоугольник шириной в 25 px (высота не важна). Выделите оба прямоугольника и нажмите Minus Front/Минус верхний в палитре Pathfinder/Обработка контура. Снова скруглите углы.

На заднем плане создайте новый прямоугольник (69x51px, скругленные углы). Создайте еще один прямоугольник (61x51px, скругленные углы), который будет экраном ноутбука. И наконец нарисуйте несколько прямых линий на самом мониторе.

Рисуем смартфон. Начнем с прямоугольника размером 37x66px и скругленными углами. Нарисуем еще один прямоугольник (23x39px), который будет экраном, и линию с круглыми концами, которая будет динамиком (используйте инструмент Pen/Перо). Наконец инструментом Еllipse/Эллипс (L) нарисуйте маленький круг с радиусом в 2px (это кнопка), и добавьте несколько строк на экран смартфона.

Возьмемся за принтер. Начинаем с прямоугольника размером 75x45px со скругленными углами. Нарисуйте еще один прямоугольник размером 40x31px — это будет распечатанный лист. Нарисуйте прямоугольник размером 25x31px — это будет вставленный в принтер лист бумаги. «Загните» уголок этого листа кликнув инструментом Direct Selection/Прямое выделение (A) по верхней правой точке, удерживая Alt.

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

Теперь нарисуем обычную бумагу. Начните с прямоугольника размером 55x70px, затем дублируйте его (Ctrl+C> Ctrl+B). Переместите переднюю копию ниже и левее, создайте для нее загнутый уголок, как в прошлом шаге, и нарисуйте несколько строк.

Последняя иконка — книга. Создайте прямоугольник размером 50x10pх и скруглите два левых угла. Дублируйте фигуру. Создайте еще один прямоугольник размером 50x70px — это будет обложка. Выровняйте обложку по низу предыдущих фигур, и инструментом Shape Builder/Создание фигур (Shift+M) удалите нижнюю часть (дублированную фигуру и низ обложки. Скруглите нижний левый угол обложки.

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

Иконки готовы!

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

Закрасьте иконки следующим образом:

Автор урока HECTOR HEREDIA

Ссылка на источник

Уроки Illistrator. Уроки Adobe Illustrator. Уроки Иллюстратора. Adobe illustrator уроки. Уроки adobe illustrator для начинающих. Adobe illustrator уроки на русском. Видео уроки adobe illustrator. Adobe illustrator уроки для начинающих на русском. Adobe illustrator уроки с нуля. Уроки adobe illustrator cc для начинающих. Adobe illustrator cc 2019 уроки. Уроки adobe illustrator скачать торрент. Уроки по adobe illustrator cc. Adobe illustrator уроки вектор гайд. Уроки рисования adobe illustrator. Adobe illustrator уроки вектор гайд. Уроки векторной графики в adobe illustrator. Adobe illustrator cc 2018 уроки. Adobe illustrator логотип уроки. Уроки adobe illustrator cc 2018 для начинающих. Бесплатные уроки adobe illustrator. Урок 01 что такое adobe illustrator. Уроки работы в adobe illustrator. Adobe illustrator урок. Видео уроки adobe illustrator торрент. Adobe illustrator видео уроки скачать торрент. Adobe illustrator 3d уроки. Уроки adobe illustrator cc 2019 на русском. Интерфейс в adobe illustrator cc 2019 уроки. Уроки иллюстрация adobe illustrator. Adobe illustrator уроки рисование плашками.

Пример HTML-страницы

33 урока по созданию иконок в Adobe Illustrator

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

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

Learn How to Draw a Vector Pencil Icon in Adobe Illustrator

Dansky Learn How to Draw the YouTube Play Symbol in Adobe Illustrator

Learn How to Draw a Vector Sticky Note in Adobe Illustrator

Learn How to Create a Sketched Logo Effect in Adobe Illustrator

Learn How to Draw an Icon Badge and Long Shadow in Adobe Illustrator

Learn How to Draw a Pokeball Icon in Adobe Illustrator

How to Draw a Vector Octopus Icon in Adobe Illustrator

Learn How to Draw a Battery Icon in Adobe Illustrator

Learn How to Draw a Calendar Icon in Adobe Illustrator

Learn How to Draw an Eye Icon in Adobe Illustrator

Learn How to Draw a Home Icon in Adobe Illustrator

Learn How to Draw 3 Hamburger Menu Icons in Adobe Illustrator

Learn How to Draw an Egg Timer Icon in Adobe Illustrator

Learn How to Draw a Lightbulb Symbol in Adobe Illustrator

Learn How To Draw a Cog Settings Icon in Adobe Illustrator

Learn How To Draw a Camera Icon in Adobe Illustrator

Learn How To Draw an Adjustable Speech Bubble in Adobe Illustrator

Learn How To Draw an App Selector Switch in Adobe Illustrator

Learn How To Add Long Drop Shadows in Adobe Illustrator

Learn How To Draw a Refresh Icon in Adobe Illustrator

Learn How To Draw a Map Location Icon in Adobe Illustrator

Learn How To Draw a Letter Logo in Adobe Illustrator

Learn How To Create a Maze Symbol in Adobe Illustrator

Learn How to Draw a Play Icon in Adobe Illustrator

Learn How to Draw an Arrow Icon in Adobe Illustrator

Learn How to Draw an Envelope Icon in Adobe Illustrator

Learn How to Draw a Wireless Signal Icon in Adobe Illustrator

Learn How to Draw a Map Location Icon in Adobe Illustrator

Learn How to Draw Vector Icons in Adobe Illustrator

Learn How to Draw Tick & Cross Icons in Adobe Illustrator

Learn How to Draw a Search Icon in Adobe Illustrator

Learn How to Create a Vector Button in Adobe Illustrator

Learn How to Quickly Create an Infinity Symbol in Adobe Illustrator

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

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

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

Шаг первый: Тема

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

by Oliver’s Creative Agency

by Justas Galaburda

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

by Cole Bemis

Шаг второй: Стиль

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

Все иконки можно поделить на такие классы: силуэтные или залитые, обводкой по контуру (outline icon), сложные или комплексные (мини иллюстрации). Комплексный стиль иконок может сочетать в себе залитые элементы и обводку.

Шаг третий: Образы

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

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

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

Шаг четвертый: Размер

Это вообще самое важное: определиться с минимальным размером.

Для чего это нужно? Если вы хотите, чтобы ваши иконки были с четкими краями, pixel perfect и масштабировались правильно, нужно определиться с размером и толщиной объектов в самом маленьком размере (x1). Рекомендую использовать черные размеры иконки.

Шаг пятый: Процес

Создайте документ со значениями.

Spacing — расстояние между артбордами.

Width и Height — высота и ширина артборда.

Raster Effects — разрешение (ppi) для иконок подойдет 72

Align New Objects… — эта галочка отвечает за привязку точек к пиксельной сетке. Советую включать, но в ходе работы, ее всегда можно выключить.

1. Выберите первый артборд, в нем будет делать все иконки, а готовые будет вставлять на соседние артборды.
2. Создайте квадрат под размер рабочей области.
3. Расставьте направляющие, чтобы облегчить процесс рисования.
4. Используйте Pixel Preview
5. Отмечайте готовые иконки в списке образов, так наглядно можно следить за своим прогрессом.
6. Придерживайтесь советов и прошлой статьи о 5-ти простых правилах создания красивых иконок.
7. Не делайте свой первый сэт слишком большим, можно быстро устать и бросить это дело на половине. Нормальной скоростью будет около 20 иконок в день, потом они могут быстро надоесть…
8. Оформите исходник, и не забудьте навести порядок в слоях, подготовить файл для фотошопа и sketch например.
9. Подготовьте шот для dribbble и behance, оформите пост для социальных сетей. Это лучший пиар для ваших работ и выход на новые заказы. Не забудьте о хэштегах: #design #best #mamalubitmenya #kupiteikonky

Где можно продавать иконки

graphicriver.net — свободная площадка для торговли любым цифровым контентом.

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

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

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

Лекции на тему создания иконок

Тарас Шипка — «Иконочки: как делать все четко и красиво»

Дмитрий Новиков — «Основы создания иконок в Adobe Illustrator»

Источник: medium

Иконка стиля. Cпросили меня однажды: а что это значит… | by Ivan Klymenko

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

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

Xerox Alto icons. 1973

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

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

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

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

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

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

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

Denis Sazhin. iconka.ru

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

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

Twitter. Home icon

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

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

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

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

Стилизация.

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

Supratim Nayak. Стилизация под технологическое скругление иконок в iOS

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

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

Рисуем иконки

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

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

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

Если глаз замылился и вы уже не можете отличить хорошо у вас получилось или нет, дайте себе день на отдых (займитесь другими рабочими моментами), а после посмотрите на свой дизайн и спросите «хочу ли я с ним взаимодействовать?»

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

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

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

Все циклично, особенно мода. Вы можете это увидеть на примере иконок 1985. Стиль которым мы так любим и сейчас. Дизайн «8бит».

darknet.lenta.ru

Пример сайта в стиле 8 БИТ

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

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

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

В общем все эти пиксельные времена длились довольно долго, настолько долго, что мы сейчас даже видим в них что-то красивое. Благо настали 2000-е.

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

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

К чему мы пришли? Обратимся к Apple:

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

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

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

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

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

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

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

Опубликовано: 2017-12-19

Как нарисовать иконку академической шляпки

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

После запуска редактора установите размер документа 256 на 256 пикселей в свойствах документа. В свойства можно попасть при помощи

shift+ctrl+D.

Шаг 1. Готовим фон для иконки.

Нарисуйте круг с помощью инструмента Рисовать круги, эллипсы и дуги (F5). Для этого удерживайте клавишу ctrl- это позволит нарисовать именно круг, а не эллипс. Цвет заливки контура и цвет обводки указан ниже.

 

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

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

(shift+ctrl+А). Готово. Займемся шляпкой.

Шаг 2. Рисуем шляпку

По центру иконки нарисуйте квадрат с желтой обводкой и заливкой. Цвет заливки указан на рисунке. Для этого используйте инструмент Рисовать прямоугольники и квадраты (F4).

Размер придется подобрать самостоятельно. После этого поверните квадрат на 45 градусов. Для этого удерживайте ctrl в процессе  поворота. Каждый раз квадрат будет поворачиваться на 15 градусов.

 

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

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

Оконтуриваем прямоугольник

Контур- оконтурить объект.

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

Для этого в режиме Редактировать узлы или рычаги (F2) нажмите на знак + на панели работы с узлами.

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

Шаг 3. Завершаем работу

Завершаем рисовать иконку. На нижнюю часть шляпки добавим темный кант. Для этого создаем копию нижней части (Ctrl+D). Отменяем заливку и удаляем два верхних узла.

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

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

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

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

Другие похожие и не очень похожие, но интересные записи

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.

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

Pixel-Perfection

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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

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

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

Учебное пособие по рисованным иконкам

Прошло три года с тех пор, как мы запустили [icon]. С тех пор мы добавили новые функции, такие как коллекции, новые серии, такие как Hatch and Feather, и даже новых художников, таких как Ariane и Katinka.Но есть одна вещь, которую мы откладывали: серия нарисованных от руки иконок.

Почему нарисованные от руки значки — такое устрашающее занятие? Для [icon] мы стремимся создавать значки с идеальным пикселем, серии, которые внутренне согласованы, и объекты, не содержащие посторонних точек привязки. Рисованные от руки формы по своей сути не являются пиксельным префектом, а точки привязки, созданные вручную, создают сложные объекты, которые нелегко настроить или изменить. Мы также стремимся создавать серии значков, которые можно использовать вместе, что означает уравновешивание недостатков руки с помощью логики и правил для создания последовательности.

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

Примечание. Мы использовали iPad Pro, Apple Pencil и Adobe Illustrator Draw. Есть и другие инструменты, которые вы можете использовать, но мы обнаружили, что они лучше всего позволяют уловить несоответствия давления, направления и скорости руки.

1. Собрать и отследить

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

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

Измените размер всех значков по размеру сетки, в которой вы работаете. Если вы работаете с небольшим размером (32 пикселя или меньше), попробуйте установить размер базовых значков на 200%, чтобы их было легче отслеживать.

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

2. Сопровождение и итерация

После того, как вы проследили все формы на справочном листе, сделайте справочный лист невидимым и распечатайте свои эскизы в том фактическом размере, в котором вы хотите, чтобы значки были — например, если вы рисовали на 200%, распечатайте на 50 %.

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

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

3. Создание правил

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

• Уровень детализации
• Открытые и закрытые формы
• Качество линии
• Значок угловой
• Использование завитушек (точек, тире)
• Представление света
• Представление глубины
• Повторяющиеся формы (стрелки, руки)

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

4. Отслеживание нескольких версий

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

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

5. Выберите лучшее

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

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

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

6. Изменить размер

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

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

7. Окончательные правки

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

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

Как создавать эффективные иконки

Я, может быть, то, что вы назвали бы иконофилом .Я ОБОЖАЮ иконки, и я люблю делать их еще больше! Как художник, я в основном рисовал — я люблю рисовать, и рисовал всю свою жизнь (задолго до того, как я узнал, что такое графический дизайн). Я думаю, это ключ к моему пониманию создания иконок. Рисование учит вас видеть — а затем преобразовывать то, что вы видите, в линии и форму на бумаге — и именно так вы создаете эффективные значки .

Геометрия

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

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

Значок сердца может состоять из двух кружков и треугольника.

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

Иконки интерфейса

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

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

• 1. Выберите инструмент Прямоугольник со скругленными углами

• 2. Вытяните фигуру

• 3. Поиграйте с толщиной хода, пока не получите удовлетворительный результат.

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

  Это помогает им выглядеть более последовательными и сплоченными.

• 4. Создайте крышку с другим прямоугольником с закругленными углами.

• 5. Еще один скругленный прямоугольник образует ручку крышки.

• 6. Сотрите нижнюю половину прямоугольника с закругленными углами.

• 7. Теперь добавьте полосы на банку, добавив три вертикальные линии к корпусу банки.

• 8.Вот и все! Значок корзины … если хотите, вы можете поэкспериментировать с цветом или толщиной линий

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

Инструмент «Обводка / заливка», который помогает переключать формы с заливки на обводку.

И мой самый любимый инструмент, Stroke Panel, который помогает преобразовывать углы и концы линий из прямых в закругленные.

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

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

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

10 советов по созданию идеальных иконок, нарисованных от руки

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

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

Это 10 советов по созданию идеальных рисованных иконок —

1. Всегда планируйте наперед:

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

2. Нарисуйте нарисованные от руки значки:

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

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

3. Отсканируйте нарисованный от руки эскиз и импровизируйте мелкие детали:

Когда вы рисуете нарисованный от руки значок, отсканируйте его на компьютер с разрешением около 600 dpi.Убедитесь, что все мелкие детали и штрихи пера видны, а также резкие в полном размере. Теперь импортируйте изображение в Adobe Photoshop и при необходимости поверните изображение. Теперь следующим шагом будет преобразование изображения эскиза в оттенки серого. Для этого перейдите в режим изображения и выберите оттенки серого. Теперь увеличьте уровни контрастности, используя функцию уровней. Убедитесь, что вы отметили опцию предварительного просмотра. Теперь переместите линию уровней вправо, пока линии не станут красивыми и насыщенными. Затем переместите правый маркер влево, пока страница не станет белой.Это не повлияет на линии эскиза. Сотрите все ненужные или ненужные биты с помощью Eraser Tool.

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

С помощью Live Trace в иллюстрацию можно внести множество изменений. Вы можете увеличить количество черных линий, которые должен распознать Illustrator, уменьшив значение Минимальная длина обводки, Угол угла и Минимальная площадь.Это поможет Illustrator создать больше линий. Вы также можете преобразовать изображение в черно-белое и в оттенках серого. Однако использование оттенков серого предоставит вам меньше возможностей. Весь логотип, сделанный вручную, имел бы более мягкую эстетику. С другой стороны, черно-белый режим позволяет больше градаций. Одна из необходимых практик — держать кнопку «Избегать белых» отмеченной.

5. В качестве альтернативы используйте инструмент «Перо»:

Live Trace может привести к созданию слишком большого количества слоев, и время от времени наведение курсора на них может быть затруднительным.В таких случаях вы можете положиться на инструмент «Перо». Инструмент «Перо» дает больший контроль над нарисованным от руки значком. Вы можете использовать точки на монтажной области. Illustrator соединит эти точки. Вы также можете управлять кривыми точек с помощью кривых Безье. Для этого вы должны импортировать свое изображение в Illustrator с помощью монтажной области. Во-первых, поместите иллюстрацию на слой с помощью панели «Слои». Убедитесь, что этот слой заблокирован. Во-вторых, создайте новый слой для группировки вещей. В зависимости от количества фигур создайте необходимое количество слоев.Используйте разные цвета, чтобы различать их.

Начните с того, что опустите точку на вершине с помощью Pen Tool. Хотя вы можете добавить много точек с помощью инструмента «Перо», лучше всего использовать как можно меньше точек. Это помогает логотипу оставаться гладким. Используйте точки, где форма меняется или изгибается. Сначала сделайте грубый путь, потому что вы можете вернуться и уточнить эти точки с помощью Direct Select Tool.

6. Будьте проще:

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

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

7. Добавьте глубину, используя абстракцию:

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

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

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

8. Человеческое прикосновение:

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

9. Добавьте визуальную текстуру:

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

10. Использование единого элемента дизайна во всех значках:

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

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

Как создавать значки • Приложение Concepts • Бесконечное гибкое создание эскизов

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

Создание графики руки

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

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

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

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

Уменьшите непрозрачность фотографии с помощью ползунка во всплывающем окне слоя.

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

Выберите кисть с фиксированной шириной и создайте новый слой над изображением.

4. Нанесите на кисть разглаживание. 0% дает четкую линию, 100% создает идеально прямые линии. Установите сглаживание примерно на 50%.

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

5. Обведите контур руки на холсте.

Необязательно указывать точную схему.

6. Теперь найдите инструмент «Сдвиг» на колесе инструментов и сдвиньте или выдвиньте те части линий, которые кажутся неуместными.Сдвиг по линии будет тянуть ее, а смещение по обе стороны от линии будет толкать ее.

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

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

Эта рука выглядит довольно гладкой.

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

Инструмент смещения остается того же размера даже при увеличении изображения.

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

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

10. Рука выглядит немного шире для значка, поэтому мы его немного уменьшим. Выберите инструмент Slice и установите его на 0 точек, чтобы сделать надрез в вашей линии.(Увеличьте инструмент, чтобы стереть, или меньше, чтобы надрезать). Выберите срезанный большой палец и снова соедините его пальцами под большим углом.

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

11. Если вам нужно обрезать концы линий, увеличьте размер инструмента «Срез» и сотрите их.

Удаление излишков в нижней части руки.

12.Чтобы придать контуру направление, добавьте линию ладони. Нарисуйте кривую ручкой фиксированной ширины. Вы можете активировать Snap в меню Precision, чтобы помочь вам выровнять линии. Продолжайте и улучшайте свою графику, пока она вам не понравится.

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

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

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

Выглядит хорошо!

Макет кнопки

1.Теперь давайте смоделируем кнопочную часть значка. Мы сделаем это, добавив кружок вокруг изображения вашей руки. Откройте библиотеку объектов Basic Shapes и перетащите ее по кругу. Измените размер и разместите его вокруг изображения.

Коснитесь меню «Импорт» один раз, чтобы отобразить объекты. Если Basic Shapes не является вашей активной библиотекой, нажмите «Еще», чтобы открыть Object Market и найти его. Затем коснитесь или перетащите круг на холст.

2. Выберите контур круга, откройте цветовое колесо и выберите средний серый цвет.Вот и все, что касается первой кнопки.

Кнопка для интерфейса для левой руки готова.

3. Чтобы создать вторую кнопку, выделите всю графику и нажмите «Дублировать» во всплывающем окне. Отодвиньте его в сторону, затем нажмите кнопку «Зеркало», чтобы перевернуть.

Правая кнопка точно такая же, только зеркальная.

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

«Активный» правый значок готов к передаче в пользовательский интерфейс.

5. Если вам нужен прозрачный фон для вашего значка, перейдите в «Настройки» и выберите «Прозрачный» среди типов бумаги.

Найдите прозрачный фон в «Настройки» -> «Рабочая область» -> «Фон».

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

Вы можете переключать касание + удерживание + перетаскивание выделений в «Настройки» -> «Жесты».Установите или снимите флажок «Включить перетаскивание + отпускание активных выделений iOS» в разделе «Нажатие + удержание».

И все. Вот как просто создавать иконки в Concepts.

Я надеюсь, что эти методы помогут вам быстро достичь ваших целей проектирования. Если у вас есть какие-либо вопросы об инструментах или процессе, отправьте сообщение по адресу [email protected], и мы будем рады помочь. Для получения дополнительных видеоуроков посетите наш канал YouTube.

---

Контент и видео созданы Лассе Пеккала.

---

Рекомендуется

Создание шаблона проекта

Настройка меню, кистей и предустановок

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

Создание согласованного набора значков в Sketch

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

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

Хотя вы можете выбрать любую векторную программу, которая вам нравится, Sketch — отличный вариант. Он в первую очередь предназначен для использования в качестве графического приложения для веб-дизайнеров и дизайнеров мобильных устройств, дизайнеров пользовательского интерфейса и дизайнеров иконок и становится надежной альтернативой наиболее распространенному программному обеспечению для проектирования экранов. Приложение отлично выглядит и прекрасно себя чувствует, хорошо спроектировано и его легко освоить, если вы привыкли к другим инструментам дизайна, таким как Illustrator, Fireworks или Flash.

01. Настройте монтажную область и область рисования

Запустите Sketch и создайте монтажную область (A).Нарисуйте область с помощью мыши или пера Wacom на холсте — впоследствии вы можете настроить размеры на панели инспектора с правой стороны. Вы также можете изменить положение и цвет фона и выбрать функции, которые вам нравятся.

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

02. Вставьте прямоугольник.

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

Начнем со значка плюса. Вставьте прямоугольник (R) и нарисуйте прямоугольник 100 x 20 пикселей, затем измените радиус на 40, чтобы у вас были закругленные углы.

03. Использование панели «Инспектор»

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

Если вы привыкли работать с линейками, добавить их в Sketch очень просто («Просмотр»> «Холст»> «Показать линейки»). Вы можете щелкнуть в любом месте линейки, чтобы добавить направляющие, и они будут отображаться, пока видны линейки.

04. Сгруппируйте значок в папку

Давайте сгруппируем первый значок плюса в папке — так Sketch будет отображать элементы, когда вы нажимаете Cmd + G.На панели «Слой» вы увидите папку с двумя отдельными элементами (прямоугольниками), которые по-прежнему можно редактировать по отдельности. Это удобно, если вы хотите потом настроить формы — например, чтобы удалить закругленные углы или изменить радиус.

05. Значок стартовой корзины

Давайте перейдем к более сложному значку: корзине. Основные формы похожи на значок плюса, поэтому мы начали с плюса. Нарисуйте прямоугольник (R) примерно 15 x 84 пикселей. Скопируйте и вставьте ту же форму и начните строить тело корзины.Здесь нам также придется установить радиус 40, чтобы набор иконок был единообразным.

06. Построение корзины

Продолжайте и снова используйте ту же форму для тела значка корзины, просто повернув ее на 90 градусов. Для ручки вверху сохраните тот же радиус, и углы получатся ровными и аккуратными. Прямоугольник в верхней части корзины имеет размер 65 x 15 пикселей — в основном на 40 пикселей короче по ширине, чем основание корзины, которое составляет 105 пикселей.

07. Добавьте окончательные детали.

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

08. Значок начала колокольчика

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

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

The Sketch Handbook: Создание иконок в Sketch

Это отрывок из The Sketch Handbook из журнала Smashing Magazine, «всего, что вы когда-либо хотели знать о дизайне с помощью Sketch, на 376 страницах.Подсказка: я автор. Ниже приводится расширенное руководство, которое будет позже в этой книге, но если вы новичок в Sketch, не волнуйтесь. Книга начинается с основ и знакомит вас со всеми функциями Sketch.

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

Во-первых, добавьте новую страницу для размещения всех 4 значков. Назовите его «Иконки». Каждая иконка должна иметь размер 64 × 64 пикселя и находиться на отдельной монтажной области. Добавьте первый и измените положение X и Y на 0 для четко определенной начальной точки.

Поскольку мы начинаем со значка «Морской», обязательно используйте это имя для артборда. Измените цвет фона на синий (# 55BFE1) из значка категории адаптивной статьи, но отключите Включить в Экспорт . Хорошо, что раньше мы сохранили его в Document Colors .

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

По теме: узнайте, как переключиться на Sketch, в этом бесплатном и простом видеокурсе от InVision

Так как мы хотим создать иконку с идеальным пикселем, давайте сейчас создадим сетку 2 × 2. Нажмите View → Grid Settings… на панели инструментов и введите размер блока Grid из 2 пикселей (рис.10.2, справа). Толстые линии не нужны (укажите здесь 0). Эта сетка не только позволяет нам размещать все элементы значка на полных пикселях, но и помогает избежать размытых линий, если мы придерживаемся размеров значков, кратных или половинных из 64 пикселей. Чтобы использовать эту сетку в полной мере, всегда следите за тем, чтобы фигуры выровнялись точно по линиям сетки при их добавлении или изменении. Иногда полезно оценивать качество значка без линий сетки. Вы можете нажать Cmd + G , чтобы выключить их.

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

Вид лучше

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

Щелкните Mirror на панели инструментов и URL-адрес в правом нижнем углу диалогового окна, чтобы открыть дизайн в браузере. Там выберите страницу «Значки» вверху и выберите значок или выполните поиск по его имени с помощью функции поиска в правом верхнем углу, чтобы открыть его в одном окне. Каждый раз, когда вы сейчас что-то меняете в Sketch, это сразу же отражается здесь.Вы даже можете настроить текущий выбранный артборд на автоматическое отображение в зеркальном отображении: просто включите Show current Artboard на вкладке General в Preferences .

Дерево

Для вдохновения я попробовал поиск значков в The Noun Project и просмотрел некоторые термины, которые у меня ассоциируются с «приморской» темой. Я приземлился на лодке, плывущей по волнам и дереву, изображающему природу вокруг озера. Это элемент, с которого мы начнем: он состоит из трех основных треугольников для ветвей и прямоугольника для ствола (рис.10.3). В то время как Sketch предлагает отличную форму треугольника для первого, я предпочитаю использовать вместо него прямоугольник, потому что у меня больше свободы для выбора выравнивания. Кроме того, он доступен с помощью сочетания клавиш.

Для верхушки дерева нажмите R и добавьте первый прямоугольник размером 12 × 6, выровненный по сетке. Убедитесь, что это применимо ко всем фигурам, которые вы добавляете с этого момента. Перейдите в режим векторной точки с помощью . Введите , удерживайте Cmd и щелкните верхнюю строку, чтобы добавить точку точно посередине.После этого выберите точки слева и справа щелчком Shift . Вы также можете перетащить выделение в каждую точку вместо Shift -клик, если это сложно поймать.

Теперь удалите эти точки с помощью Delete или Backspace , что даст нам желаемый треугольник, и выйдите из режима векторных точек с помощью Esc . После этого продублируйте форму либо с помощью Cmd + D , либо, удерживая Alt и перетаскивая его вниз.Если вы предпочитаете первый метод, убедитесь, что Сдвиг дублированных слоев отключен на вкладке Layers в настройках Preferences , чтобы дубликат оставался в том же положении, что и оригинал. После этого переместите треугольник вниз на 4 пикселя. Либо используйте клавишу со стрелкой вниз , либо добавьте «+4» в поле Y в инспекторе. В последнем случае нажмите Esc , чтобы выйти из поля ввода.

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

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

Не снимая выделения со всех частей, выполните логическую операцию типа Union , нажав Alt + Cmd + U . Это добавит все формы в один слой и позволит вам сразу изменить цвет на такой же, как у фона монтажной области. Наконец, переименуйте его в «Дерево» и переместите в положение X , равное 4, и положение Y , равное 10, чтобы оставить место для других частей.

Лодка

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

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

Хотите верьте, хотите нет, но второй меньший парус еще проще. Дублируйте большой парус, щелкните правой кнопкой мыши и выберите Transform → Flip Horizontal . Перейдите к инспектору с помощью Alt + Tab , перейдите к полю Ширина с последующими нажатиями Tab , введите 8, перейдите к Высота и введите 12. Нажмите Esc , чтобы выйти из поля.Теперь нажимайте кнопку со стрелкой влево и , пока интеллектуальные направляющие не покажут зазор в 2 пикселя от другого паруса. Кроме того, переместите меньший парус вниз с помощью клавиши со стрелкой вниз , пока оба паруса не окажутся на одной базовой линии. В конце выберите обе формы, чтобы создать еще одну логическую операцию Union .

Для корпуса лодки добавьте еще один прямоугольник размером 38 × 12 пикселей под парусами с интервалом 2 пикселя. После входа в режим векторной точки, удерживая нажатой клавишу Cmd , щелкните нижнюю строку, чтобы добавить точку посередине.Нажмите Tab , чтобы перейти в нижнюю левую точку, нажмите Delete , чтобы удалить его, снова нажмите Tab , но на этот раз в сочетании с Shift , чтобы двигаться в обратном направлении, пока не дойдете до нижней правой точки. . Также удалите его.

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

Выйдите из режима векторной точки и выберите корпус лодки вместе с группой парусов. Отцентрируйте их по горизонтали, но затем переместите паруса на один пиксель вправо, чтобы они снова выровнялись по сетке. Наконец, выберите их все вместе и добавьте в одну группу с другой операцией Union . Измените цвет, чтобы он соответствовал другим частям значка. Переименуйте эту группу в «Лодка» и измените положение на 22 (X) и 18 (Y).Теперь давайте скроем его с помощью Shift + Cmd + H , чтобы у нас был беспрепятственный обзор последней части значка.

Рис. 10.4: Лодка отмечает второй элемент значка. Я временно уменьшил непрозрачность дерева, чтобы выделить форму лодки.

Волны

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

Начальная точка — одиночный овал. Нарисуйте один размером 16 × 12. Добавьте его к левому краю значка под деревом, чтобы у вас было место для последующих копий. Удерживая Alt , перетащите копию вправо, пока оба элемента не соприкоснутся и не окажутся на одной линии. Теперь нажмите Cmd + D , чтобы добавить элементы с одинаковым интервалом, пока у вас не получится 4 овала. По-прежнему не похоже на волны. Шаг в правильном направлении — выбрать все эти формы, чтобы вы могли сформировать логическую операцию Union .Убедитесь, что эта группа выровнена по центру монтажной области по горизонтали.

Один элемент все еще отсутствует, прямоугольник 64 × 28 пикселей, где мы можем вырезать овалы, чтобы сформировать окончательные волны. Перемещайте его вертикально, пока его верхняя сторона не будет отцентрирована по овалам; также отцентрируйте его по горизонтали относительно монтажной области (рис. 10.5, 1). Теперь перетащите прямоугольник в группу логических значений в списке слоев, но убедитесь, что он находится в самом нижнем положении. Наконец, снова выберите все овалы и измените их логический тип, щелкнув Subtract , маленький значок рядом со слоями в списке слоев (рис.10.5, 2). Теперь мы становимся серьезными.

Рис. 10.5: Волны образованы 4 овалами, вычтенными из прямоугольника (1). Измените логический тип с помощью маленьких значков в списке слоев (2).

Завершите волны, добавив границу Inside с толщиной 2 пикселя к объединенной форме и назначьте ей тот же цвет, что и все остальное. Как и в случае с цветом заливки, вы можете использовать палитру цветов с Ctrl + C для этого, но сначала вам нужно будет удалить заливку с помощью F (нам она все равно не понадобится).Наконец, назовите эту логическую группу «Вершина волн» и переместите ее на позицию Y , равную «42».

Чтобы создать движение, добавьте вторую линию волн со смещением вправо на 8 пикселей, на половину ширины овала. Конечная позиция Y для этой второй линии волн — 52, и имя должно быть «Дно волны» (рис. 10.6). Если вы сейчас выберете группу «Лодка» в списке слоев и покажете ее, она будет плавно перемещаться по верхней ватерлинии.

Рис. 10.6: Готовые волны: две волновые линии, смещенные на 8 пикселей, создают некоторое движение.

В завершение, объедините все в группу «Иконка», чтобы было легче получить весь пакет сразу. Кроме того, измените белый круг сзади на маску с помощью Ctrl + Cmd + M , чтобы обрезать все, что находится за пределами этой формы; он должен быть в самом нижнем положении, чтобы это работало. Готовую иконку смотрите на Рис. 10.1.

Это отрывок из Руководства по Sketch, на 376 страницах которого вы узнаете все, что вам нужно знать о Sketch.

Вам понравятся эти сообщения о Sketch…

.

No related posts.