Как сделать леттеринг в фотошопе
Красивая надпись в стиле Lettering в Photoshop CC
Благодаря умению пользоваться различными инструментами фотошопа, можно буквально творить чудеса с текстом. В этом уроке подробно будет рассмотрено как сделать эффектные надписи в разных стилях.
В этом уроке создадим надпись в стиле Typography Lettering в виде наклейки в Photoshop CC.
В этом стиле используется один или несколько шрифтов, объединенных в единую сбалансированную картинку. Иногда за основу взят готовый текст, а иногда текст рисуется с нуля.
Выглядит такой текст очень модно и стильно. Поэтому приступайте с созданию своего стикера прямо сейчас.
Создание и размещение текста
В стиле «леттеринг» русские слова используются намного реже английских. Почему? Одна из причин это разница в начертании букв, русские буквы ровнее и в верхней части редко выступают за пределы строки.
Поэтому даже при использовании соответствующего шрифта русские слова не будут так красиво выглядеть и нуждаются в дополнительной прорисовке.
Мы рассмотрим самый простой способ. Возьмем за основу готовый шрифт, подходящий для этого.
Напишем три слова «don’t give up» на отдельных слоях, как показано на рисунке ниже:
Теперь надписи нужно так масштабировать и развернуть, чтобы не оставалось больших пустых мест между словами и слова читались в правильной последовательности.
Возможно, отдельные буквы или части букв придется подправить. Для этого переведите их в форму, нажмите правой кнопкой мыши по слою и выберите «Convеrt to Shape».
Затем, с помощью инструмента «Прямое выделение» вы сможете отредактировать форму букв.
Наложение эффектов
Когда форма готова наложите на текст эффекты: градиентная заливка и обводка. Я поставил желто-оранжевый градиент и черную обводку. Вы можете выбрать любые другие цвета, которые вам нравятся.
После этого, на дублирующем слое, лежащем снизу я сделаю голубую обтравку, которая будет немного смещена и создавать эффект тени.
Если между буквами остались дыры, то лучше их закрасить цветом обтравки, иначе это будет выглядеть некрасиво.
Для создания объема букв добавьте внутреннюю тень с режимом наложение «Overlay» (перекрытие). Тогда тень не будет черной, а будет вписываться в общий стиль.
Прорисовка деталей
Но если есть тень, то должен быть и свет. Красивый эффект получится от маленьких бликов на буквах с противоположной от тени стороны.
Нарисовать его можно с помощью инструмента перо «Pen Tool» используя белую заливку и прозрачную обводку.
Последним штрихом будет добавление слегка видимой текстуры под наклейкой. Для этого сделайте маску слоя на текстуре, залейте ее черным цветом и белой, слабой кистью аккуратно покажите часть фона под стикером.
Подробный видео урок
Ниже в подробном видео уроке описано как сделать надпись в фотошопе в стиле «Леттеринг».
Под видео есть ссылка на шрифт и файл используемый в видео:
Как быстро создавать Леттеринг композиции.
Статья для совсем новичков. Кто может совсем никогда не занимался леттерингом или нарисовал парочку композиций.
Суть именно в быстром создании таких композиций. Включил компьютер, посмотрел на просторах интернета крутые иллюстрации с леттерингом, зарядился энергией и бац! А с чего вообще начать-то?
Вообще на создание качественного леттеринга иногда уходят неделя. Но это статья не про качественный леттеринг =) Статья про алгоритм создания композиций.
Леттеринг делался для оформления упаковки подарка. Вместо обёрточной бумаги использовались остатки жёлтых обоев.
1. Была выбрана тема для всех композиций. Это мультик Гравити Фолз.
2. Были выбраны формы рисунков. Это Круг, Треугольник и Прямоугольник. Это довольно важный пункт. Выбрать форму заранее. Это происходит примерно так:
Хочу круглую композицию. Всё, решено. Первый рисунок буду вписывать в круг. И наброски сразу делаются в круге. Это ооочень упрощает задачу.
Потом в мультике есть треугольный персонаж Билл Шифр. Вторую композицию делаю треугольной.
Ну а третья композиция получается прямоугольной, потому что коробка, на которую она будет наноситься прямоугольной формы.
3. Использовать в композиции элементы из мультика (элементы темы, которую вы выбрала). На первом рисунке фраза «Будь любопытной как Диппер». Тут можно нарисовать самого персонажа или элементы которые явно к нему относятся. В мультике это знак Ёлка и дневник с шестипалой ладонью и цифрой 3. Вот этих элементов и достаточно.
Второй рисунок треугольный. В нём зашифрован персонаж Билл Шифр. Но прямо в открытую я его рисовать не хотел. Да и фраза была «Радуйся жизни как Пухля». Пухля это свинка из мультика. А треугольный персонаж любил принимать облик других персонажей и всячески им пакостить. Поэтому в этой композиции Пухля это не Пухля, а Билл. И об этом говорит шляпа на голове. Такую шляпу носил Билл. Ещё особенностью треугольника в том, что вверху невозможно что-либо написать, там мало места. Поэтому верхний угол надо было заполнить чем-нибудь небольшим и треугольным. Для этого идеально подошёл гном из мультика. У него острая шляпа и он весёлый.
Третий рисунок прямоугольный. Символом персонажа Мейбл является Комета. Вот эту падающую звезду я и разместил по центру. А слова разбросал вокруг.
Выше можно проследить мой небольшой мозговой штурм по составлению композиций.
На этом этапе можно просто записывать свои мысли в строчку и помечать важное. Важное это типа: Впишу композиции в простые фигуры, буду использовать символы из мультика.
Далее делаем первые набрости. Наброски должны быть маленькие. Их суть определить примерное расположение элементов. Примерное! Вырисовывать ничего не нужно. Слова пишем обычным своим почерком. Выглядит примерно вот так.
А потом начинаем уже делать полноценные наброски. Размеры подобных иллюстраций А5. Но и для этих набросков лучше всего немного подготовиться. Я создал в Иллюстраторе шаблон с кругом и разлиновкой. Он на фото сверху слева. Подкладывая его под листы можно быстро и ровно рисовать буквы и не вылезать за границы круга.
Шаблон важная вещь. Он экономит очень много времени.
Да и рисовать каждый раз набросок заново тоже не нужно. Нарисовали первый набросок, подложили его под новый чистый лист и перевели понравившиеся элементы на новый набросок. Это тоже дико экономит время.
Выглядит это примерно так.
Финальный набросок переносится на чистый лист контурами. Обводить можно гелиевой ручной, фломастером. Я обвожу пером LAMY Safary. Потом этот рисунок сканируется. Подчищается в фотошопе. А потом я переношу его в Иллюстратор.
К картинке выше я добавил заливку букв в виде полосочек.
Статья получилась довольно длинной.
Описывать так же подробно две другие композиции не буду, но опишу несколько приёмов из них, которые не упоминал выше.
Как рисовать персонажей. Свинку, гномика, Мейбл.
Вырисовывать их тоже не нужно. Эти картинки я подобрал в интернете. Выделил из них чёрный контур в фотошопе. И уже этот контур в программе приделал к иллюстрации.
И после манипуляций в программе финальная картинка выглядит вот так.
С последней композицией примерно всё тоже самое.
Маленькие наброски. Шаблон с разлиновкой. Большой набросок. Переводим набросок в компьютер. Добавляем персонажа их интернета. И корректируем финальную композицию.
А на обёртки подарков я переводил эти рисунки с помощью прозрачного листа оргстекла и лампы, лежащим под ним. Всё хочу приобрести себе световой планшет (лайтбокс), но пока руки не доходят)
Такой алгоритм работы кажется сложным и запутанным. Но на самом деле он очень ускоряет работу.
Сами работы не претендуют на какие-то шедевры. Они были созданы быстро и с целью порадовать именинницу.
В статье не рассказываю про то, как я писал буквы, какие шрифты подбирал и подобное. Это уже тема для другой статьи.
Если понравился материал, ставьте лайки и пишите комментарии =) Всем удачи)
Леттеринг в фотошопе или как создать логотип
Здравствуйте, дорогие читатели моего блога!
В предыдущей публикации я рассказала о том, как создают концепции будущих логотипов. А сегодня мы научимся работать с нарисованным от руки леттеринг логотипом в фотошопе.
Итак, начнем по-порядку:
Рукописный логотип в стиле леттеринг
Я нарисую от руки логотип моего блога на основе разработанной концепции. Для этого, при помощи линейки и простого карандаша создаю разметку на альбомной листе формата А4. Беру простой карандаш твердости 2H чтобы получился едва заметный контур.
Затем рисую штрихи букв. В процессе рисования приходится часто подправлять линии, поэтому под рукой у меня всегда хороший ластик.
Когда штрихи обозначены, перехожу к процессу добавления декоративных элементов. В данном случае я рисую штрихи, имитирующие нажим широкого пера. Когда все готово, контуры букв обвожу простым карандашом. Карандаш у меня твердостью 2B, для яркого выделения. После этого закрашиваю тем же грифелем штрихи с нажимом. Букву «О» между словами «блог» и «дизайне» рисую в виде подковы.
Подправив некоторые детали и получив понравившийся результат, тонким черным маркером аккуратно обвожу контур всех элементов логотипа. Затем закрашиваю некоторые области черным маркером с широкой кистью.
И вот что у меня получилось:
Эскиз мне нравится. Теперь осталось нарисовать его в графическом редакторе.
Создание логотипа в фотошоп
Нажимая Ctrl J, создаю копию слоя «скан» и переименовываю его в «logo». Слой «скан» делаю невидимым, нажав на иконку «глаз перед слоем». Выделяю слой «logo» и удаляю задний план с карандашной разметкой. Для этого на панели инструментов нажимаю на «Волшебная палочка» и щелкаю в любую область заднего фона. Появляется выделение. Чтобы захватить все участки фона, при зажатой клавише Shift щелкаю волшебной палочкой на необходимых участках. Когда все нужные области выделены, нажимаю Del. Уменьшаю прозрачность слоя «logo» до 50%.
Итак передо мной появилось изображение, с которым я дальше буду работать.
Перехожу к не менее ответственному заданию. Прорисую логотип по контуру инструментом «Перо».
Создаю новый слой «Фигура 1». Нажимаю на значок «Перо» или горячую клавишу «P». Ставлю первую опорную точку, затем последующие. В итоге замыкаю контур и нажимаю на значок «Фигура» на панели инструментов в верхнем горизонтальном меню редактора. Замкнутый контур заливаю краской, цвет которой выбираю по своему усмотрению.
Для выравнивания контура, я работаю с «усиками», выходящими лучами из выделенной точки кривой. Подтягивая «усики», контур принимает различные изгибы.
Также при зажатой клавише Ctrl можно уменьшать и увеличивать длину усика опорной точки.
Стоит немного попрактиковаться и получится прекрасный результат.
Создание леттеринг-логотипа — от идеи до воплощения
Что такое леттеринг-логотип?
Логотип в стиле леттеринга — это логотип, который создан в рукописном стиле.
Такой логотип являет собою графическую композицию, рисунок, состоящий из нарисованных символов, и имеющий в своем оформлении дополнительные декоративные элементы.
Как создать леттеринг-логотип?
Логотип — это одна из наиболее важных частей бренда. Именно он полностью отвечает за демонстрацию ценностей бизнеса и коммуникацию с клиентами. Так почему же столько дизайнеров и агентств часто полагаются только на стандартные шрифты для создания имиджа целой компании?
Дизайнер Dina Rodriguez считает, что ручной леттеринг — это основная техника создания оригинального и запоминающегося дизайна логотипа. Если вы выбираете из набора уже существующих шрифтов, ваш логотип может выглядеть обычно, в то время как леттеринг разработан для того, чтобы выделить логотип среды других и сделать его интересным.
Шрифты созданы для разнообразия, их могут приобрести несколько людей с разной целью. Шрифты не создавались для того, чтобы быть логотипами. Они были созданы для поддержки общего тона бренда, как сопровождающее оформление.
Эта статья послужит основой для создания нарисованного вручную логотипа, более значимого и более персонализированного, чем стандартный шрифт. На примере процесса создания логотипа Letter Shoppe, вы пройдете со мной все этапы создания фирменного стиля, используя леттеринг. Сюда войдет все, начиная с понимания психологии шрифта до оцифровки рисунка.
Шаг 1: Раскройте значение бренда
Самое мощное средство, которое есть у графического дизайнера — это типографика. Стиль шрифта, который вы выберете, может сильно влиять на восприятие вашего логотипа. Но сначала нужно понимать значение некоторых типов шрифтов и их способность уникально представить вашу компанию. Это поможет решить, какое оформление подойдет лучше всего при создании леттеринг-логотипа.
Понимание семейства шрифтов
Раскройте символику компании
Кроме простой, красивой картинки, сильный логотип наполнен неким смыслом, как явным, так и скрытым. Чтобы помочь клиентам понять смысл бренда, сосредоточьтесь на вашем сообщении, написав несколько слов, которые иллюстрируют основные преимущества бизнеса. Эти слова могут быть чувства, прилагательные, объекты или периоды времени.
Вот для примера мои десять слов:
1. Художественный 2. Ценный. 3. Смелый 4. Природный 5. Теплый
6. Классический 7. Простой 8. Уверенный 9. Сделанный вручную 10. Приветствующий.
Затем, как веселое упражнение, я хочу, чтобы вы взглянули на ваши любимые слова и проиллюстрировали их смысл через оформление, украшения, и иллюстрации.
Например, я нарисовала «BOLD» (смелый — ред.) высоким шрифтом с штрихами в виде солнечных лучей.
На мой взгляд, это то, что приходит в голову, когда я произношу это слово. Благодаря этому упражнению я знаю, что винтажный стиль Serif идеально подойдет для оформления дополнительного текста в моем дизайне логотипа.
Вдохновение и визуальное исследование
На данный момент мне нравится создавать доску настроения, чтоб я могла представить себе стиль будущего логотипа. Создавая свою доску на сайте Pinterest для Letter Shoppe, я ориентируюсь на винтажный стиль шрифта.
Мне кажется, такой стиль наилучше подойдет для него. Я советую создавать свою собственную доску настроения, которая состоит из по крайней мере, 20 изображений, чтобы помочь формировать свой стиль для бренда.
Подсказка: Будьте осторожны, преследуя популярные тенденции. Как правило, такой дизайн может стать избитым очень быстро, как только популярность этой тенденции стихнет.
Перерыв!
Теперь пришло время сделать 1-дневную передышку, чтобы действительно получить крутую идею. Перерывы позволят вашему мозгу собрать информацию из других источников. У вас появиться больше идей, которые будут в вашем распоряжении при создании эскиза леттеринг-логотипа.
Шаг 2: Экспериментируйте с набросками
Если у вас есть опыт в графическом дизайне, я рекомендую набрасывать свои концепции логотипа простым карандашом на обычной бумаге. Начинайте создавать различные эскизы, не ограничивайте себя. Это ваша возможность экспериментировать и создать неограниченное количество концептов. Посмотрите как делает наброски дизайнер Арон Дреплин, создавая логотип для выдуманной компании.
Я обычно делаю черновики от 10 до 20 миниатюр для полного взгляда на все возможные варианты логотипа.
Подсказка: Хороший способ начать — просто выписывать слова, которые ассоциируется с компанией. Продолжая экспериментировать, вы сделаете свои рисунки более совершенными и детальным, добавляя толщину и украшения
Позвольте себе нарушать правила и отряхнутся от самых жестких форм типографики. Смешайте верхний и нижний регистр букв, соедините ваши знаки, поиграйте с различными размерами и, самое главное, развлекайтесь!
Перерыв!
Теперь время для другого перерыва. Отдохните часок или денек, чтобы вернуться к вашим эскизам со свежими силами.
Пересмотрите ваши наброски и выберите несколько из ваших фаворитов, чтобы экспериментировать дальше.
На этом этапе не бойтесь перерисовывать логотип несколько раз. Даже у самых талантливых леттеринг-художников не получается создать красивый логотип с первой попытки. Потратьте время, чтобы обрисовать вашу надпись и поиграйте с расположением элементов или попробуйте различные стили и детали.
После того, как контур будет завершен, вы можете закрасить работу с помощью тонких и толстых маркеров Sharpie или линеров. Это поможет вам увидеть вес ваших букв, так что вы можете убедиться, что каждая из букв соответствует друг другу.
Подсказка: Вам решать, что более комфортно — идти к компьютеру на этом этапе или совершенствовать свой ручной леттеринг. Но имейте в виду — чем больше работы вы делаете в процессе рисования, тем меньше усилий потребуется, чтобы оцифровать вашу работу.
Шаг 3: Оцифровки окончательной концепции
Следующим этапом будет оцифровка вашего логотипа. Для этого нужны знания программ Photoshop и Illustrator.
Очистка в Photoshop
1. Отсканируйте изображение с разрешением 600 точек на дюйм.
2. Откройте сканированное изображение эскиза в Photoshop.
3. Перейдите в меню Изображение> Настройки> Уровни (Image > Adjustments > Levels) и регулируйте уровни черного и белого, так чтоб вы реально увидели вашу надпись.
4. Нажмите Ctrl-R, чтобы подтянуть направляющие линейки. Потяните вниз некоторые направляющие для вашего эскиза, чтобы убедится, что все буквы находятся на той же оси. Вы хотите разместить свои направляющие на основной, нижней, верхней линии и на уровне буквы t.
Подсказка: буквы C, S, O, заглавная Q и G остаются немного выше и ниже ваших направляющих. Это позволяет вашим буквам оставаться на том же уровне.
5. Не стесняйтесь использовать инструмент Лассо, чтобы исправить любые проблемы выравнивания — Выбрать> Щелкните правой кнопкой мыши > Вырезать ваши буквы (Select > Right Click > Cut).
6. Теперь пришло время для серьезной чистки. Увеличьте изображение, чтобы добавить или удалить что-нибудь еще, что может помочь усовершенствовать ваш рисунок.
Перерыв!
Нажмите кнопку Сохранить. Теперь, отойдите от рисунка, чтобы сделать перерыв и дать вашим глазам полноценно отдохнуть.
7. Примерно через час, вернитесь в Photoshop и переверните ваш рисунок вверх ногами. Видите еще недостатки? Может быть, только некоторые из ваших букв прямые, в то время как другие имеют наклон, или ваши S и O более продолговатые, чем круглые.
8. Поверните логотип в исходное положение, нажмите кнопку Сохранить. Теперь вы готовы к векторизации!
Использование «Живой трассировки»
Если вы хотите получить более естественный вид логотипа, я рекомендую использовать «Живую трассировку», чтоб векторизовать свою работу. Это придаст вашему рисунку более непринужденный вид:
1. Откройте PSD файл логотипа в Illustrator.
2. Выделите свою работу и перейдите к Объект> Живая трассировка> Параметры трассировки (Object> Live Trace > Tracing Options).
После того, как появится диалоговое окно, нажмите Просмотр (Preview) и поиграйте с настройками, пока вы не получите желаемого результата. Я обычно начинаю с настроек черно-белого логотипа. Вот посмотрите на мои настройки для моего логотипа Letter Shoppe.
Может быть, вы увидите, что ваши линии не соединены, или у вас есть дополнительные потертости, которые должны быть отредактированы. Просто внесите правки в psd файл и нажмите кнопку Сохранить. Ваши изменения будут автоматически обновляться в вашем обрисованном рисунке.
3. Если все выглядит хорошо, перейдите в Объект> Преобразовать (Object > Expand), для сведения изображения.
4. Вы можете редактировать свои опорные точки, соответственно, пока ваш логотип не будет выглядеть так, как именно вы хотите. Я обычно использую «Инструмент сглаживания» (Smooth Tool), чтобы сгладить любые неровности. Обратите внимание на изображение до и после обработки.
Создание идеального векторного логотипа
Благодаря удивительной статье AGCS у меня есть совершенно новый подход к очистке векторов, используя 0 и 90 градусов кривые Безье. Я буду использовать букву S в качестве примера, используя этот новый метод:
4. Не забудьте удерживать клавишу Shift при перетаскивании направления векторов, чтобы привязать их по горизонтали и по вертикали.
Это, несомненно, требует некоторой практики, но сохранение направление ваших кривых Безье прямым позволит использовать меньшее количество точек и получить чистый результат. Да, будет время, когда совершенные кривые не будут работать, и это нормально. Более важно, чтоб ваш вектор хорошо выглядел.
Теперь, давайте посмотрим, какая соблазнительная получилась буква S.
Добавление текстуры к вашей надписи
Для шероховатости вы можете добавить тонкие неровные линии на внешней стороне ваших букв, чтобы они казались нарисованными вручную. Чем тоньше линии, тем больше вам придется масштабировать свои художественные работы, прежде чем добавить эффект. Перейти к Эффекты > Искажение & Трансформация> Огрубление (Effects > Distort & Transform > Roughen.).
Можете поиграть с настройками, чтобы получить желаемый результат, и обязательно попробуйте абсолютные значения опций.
После завершения перейдите к Объект> Преобразовать внешние эффекты (Object > Expand Appearance), чтобы зафиксировать изображение.
И в завершение, используйте текстуры! Мне нравится использовать вектор пакет текстур из Seanwes, но не стесняйтесь создавать свои собственные текстуры. Некоторые люди любят применять свои текстуры непосредственно в Photoshop, а затем трейсить вживую, но я позволю вам выбирать ваши предпочтения.
Добавление подходящего цвета
Я всегда оставляю работу с цветом напоследок. Но я как правило, уже представляю общую цветовую палитру, в то время как я создаю скетч.
Хороший способ выбрать цветовую палитру — это основывать свой выбор на тех словах, которые мы придумали в самом начале. Например, некоторыми из моих главных слов являются «художественный» и «хендмей», так что мой план был всегда придерживаться черного либо белого цвета. Я также выбрала поддерживающие цвета, помещая надпись на древесные, коричневые, кремовые цвета.
Подсказка: Не используйте больше трех цветов, если это не абсолютно необходимо! Логотип в 5 цветов может быть великолепным, но как только приходит время его печати, продукция может получится довольно дорогой или он не будет хорош смотреться.
Проверка читабельности
Получите обратную связь
Если вы впервые начали создавать свой дизайн логотипа, важно получить отзывы от коллег и других дизайнеров. Вот тогда пригодяться такие сайы, как Instagram и Dribbble, не говоря уже о том, чтоб просто показать другу, который не дизайнер. Важно узнать мнение других людей, потому что они могут увидеть недостаток или улучшение лучше чем вы. Ведь иногда трудно распознать улучшения или недостатки конструкции, когда вы долго сосредоточены на разработке.
Я знаю, никто не любит, чтобы их работу критиковали, но это необходимое зло в нашей отрасли. Получение конструктивной критики позволит вам улучшить вашу работу. Постарайтесь оставаться открытыми и экспериментировать с изменениями, предложенными другими.
Это может привести к еще лучшим результатам, так как даже небольшое изменение может сыграть важную роль.
Надеюсь, что взгляд изнутри вдохновил вас создать свой собственный леттеринг логотип.
В конце статьи делимся с вами полезным видео создания логотипа леттерингом: