Как сделать текст в перспективе
Текстовый эффект перспективы в фотошопе
Текстовый эффект
перспективы в фотошопе
В этом уроке по работе с фотошопом будет показан текстовый эффект, который довольно часто используется в фантастических фильмах, к примеру, таких как » Звёздные войны » или » Матрица «.
Выберем инструмент » Горизонтальный текст » ( Т ), подберём необходимые параметры шрифта и напишем произвольный текст.
Правой кнопкой мыши щёлкаем в любом месте документа и в раскрывшемся списке выбираем пункт » Растрировать текст «.
Удерживая клавишу Shift (для получения вертикальной линии) и проводим градиентом сверху вниз.
В зависимости от того, как Вы подвинули маркеры при работе с инструментом » Свободное трансформирование «, Вы можете получить довольно разные текстовые эффекты. У меня получилось вот так.
Хотите не пропустить интересные уроки, полезные видеокурсы, другие классные приёмы работы в фотошопе и узнавать все новости в мире фотошопа ПЕРВЫМ?
Введите свои данные в форму ниже.
Скачать урок (526 Кб) в формате PDF можно здесь.
Если у Вас есть желание опубликовать на страницах сайта Ваш результат выполнения урока, то вышлите мне на адрес Адрес электронной почты защищен от спам-ботов. Для просмотра адреса в вашем браузере должен быть включен Javascript. Вашу работу и название урока, который Вы использовали при создании своей работы и он обязательно будет опубликован на странице сайта с описанием урока.
Преобразование текста, не доступное при обычных режимах Photoshop
Чтобы применить данные инструменты, текст необходимо растрировать, т.е. превратить шрифт в обычной пиксельный рисунок, что исключает дальнейшее редактирование текста текстовыми инструментами (например, увеличение размера шрифта, межбуквенного расстояния, изменения начертания, вставки символов и многое другое)
Это значит, что как только мы преобразовали текстовый слой в смарт-объект, мы сможем делать с ним всё, что и с обычным слоем (в том числе и виды трансформирования Искажение и Перспектива), и при этом текст останется текстом внутри смарт-объекта.
В уроке я буду использовать Photoshop CC 2015, но всё сказанное здесь подходит к версиям начиная от CS2.
Давайте рассмотрим это подробнее на практическом примере.
Добавление текста
Вот изображение, которое я уже открыл в Photoshop, я буду использовать его в качестве фона.
Рисунок, который я взял под фон для текста
Теперь необходимо добавить текст, для этого берём на панели инструментов инструмент «Текст» (Type Tool).
Затем выбираем желаемый шрифт в панели параметров в верхней части экрана, там же задаём размер и цвет шрифта. Здесь я использовал шрифт Neuropol, бесплатно скачать который можно на этой страничке. Вводим текст, когда будет готово, нажимаем Ctrl+Enter, чтобы выйти из редактирования текстового слоя.
Я хочу, чтобы текст был расположен центру фонового изображения, для этого я возьму инструмент «Перемещение» (Move Tool) и воспользуюсь стандартными инструментами выравнивания слоёв на панели параметров, подробнее о выравнивании здесь.
.
Проблема: команды трансформирования «Искажение» и «Перспектива» Не Доступны
Итак, я добавил исходный текст, в панели слоев текстовый слой расположен непосредственно над фоновым слоем с изображением. На то что это именно текстовый слой, указывает большая буква «Т» в миниатюре слоя:
Документ с фон слоем и текстовым слоем, расположенным над ним, в панели слоёв активен текстовый слой.
Предположим, сейчас я хочу добавить к тексту эффект 3D, для этого необходимо его повернуть в перспективе и/или придать тексту перспективные искажения. Если бы я работал с обычным пиксельным слоем, я мог бы это легко сделать, применив перспективную трансформацию. Также для этого можно использовать «Искажение». Но при работе с текстовым слоем не всё всегда так просто.
Все режимы трансформирования Photoshop, можно вызвать через вкладку главного меню «Редактирование» (Edit), где выбрать пункт «Трансформирование» (Transform). Попробуйте сделать это при активном текстовом слое и увидите, что оба этих пункта не активны:
Меню «Трансформирование» (Transform) при активном текстовом слое. Пункты «Искажение» (Distort), «Перспектива» (Perspective) и «Деформация» (Warp) недоступны.
Решение: Преобразование текстового слоя в смарт-объект
Как я уже упоминал ранее, традиционным способом решения этой проблемы является растеризации текстового слоя, который преобразует текст из векторной фигуры в пиксельную. Но проблемой при этом подходе является то, что как только мы превратили текст в пиксели, он больше не доступен для редактирования. Кроме того, при трансформировании (растяжении, искажении, деформировании) пиксельной картинки мы запросто можем потерять качество изображения, особенно это скажется на границах букв, превращённых в пиксели. Обычный же текст не имеет таких недостатков, т.к. он состоит из векторов.
Напротив, независимо от того, что мы делаем с вектором, края букв всегда остаются четкими и резкими. Таким образом, чтобы после редактирования наш текст выглядел на высоком уровне, нам нужен способ, позволяющий производить перспективные и другие искажения без потери качества, а следовательно, без преобразования в пиксели.
Конвертирование текстового слоя в смарт-объект.
Панель слоёв с указанием слоя, преобразованного в смарт-объект.
Эффект 3D текста при помощи команды Distort
Давайте теперь вкратце рассмотрим, как быстро придать тексту 3D эффект, я начну с применения команды «Искажение».
В этом режиме мы можем изменить текст путем захвата любого из четырех угловых маркеров рамки трансформирования и перетаскивания их по холсту независимо друг от друга в любом направлении:
Режим Искажение (Distort) позволяет нам перетаскивать угловые маркеры габаритной рамки независимо друг от друга.
Эффект 3D текста при помощи команды Perspective
Команда «Перспектива» позволяет нам нажать на любой из четырех угловых маркеров и перетаскивать их по холсту. Разница заключается в том, что в режиме перспективы мы можем перетащить угловые маркеры только по горизонтали или вертикали, что вызовет изменение длины горизонтальной или вертикальной стороны рамки и изменение угла. Горизонтальная сторона будет удлинятся/укорачиваться относительно своего центра, угол напротив перетаскиваемого маркера будет двигаться вместе с ним, но в противоположном направлении.
Например, если я нажму на верхний левый угол и перетащу его вверх, угол в левом нижнем углу рамки переместится вниз, что создаёт эффект, как будто бы текст расположен ближе к нам левым боком:
Эффект, полученный перетаскиванием левого верхнего угла рамки вверх. Это одновременно перемещает левый нижний угол вниз.
Но это не тот эффект, который я хочу получить, поэтому я отменю его, нажав Ctrl+Z на клавиатуре, данное действие вернёт текст к своей первоначальной форме.
Я снова нажмите на марке в левом верхнем углу, но на этот раз, я потяну его по направлению вправо внутрь, в результате чего противоположный маркер в верхнем правом углу также сдвинется внутрь, создавая псевдо-3D эффект:
Перетаскивание левого верхнего угла внутрь в то же время перемещает внутрь верхний правый угол.
Переключение из режима «Перспективы» в режим «Масштабирование» (Scale).
После переключения нажимаем на нижний центральный маркер и тянем его вниз (можно также верхний центральный маркер вверх), чтобы растянуть текст по вертикали:
Масштабирование текста методом перетаскивания нижнего центрального маркера вниз.
Поле того, как я закончил, все преобразования, я нажму клавишу Enter, чтобы принять преобразования и выйти из режима транс формирования. Вот что у меня получилось в итоге:
Текст после применения команд трансформирования «Перспективы» и «Масштабирование» (Scale).
Наложение текста на фон (необязательно)
Итак, во- первых, чтобы смешать текст с изображением, я изменю режим наложения смарт-объекта с «Обычного» (Normal) на «Перекрытие» (Overlay). Опция «Режим наложения» находится в верхнем левом углу панели слоев. Вот что получилось:
Эффект, полученный после изменения режима смешивания на «Перекрытие» (Overlay).
Сам по себе это интересный эффект, но в фоновом изображении имеются большие чёрные области, на которых текст попросту исчезает.
Чтобы это исправить, я воспользуюсь стилями слоя, а конкретнее стилем «Внешние свечение» (Outer Glow).
В диалоговом окне стиля я нажму на образец цвета и изменю цвет внешнего свечения до зеленого, примерно #296a15, чтобы соответствовать зеленому цвету в изображении. Затем изменю значение непрозрачности до 50% и увеличу параметр «Размер» до 60px (значение этого параметра зависит от размера документа):
Параметры стиля «Внешнее свечение» (Outer Glow) в его диалоговом окне. Красным обведены параметры, которые необходимо изменить, остальные значения остаются заданными по умолчанию.
Нажимаем OK, чтобы закрыть диалоговое окно стиля, теперь в изображении видны очертания букв:
Результат после применения стиля «Внешнее свечение».
Редактирование текста внутри смарт-объекта
Я уже упоминал, что одним из основных преимуществ преобразования текстового слоя в смарт-объект является то, что это сохраняет текст полностью редактируемые. Так как же нам изменить текст внутри смарт-объекта?
Обычное нажатие на текст в документе не даст результатов, потому что текст находится внутри смарт-объекта. Для того, чтобы добраться до текста, нам нужно дважды щелкнуть по миниатюре смарт-объекта в панели слоёв:
Двойной клик по миниатюре смарт-объекта для того, чтобы его открыть.
Это действие открывает смарт-объект в отдельном документе, что будет выглядеть как открытие нового Photoshop-документа. Бело-серые квадратики под текстом обозначают прозрачность, это делает белые буквы немного хуже различимыми, но можно, к примеру, временно сделать цвет текста более тёмным (перед сохранением цвет вернуть обратно!).
Чтобы изменить текст, ещё раз выберите инструмент «Текст» (Type Tool) на панели инструментов, затем дважды кликните по тесту для его выделения.
Я изменю слово «КОСМОС» на слово «ЧУЖОЙ»
Редактирование текста внутри Smart Object.
Таким же образом можно изменить семейство шрифта, начертание, цвет, размер, расстояние между буквами и т.п.
Документ с текстом внутри смарт-объекта больше не нужен, его можно закрыть.
Это возвращает нас к основному документу, который мгновенно обновляется с изменениями, которые мы внесли в текст:
Тот же самый эффект после редактирования текста.
Таким образом, используя оболочку смарт-объекта, мы можем применить к тексту недоступные ранее виды транс формирования.
Текст в перспективе
Блуждая по сети, я не раз видела самые удивительные решения, основанные на применении CSS. И с каждым разом все больше верится, что возможности CSS безграничны 🙂
Сегодня я увидела вот такую картинку: 
Правда интересный эффект? Давайте попробуем раскрыть секрет его реализации.
Для того, чтобы сделать эффект «перспективного» текста, нам потребуется всего лишь 3 элемента – блок div, p и span. Вспомним, что span это элемент строки (по умолчанию), поэтому мы можем «причесать» любое слово/строку как захотим. Но ничего фантастического делать нам не нужно 🙂 Span мы будем использовать, чтобы разбить текст, который мы хотим преобразовать, на строки. А элемент p – будет обрамлять наш текст.
С текстом разобрались, но как же нам указать разную величину шрифта для каждой строки? Мы немного схитрим и не будем закрывать тег span после каждой строки, а сделаем так, чтобы каждая строка была как бы вложенна в другую. А закрывающий тег от каждой строки поместим в самый конец текста. Главное здесь не обсчитаться в количестве открывающих и закрывающих тегов. И тогда код будет выглядеть так:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Pellentesque velit lacus,porta vitae, consequat in,aliquam condimentum, tortor. Mauris sed est feugiaterat lacinia rutrum. Fusce dapibus nonummy nisi.Nullam et mi nec arcu tempor pellentesque. Fuscediam dui, pharetra at, pellentesque quis, dapibusut, erat. Curabitur venenatis condimentum nisi.In posuere. Curabitur accumsan, libero egetcongue sodales, lacus mi vehicula lorem,nec rutrum velit nunc vitae magna. Proinet Perspective Text via CSS.
Что нам это дает? Вспомним, что дочерние элементы наследуют свойства родительского элемента, причем каждый последующий вложенный элемент присваивает значение относительно его предыдущего блока, а не самого первого. Ярким примером может быть например такое: когда мы используем вложенные блоки с шириной в процентах, например 70%. Каждый вложенный блок будет иметь ширину 70% относительно предыдущего блока, тем самым самый последний вложенный блок будет самым маленьким.
Думаю, вы уже поняли наши дальнейшие действия 🙂 Мы будем проделывать это с величиной шрифта, указав его в процентах.
Стили для наших элементов будут выглядеть так:
#text <
margin : auto;
width : 40em;
font-size : 50%;
line-height : 1.6em;
max-width : 90%;
text-align : center;
>
#text p span <
font-size : 1.1em;
display:block;
clear:both;
>
Важно уточнить, что размер текста нужно указывать именно в em и обязательно больше чем 1 em – иначе эффект будет другой. Также нужно помнить о расстоянии между строками (line-height), чтобы строки по мере увеличения шрифта не стали наезжать друг на друга.
Вот и весь секрет 🙂 А дальше только ваша фантазия 🙂
Посмотреть пример наглядно можно здесь
Там же вы найдете и ссылки, чтобы скачать код.