Выполняю, подождите...
 
 
Библиотека

Объёмный текст с помощью света и тени (Photoshop)

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

Источники света

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

Шаг 1
Давайте начнём наши действия с создания линейного градиента от тёмного серого к более тёмному серому. Заметьте, что когда свет исходит справа сверху, то там должны быть более светлая часть документа.

Шаг 2
Теперь мы пишем какой-либо тест, я использовал узкий с твёрдыми краями шрифт Agency FG. Сделайте его светло-серым, #c2c8d4 - чтобы быть точнее.

Шаг 3
Ctrl + клик по слою с текстом и создаём новый слой поверх этого. На новом слое, где выделение будет ещё активно, нарисуйте линейный градиент #495a79 к прозрачному от нижнего правого края к левому верхнему. Короче говоря, мы затемняем правю нижнюю часть.

Шаг 4
Установите основной цвет на чёрный(или нажмите D для установки настроек по умолчанию).
Опять Ctrl + клик по слою с текстом, создаём новый слой под текстом. Нажмите стрелку вниз и вправо на клавиатуре по одному разу. Нажмите ALT-BACKSPACE для заливки чёрным. Один раз вниз и вправо, залейте чёрным. Каждый раз мы перемещаем на 1 пиксель вправо и вниз. Повторите эту процедуру 30 раз(поэтому так важно использование ALT-BACKSPACE, оно сэкономит вам время).
Заметьте, что вы двигаете выделение, а не заполненный участок, когда активировано Marquue Tool. Если же активировано Move Tool, то вы будете перемещать выделение вместе с содержимым, и никакого эффекта б не было.

Шаг 5
Вот то, что у вас должно быть на данном этапе. Снимите выделение и убедитесь, что вы находитесь на слое с тенью. Выполните Filter > Blur > Motion Blur с настройками: -45 degrees, distance of 30px.

Шаг 6
Установите ваш слой с тенью на Multiply и 40% Opacity. Зажмите SHIFT и нажмите стрелку вниз, потом вправо. Это переместит объект на 10 пикселей вправо и вниз(зажатый Shift делает перемещение на 10 пикселей, вместо 1). Теперь с левого верха у объекта могут быть размытые края. Если дело обстоит так, то берите ластик с мягкими краями и стирайте то, что не должно быть затенено (помните диаграмму вначале).

Шаг 7
Дублируйте слой с тенью, и зажав Shift сдвиньте вправо и вниз. Примените фильтр Motion Blur с дистанцией 50. Установите слой на Multiply и 20% opacity. Это придаст нашим теням больший реализм.

Шаг 8
Создайте новый слой поверх остальных, зажмите CTRL и нажмите по основному слою, чтобы создать выделение. Залейте его белым. Не отменяя выделение, нажмите вправо и вниз 1 раз, нажмите Delete. Поставьте 80% Opacity.

Шаг 9
Как вы видите, тонкая белая линия придаёт больший эффект освещения, когда свет падает на объект и создаётся ощущение, что текст действительно трёхмерный.

Шаг 10
Затем мы хотим создать некоторые потоки естественного света. Создайте новый слой над другими и нарисуйте 4-5 белых прямоугольников, приблизительно таких, как на рисунке(нижние прямоугольники толще).

Шаг 11
Нажмите Ctrl+T - увеличьте и поверните. Но не нажимайте Enter, вместо этого клик правой кнопкой и из выпадающего списка выберите Perspective. Левые верхние 2 точки приблизьте друг к другу, чтобы создать впечатление, что свет исходит из одного места.

Шаг 12
У нас есть 4 луча света. Установите слой на Overlay и 20% Opacity. Примените Filter → Blur → Gaussian Blur с радиусом 6 пикселей.

Шаг 13
Должно получиться нечто вроде этого:

Шаг 14
Наш свет освещает только левую часть, в то время как свет должен попадать и на правую. CTRL-click по слою со светом и на световой след, который сделали ранее, и пока есть выделение, нажмите Add Layer Mask(в инструментах слоя, справа от 'f'). Это создаст маску которая будет показывать только освещённую часть(вот этот шаг я вообще не понял %) )

Шаг 15
Можно остановиться тут, так как выглядит вполне хорошо, но мы добавим "тёплый свет".

Шаг 16
Для начала создадим новый слой поверх фонового, и зальём розовым - #9d506c

Шаг 17
Установите режим смешивания на Colour и 20% Opacity. Это придаст нашему фону некоторую "теплоту". Теперь мы добавим жёлтый. Если бы мы не добавили красный, то было бы слишком много жёлтого, и всё это выглядело бы не реалистично.

Шаг 18
Создайте слой над розовым. Залейте белым и примените Filter → Render → Lighting Effects. Я нечсто использую Lighting Effects, но есть одна очень хорошая настройка "2 O'clock Spotlight", которую можно выбрать в пункте Style вверху. Вы можете использовать настройки по умолчанию, но для наших целей лучше немного вытянуть овал.

Шаг 19
Устанавливаем световой слой на Overlay, и получаем что-то вроде этого. Дублируйте слой, поместите его над остальными и установите 40% opacity. Мы добились того, что свет взаимодействует не только с текстом, но и с фоном.

Уроки фотошоп - объемный текста.

Заключение

Продублируйте верхний световой слой и поставьте 65% на параметр opacity. Затем добавьте максу (Add Layer Mask) и нарисуйте линейный градиент от белого к чёрному от левого верхнего края к правому нижнему. Это создает эффект затухания освещения при приближении к правому нижнему краю.

Объемный текст с помощью света и тени.