Эффект бумажного текста с загнутыми краями

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

Окончательный результат

Окончательный результат

Техническая информация:

  • Программное обеспечение: Adobe Photoshop;
  • Версия: CS5 Extended;
  • Время на выполнение:1:30 – 2:45.

Ресурсы:

  • Текстура бумаги;
  • Текстура шероховатой бумаги.

Шаг 1

Создайте новый документ с размерами 1024 на 768 пикселей. Заполните фон цветом #817d57, затем установите цвета переднего плана и фона Белый и Черный. Создайте новый слой и назовите его Radial Gradient. Выберите для заливки градиент от цвета переднего плана к прозрачному, кликните по иконке «Радиальный градиент» и откройте окно «Инвертировать» из панели опций.

Переместите центр градиента фона в один из углов:

центр градиента фона

Измените режим наложения слоя Radial Gradient на «Мягкое свечение»:

Мягкое свечение

Шаг 2

Поместите текстуру бумаги поверх фонового слоя и переименуйте его в Background-1.

Перейдите в Изображение — Коррекция — Цветовой тон/Насыщенность, измените значения «Насыщенности» на -100, «Яркости» на -20:

Background

Измените режим смешивания слоя Background-1 на «Умножение» и установите непрозрачность 50%:

установите непрозрачность

Поместите текстуру шероховатой бумаги (Grungy paper) поверх всех слоев, переименуйте этот слой в Background-2 и измените его режим смешивания на «Умножение».

Умножение

Шаг 3

Создать новый документ с размерами 300 на 300 пикселей и залейте фон цветом #f7f4fb.

Установите цвет переднего плана на #d0d5de. Выберите мягкую круглую кисть и в панели «Кисти» (Окно — Кисти) измените ее настройки, как показано на рисунке ниже:

  • Форма отпечатка кисти
Форма отпечатка кисти
  • Динамика формы
Динамика формы

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

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

нанесения каждой линии

После того, как вы закончили рисовать линии, перейдите в Редактирование — Определить узор и введите имя узора:

введите имя узора

Шаг 4

Вернитесь к исходному документу, создайте текст (каждую букву на отдельном слое), используя шрифт Arial Black, размер шрифта 286 пунктов и цвет #eceac9.

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

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

оригинальную группу букв невидимой

Шаг 5

Выберите слой первой буквы (после того как вы продублировали его и поместили в отдельную группу) — мы будем называть его оригинальный слой, затем перейдите в Редактирование – Трансформация — Вращение и поверните его так, как вам нужно, а затем нажмите Enter / Return чтобы сохранить изменения.

Скопируйте слой буквы еще раз и сделайте его невидимым. Щелкните правой кнопкой мыши по дублированному слою и выберите «Тип растеризации»:

Тип растеризации

Шаг 6

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

Шаг 6

Шаг 7

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

слой растеризованных букв

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

удалите все лишние детали

Шаг 8

Дважды щелкните на слое растеризованных букв и примените стиль «Тень», используя цвет #7b7b7b:

Шаг 8

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

  • Тень:
  • Цвет: #7b7b7b;
  • Размер: 8.
следующие стили слоя

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

Теперь просто нажмите и перетащите тень, чтобы поместить ее там, где должен быть загнутый край:

должен быть загнутый край
  • Внутренняя тень:
  • Цвет: #dbdacd;
  • Размер: 18.
Внутренняя тень

Перемещение тени под загнутый край.

Шаг 9

Создайте новый слой между слоями буквы и загнутого края, назовите его Lines – letter. Используйте инструмент «Овальная область выделения», чтобы создать выделение вокруг буквы.

Выберите инструмент «Заливка», в панели «Опции» установите узор заливки. Затем выберите узор линий, чтобы заполнить круг, и измените режим смешивания слоя узора на «Яркость».

Мы создали такое выделение, потому что выделение области больше, чем буквы. Поэтому при вращении буквы у нас не будет оставаться незаполненных узором областей. Перейдите в Редактирование – Трансформация — Вращение, чтобы повернуть линии под тем углом, под каким повернута буква, а затем нажмите Enter / Return:

Шаг 9

Шаг 10

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

Перейдите в Выделение — Инвертировать выделение, затем нажмите Delete, чтобы убрать лишние детали:

ШАГ 10

Шаг 11

Создайте новый слой поверх слоя загнутого края, переименуйте его в Lines – fold. Снова создайте выделение и залейте его узором.

Изменение режим смешивания слоя Lines – fold на «Разделить» и поверните узор:

Шаг 11

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

удалите лишние детали

Вот, что вы должны получить:

вы должны получить

Шаг 12

Повторите те же действия для остальных букв.

После того, как закончите, вы должны будете нажать и удерживать клавишу Shift. Затем через Ctrl / Cmd кликните по иконке слоя каждой буквы, чтобы создать выделение конечного текста.

В нижней части панели «Слои» нажмите кнопку «Новый корректирующий слой», выберите «Уровни». Убедитесь, что размещаете корректирующий слой поверх всех остальных слоев, а затем задайте значение тени 75. Таким образом, вы затемните окончательное изображение:

затемните окончательное изображение

Наконец, поместите слой Background-2 за корректирующим слоем:

Background-2

Вот, что у нас получилось!

Вот, что у нас получилось!

Перевод статьи «Folded Text Effect» был подготовлен дружной командой проекта Сайтостроение от А до Я.