Главная Регистрация Вход
Приветствую Вас Гость!


Главная » 2013 » Март » 12 » Создание изящного текста в мультяшном стиле \ Create Vibrant Typography in a Rough Cartoon Style
20:13
Создание изящного текста в мультяшном стиле \ Create Vibrant Typography in a Rough Cartoon Style


Очередной урок, в котором опять раскажем про работу с текстом в фотошопе.


Шаг 1

Итак, начнем с создания нового документа – размером А4, разрешение 300px/inch.

Создание изящного текста в мультяшном стиле

При помощи инструмента Horizontal Type Tool (T) - Горизонтальный текст напишите желаемый текст шрифтом Trajan Pro. Автор использует фразу "No More Turning Back". Помните, что чем больше букв/слов в вашем тексте, тем больше вам придется потратить времени на его оформление. На рисунках ниже показаны размеры букв, которые использовал автор

Создание изящного текста в мультяшном стиле

Создание изящного текста в мультяшном стиле

Создание изящного текста в мультяшном стиле


Шаг 2

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

Создание изящного текста в мультяшном стиле

Далее создайте новый слой (Ctrl+Shift+N) и напишите следующие слова (в уроке это слова "No More"). Разместите их как показано на рисунке. Обратите внимание, что все последующие слова не должны выходить за рамки, определенные направляющими.
Создайте еще один новый слой (Ctrl+Shift+N), напишите на нем еще одно слово (в уроке это слово "Back") и поместите его под первым (основным) словом, в уроке это слово - "Turning". Растяните нижнее слово от первой направляющей до последней:

Создание изящного текста в мультяшном стиле


Шаг 3

Итак, с текстом мы закончили. Скачайте вот эти векторные формы и установите их в Photoshop. Выберите инструмент Custom Shape Tool (Произвольная фигура) и в настройках отображения векторных форм выберите большие иконки (Large Thumbnail), чтобы только что установленные векторные формы отображались в виде больших иконок. Таким образом, вам будет проще в них ориентироваться и подбирать нужные завитушки smile.gif

Создание изящного текста в мультяшном стиле

На рисунке ниже показано, какие элементы использовал автор для оформления буквы "N":

Создание изящного текста в мультяшном стиле


Шаг 4

Первым делом вам нужно определить, сколько в вашем тексте повторяющихся букв. Сперва автор решил добавить векторные завитушки букве N, которая повторяется в тексте урока 3 раза. Не обязательно оформлять каждую букву в индивидуальном порядке, если у вас имеются повторяющиеся буквы, их можно просто скопировать. Помните, на данном этапе мы работаем в черно-белом режиме, т.е. фон – белый, буквы – черные.
Приступим к добавлению векторных форм при помощи инструмента Custom Shape Tool (Произвольная фигура). Добавляйте элементы как показано на рисунках ниже, трансформируя формы (в режиме трансформации – Ctrl+T) и удаляя ненужные элементы:

Создание изящного текста в мультяшном стиле

Создание изящного текста в мультяшном стиле

Создание изящного текста в мультяшном стиле

Создание изящного текста в мультяшном стиле


Шаг 5

На данном этапе важна группировка элементов. Размещение элементов, относящийся к той или иной букве поможет вам сэкономить время. Как видите, автор продублировал элементы для буквы N несколько раз и изменил их размер для букв N в слове Turning:

Создание изящного текста в мультяшном стиле

Повторите Шаги 4-5 для оставшихся букв. Вы можете ускорить процесс добавления завитушек, копируя завитушки из одинаковых областей (например, завитушки с v-образного участка буквы N можно отразить по горизонтали и добавить к v-образному участку буквы К). Кроме того, вы можете сэкономить время, копируя уже готовые сочетания завитушек и трансформируя их в соответсвии с формой букв.
На рисунках показано, как автор использовал 10 повторяющихся элементов, изменяя их расположение друг относительно друга, визуально, повторение этих жлементов не заметно:

Создание изящного текста в мультяшном стиле

Создание изящного текста в мультяшном стиле

Создание изящного текста в мультяшном стиле


Шаг 6

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

Создание изящного текста в мультяшном стиле

Создание изящного текста в мультяшном стиле

Создание изящного текста в мультяшном стиле


Шаг 7

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

Создание изящного текста в мультяшном стиле

Создание изящного текста в мультяшном стиле

Шаг 8

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

Создание изящного текста в мультяшном стиле

Создание изящного текста в мультяшном стиле

Создание изящного текста в мультяшном стиле


Шаг 9

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

Создание изящного текста в мультяшном стиле

Создание изящного текста в мультяшном стиле

Создание изящного текста в мультяшном стиле


Шаг 10

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

Создание изящного текста в мультяшном стиле

Создание изящного текста в мультяшном стиле

Чтобы создать новый элемент – прозрачную капельку-завитушку в качестве слоя-формы (Shape Layer), перейдите на панель слоев и уменьшите параметр Fill (Заливка) слоя с завитушкой до 0% . Дважды кликните по этому слою на панели слоев, чтобы открыть окно настроек стилей слоя (Layer style) и перейдите в настройки параметра Stroke (Обводка). Установите нужное значение толщины обводки (Size), в данном случае автор предлагает использовать значение 2 или 3.

Создание изящного текста в мультяшном стиле


Шаг 11

Возьмите инструмент Custom Shape Tool (Произвольная фигура) и создайте капельку, как на рисунке ниже.
Далее создайте новый слой (Ctrl+Shift+N), измените цвет переднего плана на белый и возьмите инструмент Перо (Pen Tool). Убедитесь, что инструмент Перо находится в режиме "Shape Layer" (Слой-форма). Создайте форму-блик, как показано на картинке ниже в левой нижней части капельки:

Создание изящного текста в мультяшном стиле

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


Создание изящного текста в мультяшном стиле


Шаг 12

Итак, ваша работа уже смотрится неплохо, неправда ли? smile.gif Если это тот результат, которого вы хотели достичь, то вы можете остановиться на этом этапе. Но давайте все же не будем останавливаться на достигнутом и добавим цвета в нашу работу.
Начнем с объединения всем слоев с завитушками и буквами (выделите их на панели слоев и нажмите Ctrl+E, но будьте внимательны – не объединяйте их с фоновым слоем (Background)!). Назовите полученный слой "Text". Далее создайте новый слой, загрузите выделение слоя "Text", кликнув по его иконке с зажатой клавишей Ctrl и залейте выделение цветом #8d5e9a на только что созданном слое. Назовите этот слой "Purple text". У вас должно получиться следующее:

Создание изящного текста в мультяшном стиле

Отключите отображение слоя "Text", кликнув по иконке глаза слева от иконки слоя на панели слоев. Возьмите инструмент Burn Tool (Затемнитель) в режиме "Midtones" (Средние тона) и сделайте им несколько отпечатков на слое "Purple text" – пусть текст выглядит немного «грязноватым»

Создание изящного текста в мультяшном стиле

Теперь возьмите инструмент Dodge Tool (Осветлитель) в режиме "Midtones" (Средние тона) - также сделайте несколько отпечатков этим инструментом на слое "Purple text" (вы также можете попробовать сделать несколько отпечатков и в режиме "Highlights" (Светлые тона), но будьте осторожны, в этом режиме работу легко испортить)

Создание изящного текста в мультяшном стиле

Ну и наконец, кликните дважды по слою "Purple text", чтобы добавить ему следующий стиль слоя:

Создание изящного текста в мультяшном стиле

Создание изящного текста в мультяшном стиле


Шаг 13

Повторим предыдущий шаг, но теперь мы будем работать с зеленым цветом. Загрузите выделение слоя "Text", создайте новый слой и залейте выделение цветом #b7ce0f. Назовите этот слой "Green text" и поместите его над слоем "Purple text". Также, как вы делелаи в предыдущем шаге, пройдитесь по этому слою инструментами Burn и Dodge:

Создание изящного текста в мультяшном стиле

Добавьте этому слою следующие стили слоя:

Создание изящного текста в мультяшном стиле

Создание изящного текста в мультяшном стиле

Создание изящного текста в мультяшном стиле

Создание изящного текста в мультяшном стиле


Шаг 14

После того, как вы закончите работу с фиолетовым и зеленым слоем, приблизьте часть текста. Возьмите инструмент Кисть (Brush Tool), все навтройки кисти = 100%. Создайте маску для слоя "Green text". Измените цвет кисти на черный, перейдите на маску слоя и начинайте рисовать выбранной кистью по маске слоя в тех местах, где вы хотите сделать подтеки. Таким образом, как и было задумано, мы получим мультяшный стиль – яркие цвета и четкая обводка контура.

Создание изящного текста в мультяшном стиле

Создание изящного текста в мультяшном стиле

Создание изящного текста в мультяшном стиле

Создание изящного текста в мультяшном стиле

Создание изящного текста в мультяшном стиле


Шаг 15

Создайте новый слой, расположите его под слоями "green text" и "purple text" на панели слоев и назовите его "Fills". Кликните правой кнопкой мыши по слою "purple text" на панели слоев и выберите Copy Layer Style (Скопировать стиль слоя). Затем нажмите правой кнопкой мыши на слое "Fills" и выберите Paste Layer Style (Вставить стиль слоя). Кликните дважды по слою "Fills", чтобы открыть окно настроек стилей слоя. Как видите, стиль слоя Bevel and Emboss (Тиснение) у вас уже добавлен, осталось добавить еще один стиль слоя – Stroke (Обводка), настройки следующие: Size: 2, Position: Outside, цвет - черный

Далее возьмите инструмент Кисть - Brush Tool (все параметры кисти = 100%, кисть жесткая), цвет кисти - #8d5e9a. Перейдите на слой "Fills" и выбранной кистью начинайте рисовать «пятна краски» на буквах, над подтеками. На картинках показано, как нужно рисовать:
Поскольку вы рисуете на слое "Fills", стили слоя будут автоматически применяться к нарисованным вами пятнам краски. А это означает, что вы легко можете дорисовать подтеки, поскольку цвет, обводка и объем будет автоматически добавлен к нарисованнм элементам.

Создание изящного текста в мультяшном стиле

Создание изящного текста в мультяшном стиле


Шаг 16

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

Создание изящного текста в мультяшном стиле

Создание изящного текста в мультяшном стиле

Создание изящного текста в мультяшном стиле


Шаг 17

Теперь давайте создадим кляксу и поместим ее под одной из букв. Измените цвет переднего плана на #8d5e9a , возьмите инструмент Custom Shape Tool (Произвольная фигура) и выберите форму кляксы, обратите внимание, что инструмент Custom Shape Tool должен находится в режиме "Shape Layer" (слой-форма). Создайте кляксу и перейдите в режим трансформации (Ctrl+T). Далее — правый клик по изображению > из появившегося меню выберите Distort (Искажение), чтобы изменить перспективу кляксы, как показано на рисунке. Назовите этот слой "Splatter"
Загрузите выделение слоя с кляксой, кликнув по иконке слоя с зажатой клавишей Ctrl. Создайте новый слой над слоем "Splatter", кликните по нему правой кнопкой мыши и выберите "Stroke Selection": толщина обводки (Width) = 2-3 px, цвет = светло-фиолетовый, Location = Inside. Далее, находясь на слое с обводкой, возьмите инструмент Move Tool (V) и нажмите 2-3 раза стрелку вверх на клавиатуре, чтобы сместить обводку вверх на 2-3 рх. Затем выберите Layer > Layer Mask > Hide All (Слой > Слой-маска > Скрыть все), чтобы полностью скрыть отображение обводки. Далее возьмите Кисть - Brush Tool (Hardness = 0%, Flow = 5%, цвет — белый) и пройдитесь этой кистью по маске слоя с обводкой, в местах, указанных на рисунке:

Создание изящного текста в мультяшном стиле

Создание изящного текста в мультяшном стиле

Создание изящного текста в мультяшном стиле


Шаг 18

Поскольку у вас все еще выбрана Кисть с настройками из предыдущего шага, создайте новый слой над слоем "Splatter" и выберите темно-фиолетовый цвет. Нарисуйте тень под буквой  "A", как показано на рисунке:

Создание изящного текста в мультяшном стиле

После того, как закончите рисовать тень, выделите на панели слоев следующие слои: "Fills"+"Purple text"+"Green text" > правый клик на панели слоев > Duplicate layers (Продублировать слои). Выделите полученные копии слоев и слейте их в 1 слой (Ctrl+E), назовите полученный слой "Reflection". Находясь на слое "Reflection", нажмите Ctrl+T > правый клик по изображению > Flip Horizontal (Отразить по горизонтали). Пометите этот слой под оригинальным слоем с текстом, чтобы этот слой выглядел как отражение. Далее выберите Layer > Layer Mask > Hide All (Слой > Слой-маска > Скрыть все), чтобы скрыть отображение слоя "Reflection". Загрузите выделение слоя "Splatter" (Ctrl+клик по иконке слоя на панели слоев) и перейдите на маску слоя "Reflection". Возьмите инструмент Кисть — Brush tool с мягкими краями белого цвета и пройдитесь по маске слоя "Reflection", чтобы «отражение» стало слегка видимым, как на рисунке:

Создание изящного текста в мультяшном стиле

Шаг 19

Теперь давайте поработаем над фоном. Перейдите на панель слоев и создайте новый слой над фоновым слоем («background»), залейте этот слой светло-серым цветом #bebdbd. Добавьте этому слою маску, возьмите кисть с мягкими краями большого диаметра и небольшим значением Непрозрачности (Opacity) и скройте под маской верхний левый угол серого фона, как показано на рисунке:

Создание изящного текста в мультяшном стиле

Далее добавьте новый корректирующий слой, выбрав Layer > New Adjustment Layer > Curves (Слой > Новый корректирующий слой > Кривые) — он должен располагаться над слоем с серым фоном. Установите для этого слоя следующие настройки:

RGB - Input: 163 Output: 202

Создание изящного текста в мультяшном стиле

Red - Input: 191 Output: 196
Green - Input: 189 Output: 199
Blue - Input: 183 Output: 208

Создание изящного текста в мультяшном стиле

Ну и наконец, возьмите кисть с мягкими краями (Flow 5% / Hardness 0%) белого цвета и создайте новый слой над корректирующим слоем "Curves". Начинайте рисовать выбранной кистью с середины холста, чтобы у вас получилось что-то вроде радиального градиента. В центре диаметр кисти должен быть не очень большим, а по мере удаления от центра, он должен увеличиватся. Выделите все слои, относящиеся к фону (кроме основного белого фотового слоя «Background»), и слейте их в 1 слой (Ctrl+E). Назовите полученный слой "Background texture".

Создание изящного текста в мультяшном стиле


Шаг 20

Далее давайте поместим в внашу работу акварельную текстуру, ссылка на которую давалась в начале урока. Помните, что если вы будете использовать аналогичную текстуру, то она должна практически полностью перекрывать ваш холст, как и текстура, которую использует автор. Итак, поместите текстуру в вашу работу и расположите ее над слоем "Background texture". Обесцветьте текстуру, нажав Ctrl+Shift+U и измените ее режим смешивания (Blending Mode) на Overlay (Перекрытие). У вас должно получиться следующее:

Создание изящного текста в мультяшном стиле

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

Создание изящного текста в мультяшном стиле


Шаг 21

Вернемся к слоям с текстом. Выделите и слейте в один слои "Fills"+"Purple text"+"Green text" (также можете объединить их и со слоем "Splatter" – но это не имеет особого значения). Но перед тем, как объединить эти слои, на всякий случай сделайте копии этих слоев и отключите их отображение. После того, как объедините слои, назовите полученный слой "Тext" и выберите Layer > Adjustments > Brightness and Contrast (Слой > Коррекция > Яркость/Контраст). Установите настройки, показанные на рисунке, чтобы немного затемнить изображение:

Создание изящного текста в мультяшном стиле

Далее загрузите выделение слоя "Тext" (Ctrl+клик по иконке слоя на панели слоев) и создайте новый слой над слоем "Тext". Выберите Select > Modify > Feather (Выделение > Модификация > Растушевка) и установите значение растушевки = 3-4px:

Создание изящного текста в мультяшном стиле

Перейдите на только что созданный слой и залейте выделение белым цветом. Назовите этот слой "Glow".

Создание изящного текста в мультяшном стиле


Шаг 22

Теперь будьте внимательны: нажмите Ctrl+D, чтобы сбросить выделение:

Создание изящного текста в мультяшном стиле

Затем загрузите выделение слоя "Тext" еще раз:

Создание изящного текста в мультяшном стиле

Перейдите на слой "Glow" и нажмите клавишу Delete на клавиатуре — у вас должно получится следующее:

Создание изящного текста в мультяшном стиле

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


Шаг 23

Добавим несколько корректирующих слоев, чтобы завершить работу над текстом. Эти слои следует располагать на самом верху панели слоев, в следующем порядке:
1. Корректирующий слой «Black and White», режим смешивания - Soft Light (Мягкий свет)

Создание изящного текста в мультяшном стиле

2. Корректирующий слой "Gradient Map" (Карта градиента), тип градиента - "Violet, Orange", режим смешивания этого слоя - Soft Light (Мягкий свет), Непрозрачность (Opacity) = 20%

Создание изящного текста в мультяшном стиле

3. Корректирующий слой "Curves" (Кривые), значения следующие:

RGB - Input: 193 Output: 184
Red - Input: - Output: -
Green - Input: 183 Output: 181
Blue - Input: 182 Output: 189

Создание изящного текста в мультяшном стиле

4. Корректирующий слой "Color Balance" (Цветовой баланс) - придаст вашей работе приятный теплый оттенок:

Создание изящного текста в мультяшном стиле

Создание изящного текста в мультяшном стиле


Заключение

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

Создание изящного текста в мультяшном стиле



Автор: Wojciech Pijecki
Перевод: Mangorielle


***


[02.04.2019][DesiGn bLOg]
Как узнать - ты дизайнер или нет? (0)
[02.04.2019][Lessons PHOTOSHOP]
Создаём сырный текст в Adobe Photoshop (0)
[09.12.2015][Lessons PHOTOSHOP]
Рисуем анимацию в Photoshop и After Effects (2015) (0)
[13.02.2015][Plugins Photoshop]
AKVIS AirBrush 2.5.300.11214 (x86/x64) (0)
[03.12.2014][Lessons PHOTOSHOP]
Панорамная Фаст-моушен съемка своими руками (0)
[22.10.2015][Lessons PHOTOSHOP]
Мастер-класс photoshop Oil Retouch (0)
[22.10.2015][Lessons PHOTOSHOP]
Видеокурс photoshop Beauty (0)
[12.02.2015][video futage]
Awards Pack II - Project for After Effects (Videohive) (0)
[18.11.2015][Brushes Photoshop]
Rons Deviney Cyborg Circuitry 75 Brushes (0)
[19.11.2015][Lessons PHOTOSHOP]
Ретушь и цветокоррекция от Гавра (2015) (0)
[12.02.2015][DesiGN SofT]
The Logo Creator 6.6 Final (0)
[12.02.2015][video futage]
Broadcast Shapes Package - Project for After Effects (Videohive) (0)
[06.12.2015][Lessons PHOTOSHOP]
Видеокурс photoshop Womans Retouch (2015) (0)
[12.02.2015][DesiGN SofT]
HyperSnap 7.29.02 + Portable (0)
[06.12.2015][Lessons PHOTOSHOP]
Видеокурс Предметная съемка 2.0 (2015) (0)
[12.02.2015][vectOR KLipardy]
Цветные абстрактные фоны в векторе 9 (0)
[12.02.2015][DesiGN SofT]
GraphiSoft ArchiCAD 18 Build 4020 (x64) + Add-Ons (0)
[12.02.2015][rastER KLipardy]
Фото младенцев \ Newborns, 25 x JPG (0)
[13.02.2015][video futage]
I love You - Project for After Effects (Videohive) (0)
[12.02.2015][3D MAX modeling]
HDCarsCollection.Volume.02 (0)
 

Прикрепления:
Категория: Lessons PHOTOSHOP | Просмотров: 2615 | Добавил: kir | Теги: уроки с текстом, Текст в фотошопе
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]


Поиск







Статистика


Онлайн всего: 1
Гостей: 1
Пользователей: 0
Яндекс цитирования
Rambler's Top100




[31.05.2010][Lessons PHOTOSHOP]
Создание кистей для рисования волос, меха, бород, комп.графика (7)
[11.06.2010][Lessons PHOTOSHOP]
Трехмерная надпись (8)
[17.06.2010][Lessons PHOTOSHOP]
Текст охваченный огнём, Stunning Text on Wild Fire Effect (6)
[03.12.2015][DesiGN SofT]
Sentaurus TCAD 2012 SP2 G-2012.06 SP2 на VMWare (1)
[29.05.2010][Lessons PHOTOSHOP]
Ночной город, спецэффект (2)
[13.02.2015][video futage]
VideoHive - Futuristic Logo Reveal 8351362 (0)
[12.02.2015][video futage]
Dark Circles Logo Reveal - Project for After Effects (Videohive) (0)
[03.12.2014][Lessons PHOTOSHOP]
Видеоуроки фотошоп Композиция Шубека (0)
[30.12.2012][DesiGn bLOg]
Маленькой ёлочке холодно зимой! (0)
[24.01.2013][vectOR KLipardy]
Black Vintage Cards Vector 2 (0)
[01.09.2013][vectOR KLipardy]
Stock: Website Template (0)
[29.05.2010][Lessons PHOTOSHOP]
судорга (абстракционная фантазия) (4)
[13.12.2015][Lessons PHOTOSHOP]
Вырезание объемных предметов в фотошоп (2015) (1)
[29.05.2010][rastER KLipardy]
Stock Photo: Drops, Splashes (1)
[29.05.2010][Lessons PHOTOSHOP]
Металлические трубки и провода (2)
[10.09.2011][Veb DeSiGn]
Template Monster – 11925 – Flash Template (0)
[30.12.2012][DesiGn bLOg]
Кофейные фантазии by Tomoko Shintani (0)
[09.11.2010][Styles Photoshop]
Более 150-ти стилей WEB 2.0 (1)



Пятница
26.02.2021
02:01


Copyright artpost and semantic product zanchi 2010-2011 © 2021