PhotoshopSunduchok — Как сделать объемные буквы
Автор: NON. Дата публикации: . Категория: Уроки фотошопа текст.
В этом уроке по работе с фотошопом будет показан простой способ изготовления объёмных или 3D букв. Такие буквы можно использовать при создании дизайна сайта или при разработке открыток, календарей и т.п.
Подобные публикации:
- урок «3d буквы в фотошопе»
- урок «3 D текст в фотошопе»
{smooth-scroll-top}
Создадим документ произвольно размера — Ctrl+N.
Выберем инструмент «Горизонтальный текст» (Т), подберём необходимые параметры шрифта и напишем несколько букв.
Правой кнопкой мыши щёлкнем в любом месте буквы и в раскрывшемся списке выберем пункт «Растрировать текст».
Нажмём сочетание клавиш Ctrl+T («Свободное трансформирование»), щёлкнем внутри рамки правой кнопкой мыши и выберем пункт «Перспектива».
Левый верхний маркер потянем направо.
Опять правой кнопкой мыши щёлкнем внутри рамки трансформации и выберем «Масштабирование».
Потянем за маркеры так, чтобы буквы растянулись по всему изображению. Применим трансформацию — Enter.
Загрузим выделение букв, для этого, удерживая клавишу Ctrl, щёлкнем по миниатюре текстового слоя.
Сделаем активным инструмент «Перемещение» (V) и, удерживая клавишу Alt, несколько раз нажмём на клавишу-стрелку на клавиатуре «Вверх».
Получаем вот такой результат. Высота букв зависит от количества нажатий на клавишу-стрелку вверх».
Скопируем выделение на новый слой — Ctrl+J.
Сделаем активным средний слой и, удерживая клавишу Ctrl, щёлкнем по миниатюре среднего слоя, загрузится выделение букв.
В качестве цвета переднего плана установим цвет более тёмный, чем цвет самих букв. Зальём выделение выбранным цветом — Alt+Delete и снимем выделение — Ctrl+D.
Получаем 3D буквы. Мы с Вами ответили на вопрос: «Как сделать объемные буквы
Если Вам понравился урок, поделитесь ссылкой на него со своими друзьями в своих любимых социальных сетях, кнопки которых Вы видите перед комментариями.
Спасибо!
Если Вы не хотите пропустить интересные уроки, информацию о бесплатных видеокурсах и другие новости сайта — подпишитесь на рассылку сайта. Форма для подписки находится ниже.
Скачать урок (248 Кб) в формате PDF можно здесь.
Если у Вас есть желание опубликовать на страницах сайта Ваш результат выполнения урока, то вышлите мне на адрес Адрес электронной почты защищен от спам-ботов. Для просмотра адреса в вашем браузере должен быть включен Javascript. Вашу работу и название урока, который Вы использовали при создании своей работы и он обязательно будет опубликован на странице сайта с описанием урока.
{smooth-scroll-top}
Временно закрыто комментирование для гостей, нужна обязательная регистрация, ввиду засилья спамботов.
зарегистрируйтесь на сайте, что бы оставлять комментарии!
3D-Типографика В Веб-Дизайне Силами Обычных Инструментов Photoshop / WAYUP
Яркая, пастельная или насыщенная объемная (трехмерная) типографика – один из удивительных трендов как прошлого, так и текущего годов.
Более того, стиль объемных букв настолько забавен и необычен, что его стараются включить в разные по тематике проекты. Сказать, что 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 – в дальнейшем все равно существует возможность изменять буквы по отдельности, деформировать, раскрашивать.
