Надписи на асфальте для фотошопа
В этом уроке по фотошопу Вы узнаете как сделать надпись на асфальте. К слову, такая техника подходит не только для асфальта, но и для рисунков на других аналогичных грубых рельефных поверхностях.
Все используемые в этом уроке текстуры и кисти можно скачать здесь.
Перетаскиваем текстуру асфальта или другой аналогичной грубой поверхности в рабочее пространство редактора и в новом слое создаем любую текстовую надпись (шрифт используйте любой, по своему усмотрению). Надпись должна располагаться поверх текстуры асфальта.
Если хотите, чтобы надпись была строго по центру, то воспользуйтесь советами по выравниванию в фотошопе.
Поверх надписи копируется текстура изношенной краски.
Теперь выбираем слой с краской и создаем Обтравочную маску (кликаем правой кнопкой по слою и выбираем Создать обтравочную маску ). Результат работы – текстура краски в виде букв поверх асфальта.
Создание текстуры поверх краски
Надпись на асфальте должна выглядеть максимально реалистично. Это значит, что краска должна как бы обтекать рельефные участки. Для этого выделяем слой с надписью, кликаем правой кнопкой и выбираем команду Растрировать текст .
Теперь добавьте слой-маску к только что растрированному слою с надписью. Для этого нажмите кнопку маски в нижней части палитры. Рядом со слоем должен появиться новый белый прямоугольник:
Переходим к слою с текстурой асфальта. Удерживая клавишу Ctrl , нажмите на его миниатюру, чтобы создать выделение. В результате вокруг текстуры должны бегать «марширующие муравьи». Скопируем выделение — Ctrl+C . Затем нажмите на созданный ранее прямоугольник маски-слоя. Перейдите во вкладку Каналы (если ее нет, включите через панель управления Окно-Каналы ).
Обычно там всегда четыре канала, но если вы все сделали правильно, то должен появиться пятый в самом конце списка. Значок видимости канала выключен. Включите его (что такое значки видимости и как их включать). Затем выделите этот канал и нажмите Ctrl+V , чтобы вставить то, что скопировали.
В итоге все должно покраснеть:
Переходим обратно на палитру слоев и снимаем выделение — Ctrl+D . Покраснение должно исчезнуть, а надпись станет блеклой с выделяющейся текстурой асфальта:
Получилось тускловато. Надо теперь проделать ту же операцию но с текстурой желтой краски .
Итак, выделяем с помощью Ctrl слой с краской и копируем ее Ctrl+C . Опять нажимаем на миниатюру слоя-маски (и плевать, что там уже не белый квадратик, а вставлен асфальт). Переходим в Каналы . Появился пятый канал, включем глазик видимости, выделяем этот канал и вставляем Ctrl+V .
И вновь все покраснело, но немного иначе:
Вернитесь обратно на палитру слоев и снимите выделение Ctrl+D .
Примечание: Если покраснение не исчезает, просто нажмите на какой-нибудь слой и оно пропадет.
В итоге получился вот такой рисунок (надпись) на асфальте:
Потом можно добавить еще яркости и всему изображению в целом. Получилось вот так:
В качестве вывода стоит сказать, что данный способ создания надписей на асфальте или на бетонных стенах является достаточно распространенным. Более того, он также и очень точно отражает действительность: в реальности краска на рельефной потертой поверхности выглядит именно так.
Несколько лет назад при работе с рекламным буклетом меня очень выручил этот урок создания "надписи на асфальте", сейчас я о нем вспомнила, захотела поделиться им с вами, но увы на моем Photoshop CS5 его воспроизвести не удалось :(. Возможно надо было лишний раз перезагрузить компьютер, или же я что-то подзабыла.. Сейчас я воспользовалась оригинальными картинками для этого урока, но обязательно позже его перепишу, итак:
1. Создадим асфальт, для этого откроем новый документ. Зальем слой нейтральным серым цветом. Применим фильтр Add Noise: Filter (Фильтр) > Noise (Шум) > Add Noise (Добавить шум) со значениями параметра около 50%, чтобы добавить монохроматический шум.
2. Откроем окно Curves (Кривые) (Ctrl+M) чтобы откорректировать глубину и контраст нашего будущего асфальта
Полученное изображение должно быть достаточно темным.
Примерный результат команды Curves:
3. Скопируем слой. Создадим новый alpha-канал в палитре Channels и вставим в него полученную копию. Немного размоем новый канал: Filter (Фильтр) > Blur (Размытие) > Gaussian Blur (Размытие по Гауссу).
4. Работая с палитрой Channels (Каналы), создадим еще один alpha-канал, выберем белый в качестве основного цвета и введем текст нашей дорожной надписи, нажмем клавишу Enter. Снимем выделение.
5. После небольшого размытия применим фильтр Median: Filter (Фильтр)> Noise (Шум) > Median (Медиана).
6. Щелкнем на значке канала, удерживая клавишу Ctrl, чтобы создать выделенную область. Применим фильтр Mezzotint (Filter > Pixelate > Mezzotint), выбрав из раскрывающего списка Type (Тип) значение Grainy Dots (Зернистые точки). Щелкнем на кнопке ОК.
7. Еще раз щелкнем на значке канала, удерживая клавишу Ctrl, чтобы активировать выделенную область. Вернемся к палитре Layers (Слои), создадим новый слой, выберем желтый цвет в качестве основного, после чего зальем выделенную область.
8. Используем инструмент Eraser (Резинка) для разрыва краев букв,а затем инструмент Burn (Затемнение) (при выбранном значении Highlights параметра Range на панели Options), чтобы изменить интенсивность краки дорожной разметки, сделать ее более реалистичной.
Изменим режим наложения слоя на Hard Light (Жесткий свет) и уменьшим его непрозрачность на 90%.
9. Далее постараемся добавить освещение асфальта фарами авто, для этого объединим слои и применим фильтр Lighting Effects: Filter (Фильтр) > Render (Визуализация) > Lighting Effects (Световые эффекты) выбрав стандартный стиль Five Lights Up в качестве начальной точки. Удалим три источника, щелкнув на белой точке и нажав клавишу Delete. Перетащим лучи от оставшихся двух источников света таким образом, чтобы осветить буквы надписи. Используем канал Alpha1 (исходная поверхность дороги) в качестве канала текстуры.
10. Выполним команду Edit > Fade Lighting Effects, чтобы уменьшить полученный эффект.
В этом уроке вы узнаете, как создать реалистичный гранж эффект текста, нарисованного краской на асфальте, используя несколько простых приемов.
Сложность урока: Легкий
В этом уроке вы узнаете, как создать реалистичный гранж эффект текста, нарисованного краской на асфальте, используя несколько простых приемов. Вы можете использовать этот эффект как для текста, так и для векторных форм и силуэтов.
Для начала вам нужно загрузить исходные материалы:
Создайте новый документ с белым фоном размером: 4368x2912 пикс. Напишите любой текст, используя инструмент Текст (Type Tool). Введите любое слово, используя Шрифт silex.
Далее кликните на панели инструментов по иконке Create new Layer и поместите на этот слой текстуру с асфальтом (Asphalt Texture) и опустите слой с асфальтом ниже слоя с текстом:
Создаем новый слой выше всех и располагаем на нем текстуру с желтой краской, эта текстура должна полностью закрывать ваш текст.
Щелкните правой кнопкой мыши на слой с Желтой краской и выберите Создать Обтравочную Маску (Create Clipping Mask). В результате вы увидите, что текстура располагается только по форме теста.
Добавьте слой-маску (add layer mask) для Текстового Слоя (если у вас не растрирован текст то сделаете это: кликните правой кнопкой мыши по тексту и выберите Растрировать слой (Rasterize Layers)).
Возвращаемся к слою с асфальтом (Asphalt Texture Layer - первая текстура). удерживая клавишу " CTRL и нажмите на миниатюру слоя, чтобы получить выделение
Нажмите CTRL+C, чтобы скопировать изображение.
Далее возвращаемся к текстовому слою. Щелкните на миниатюре Маски Слоя и выберите вкладку Каналы, у вас появится новый канал под синим каналом. Активируем новый канал нажимаем на его миниатюрной картинке, делаем видимым и нажимаем Ctrl+V и все) далее переходим к остальным слоям и нажимаем Ctrl+D.
Далее процесс аналогичен, только теперь используете текстуру с желтой краской (( yellow asphalt paint Texture)
Переходим к основным слоям и нажимаем Ctrl+D (что бы снять выделение) и смотрим на результат, у вас должно получится как на скриншоте ниже:
Далее нажимаем на слой-маску текстового слоя и используете инструмент Brightness/Contrast (Яркость/Контрастность) чтобы увеличить контрастность изображения и установите значения как показано ниже:
Вы можете также добавить некоторые брызги красок. Сделайте такие же шаги, как и с буквами чтобы получить похожий результат как на картинке ниже. Фигуры краски можно скачать здесь:
Вы можете добавить эффект тени и света. Можете добавить след от ботинка.
Примечание переводчика: Я не стал прогонять Фигуры стрелок и ботинка через каналы, просто поменял их режимы наложения на Overlay.
Разнообразить наше изображение можно объединив белую краску с желтой, а также смешать некоторые фигуры с текстом. Например, вы можете использовать простой путь из линий или некоторые стрелки (векторные фигуры).
Начнём пожалуй с загрузки шрифта в фотошоп. В уроке будем использовать шрифт Silex Stencil (трафаретный), который прекрасно подходит для работы с Photoshop .
Создайте новый документ с белым фоном. Используя инструмент Текст (Type Tool) и шрифт Silex набираем нужный нам текст :
Далее откроем в фотошопе изображение текстуры с асфальтом (Asphalt Texture) и поместим её ниже слоя с текстом (при помощи инструмента трансформирования CTRL+T я подогнал изображение текстуры под размер исходного документа):
Теперь открываем изображение с желтой краской и помещаем её выше всех слоёв (эта текстура должна полностью закрывать вашу надпись). Примерно так как на скриншоте :
Растрируем текст (щелкните правой кнопкой мыши на слое с текстом и в выпвшем меню выбирите Растрировать текст - Rasterize Layers). Переходим на слой с Желтой краской и кликнув правой кнопкой мыши выберим Создать Обтравочную Маску (Create Clipping Mask). В результате мы увидим,что текстура краски осталась только на текте:
Добавляем слой-маску (add layer mask) для слоя с текстом :
Переходим к слою с асфальтом и удерживая клавишу СTRL жмем по миниатюре слоя, чтобы получить выделение . Нажмимаем CTRL+C, чтобы скопировать выделение. Далее возвращаемся к слою с текстом. Кликаем по миниатюре Маски Слоя и переходим во вкладку Каналы. У нас появился новый канал в самом низу под синим каналом. Делаем его видимым и жмем Ctrl+V, далее возвращаемся в панель с остальными слоями и снимаем выделение Ctrl+D.
Проделаем ту же операцию, только теперь используя текстуру с желтой краской (( yellow asphalt paint Texture)
Переходим к основным слоям и нажимаем Ctrl+D (что бы снять выделение) и смотрим на результат, у вас должно получится как на скриншоте ниже:
Далее нажимаем на слой-маску текстового слоя и используете инструмент Яркость/Контрастность(Brightness/Contrast) чтобы увеличить контрастность изображения и установите значения как показано ниже:
Для реалистичности можно добавить к изображению брызги краски, это векторные фигуры (как установить новые фигуры в фотошоп вы уже знаете). Проделайте те же манипуляции как и с текстом . Вот результат :
Можно поэксперементировать с добавлением теней и света . Автор добавил ещё и кисти следы от ботинка.
Еще одно улучшение: объединить белую краску с желтой краской, а также чтобы смешать некоторые формы с текстом. Вы можете использовать, например, простые линии дороги или несколько фигур векторная стрелка, вот окончательный результат для гранж краска дороге текстовый эффект сделаны в Photoshop, я надеюсь, вам понравится.
У Вас возникло желание показать результаты Ваших трудов ? Выложите свои работы на наш форум !
В данной статье сможете бесплатно скачать шрифты мела для фотошопа, которые пригодятся вам в разных дизайнерских решениях на сайтах, иллюстрациях, приложениях или даже в офлайне (например, иногда владельцы кафе оформляют меню в этом стиле). Подобный вариант с декоративным шрифтом надписи мелом также неплохо будет смотреться в полиграфии. Где бы вы его не применили, подборка ниже окажется полезной. Всего собрали около 50-ти объектов на любой вкус.
Перед тем, как перейти к рассмотрению материалов, хочется заметить, что некоторые из них изначально (в превью) могут не вызывать ощущения шрифта мела на доске. Однако если вы в качестве фона добавите подходящую текстуру, то имитацию надписи, практически невозможно будет отличить от настоящей.
Как видите, вариантов реализации текста великое множество, в частности вы смело можете использовать разные цвета для него, не обязательно белый. По стилистике решения тоже слегка отличаются — есть рукописные, жирные, строчные, заштрихованные буквы и т.п. Однако при правильной комбинации фона и шрифта мела для фотошопа сразу возникает ощущение того, что надпись сделана именно мелом, а не чем — то другим. Таков эффект его применения и восприятия. Возникающие у большинства ассоциации со школьной доской, в принципе, логичны.
Напоминаем, что скачать шрифты мелом на доске вы можете кликнув по картинке-превью, после чего попадаете на сайт-источник. А там уже ищете линк/кнопку для загрузки.
DK Crayon Crumble
Используйте эти фонты для создания различных стилизованных текстов. Они пригодятся для оформления сайтов, праздничных надписей, открыток, баннеров или плакатов. Все зависит от воплощения ваших творческих фантазий.
WC RoughTrad Bta
Return To Sender
School Book New
Chalk Hand Lettering Shaded
Universal College draft
Через некоторое время после публикации, к сожалению, шрифт стал платным, но вдруг кому-то пригодится.
Последние 3 объекта взяты с сайта Fontscafe. Там можно эти шрифты мелом скачать бесплатно и использовать в коммерческих целях, но с указанием обратной ссылки. Все материалы из статьи (как и фото, иконки) имеют авторские права, поэтому вам нужно смотреть описание или сноски на сайте-источнике. Для большинства представленных здесь фонтов допускается бесплатное применение в личных проектах. Часть из них — 100% free для любых задач.
Chalkboard by Marta van Eck
KG Second Chances
KG Ten Thousand Reasons
KG Broken Vessels Sketch
Lost In The Sound
Кстати, многие из текущих шрифтов мелом на доске перекликаются с другими подборками для фотошопа. Например, достаточно часто встречаются так называемые Sketchy шрифты с широкими заштрихованными буквами, хватает и рукописных вариантов. Как только вы добавляете соответствующий фон зеленой или черной доски, а символам задаете белый цвет — тексты сразу вызывают нужные ощущения. Теоретически, для бэкграунда можно еще попробовать разные темные текстуры, возможно, металлические или гранжевые.
Русские шрифты мелом на доске
Традиционно с кириллицей дела обстоят не лучшим образом — по сравнению с обычными латинским вариантами данных материалов в разы меньше. Удалось найти всего две официальных ссылки где можно бесплатно скачать русский шрифт мелом для фотошопа. Если вы знаете больше, присылайте в комментариях.
Опять же, если взять текстуру школьной доски и добавить один из трех вариантов ниже, то получите плюс-минус похожую по стилистике картинку.
Теоретически, можно также попробовать взять русские жирные шрифты и применить к ним определенные эффекты: немного потертости, наложить какую-то винтажную текстурку и т.п. Альтернативный вариант — платные русские шрифты мелом с кириллицей, например.
Vector HandDrawn Cyrillic Alphabet
Collection Sketchy Alphabets
Back School Chalk Text
ChalkA Alphabet Title Big
Если работает над коммерческим проектом, то почему нет.
Итого. получилось найти чуть больше 50-ти шрифтов надписи мелом на доске. Их в сети, разумеется, гораздо больше — можете просмотреть сайты-архивы по типу Dafont, 1001fonts, Fontspace и другие. Ищите по ключевику «chalk font». Присылайте интересные варианты в комментариях.
Читайте также: