Как рисовать нормальные иконки. Как создать логотип самостоятельно от идеи до воплощения

Недавно я прочитал статью Скотта Льюиса, который является профессиональным дизайнером иконок Iconfinder.com . Скотт получил степень в области графического дизайна в Университете Восточной Каролины и разрабатывает иконки более 25 лет.
Меня заинтересовали его советы по созданию иконки, а также его подход.

Три основных составляющих хорошего дизайна иконки

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

Форма

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

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

Элементы, которые используются при создании одной иконки или наборе иконок, например закруглённые или острые углы определённых размеров (2, 4 или 8 пикселей), толщины линий (2 пикселя или 4 пикселя), стиля (flat, outline), цветовая гамма и т.д., должны быть едиными.
Таким образом, эстетическое единство представляет собой набор элементов дизайна, который повторяется во всем сете. Это видно в примере ниже.

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

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

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

Сетка

Всегда начинайте рисовать иконки в сетке. Я использую сетку 32x32 пикселя, при этом внешние два пикселя оставляю всегда пустыми. Цель этой зоны – создать свободное пространство вокруг иконки. Если вы делаете круглые иконки, то она должна затрагивать все четыре края, без выхода в зону свободного пространства, но порой, чтоб сохранить целостность иконки, какой-то элемент может выходить за пределы круга, как на картинке:

Стороны

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

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

Геометрические формы

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

Цифры: Края, линии, углы, кривые

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

УГЛЫ

В большинстве случаев необходимо придерживаться угла в 45 градусов или кратных ему. Сглаживание угла в 45 градусов не даёт появиться лишним пикселям, таким образом получаем чёткий результат с идеальной диагональю, создавая приятные и узнаваемые очертания для человеческого глаза. Эти очертания объединяют весь сет иконок, а так же создают единство в пределах одного значка. Если ваш дизайн заставляет нарушить правило угла в 45 градусов, то попробуйте сделать его равным 22,5 или 11,25 градусов, так как сглаживание будет более-менее ровными.

КРИВЫЕ

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

ЗАКРУГЛЕНИЕ УГЛОВ

Радиус закругления углов составляет 2 пикселя. Для иконки 32x32 пикселя такой радиус вполне достаточен, чтобы угол был действительно закруглённым, и при этом не смягчает углы на столько, чтобы округлить дизайн до пузыря. Главное помните, что от выбора радиуса скругления будет зависеть дизайна самого значка.

СГЛАЖИВАНИЕ ПИКСЕЛЕЙ

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

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

ТОЛЩИНА ЛИНИИ

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

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

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

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

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

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

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

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

Сет иконок, которые были использованы на

Как нарисовать значки Warface

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

1.Вот логотип. Да, еще, кто не в курсе, картинки увеличиваются.

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

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

Стираем все вспомогательные прямые, оставив только по середине, рисуем дальше.

Примитивно можно закрасить значок таким образом.

2.Значок, его разрешение очень небольшое. Хотела сделать несколько значков, но они такие маленькие, очень трудно разглядеть детали, так что имеем, что имеем. Начнем.

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

Рисуем зубы, язык и прямые, которые отходят от головы.

Рисуем гриву, если нарисованы тонкие линии, то тоже рисуете еле видно.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Мастер-класс "Создание эмблем для команд в программе PowerPoint2010"

Автор Ростова Наталья Сергеевна, воспитатель I категории, МБДОУ «Детский сад №155», г. Нижний Новгород.
Мастер-класс предназначен для воспитателей, педагогов и родителей.
Цель: использовать возможности программы PowerPoint2010 для создания эмблем.
Задачи:
- научить создавать эмблемы;
- повысить педагогическую компетентность;
- расширить возможности применения ИКТ технологий в работе.
Для создания эмблем необходимо:
- наличие ПК;
- картинки и фоны для эмблем определенной тематики;
- владение компьютером и программой PowerPoint2010.
Технологию создания эмблем легко освоить, используя возможности Microsoft Office Power Point2010.

Ход создания:
Открыть программу PowerPoint2010 и создать пустой слайд.
Эмблема будет круглой, поэтому на вкладке Вставить выбираем Фигуры - Овал.

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

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

Вводим текст. У меня название детского сада.
Выбираем девиз. У меня "Лети(м) к победе!". Девиз также располагаем по кругу, но в нижней его части.
Выбираем снова вкладку Средства рисования - Текстовые эффекты - Преобразовать -Траектория движения - Дуга вниз.

Используя вкладку Главная - Шрифт , выбираем для надписей цвет, шрифт и размер шрифта.Теперь нам нужно заменить заливку круга:
Вкладка Средства рисования - Заливка - Нет заливки. Можно пропустить этот шаг и разу выбрать Заливка - Рисунок

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

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

Эмблема почти готова. Переходим к ее окончательному дизайну. Работаем с контуром круга, выбираем его цвет и толщину. Средства рисования - Контур фигуры - Цвкта темы - Толщина - Другие линии -Тип линии - Ширина выбираю 10.

На созданную эмблему снова накладываем круг.

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

Теперь снова работаем с контуром второго круга, его цветом и толщиной. Толщина контура этого круга у меня 12.

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

Применяем группировку.

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

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

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