Граффити на стене в Photoshop

Автор Дмитрий Евсеенков На чтение 5 мин Просмотров 1к.
Обновлено 03.11.2021

В этом материале я отвечу на популярный вопрос от начинающих пользователей программы Adobe Photoshop — как создать текст в стиле граффити.

Путём нехитрых манипуляций я получил вот такой результат, затратив всего несколько минут времени:

Фоном для граффити послужит кирпичная стена, изображение с которой скачать можно на этой страничке:

Содержание

Создаём карту смещения (Displacement Map)

Для того, чтобы наш будущий текст повторял неровности поверхности, на которой он будет нанесён, создадим картe смещения (Displacement Map), которую мы будем использовать в дальнейшем. Кстати, «Displacement Map» можно перевести как «карта объёма».

Для начала, давайте преобразуем изображение в чёрно-белое, это проще всего сделать нажатием комбинации клавиш Ctrl+Shift+U. Затем, мы должны увеличить его контраст. Есть несколько способов добиться этого, но я пришёл к выводу, что в данном случае использование инструмента «Уровни» (Levels) даст нам наилучшие результаты. Нажмите комбинацию клавиш Ctrl+L для открытия диалогового окна «Уровней», и, затем, сместите крайние чёрные и белые ползунки несколько к центру:

Теперь наше изображение должно иметь примерно такой вид:

Теперь наступил очень важный момент. Сохраните полученное изображение обязательно в формате PSD, иначе вы не сможете выбрать его в дальнейшем. Я назову этот файл disp_map.psd.

Теперь возвратим документу его первоначальный вид. Для этого пройдите по вкладке главного меню Окно —> История (Window —> Hiatory) и кликните по верхней строке в панели истории, либо или нажмите Файл —> Восстановить (File —> Revert) или клавиша F12.
И сразу сохраняем документ как новый файл PSD, дабы не затронуть готовый PSD-файл с картой смещения.

Текст

Подошло время создания текста!
Для надписи, вы можете, конечно, использовать любой шрифт, который захотите, но чтобы получить лучший эффект «граффити» в вашем дизайне, рекомендуется использовать шрифт именно в стиле граффити. В данном примере я использовал шрифт Zit Graffiti, скачать, который, вместе с другими шрифтами этого стиля, в т.ч., поддерживающими русские буквы, вы можете на этой страничке. Но, к сожалению, сам Zit Graffiti кириллицу не поддерживает. Я выбрал его из-за того, что при вводе в строчных букв, буквы залиты цветом, а если Вы вводите буквы верхнего регистра, то получаете только контур. Так как я хочу, чтобы мой текст был залит цветом, я буду вводить текст в нижнем регистре. Для примера я вбил своё имя:

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

Применив эти стили, я получил такой результат:

Придаём тексту рельеф

На надпись на стене должна повторять неровности стены, т. е иметь рельеф. Для этого мы и используем сделанную ранее карту смещения.

Одно важное дополнение. Перед тем, как применить карту, преобразуем наш текст в
смарт-объект (Smart Object) для того, чтобы при необходимости редактировать текст, его стили слоя и цвета на более позднем этапе, после применения фильтра «Смещение»:

Теперь применяем «Смещение», для этого идём по вкладке главного меню Фильтр —> Искажение —> Смещение (Filter —> Distort —> Displace), после чего открывается диалоговое окно фильтра, где изменяем оба значения на 3 или 4:

Нажимаем ОК, после чего появляется окно выбора файла, где нам следует выбрать сохранённый файл PSD с картой смещения, который мы созданный в начале, у меня этот файл называется disp_map.psd:

Вот что получилось у меня после этого. Текст вроде-как начал принимать форму стены, но, пока ещё, мы далеки от идеала:

Смешивание слоёв

Очевидно, что текст должен вписываться в стену. Мы проделали большую работу по изменению границы теста от прямой линии, но теперь тестовый слой нуждается в органичном наложении на фоновый. Есть несколько способов это сделать, в том числе применение различных режимов наложения, но,в данном случае, я покажу другой способ смешивания, на мой взгляд, наиболее подходящий в данной ситуации. Идём по вкладке главного меню Слои —> Стиль слоя —> Параметры наложения (Layer —> Layer Styles —> Blending Options) или просто дважды кликаем по бывшему текстовому слою, а ныне смат-объекту, в результате открывается окно параметров наложения по умолчанию. Нас интересует раздел «Наложение, если» (Blend If):

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

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

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

Если зажать клавишу Alt и кликнуть по ползунку, то он разделится надвое, а эти половинки следует несколько раздвинуть:

Вот теперь я получил именно то, что хотел:

Рисуем граффити в Фотошопе · Мир Фотошопа

Сегодня мы будем учиться создавать обои для рабочего стола в стиле граффити.

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

Создадим новое изображение 1024?768px:

Cоздадим новый слой Ctrl+N и с помощью инструмента «Brush Tool» нарисуем примерные контуры нашей композиции:

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

Опять создаём новый слой и с помощью того же «Brush Tool» заполняем рисунок цветом. Вот что собственно у меня получилось…

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

Ещё один совет: если хотите, чтобы в некоторых местах один цвет плавно переходил в другой, оставляйте такие границы, как показано ниже:

<div /></div>

Далее с помощью инструмента «Smudge Tool» размываем наши пересечения:

Далее нам необходимо добавить объёма к нашему рисунку. Создаём еще слой и начинаем потихоньку выводить нужный нам эффект. Создадим обводку, я её предпочёл сделать просто чёрной — вот что у меня получилось:

При нанесении обводки я советую учесть такой момент:

Вот, например, здесь мы видим, что остался на фоне не закрашенный участок, оставим его для дальнейшей обработки:

Создадим еще один новый слой 🙂 и поместим его ниже уровня слоя заливки букв:

Нам нужно обвести и выровнять самый первый контур рисунка, а область заливки мы пока оставим, для неё тоже есть задумка.

Вот что у меня получилось:

Далее, я думаю, можно залить получившиеся промежутки одним цветом. Создаём новый слой, размещаем его ниже слоя с контурами и с помощью «Brush Tool» аккуратно зальём промежутки. У меня получилось вот так:

Теперь кликаем по этому слою 2 раза на панели слоёв, и в открывшемся окне выстраиваем следующие параметры:

Вот что у меня получилось:

Удалите слой, на котором с самого начала мы делали наброски.

Вполне можно было бы остановиться на этом, но нам нужен красивый результат, а значит продолжим. Я думаю просто разноцветная заливка у букв выглядит слишком простенько, я решил сделать эффект «пузырей»…

На новом слое, расположенным выше всех, инструмент «Brush Tool» добиваемся подобного эффекта:

Остальные эффекты — это только ваша фантазия, придумывайте новое и выкладывайте ссылки на работы в коменты…

Я добавил несколько деталей.

Всё, поздравляю, урок окончен. Автор скетча: Гарик GHETTO Геттович.

В случае копирования урока указывайте автора и ставьте активную гиперссылку на наш сайт. Более подробную информацию вы можете получить в разделе «Правовая информация».

Как сделать текстовый эффект граффити в Photoshop

Tutorialsby Diego Sanchez 21 июня 2019 г.

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

Но прежде чем мы начнем, и если вы хотите следовать этому руководству точно так, как описано, загрузите следующие активы:

• Фон стены
• Шрифт Don Graffiti

Шаг 1

Откройте фоновое изображение стены в Photoshop.

Шаг 2

Выберите инструмент «Текст» (T) и введите любой текст, который вам нравится. В данном случае я использую шрифт «Don Graffiti» размером 370 пикселей.

Шаг 3

При активном текстовом слое перейдите в Layer > Layer Style > Blending Options. В разделе «Общее наложение» обязательно установите режим наложения «Нормальный» и уменьшите непрозрачность до 9. 0%. В разделе Advanced Blending установите непрозрачность заливки на 0%.

Шаг 4

Отметьте параметр Bevel & Emboss и нажмите на миниатюру Gloss Contour, чтобы открыть Contour Editor.

Шаг 5

Добавьте две новые опорные точки на кривую отображения, щелкнув линию. Установите первую точку на Вход: 46% — Выход: 0% и отметьте опцию «Угол». Установите вторую точку на Вход: 54% — Выход: 100%, а также отметьте опцию «Угол».

Шаг 6

Нажмите кнопку «Создать». Назовите контур «Контур граффити», нажмите «ОК», а затем нажмите «ОК» в редакторе контуров.

Шаг 7

По-прежнему в параметрах Bevel & Emboss примените следующие настройки:

Шаг 8

Отметьте параметр Contour и установите Range на 60%.

Шаг 9

Щелкните миниатюру контура, чтобы открыть Редактор контуров.

Шаг 10

Добавьте 3 новые опорные точки на кривую и установите для каждой из них следующие значения (нажмите OK в Редакторе контуров, когда закончите):

• Точка 1: Вход 0% — Выход 100%
• Точка 2: Вход 25% — Выход 10%
• Точка 3: Вход 50% — Выход 50%
• Точка 4: Вход 75% — Выход 10%
• Точка 5: Вход 100 % — Выход 100 %

Шаг 11

Проверьте параметр «Внутренняя тень». Нажмите на стрелку рядом с миниатюрой контура, выберите «Наклонный уклон — по убыванию» и примените следующие настройки.
Примечание. Выбранный здесь цвет будет цветом вашего текста.

Шаг 12

Отметьте параметр «Внешнее свечение». Нажмите на стрелку рядом с миниатюрой Contour, выберите контур, который мы сохранили перед «Контуром граффити», и примените следующие настройки.

Шаг 13

Чтобы закончить наш стиль граффити, нажмите на опцию Drop Shadow. Нажмите на стрелку рядом с миниатюрой Contour, выберите «Half Round» и примените следующие настройки.

Шаг 14

Прежде чем нажать кнопку «ОК» на панели «Стиль слоя», нажмите кнопку «Новый стиль». Назовите стиль как «Стиль граффити 1», обязательно отметьте «Включить эффекты слоя» и «Включить параметры наложения слоя» и нажмите «ОК».

Шаг 15

Наконец, нажмите OK на панели Layer Style, чтобы применить стиль граффити к тексту.

Шаг 16

В следующий раз, когда вы захотите применить стиль граффити к другому слою, просто перейдите в «Окно» > «Стили» (чтобы отобразить стили) и щелкните только что созданную миниатюру «Стиль граффити 1».

Как сделать многоразовое граффити в Photoshop учебник

25

ПОДЕЛИТЬСЯ

Первоначально я написал этот урок граффити десять лет назад. Хотя стиль по-прежнему выглядит хорошо, удобство использования отстой. Общее время обновления, давайте сделаем граффити на текстовом слое, используя все стили слоя. Преимущество в этом в 2 раза. Во-первых, мы можем повторно использовать стиль слоя, а во-вторых, мы можем изменить текст, и стиль останется на нем при редактировании. (Неразрушающий ребенок!)

Шаг 1

Начните с соответствующего шрифта и введите слово grafitti

Здесь я использовал Tags Extreme. Загрузите его здесь | Загрузите стиль слоя для этого урока

Шаг 2

Создайте новый пользовательский градиент, подобный этому.

Шаг 3

Откройте стили слоя, щелкнув маленький значок «fx» внизу панели слоев. Выберите Gradient Overlay слева, откройте наш градиент и установите его на 90, при необходимости настройте масштаб.

Это дает нам цвет градиента на типе

Шаг 4

Добавьте маленькую серую обводку, используя настройки, показанные в опции обводки, размер 4

Шаг 5

900 на самом деле дают этому тройной удар, мы должны быть умными. Давайте используем внешнее свечение в качестве вторичного штриха. )Все время так делаю) Выбираем внешнее свечение. Режим наложения нормальный и черный. Магия происходит с распространением и размером. Убедитесь, что вы включили сглаживание, иначе изображение будет выглядеть блочным.

Двойной ход в действии!

Шаг 6

Теперь нам нужно создать 3-й штрих, который на самом деле представляет собой тень с жесткими краями, непрозрачность равна 100, и снова волшебство происходит с распространением и размером. Установите расстояние в соответствии с вашим изображением. Совет: Вы можете перетащить прямо в документ, чтобы установить расстояние и угол.

Ча! Граффити выглядит хорошо!

Шаг 7

Поскольку он применяется как стиль слоя к текстовому слою, я могу изменить текст так, как мне нравится.

Шаг 8

Добавить это граффити на фотографии очень просто. Все, что вам действительно нужно сделать, это изменить режим наложения на Overlay.

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

Почему бы вам не загрузить стиль слоя для этого урока

Будьте в курсе!

CS6 Superguide

Присоединяйтесь к нашему списку, чтобы получать больше руководств и советов по Photoshop. Получите эксклюзивные учебные пособия, скидки и бесплатные супергиды. Никакого спама, весь контент, не чаще одного раза в неделю.
Если вы есть в нашем списке, вы получите его бесплатно по электронной почте, как только он станет доступен. Если нет, зарегистрируйтесь сейчас и бесплатно получите супергид по CS6. Или нажмите на изображение ниже.