Создание леттеринг-логотипа — от идеи до воплощения

В этой статье мы делимся историей создания леттеринг-логотипа Letter Shoppe дизайнером Dina Rodriguez.

color

Что такое леттеринг-логотип?

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

Как создать леттеринг-логотип?

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

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

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

Шаг 1: Раскройте значение бренда

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

Понимание семейства шрифтов

 

font-types-compressor

Шрифт Serif 
Serif (засечка) – это маленькая линия, завитушка или украшение, которое тянется от буквы.

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

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

Психология шрифта: cбалансированный, современный, чистый, простой и корпоративный.Психология шрифта: властный, массивный, древний, дружелюбный.
   font types_2
Шрифт Script
Script такой же, как рукописный шрифт или каллиграфия, он часто создается плавными штрихами с помощью кисти или пера.
Шрифт Blackletter
Blackletter отличается штрихами от толстого к тонкому, засечками и длинными завитками восходящими от диагональной засечки.
Шрифт Sign Painter
Похож на Script, но должен выглядеть живо, как будто нарисован с помощью кисти для желаемого эффекта ручной росписи.
Психология шрифта: классический, романтичный, приятный, теплый и мягкий.Психология шрифта: мужской, жесткий, исторический, драматический и холодный.Психология шрифта: винтаж, мастерство, художественность, игривость, доступность.

 

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

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

Вот для примера мои десять слов:

1. Художественный 2. Ценный. 3. Смелый 4. Природный 5. Теплый
6. Классический 7. Простой 8. Уверенный 9. Сделанный вручную 10. Приветствующий.

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

Например, я нарисовала «BOLD» (смелый — ред.) высоким шрифтом с штрихами в виде солнечных лучей.

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

Вдохновение и визуальное исследование

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

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

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

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

Шаг 2: Экспериментируйте с набросками

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

Я обычно делаю черновики от 10 до 20 миниатюр для полного взгляда на все возможные варианты логотипа.

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

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

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

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

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

Шаг 3: Оцифровки окончательной концепции

Следующим этапом будет оцифровка вашего логотипа. Для этого нужны знания программ Photoshop и Illustrator.

Очистка в Photoshop

1. Отсканируйте изображение с разрешением 600 точек на дюйм.
2. Откройте сканированное изображение эскиза в Photoshop.
3. Перейдите в меню Изображение> Настройки> Уровни (Image > Adjustments > Levels) и регулируйте уровни черного и белого, так чтоб вы реально увидели вашу надпись.

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

guidesПодсказка: буквы C, S, O, заглавная Q и G остаются немного выше и ниже ваших направляющих. Это позволяет вашим буквам оставаться на том же уровне.
o5. Не стесняйтесь использовать инструмент Лассо, чтобы исправить любые проблемы выравнивания — Выбрать> Щелкните правой кнопкой мыши > Вырезать ваши буквы (Select > Right Click > Cut).

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

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

7. Примерно через час, вернитесь в Photoshop и переверните ваш рисунок вверх ногами. Видите еще недостатки? Может быть, только некоторые из ваших букв прямые, в то время как другие имеют наклон, или ваши S и O более продолговатые, чем круглые.
8. Поверните логотип в исходное положение, нажмите кнопку Сохранить. Теперь вы готовы к векторизации!

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

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

1. Откройте PSD файл логотипа в Illustrator.
2. Выделите свою работу и перейдите к Объект> Живая трассировка> Параметры трассировки (Object> Live Trace > Tracing Options).

После того, как появится диалоговое окно, нажмите Просмотр (Preview) и поиграйте с настройками, пока вы не получите желаемого результата. Я обычно начинаю с настроек черно-белого логотипа. Вот посмотрите на мои настройки для моего логотипа Letter Shoppe.

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

3. Если все выглядит хорошо, перейдите в Объект> Преобразовать (Object > Expand), для сведения изображения.

expand4. Вы можете редактировать свои опорные точки, соответственно, пока ваш логотип не будет выглядеть так, как именно вы хотите. Я обычно использую «Инструмент сглаживания» (Smooth Tool), чтобы сгладить любые неровности. Обратите внимание на изображение до и после обработки.

smooth

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

Благодаря удивительной статье AGCS у меня есть совершенно новый подход к очистке векторов, используя 0 и 90 градусов кривые Безье. Я буду использовать букву S в качестве примера, используя этот новый метод:

1. Откройте Illustrator и поместите PSD вашего эскиза в Illustrator .
2. Выберите изображение и понизьте непрозрачность эскиза. Нажмите Ctrl — 2, чтобы заблокировать слой.
3. Щелчок на кнопке Create New Layer (Создать новый слой) и поместите узлы вдоль кривых крайней точки буквы. Проверьте мой рисунок ниже, который показывает, где каждая из моих якорных точек.

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

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

final-s

Добавление текстуры к вашей надписи

Для шероховатости вы можете добавить тонкие неровные линии на внешней стороне ваших букв, чтобы они казались нарисованными вручную. Чем тоньше линии, тем больше вам придется масштабировать свои художественные работы, прежде чем добавить эффект. Перейти к Эффекты > Искажение & Трансформация> Огрубление (Effects > Distort & Transform > Roughen.).
Можете поиграть с настройками, чтобы получить желаемый результат, и обязательно попробуйте абсолютные значения опций.

После завершения перейдите к Объект> Преобразовать внешние эффекты (Object > Expand Appearance), чтобы зафиксировать изображение.

roughenИ в завершение, используйте текстуры! Мне нравится использовать вектор пакет текстур из Seanwes, но не стесняйтесь создавать свои собственные текстуры. Некоторые люди любят применять свои текстуры непосредственно в Photoshop, а затем трейсить вживую, но я позволю вам выбирать ваши предпочтения.

texture

Добавление подходящего цвета

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

color

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

Проверка читабельности

Великолепный логотип выглядит великолепно независимо от размера. Он должен иметь интересный визуальный крючок и кернинг. Убедитесь, что ваш логотип читается в считанные секунды и при этом запоминается. Я обычно проверяю логотип на размере визитной карточки (5х9) , чтобы проверить его читаемость.

scale

Получите обратную связь

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

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

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

Создание леттеринг-логотипа — от идеи до воплощения обновлено: Апрель 4, 2016 автором: admin