Как нарисовать оригинальный логотип самостоятельно: леттеринг как он есть

Natalia Shpitula

Обновлено 20 января, 2020

Loading…

Содержание: 1.Понять цель и определить направление 2.Раскройте символизм компании 3.Визуализация и вдохновение 4.Практика: эксперименты и исследования 5.Работа в Live Trace 6.Векторный логотип с идеальными формами 7.Работаем с текстурами 8.Последние тесты Логотип компании – это часть узнаваемого бренда, поэтому на разработку этого элемента уходит значительное время и силы. Запоминающийся и оригинальный логотип становится частью успешной раскрутки бизнеса. Рукописные шрифты используются для создания логотипов уже давно и зарекомендовали себя как эффективный инструмент в создании креативных лого. Они привлекают больше внимания и смотрятся красивее.

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

Разбиваем процесс создания на отдельные шаги

Понять цель и определить направление

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

Serif

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

Sans Serif

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

Slab Serif

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

Script

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

Blackletter

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

Sign Painter

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

Раскройте символизм компании

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

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

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

Визуализация и вдохновение

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

Практика: эксперименты и исследования

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

Оцифровка рисунка

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

• • отсканируйте изображение. Разрешение снимка должно достигать 600 DPI, поэтому лучше использовать специальное оборудование и не полагаться на возможности смартфона;
  • откройте отсканированное изображение в программе Photoshop. Чтобы сделать границы более четкими, можно отрегулировать контраст черного и белого. Для этого нужно зайти в меню «Изображение» и найти общие настройки. Баланс устанавливается в подменю «Уровни».

• Выровняйте все буквы в ряду. Нажмите Command-R, подтягивая направляющие линейки, которые можно перетягивать с одного уровня на другой.
• Если в логотипе присутствуют буквы C,S,O или Q, G, то они изначально должны располагаться немного выше, чтобы при написании сохранялись ровные пропорции.

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

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

Работа в Live Trace

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

• • Откройте Illustrator и PSD рисунок, который предстоит обработать. Формат рисунка должен иметь формат PSD, чтобы вы могли внести некоторые изменения и зафиксировать их. Если использовать JPG, то придется вырезать каждую букву в отдельности и затем создавать практически новое изображение.
  • Исправьте дефекты с помощью опций трассировки. Инструмент запускается через меню «Объект», в котором необходимо активировать пункт «Живая трассировка». С помощью опций можно провести нужные доработки рисунка до получения идеального результат.

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

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

Векторный логотип с идеальными формами

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

• • открываем Illusrtator и PSD рисунок;
  • теперь нужно выбрать само изображение и уменьшить уровень непрозрачности. После чего, нажмите Command-2, чтобы зафиксировать слой;
  • с помощью команды Command-L создается новый слой, который нужно расположить над существующим. Расположите графические узлы таким образом, чтобы они оказались вдоль кривых внешних границ букв.

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

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

Работаем с текстурами

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

Последние тесты

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

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

с нуля, упрощение, разная степень редкости — Gamedev на DTF

Меня зовут Таня Нажимова, я работаю художницей 8 лет. В этой статье поделюсь 3 гайдами, как рисовать иконки разной сложности.

11 159 просмотров

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

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

Меня долго волновало, как монструозный мастер вроде Beeple со своим 13-летним EveryDays делает картинку за час или Satoshi Matsuura ежедневно выкладывает концепт персонажей. Все просто — они видят главное и отсекают лишнее, не копаются в деталях, а прямо доносят до зрителя 1 цепляющую мысль. Я попробую объяснить, как достичь похожих результатов.

Содержание статьи

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

Разберу 3 основных задания, с которыми обычно сталкивается игровой художник:

• Придумать иконку с нуля
• Упростить большой объект для иконки
• Подготовить набор иконок с нарастающей ценностью

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

Инструменты

• Pinterest для сбора референсов;
• Adobe Photoshop для работы с цветом и формами иконок;
• 3D-редактор Blender или SketchUp для быстрого и более точного создания сложных объектов, как замена построению от руки в Photoshop;
• Unity для интеграции итогового арта в сцену. Например, художники в CM Games сами выгружают арты в движок. Так можно облегчить работу технических художников или программистов, сэкономить время и избежать недопонимания при передаче ассетов.

Часть 1: придумать иконку предмета с нуля

Идеи и эскизы

Работа над иконкой, как и над любой артовой задачей, начинается с технического задания. Для меня оно бывает 2 типов — нестандартные мозговыносящие идеи и обычные предметы, типа сундуков. В первом варианте работа идет своим чередом, а вот для выполнения второго есть хинт — добавить фан в виде интересных деталей, неожиданного решения в дизайне или альтернативных идей реализации. Не всегда получается, но чем чаще пробовать, тем ближе к успеху. В итоге можно пройти путь комментариев от лида “чёт мне ниче не нравится” до “я целýю твои мысли”, когда робкие попытки настоять на своей идее переходят в полное доверие коллег к исполнителю.

Задача. Подготовить пак иконок для окна механики выращивания растений:

• семечко
• саженец
• лейка
• розовый цветок
• лазурный цветок
• бутылочка с лазурной эссенцией
• бутылочка с розовой эссенцией

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

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

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

Блокинг

Строю иконки в цвете простыми формами, используя Перо и Эллипсы.

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

Многие художники придерживаются правила рисовать на большом полотне, чтобы в конце уменьшить картинку и тем самым скрыть дефекты. Хороший подход, но с иконками есть риск потратить больше времени на гипер-проработку. Поэтому делаю их меньше 512х512px и всегда конвертирую слои в 1 смарт-объект, чтобы видеть иконку в нужной сцене в 100% разрешении, а лучше меньше.

Детализация

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

От детализации 2 цели — добиться объема и материальности. Объём я получаю светом, полусветом, собственной тенью, полутенью и рефлексом.

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

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

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

По таким правилам продолжаю рисовать каждую иконку для садоводства.

Финализация

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

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

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

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

Оставляю как можно меньше пустого места внутри картинки. Имя и размер при импорте в игру задаю по договоренности с командой. Я обычно делаю 256х256px и в Unity выставляю сжатие поменьше, если требуется. Контролирую этот момент в каждой картинке через параметр Max Size в меню Inspector.

Часть 2: упростить здание для иконки

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

Проблема. Исходный объект хорошо выглядит в 3D-сцене, но не выигрышно смотрится в меню магазина.

Подготовка

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

Эскиз

Для упрощения иконки выясняю, что первое выделяется в здании, какие элементы отличают его от других, чтобы обозначить главные детали и убрать второстепенные. Решётка на окнах — мелочь, золотые завитки — можно упростить, цветочки на деревьях — ерунда, кирпичики на фундаменте — сокращаю с 8 до 2. Еще можно оставить по 1 камню вместо 3 по бокам, но мне нравится ритм из оригинала, поэтому оставляю.

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

Блокинг

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

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

Детализация

Аналогичный этап рисования прослеживается в первом задании. Прорабатываю объем в каждой детали и настраиваю свет.

Часть 3: иконки разной степени редкости

Задача. Сделать пак из 3 иконок монет в магазин:

• маленький
• средний
• большой

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

Скетчи

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

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

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

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

Моделирование

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

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

Блокинг

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

Финализация

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

Заключение

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

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

Автор: Таня Нажимова

Руководство для начинающих по рисованию иконок | Medium

Опубликовано в

·

Чтение: 9 мин.

·

4 декабря 2021 г.

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

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

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

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

Это руководство познакомит вас с основами рисования значков и научит рисовать собственные значки всего за пять шагов. Вы можете следовать шаг за шагом и создать свой собственный значок к концу этой статьи. (Yay 🎉 )

Итак, что именно я имею в виду, когда говорю иконок ? Значок — это графический символ в цифровом мире, представляющий объект или функцию.

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

А почему для нас так важны системные значки?

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

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

Теперь, когда мы находимся на одной странице, я думаю, пришло время перейти к разделу «С чего, черт возьми, мне начать?»

Шаг 1: Знакомство со стилями значков

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

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

Контурные значки
Также известные как линейные значки, они простые, чистые и современные, и часто сочетаются с плавные толстые линии. Этот стиль тесно связан с Apple OS.

Значки с глифами
Монохромные значки, выполненные из простых форм и легко узнаваемые. Google использует стиль значков глифов в качестве основного стиля значков в Material Design.

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

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

Шаг 2: выберите размер значка

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

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

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

Шаг 3. Настройка сетки

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

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

• Пиксельная сетка — Промышленный стандарт обычно составляет 1 пиксель. Это помогает идеально выровнять фигуры по одному пикселю и правильно измерить расстояние между линиями и фигурами. Делая это, мы гарантируем, что значок не будет пиксельным и идеально выровнен.
• Область обрезки — Область обрезки — это область, в которую не следует помещать какой-либо контент; пространство, оставшееся внутри, называется безопасной зоной.
• Keyline Shapes — Чертежи трех основных фигур: прямоугольника, квадрата и круга. Это основные геометрические фигуры, которые мы будем использовать для создания значков, и эти чертежи помогут нам выровнять все значки в одинаковое положение и размер в сетке.
• Ортогональный — Ортогональные линии — еще один инструмент, который помогает нам выравнивать значки под разными углами, например, на 45* или 90*.

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

Шаг 4: Найдите свою метафору

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

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

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

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

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

Так как же все-таки найти вдохновение?

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

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

Пример значка архива: от метафоры к значку

Шаг 5: Создайте свою иконку из геометрических фигур

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

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

Нарисуем дискету вместе!

Следуя нашим предыдущим шагам, на данный момент я уже выбрал стиль для своих иконок (контур), я определил базовый размер (24px, как обычно 🤷‍♀️), моя сетка готов, и я погуглил и сохранил несколько изображений для подобия , , теперь я готов начать рисовать.

1. Упрощение — Я проделываю в уме упражнение по упрощению, о котором упоминал ранее — я вижу, что после упрощения дискета состоит из одного большого квадрата и двух прямоугольников.
2. Эксперименты — Далее я свободно рисую нужные мне фигуры; Я не сосредотачиваюсь на деталях, потому что сначала хочу получить общее представление о вещах и быстро поэкспериментировать с различными структурами и идеями.
3. Выравнивание — После того, как я примирился с тем, что у меня есть, я выравниваю значок по сетке и убеждаюсь, что он идеально соответствует пикселям с ключевыми формами; если нет, я корректирую соответственно.
4. Тонкая настройка — Добавление мелких деталей для придания большего характера, сглаживание при необходимости и проверка моего результата без сетки и в небольшом масштабе, чтобы убедиться, что он работает в нормальном размере.

Во-хо! Если вы дошли до этого места и следовали всем инструкциям, я, вероятно, могу поздравить вас с рисованием вашей первой иконки! 👏👏👏

Итак, давайте посмотрим, как просто рисовать иконки:

1. Во-первых, найдите свой голос иконки и стиль , подумайте, какую историю вы хотите, чтобы ваши иконки рассказывали.
2. Выберите размер по умолчанию для ваших значков на основе компонентов, которые уже есть в вашей системе.
3. Настройте свою монтажную область на успех, используя систему сетки .
4. Найдите свою метафору — подумайте, нарисуйте или сохраните изображения предмета, который вы хотите нарисовать.
5. Используйте геометрических фигур для реконструкции визуального элемента, а затем настройте его — играйте с радиусом границы, положением и выравниванием, пока не найдете правильный баланс.

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

Спасибо, что прочитали ❤️

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

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

Об авторе

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Форма

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

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

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

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

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

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

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

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

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

Шесть шагов

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Углы

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

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

Кривые

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

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

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

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

Углы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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