Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Рисуем пушистый текст в Adobe Photoshop

12 февраля 2014 | Опубликовано в Уроки | 7 Комментариев »

Этот урок понравится любителям всяких пушистых штук. Сегодня мы будем рисовать пушистый текст в Adobe Photoshop. Урок довольно прост. Мы будем работать со стилями слоев, кистями и фильтрами. Вы сможете выбрать расцветку для своей надписи и получить почти реалистичный результат. 

 

 

Финальный результат

Striped Fuzzy Text Effect

Исходники

* Шрифт Titan One
Potato Sack от klikekyle.
White Texture паттерн от Dmitry.

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

Шаг 1

Создайте новый документ размером 1000 x 460 px. Установите первым цветом #9193c3 и в качестве фонового цвета #525578. Выберите инструмент Gradient Tool / Градиент, выберите вариант от первого цвета к фоновому (Foreground to Background) и кликните по иконке Radial Gradient/ Радиальный градиент.

Теперь растяните градиент от центра документа к одному из углов.

Striped Fuzzy Text Effect step 1

Поместите текстуру “Potato Sack” поверх слоя фона и смените Blend Mode / Режим наложения на Multiply / Умножение. Теперь масштабируйте слой как вам нравится.

Striped Fuzzy Text Effect step 1

Создайте текст (используйте заглавные буквы) шрифтом “Titan One”. Цвет текста = #d8d8d8, размер (Size) = 250 pt, и параметр Tracking (расстояние между буквами) = 50.

Striped Fuzzy Text Effect step 1

Шаг 2

Кликните дважды по слою с текстом в палитре Layers/Слои, чтобы указать слою следующие Стили Слоев (Layer Style):

Bevel and Emboss / Тиснение (Цвет тени в Shadow Mode = #d8d8d8)

Striped Fuzzy Text Effect step 2

Contour / Контур (Contour : Half Round)

Striped Fuzzy Text Effect step 2

Texture / Текстура (Pattern : White Texture)

Striped Fuzzy Text Effect step 2

Inner Shadow / Внутренняя тень (цвет : #b5b5b5)

Striped Fuzzy Text Effect step 2

Drop Shadow / Тень

Striped Fuzzy Text Effect step 2

Это должно придать тексту текстуру материала и объем.

Striped Fuzzy Text Effect step 2

Шаг 3

Возьмите инструмент Brush / Кисть, откройте палитру Brush / Кисти (Window > Brush / Окно > Кисти). Выберите кисть “Dune Grass”, и укажите ей параметры как на картинке ниже:

Striped Fuzzy Text Effect step 3

Striped Fuzzy Text Effect step 3

Striped Fuzzy Text Effect step 3

Шаг 4

Кликните правой кнопкой мыши по слою с текстом и выберите Create Work Path / Создать рабочий контур. Затем создайте новый слой поверх всего и назовите его “Stroke”. Убедитесь что активен инструмент Brush / Кисть.

Striped Fuzzy Text Effect step 4

Выберите в качестве первого цвета #cdcdcd, в качестве фонового цвета — #f3f3f3. Нажмите клавишу Enter/Return примерно 5 – 7 раз, чтобы применить к контуру выбранную кисть. После того как результат будет вам нравиться, выберите инструмент Direct Selection Tool / Прямое выделение (A), и снова нажмите на Enter/Return, чтобы избавиться от контура.

Striped Fuzzy Text Effect step 4

Удерживая клавишу Ctrl/Cmd кликните по слою Stroke, чтобы вызвать выделение по контуру.

Striped Fuzzy Text Effect step 4

Создайте новый слой и назовите его “Texture”. Укажите в качестве первого цвета #d8d8d8, а в качестве фонового #858585. Затем зайдите в Filter > Render > Clouds / Фильтр > Рендеринг > Облака.  Затем нажмите Ctrl/Cmd + D, чтобы снять выделение.

Striped Fuzzy Text Effect step 4

Зайдите в Filter > Noise > Add Noise / Фильтр > Шум > Добавить шум. Укажите параметры как на картинке ниже.

Striped Fuzzy Text Effect step 4

Смените Режим Наложения (Blend Mode) для слоя “Texture” на Soft Light / Мягкий свет. Это добавит  тексту пушистости.

Striped Fuzzy Text Effect step 4

Шаг 5

Снова создайте выделение по контуру текста. Создайте новый слой и назовите его “Stripes”. Сразу смените режим наложения слоя на Linear Burn / Линейный Затемнитель. Это поможет сразу видеть результат и правильно подобрать цвета.

Striped Fuzzy Text Effect step 5

Укажите первым цветом любой, в который вы хотите окрасить полоски на тексте (в примере указан #e890b9). Главное чтобы цвет не был очень темным, потому что в этом режиме наложения цвета становятся темнее.

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

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

Повторите процесс, чтобы нарисовать остальные полосы.

Striped Fuzzy Text Effect step 5

Возьмите инструмент Pen / Перо и выберите вариант Path / Контур в панели настроек. Нам нужно создать прямые линии по границам полос.

Для этого кликните в начале полосы, удерживая Shift кликните в конце полосы.

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

Striped Fuzzy Text Effect step 5

Когда вы закончите, можете подредактировать линии при помощи инструмента Path Selection / Выделение контура и клавиш вверх/вниз на клавиатуре.

Striped Fuzzy Text Effect step 5

Шаг 6

Выберите инструмент Eraser / Ластик, откройте палитру Brush / Кисть и выберите растушеванную кисть размером в 5 px. Затем укажите параметры как на картинках ниже:

Striped Fuzzy Text Effect step 6

Striped Fuzzy Text Effect step 6

Нажмите один раз клавишу Enter/Return, чтобы примените Eraser / Ластик к контуру. Это поможет сделать финальный вариант реалистичнее.

Striped Fuzzy Text Effect step 6

Шаг 7

Возьмите инструмент Brush / Кисть, в палитре Brush / Кисть выберите кисть “Grass” и укажите ей параметры как показано ниже:

Striped Fuzzy Text Effect step 7

Striped Fuzzy Text Effect step 7

Создайте новый слой, назовите его “Stripes Stroke”. Убедитесь что первый цвет совпадает с цветом полос, нажмите клавишу Enter/Return 3 – 5 раз, чтобы «распушить» полосы.

Striped Fuzzy Text Effect step 7

Теперь выберите инструмент Direct Selection / Прямое выделение (A) и нажмите Enter/Return, чтобы избавиться от контура. Также в меню выберите Select > Deselect / Выделение > Снять выделение. Затем Filter > Sharpen > Sharpen / Фильтр > Резкость > Резкость, чтобы сделать края более четкими.

Теперь смените режим наложение слоя “Stripes” на Normal / Нормальный.

Striped Fuzzy Text Effect step 7

Выделите слои “Stripes” и “Stripes Stroke”, выберите в меню Layer > Merge Layers / Слои > Объединить слои, затем вновь смените режим наложения получившегося слоя на Linear Burn / Линейный Затемнитель.

Striped Fuzzy Text Effect step 7

Укажите первым цветом цвет полос, а в качестве фонового — белый. В меню выберите Filter > Noise > Add Noise / Фильтр > Шум > Добавить шум. Укажите параметры как на картинке ниже.

Striped Fuzzy Text Effect step 7

Шаг 8

Перетащите слой “Stroke” поверх всех остальных.

Striped Fuzzy Text Effect step 8

Дублируйте слои текста и “Stroke”, затем кликните по слою правой кнопкой и выберите Clear Layer Style / Очистить стили слоя.

Striped Fuzzy Text Effect step 8

Активируйте копии слоев текста и “Stroke”, объедините их в один слой, переименуйте получившийся слой в “Shadow”. Перетащите слой под оригинальный слой текста.

Striped Fuzzy Text Effect step 8

Кликните дважды по слою “Shadow”, чтобы примените к нему стиль слоя Drop Shadow / Тень со следующими параметрами:

Striped Fuzzy Text Effect step 8

Это придаст тексту объем.

Striped Fuzzy Text Effect step 8

Шаг 9

Возьмите инструмент Brush / Кисть, выберите кисть “Grass”, укажите ей параметры как показано ниже:

Striped Fuzzy Text Effect step 9

Striped Fuzzy Text Effect step 9

Striped Fuzzy Text Effect step 9

Striped Fuzzy Text Effect step 9

Убедитесь что первым цветом указан цвет, совпадающий с цветом полос, а фоновый цвет белый. Создайте новый слой под слоем “Shadow” и назовите его “Scatter”.

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

Striped Fuzzy Text Effect step 9

Финальный результат

Наша надпись готова!

Автор урока textuts

Перевод — Дежурка

Смотрите также:




Комментарии

  1. Shershov
    Thumb up Thumb down 0

    Отличный результат!

  2. Иван
    Thumb up Thumb down 0

    Отличный урок! Спасибо! Давайте еще

  3. Олег
    Thumb up Thumb down +1

    Благодарю за урок! Очень полезный! *THUMBS UP*

    Мой результат:r-CvlwKMH0A.jpg

  4. Dashka
    Thumb up Thumb down -2

    CLTv-W8sJUM.jpg