Стиль надпись мелом для фотошопа
Этот урок научит вас, как использовать кисть и её настройки для создания текста с эффектом мела.
Примечание автора: в уроке используется Photoshop CS6, но вы можете использовать версию CS3 и выше.
Материалы для урока:
Шаг 1
Откройте изображение с доской в фотошоп и с помощью инструмента Рамка (Crop Tool) избавьтесь от углов с чёрным фоном.
Идём в меню Изображение – Коррекция – Уровни (Image -> Adjustments -> Levels) и ставим для теней значение 20, для полутонов значение 0,88. Это сделает изображение темнее.
Теперь идём в меню Изображение – Коррекция – Цветовой тон/Насыщенность (Image -> Adjustments -> Hue/Saturation) и изменим значение насыщенности до 10. Это сделает цвета более яркими.
Шаг 2
Напишите текст шрифтом Blokletters Potlood с размером 270 пт.
В уроке используется надпись на двух слоях для того, чтобы продемонстрировать использование более одного цвета, но вы можете написать свой текст на одном слое.
Шаг 3
Откройте палитру настроек кисти в меню Окно – Кисть (Window -> Brush), а затем измените параметры, как показано ниже:
Форма отпечатка кисти (Brush Tip Shape)
Выберите кисть Chalk 44
Динамика формы (Shape Dynamics)
Двойная кисть (Dual Brush)
Выберите кисть Spatter 14
Шаг 4
Сделайте слои с текстом невидимыми, нажав на иконку глаза рядом с ними.
Кликните правой кнопкой мыши по слою с текстом и выберите пункт Создать рабочий контур (Create Work Path).
Активируйте инструмент Стрелка (Direct Selection Tool), установите цвет переднего плана на белый, и создайте новый слой поверх всех слоев, затем дайте ему название “Chalk”.
Щелкните правой кнопкой мыши по рабочему контуру и выберите опцию Выполнить обводку контура (Stroke Path).
В диалоговом окне обводки в выпадающем меню выберите инструмент Кисть (Brush). Проверьте чтобы был снят флажок с параметра Имитировать нажим (Simulate Pressure).
Теперь ваш контур будет обведён меловой кистью. Нажмите клавишу Enter, чтобы избавиться от контура. Имейте в виду, что для различных размеров шрифтов могут потребоваться различные размеры кисти.
Шаг 5
Обведём каждую букву второго слоя с надписью другим цветом. Для этого щёлкните правой кнопкой мыши по слою с текстом и выберите пункт Создать рабочий контур (Create Work Path). Теперь, используя инструмент Стрелка (Direct Selection Tool), протяните и выделите первую букву в слове для того чтобы выделить её опорные точки.
Установите цвет переднего плана на любой понравившийся вам цвет, имейте в виду, что светлые тона будут выглядеть лучше. Сделайте обводку, как вы это делали раньше, для всех букв, но пока не закончите с последней буквой не нажимайте клавишу Enter.
Цвета используемые в уроке:
Шаг 6
Чтобы улучшить цветопередачу, последнее что мы сделаем, это добавим корректирующий слой. Нажмите иконку выбора корректирующего слоя внизу палитры слоёв и выберите коррекцию Карта градиента (Gradient Map).
Убедитесь, что корректирующий слой находится поверх всех слоев в палитре, а затем измените ему режим наложения на Умножение (Multiply) и уменьшите Непрозрачность (Opacity) до 40%.
И вот наш текст на школьной доске готов!
А версию ниже можно использовать для странички Facebook. Увеличьте картинку, нажмите правой кнопкой мыши и сохраните изображение.
Автор урока желает вам удачного учебного года.
Сегодня мы узнаем, как в Фотошоп порисовать мелом на школьной доске.
Сложность урока: Легкий
Сегодня мы узнаем, как создать в Photoshop, с помощью текстуры и стилей слоев, знак – классная доска с эффектом текста, написанного мелом.
1. Создаем фон
2. Создаем «облачко» с помощью пера
Выбираем инструмент Pen Tool (P) (Перо) и рисуем форму Speech Bubble («Облачко»).
Чтобы создать изогнутую линию, нажимаем и, удерживая кнопку мыши, и перетаскиваем.
Чтобы превратить гладкий переход в резкий, зажимаем Alt и кликаем по якорной точке.
3. Создаем текстуру классной доски
Шаг 1
Шаг 2
Идем в меню Filter – Noise – Add Noise (Фильтр – Шум – Добавить шум) и устанавливаем значение Amount (Эффект) на 50%.
Шаг 3
Идем в меню Filter – Blur – Motion Blur (Фильтр – Размытие – Размытие в движении) и устанавливаем значения Angle (Угол) на 50 и Distance (Смещение) 19 пикселей.
Шаг 4
Идем в меню Layer – New Adjustment Layer – Levels (Слои – Новый корректирующий слой – Уровни) и устанавливаем следующие значения:
Шаг 5
Выделяем слой Chalkboard Texture (Текстура классной доски) и корректирующий слой Levels (Уровни), кликаем правой кнопкой мыши и выбираем Merge Layers (Объединить слои). Переименовываем новый слой в Chalkboard Texture (Текстура классной доски).
Шаг 6
Нажимаем Ctrl+J, чтобы дублировать слой Chalkboard Texture (Текстура классная доска) и называем его Chalkboard Text Texture (Текстура текста).
4. Создаем форму
Шаг 1
Скрываем слой Chalkboard Text Texture (Текстура текста). Кликаем правой кнопкой по слою Chalkboard Texture (Текстура классная доска) и выбираем Create Clipping Mask (Создать обтравочную маску).
Шаг 2
Нажимаем Ctrl+J, чтобы дублировать слой Speech Bubble Shape («Облачко») и называем его Chalkboard (Классная доска). Переименовываем первоначальный слой в Wooden Frame (Деревянная рамка).
Шаг 3
Кликаем правой кнопкой по слою и выбираем Convert to Smart Object (Преобразовать в смарт объект).
5. Создаем текстуру дерева
Шаг 1
Нажимаем Shift+Ctrl+N, чтобы создать новый слой. Называем его Wooden Texture (Текстура дерева).
Шаг 2
Идем в меню Filter – Render – Fibers (Фильтр – Рендеринг – Волокна), чтобы создать текстуру дерева.
Шаг 3
Кликаем правой кнопкой по слою Wooden Texture (Текстура дерева) и выбираем Create Clipping Mask (Создать обтравочную маску).
Шаг 4
Выделяем слои Wooden Frame (Деревянная рамка) и Wooden Texture (Текстура дерева) и перемещаем их выше всех остальных слоев.
Шаг 5
К слою Wooden Frame (Деревянная рамка) добавляем следующие стили слоя:
6. Создаем классную доску с деревянной рамкой
К слою Chalkboard (Классная доска) добавляем следующие стили слоя:
7. Добавляем надпись мелом
Шаг 1
Шаг 2
К текстовому слою «Снова в школу» добавляем следующие стили слоя:
Шаг 3
Также можете поменять цвет обводки по своему вкусу.
Шаг 4
Кликаем правой кнопкой мыши по текстовому слою «Снова в школу» и выбираем Convert to Smart Object (Преобразовать в смарт объект). Режим наложения устанавливаем Screen (Экран).
Шаг 5
Чтобы создать более реалистичный эффект мела, делаем видимым слой Chalkboard Text Texture (Текстура текста). Кликаем правой кнопкой мыши по этому слою и выбираем Create Clipping Mask (Создать обтравочную маску) для текстового слоя «Снова в школу». Также устанавливаем режим наложения на Multiply (Умножение).
Шаг 6
Добавляем корректирующий слой Levels (Уровни), чтобы сделать цвета ярче. Кликаем правой кнопкой мыши по корректирующему слою и выбираем Create Clipping Mask (Создать обтравочную маску).
8. Добавляем мелки
Шаг 1
С помощью инструмента Pen Tool (Перо) создаем мелок.
Шаг 2
Чтобы создать реалистичный мелок, добавляем следующие стили слоя:
В этом уроке вы научились создавать эффект мела в Photoshop с нуля, используя фильтры и корректирующие слои. Я надеюсь, вам понравился этот урок.
Этот эффект мела является частью экшна Chalk and Chalkboard Photoshop Actions в моем портфолио на Envato Market .
В принципе, для создания текстов в данном стиле можно использовать готовые шрифты мелом на доске. Однако, если перед вами стоит задача сделать какие-то оригинальные надписи или даже рисунки, то тут пригодятся специальные кисти мела для Фотошопа, о которых сегодня пойдет речь. В конце статьи будет видео с демонстрацией как их можно использовать.
Chalk Brush For Any Situation
11 Sketched Arrows Brushes Featuring Chalk Effect Texture
Chalk Pastel Brushes
Dave’s Natural Oil Chalk Brushes Version
Chalk Scribble PS Brushes
Photoshop Chalk Brush Effect
Photoshop Chalk Brush
Set-01 — Charcoal and Chalk
15 Chalk Shapes Photoshop Stamp Brushes
Vector Black Grunge Brushes
Кроме классических форматов материалов в сети можно найти векторные или разноцветные кисти мелки для рисунков на доске, что также пригодятся в работе. Некоторые архивы в посте вместо обычных линий содержат скетчевые объекты, что смотрятся весьма гармонично и эффектно. Их мы также решили добавить в подборку.
Chalk Illustrator Brushes
Grunge Collection Free Vector
Ribbons and Arrows Collection in Chalkboard Style
Blackboard Background With Sketches
Large Collection of Arrows Drawn With Chalk
Valentine’s Doodle Brush Set
School Dayz Sketches Brushes
Chalk Text Effect PSD
Напоследок посмотрите парочку лучших премиальных вариантов по теме.
Big Set Of Chalk Brushes
Set Brush Stroke, Handdrawn Vector
Pastel Chalk Brushes
Textures Of Chalk And Coal
Mega Set Of Chalk Brushes
Кстати, если вы не замечали, в самом Фотошопе кисти мелом на доске доступны изначально в базовом наборе по умолчанию. Вот небольшое видео, демонстрирующее работу с ними.
Итого в статье подобрали чуть более 20-ти материалов. Если встречали еще какие-то интересные реализации в данной нише – присылайте ссылки, дополним статью.
В данной статье сможете бесплатно скачать шрифты мела для фотошопа, которые пригодятся вам в разных дизайнерских решениях на сайтах, иллюстрациях, приложениях или даже в офлайне (например, иногда владельцы кафе оформляют меню в этом стиле). Подобный вариант с декоративным шрифтом надписи мелом также неплохо будет смотреться в полиграфии. Где бы вы его не применили, подборка ниже окажется полезной. Всего собрали около 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». Присылайте интересные варианты в комментариях.
Шрифты
В данной статье сможете бесплатно скачать шрифты мела для фотошопа, которые пригодятся вам в разных дизайнерских решениях на сайтах, иллюстрациях, приложениях или даже в офлайне (например, иногда владельцы кафе оформляют меню в этом стиле). Подобный вариант с декоративным шрифтом надписи мелом также неплохо будет смотреться в полиграфии. Где бы вы его не применили, подборка ниже окажется полезной. Всего собрали около 50-ти объектов на любой вкус. Перед тем,…
30+ красивых шрифтов для Word (+как установить шрифты)
Встречайте очередное масштабное пополнение раздела красивых шрифтов где я собираю все соответствующие подборки. В отличии от других заметок с материалами здесь дополнительно будут представлены пояснения по процессу их установки в Ворде (и заодно Фотошопе). Заметка пригодится пока я работаю над обновлением поста о красивых русских шрифтах. Решил немного развить эту тему т.к. на прошлую статью часто заходят из поиска по фразам похожим на «красивые шрифты…
Кириллические граффити шрифты
На страницах блога ранее уже была подборка с оригинальными бесплатными graffiti fonts, и стало интересно как много удастся найти отечественных наработок. К сожалению, выполнить эту задачу, зачастую не так легко, как хотелось, поскольку их количество весьма ограничено. Отличный тому пример — тематические русские машинописные шрифты, где материалов на латинице в три раза больше. Тем не менее, подобные наборы для наших дизайнеров достаточно востребованы. Поэтому в процессе поиска…
Рождественские шрифты, новогодние русские шрифты
Не смотря на то, что новый год прошел, итоги 2014 подведены я все же решил опубликовать еще одну новогоднюю тематическую заметку — про шрифты. Будет вам «заначка» материалов на следующий 2016. Однако перед тем как перейти непосредственно к новым рождественским шрифтам настоятельно рекомендую заглянуть в прошлую мою статью по этой же теме за 2010 год. Там представлено более 10-ти разных красивых вариантов, которые также будут вам…
Граффити шрифты бесплатные и красивые (graffiti fonts)
В принципе, искать любые шрифты в интернете не так и сложно — просто заходите в Google и вбиваете нужное ключевое слово. Советую делать это на английском, так как вариантов найдете намного больше. Например для граффити шрифтов запрос будет «graffiti fonts» или еще лучше «free graffiti font», то есть бесплатные граффити шрифты. В итоге в поисковой выдаче будут представлены разные ссылки на крупные порталы со шрифтами…
Каллиграфические шрифты для элегантных сайтов
Каллиграфические шрифты являются идеальным решением для дизайнов сайтов или любых других сфер, где нужно подчеркнуть элегантность продукта. К новомодным трендам на этот год они, вроде как, не относятся, тем не менее, имеют своих поклонников и пользуются неплохой популярностью. Я вот использовал подобные каллиграфические шрифты для оформления одного из своих блогов. Найдя недавно в сети пост про калиграфические шрифты, решил некоторыми экземплярами с вами поделиться. В…
Классные новые шрифты для дизайнеров
На популярном англоязычном сайте SmashingMagazine опубликовали недавно подборку классных свежих шрифтов, который вы можете скачать бесплатно. Я просмотрел некоторые варианты — не все из них показались мне интересным, а кое-где и бесплатно скачать не получилось. В общем, опубликую только доступные, остальные вы сможете найти в оригинале статьи. Для каждого шрифта будет размещено небольшое описание и ссылка на источник, скачать бесплатно все 6 экземпляров — Medio,…
80 красивых русских шрифтов
Пообещал в комментариях на днях опубликовать немного русских шрифтов. Сказано — сделано. Действительно, до сих пор я как-то стороной обходил кириллические шрифты, не попадались мне стоящие работы. До сегодняшнего дня. Обновление 11.11.2015: Недавно вышел новый пост про красивые шрифты для Ворда который содержит 30 классных материалов + информацию о их установке. Плюс вы можете глянуть обзор сайтов каталогов русских шрифтов онлайн. Представляю вам подборку из 80-ти…
10 схематических (sketchy) шрифтов для веб-дизайнеров
Признаться, не знаю как точно переводится слово sketchy, google подсказывает, что «схематический», хотя это вроде как-то не звучит. Вообще, классный словарик сделали разработчики, теперь там есть звуковое произношение слов — все то, что раньше было изюминкой серьезных коммерческих программных продуктов вот так просто доступно в сети с любого компьютера. И это потрясающе:) Найти схематические шрифты хорошего качества не так просто, блоггер Janko в своем проекте…
10 красивых рукописных шрифтов
Представляю вашему внимаю список из 10-ти рукописных шрифтов, которые просто нельзя пропустить. Уверен, вы полюбите их, и будете частенько обращаться к ним во многих своих веб-дизайнерских проектах. Для некоторых шрифтов прилагается краткое описание возможного использования. Чтобы скачать тот или иной шрифт, просто кликните по картинке — там ссылка на источник. 1. Analgesics Analgesics — жирный шрифт, который хорошо подходит для различных заголовков. 2. Sketch Rockwell…
Читайте также: