Как сделать текстурный шрифт
Стилизуем текст под гранит в Фотошопе
Сегодня поговорим о том, как стилизовать текст c помощью наложения на него текстуры. Все текстуры, использованные в данном уроке, были найдены на просторах интернета и находятся в публичном доступе. Если Вы планируете использовать созданное изображение в коммерческих целях, то лучше такие изображения покупать на специализированных площадках – стоках.
Наложение текстуры на текст
Прежде, чем начинать стилизацию текста, необходимо определиться с композицией (фоновым изображением и текстурой). Необходимо понимать, что от выбора составляющих элементов зависит общая атмосфера изображения.
Для фона была выбрана вот такая стена из камня:
Текст мы сделаем гранитным с помощью соответствующей текстуры.
Расположение текстур на холсте
Написание текста
Итак, надпись создана, можно приступать к наложению на нее текстуры.
Наложение текстуры на шрифт
1. Перемещаем слой с текстом под слой с текстурой гранита. Текст пропадет из поля зрения, но это временно.
2. Зажимаем клавишу ALT и нажимаем ЛКМ на границу слов (верхней текстуры и текста). Курсор при этом должен поменять форму. Этим действием мы «привяжем» текстуру к тексту, и она будет отображаться только на нем.
Палитра слоев после всех действий:
Результат наложения текстуры гранита на текст:
Как видим, текстура «прилипла» к надписи. Осталось лишь придать тексту объема и завершенности всей композиции.
Заключительная обработка
Заключительную обработку мы будем производить с помощью наложения стилей на текстовый слой.
1. Для начала займемся объемом. Дважды кликаем по слою с текстом и, в открывшемся окне настроек стиля, выбираем пункт под названием «Тиснение». Потянем ползунок размера немного вправо, а глубину сделаем 200%.
2. Для того чтобы наша надпись «отделилась» от стены, перейдем к пункту «Тень». Угол выберем 90 градусов, смещение и размер – по 15 пикселей.
Взглянем на конечный результат наложения текстуры на текст:
Мы получили стилизованную под гранит надпись.
Это был универсальный способ наложения текстур на любые объекты, редактируемые в Фотошопе. Используя его, можно текстурировать шрифты, фигуры, залитые любым цветом выделенные области и даже фотографии.
Завершим урок несколькими советами.
На этом все, освойте приемы, описанные в этом уроке, чтобы получать качественные стилизованные тексты.
Наложение текстуры в фотошопе
В прошлом посте про бесплатные осенние текстуры была одна красивая иллюстрация, которая привлекла мое внимание. Это отличный пример того зачем могут пригодиться данные материалы.
Поэтому сегодня я бы хотел рассмотреть вопрос как наложить текстуру в фотошопе подобно картинке выше. Продвинутым пользователям это все, конечно, уже известно, однако тем новичкам, что не сталкивались с данным уроком ранее, заметка однозначно пригодится. В данной методике нет ничего сложного, постараюсь детально остановится на каждом шаге.
Как наложить текстуру на текст в Photoshop
1. Начнем, пожалуй, с текста. Создаем новый проект и добавляем в него требуемую надпись. Для шрифта можно выбрать любой цвет (обычно черный по умолчанию, хотя это не особо важно). Если хотите, определяете картинку для фона.
2. Добавляем в наш проект нужную текстуру, которую размещаем над слоем текста.
3. Применяем так называемую «обтравочную маску». Для этого выделяем слой с текстурой и нажимаем сочетание клавиш Control + Alt + G (для Mac: Command + Option + G).
Создать маску можно и с помощью выпадающего меню — выделяете слой с текстурой, кликаете правой кнопкой мышки и находите пункт «Create Clipping Mask». В итоге будет результат как на картинке выше.
4. Можно изменять размер, перемещать и вращать текстуру дабы она отлично сочеталась с текстом.
5. Следующий шаг — регулировка изображения. Иногда требуется сделать текст чуть более контрастным или светлым. Для этого можно использовать «корректирующий слой» — кликаем по иконке круга с черно-белыми половинками (находится внизу панели инструментов).
Во всплывающем меню выбираете один из инструментов, например Levels. Определяем параметры эффекта и применяем его.
Здесь есть один нюанс — у меня лично настройка сработала не к слою с текстурой, а ко всей картинке, поэтому я выбрал корректирующий слой и нажал Control + Alt + G (определил его как маску).
6. На финальном этапе можно (по желанию) изменить режим наложения текста. Выбираете слой с тектом, а затем определяете для него опцию наложения в значение «Multiply».
В итоге текст будет более органично вписан в фон. Можете увидеть разницу переключая режимы настройки «Multiply» и «Normal». На этом наложение текстуры в фотошопе на текст можно считать завершенным.
Как наложить текстуру на объект в фотошопе
Алгоритм данной процедуры идентичен. Но, раз уж текст для абсолютных новичков, покажу пример реализации и для него. Действия, по сути, те же, только в начале добавляем не текст, а нужный вам объект (форму или, допустим, кисти фотошопа). После этого размещаем над этим слоем текстуру и создаем обтравочную маску (Control + Alt + G).
Дальше подгоняете результат под ваши нужды: перемещаете текстуру, если потребуется, добавляете корректирующий слой и меняете режим наложения. В принципе, ничего сложного в этом нет, и эффект получается весьма интересный. Метод наложения текстуры в Photoshop может пригодиться для создания разного рода иллюстраций, картинок, постеров и т.п.
3 трюка для добавления текстуры в ваш текст с CSS и SVG
Вероятно, вы знакомы с использованием такой техники Photoshop, когда в качестве маски изображения выступает текст; это лучший известный способ добавить текстуры или даже фон изображения на ваш текст. Далее вы можете использовать этот текст в виде изображения на вашем веб-сайте; а ведь было бы здорово, если бы мы смогли наложить такой же эффект, используя HTML и CSS? Хорошие новости — мы можем!
CSS представила такие свойства как background-clip и mask-image, которые вы можете использовать для создания схожих эффектов, для которых раньше использовался Фотошоп. Кроме того, для этого вы также можете использовать SVG.
Сегодня мы рассмотрим эти опции и даже сделаем несколько простых анимаций. Если вы хотите продолжить самостоятельно, один на один с кодом, вы можете загрузить исходные файлы здесь.
Поддержка браузерами
Как и следовало ожидать, некоторые из этих свойств, которые мы будем использовать, поддерживаются не повсеместно. Это означает, что они не будут работать в браузерах вроде IE и Firefox.
Создание фонового подвижного изображения текста с помощью BACKGROUND-CLIP
Первая опция, которую мы рассмотрим, это свойство background-clip. Это свойство определяет, будет ли фон продлён за границы или нет. Оно позволяет тексту определённого элемента обрезать изображение.
Наш макет — это просто h1 с классом bgClip:
А теперь давайте добавим магии в CSS…
Мы добавим текстуру ночного неба к нашему изображению. Мы также убедимся, что текст отображён со сглаживаем, используя font-smoothing. Обратите внимание, что для этой работы цвет текста должен быть прозрачным, поэтому мы также используем text-fill-color:transparent.
А теперь просто добавим немного анимации, чтобы сделать фон более привлекательным:
Клипуем текст с использованием SVG
Следующая техника, которую мы рассмотрим, это SVG клиппинг. Наподобие приведённому выше методу CSS, SVG также позволяет вам клиповать текст изображением, используя свойство clipPath. Обычно свойство clipPath содержит форму атрибутов, таких как круг или квадрат, но вы также можете использовать текст.
Видите, я использую HTML элемент img для клиппинга изображения.
А теперь всё, что нам нужно, это использовать свойство clip-path для наложения на SVG контуров видимого изображения:
Тест под маской с помощью MASK-IMAGE
Последняя техника, которую мы собираемся рассмотреть, — это текстурирование текст с помощью mask-image. Базовая функциональность этого свойства в том, что оно будет вырезать область текста, которая видна в соответствии с прозрачностью.
Всё, что нам нужно, это один элемент h1 обёрнутый в div:
Заключение
Отлично! Вы только что научились новым трюкам с текстом. Эти навыки сберегут ваше время и отгородят вас от Фотошопа. Ещё важнее то, что они динамические (их можно менять «на лету»), в отличие от того же jpg.
CSS и SVG проделали долгий пусть, и техники вроде этих станут стандартом в ближайшие несколько лет, когда все основные браузеры научаться их понимать.
30 сентября 2017 | Опубликовано в Уроки | 1 Комментарий »
В этом уроке мы научимся просто и быстро применять текстуру к тексту в Adobe Photoshop. Мы будем создавать текст с металлической текстурой. Два простых стиля слоя сделают текст объемным, а примененные в качестве обтравочной маски текстуры, придадут ему рельефа. После этого мы сделаем текстуру глубже и темнее, добавим огненных эффектов и подкорректируем цвета.
Результат
Исходники
Шаг 1
Создайте новый документ размером 1400px * 770px и залейте его черным цветом. Начнем с фона для нашего текста.
Откройте “Текстуру металла 1” в Photoshop, копируйте ее и вставьте в наш документ. Используйте трансформирование, чтобы масштабировать текстуру по размеру документа.
Снизьте Оpacity/Непрозрачность слоя примерно до 24%:
Примените к слою следующие корректирующие слои:
Black & White/Черный и белый
Вот что должно получиться:
Используйте фрактальные кисти, чтобы немного разнообразить наш фон. Рисуйте ими поверх фона, но так, чтобы они были еле заметны. Непрозрачность кисти должна быть в районе 20%:
Шаг 2
Используйте шрифт из исходников, чтобы ввести ваш текст:
Примените к слою следующие стили:
Bevel and Emboss/Тиснение
В результате ваш текст должен стать объемным:
Шаг 3
Теперь применим текстуру к тексту. Откройте “Текстуру металла 2” в Photoshop и выделите область, указанную ниже:
Копируйте ее и вставьте в наш документ поверх текста:
Кликните по слою с текстурой правой кнопкой и выберите Create Clipping Mask/Создать обтравочную маску:
Чтобы затемнить цвет металла на буквах, дублируйте слой с текстурой дважды, также оставляя их обтравочными масками. Укажите одной копии blend mode/режим наложения Color Burn/Затемнение основы, а второй — Multiply/Умножение:
Вот какой результат вы получите:
Step 4
Давайте добавим немного огня. Откройте соответствующий файл из исходников и выделите указанную ниже область инструментом Lasso/Лассо, указав в параметре Feather/Растушевка 40px:
Копируйте область и вставьте ее в наш документ. Укажите слою с огнем режим наложения Screen/Осветление, и поместите его как показано ниже:
Повторите процесс еще несколько раз, чтобы добавить еще огненных элементов:
Шаг 5
Почти всё. В качестве завершающих штрихов, можете добавить немного текстуры еле заметными гранж-кистями:
Также при желании, добавьте свечение, используя фрактальные кисти:
Результат
Немного корректируем цвета при помощи корректирующего слоя Colour Balance/Баланс цвета, и все готово!
Как добавить текстуры в текст в Adobe Photoshop
Один из очень простых способов оживить текст в логотипах, заголовках страниц и других элементах вашего бренда — добавить к нему текстуру.
Будь то эффект акварели, металл, пламя или что-то еще, текстура может вызвать интерес к плоскому типу.
Вот шаги, необходимые для добавления текстуры к тексту в Adobe Photoshop…
Шаг 1: добавь свой текст
Используя инструмент « Текст », введите текст в Photoshop. Вам нужно использовать более толстый шрифт, чтобы убедиться, что полный эффект текстуры виден — по крайней мере, выберите жирный вариант выбранной вами гарнитуры.
Кроме того, попробуйте сопоставить шрифт с тем типом текстуры, который вы хотите использовать. Рукописный шрифт хорошо сочетается с акварельной текстурой; шрифт плиты хорошо сочетается с металлическим эффектом и так далее. Посмотрите наше руководство, где подробно описаны бесплатные шрифты, чтобы расширить ваши возможности.
Цвет текста не имеет значения, так как он скоро будет покрыт текстурой.
Шаг 2: Найти текстуру
Ваша текстура может прийти из двух мест. Вы можете сделать это вручную на отдельном слое в файле Photoshop или импортировать его из внешнего файла изображения.
Шаг 3: Поместите текстуру
Следующим шагом является размещение вашей текстуры. Если вы сделали свой собственный, убедитесь, что он находится на слое, который находится прямо над вашим текстовым слоем.
Шаг 4. Создайте обтравочную маску
Полный слой текстуры исчезнет и будет виден только там, где под ним текст.
Шаг 5: отрегулируйте положение
Слои текста и текстуры остаются полностью редактируемыми, как и обычные слои. Это означает, что вы можете вернуться и редактировать текст без необходимости удалять или повторно применять текстуру. Добавьте больше текста, и текстура будет автоматически размещена на нем.
Если текстура находится не там, где вам нужно, выберите слой и откройте Marquee Tool или нажмите M на клавиатуре. Вы можете перемещать текстуру, удерживая клавишу Ctrl в Windows или Cmd на Mac и перетаскивая изображение мышью.
Шаг 6: Расширить или смягчить края текста
К настоящему времени ваше изображение должно выглядеть довольно хорошо, и вы можете оставить вещи там, если вы счастливы. Но есть один последний, необязательный шаг, который вы можете попробовать.
В зависимости от типа эффекта, который вы собираетесь использовать, вам может не понадобиться резкие края текста. Например, текстура пламени может выходить за границы ваших персонажей, или коррозия может повредить их. К счастью, этого легко достичь.
Затем установите цвет на черный, убедитесь, что вы выбрали векторную маску, и закрасьте края текста. Покрасьте белый, чтобы восстановить любые детали, которые вы удалили по ошибке. Это должно выглядеть примерно так:
Результат будет выглядеть примерно так:
Шаг 7: сохраните ваше изображение
Последний шаг — сохранить или экспортировать ваше изображение. Сохраните его как файл PSD, чтобы сохранить мастер-копию со всеми редактируемыми слоями в такте. Или сохраните его в формате JPEG, чтобы сохранить плоскую копию изображения на белом фоне.
Чтобы сохранить текст с прозрачным фоном, возможно, для использования в Интернете или в другом документе графического дизайна, удалите или скройте белый фоновый слой, затем сохраните изображение в виде файла PNG (или GIF).
Узнайте больше хитрости Photoshop
Как видите, добавить текстуру для ввода в Photoshop довольно просто. Самое главное, чтобы получить правильную текстуру и правильные шрифты. Если вам нужна помощь в подборе шрифтов для ваших проектов, поможет наша статья о совмещении шрифтов