Яркая, пастельная или насыщенная объемная (трехмерная) типографика – один из удивительных трендов как прошлого, так и текущего годов. Более того, стиль объемных букв настолько забавен и необычен, что его стараются включить в разные по тематике проекты. Сказать, что 3D только для детей или для чего-то технологического по тематике – уже нельзя, поскольку при грамотном его использовании и создании можно и на серьезном сайте сделать надпись, логотип или оформление домашней страницы.

Да, как правило, объемные элементы, так как не только буковки создают объемными, используют на протяжении всего сайта очень редко. Обычно это «обложка» сайта или веб-дизайн в анимированном виде. Так или иначе, но частично, в небольшом количестве объемные буквы или элементы используют наравне с плоскими стилями, параллаксами, пастелью и прочим, и прочим.

Но вот в чем для веб-дизайнеров существует интересный момент. Создать объемные буквы (почему мы говорим преимущественно о буквах, поясним позже) несложно, даже в том же Photoshop и, не прибегая к необходимости длительного изучения, например, … Cinema 4D или Illustrator. И делается это с помощью встроенных средств для работы с 3D. Мы немного уже о них рассказывали ранее, когда превращали обычную двухмерную картинку в объемную.

Так вот в чем загвоздка. Чтобы работать с трехмерностью требуется не такой уж и простенький компьютер/ноутбук. Оперативной памяти поболее (4(крайний минимум)-6-8 и больше), видеокарточка не самая слабая, поскольку именно ей придется обрабатывать всю эту трехмерность. А на фоне всего этого дизайнеры хотят творить, хотят создавать веб-сайты, рисовать. И что им остается делать?

Вот сегодня мы посмотрим один несложный вариант того, как создать объемный текст в Photoshop, не используя встроенные средства 3D.  Впоследствии такой текст можно использовать и в оформлении фонов, и для логотипов, заголовков, титула домашней станицы. Никто не спорит с тем, что работать с 3D гораздо проще и быстрее. И это так, особенно, когда дело доходит до настройки света-тени. И конечно, заниматься строительством объемных элементов придется все-таки в 3D. Просто потому, что куб сложно нарисовать через 2D, а шарик – и тем более.

Но для начала давайте посмотрим на некоторые сайты, где используются объемные элементы и шрифты. Это: Oh-My, 2 CAD - 50 years, westsidevirtual, happierlivingtoshiba, bycom, 2018.makemepulse, veolia, ego, oddboy, beobank. Гораздо чаще дизайнеры попросту создают тень под буквами, делая их, тем самым, объемными, но  есть один нюанс.

Объемные змейки против строгости

Чтобы создать надписи, которые создаются путем «змейки» объемной, всего-то и требуется микс-кисть и минимальные знания работы с градиентом  и кистями в целом (об этом мы тоже говорили). Например, вот такие.

Но микс-кисть не подойдет для таких вариантов, как BR-Fitness, MCHICKEN. Здесь требуется полноценная работа с 3D. Но что если и нет…

Объемный текст в Photoshop без 3D

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

Переводим текстовой слой в смарт-объект и выбираем «Свободное трансформирование» (Ctrl+T). Затем кликаем ПКМ по тексту, что выделился в рамочку, выбираем Искажение и, зажимая Shift, аккуратно нижние краевые точки сводим вместе, а верхние чуть-чуть врозь. Таким образом, создастся видимость того, что на текст мы смотрим чуть сверху, а об источниках света поговорим позже. Если у вас композиция иная и вы что-то придумали заранее, то разумеется, деформация текста будет иной.

Важно: особенность работы без инструментов 3D в том, что изначально текст придется полностью создать в плоском варианте, деформировать отдельно каждую букву, расположить её в нужном месте, развернуть по осям, а уже затем давать ей нужный объем.

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

Да, такой метод кропотливее, но иногда и он бывает полезным.

Теперь для текстового слоя (растрируем его) делаем копию и на ней выбираем опять «Свободное трансформирование» и… поскольку мы смотрим на текст сверху, то объем должен быть сверху видимым, поэтому клавишей вверх сдвигаем один раз слой вверх. Один раз нажимаем на стрелку вверх на клавиатуре и все. Нажимаете галочку на верхней панели или enter.

Так как все сливается по цветам, то сейчас это и не особо видно. Теперь нажмем Alt+Ctrl+Shift+T, чтобы продублировался не просто изменённый слой, а слой с преобразованием, то есть с нашим сдвигом.  Если нажать просто ctrl+J, то копии будут накладываться друг на друга без смещения.

В общей сложности у вас должно получиться 15 копий. Объединяем копии со 2 по 15 в группу и назовем её «3D объем». Наш основной текстовой слой, лицевой, мы перемещаем над группой.

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

Теперь аналогично применим коррекцию цвета к основному слою с текстом. Разницу в цвете не делайте слишком сильной, не стоит делать синюю надпись и красный объем. Это безвкусно.

В целом-то, вот таким образом и создается объем без использования 3D-инструментов в Photoshop. Но согласитесь, что все выглядит слишком безлико.

Открываем окно свойств группы «3D объем» и выбираем наложить градиент. Его направление подбирайте так, чтоб темные участки были далеко от источника света. В нашем случае внизу.

Добавим также и тиснение, чтобы смягчить края.

Переходим к основному слою с текстом и также открываем стилизацию. Наложим Глянец и Тиснение. Это придаст объем в целом для всех букв. Они не будут такими уж строгими.

Затем скопируем слой лицевой и отразим его по вертикали, применим Фильтр -> Размытие -> Размытие по Гауссу и размоем слой так, чтобы буквы были едва видны. Непрозрачность слоя уменьшим, добавим слой маску и мягкой кисточкой с противоположным цветом (для маски) немного размоем слой-тень так, чтобы она вроде и есть, но скромная и едва различимая. Глаз будет воспринимать целостность картины, а не отдельные элементы.

Объединим все слои с объемным текстом в группу. Добавим какой-то фон. Обратите внимание, что если передвинуть группу с текстом (а это теперь целостный объект), то и освещение от рисунка у нас тоже падает гармонично.

Добавим что-нибудь еще…предположим кляксу. Её тоже Оттесним для придания объема, деформируем (Ctrl+T) для перспективы. Наложим градиент, чтобы более дальние участки от света были темнее. По желанию добавляем слой-маску и немного размываем дальние части объекта, более резкими делаем объекты переднего плана. Для этого или кисточкой затушевываем с противоположным цветом при среднем нажиме и непрозрачности, либо инструментом Размытие на основном слое.

Дополнительно еще можно наложить Блик. Создадим новый чистый слой, заливаем его черным цветом и переходим в Фильтр->Рендеринг ->Блик и выбираем понравившийся вариант. Вспоминаем прошлый материал и любым методом убираем черный фон.

В целом картинка завершена. Как её использовать в веб-дизайне? По-разному, например, написать «ФАНТАЗИЯ ваши идеи – наша реализация». Расположить по краям иконку меню, границы по бокам декоративные, внизу стрелочку для прокрутки, можно иконки соцсетей, контакты или еще какие-то ссылочки.

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

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

Таким нехитрым способом у нас получилось создать 3D-текст, не прибегая к ресурсоемким возможностям Photoshop. Разумеется, что это кропотливее, в какой-то мере сложнее, но факт остается фактом – создать объем можно и без 3D.

Дополнительно

Если создавать вручную тоже не совсем есть желание, то можно воспользоваться готовыми макетами, как, например, Pro 3D Text Mockups или аналогичные. С ними работа проще, поскольку внутри находятся PSD файлы, где текстовые слои представлены в виде смарт-объектов. Дизайнерам остается только заменить текст на свой и наслаждаться получившейся красотой. Дополнительно можно изменить фон, цвет надписи при желании, возможно, убрать некоторые украшательства (блики, свечения и прочее).

Выводы

Создать объемный текст для веб-дизайна не так и сложно, как кажется поначалу, и уж тем более не имеет значения то, какой по мощности у вас компьютер/ноутбук. Выбираете ли вы многослойность, использование инструментария 3D или готовые Text Mockups – в дальнейшем все равно  существует возможность изменять буквы по отдельности, деформировать, раскрашивать.

Если при готовом варианте аккуратно выделять отдельные части экструзии пером или лассо и заливать их более яркими и контрастными цветами, создавая стилизованные надписи в стиле комиксов, ретро или их аналогов – совершенно не имеет значения стиль создания объема.

Между тем, в веб-дизайне объемные элементы и тексты может и не на 100% популярны, но имеют свою нишу и выполняют свои задачи. Неважно, для какой аудитории создается сайт, как мы сказали вначале, отельные элементы могут быть объемными. И это просто красиво. И не обязательно на цветном фоне, тематическом.

Единственное неудобство у этого способа все же есть. Сами геометрические элементы создавать таким способом сложно и неудобно. Куб, треугольник (пирамидку) еще можно, а вот обтекаемые элементы уже сложнее. Впрочем, не стоит забывать про микс-кисть.