Создание реалистичной надписи мелом. Пишем мелом на доске в фотошоп

Текстуры дерева являются одними из самых востребованных среди дизайнеров. В этом уроке мы узнаем как всего за несколько минут самому сделать деревянную текстуру в Illustrator.

Шаг 1.

Создадим новый документ (Ctrl+N) , в нем нарисуем квадрат (М, рисуем с зажатым shift) , уберем обводку, если была и зададим какой-нибудь коричневый цвет заливки, например R-168 G-124 B-79. Создадим дубликат нашего квадрата (Ctrl+C, Ctrl+F). Зажав Alt равномерно сожмем его сначала по вертикали, а потом по горизонтали примерно как показано на рисунке. Зальем его, скажем, 40% серым из панели заливок.

Шаг 2.

Выделим наш серый прямоугольник. Зайдем в Эффекты - Эскиз - Тушь (Effect - Sketch - Graphic Pen). Выставим следующие значения:

Длина штриха (Stroke Length) = 15
Тоновый баланс (Light/Dark Balance) = 2
Направление штрихов (Stroke Direction) = Vertical

Получим примерно такое:

Шаг 3.

Не снимая выделения идем в меню Объект - Развернуть вид (Object - Expand Appearance). Далее произведем трассировку нашего пока еще растрового рисунка. Идем в меню Объект - Быстрая трассировка - Параметры трассирования (Object - Live Trace - Tracing Options). Выберем следующие значения:

Режим (Mode): Black and White
Подгонка контура (Path Fitting): 1px
Минимальная площадь (Minimum Area): 1px
Главный угол (Corner Angle): 1
Игнорировать белый (Ignore White): ставим галочку

И вот что у нас вышло:

Нажмем кнопку Развернуть (Expand) в панели свойств объекта и перейдем к завершающему шагу.

Шаг 4. Наводим красоту

Выделим наш преобразованный прямоугольник и растянем его по углам квадрата (V). Следите за тем, что бы линии не выходили за границу квадрата, иначе текстура выйдет не ровной. Зададим цвет линий, например R-99 G-69 B-42. Ого, уже, можно сказать, готовая текстура. Но мы добавим еще кое-что. А именно - завитушки. Перво-наперво воспользуемся инструментом Деформация (Wrap tool, Shift+R). Поставим небольшие значения на свой вкус и поводим по нашим линиям, что бы они слегка изогнулись. Далее возьмем инструмент Воронка (Twirl tool) в том же наборе. Опять-таки поставим небольшие значения, желательно, что бы кисть вышла овальной. Нажимаем где-нибудь и наслаждаемся закручиванием наших линий в деревянные колечки.

Мы уже не раз создавали векторный текст имитирующий мел в Adobe Illustrator. И сегодняшний урок посвящен этому. Однако этот пример отличается от предыдущих тем, что в нем мы будем работать над очень правдоподобным фоном для нашего текста. Сам же текст мы создадим быстро и легко. Это отличный вариант для тех, кому нужны скорые результаты или же для тех, кто ищет способ создания реалистичной текстуры школьной доски в векторе.

Результат

Шаг 1

Для начала создайте новый документ и нарисуйте прямоугольник при помощи инструмента Rectangle/Прямоугольник (M). Это будет наша школьная доска.

Шаг 2

Залейте только что созданные прямоугольник радиальным градиентом от зеленого к темно-зеленому цвету.

Шаг 3

Не снимайте выделения с прямоугольника и откройте выпадающее меню в палитре Appearance/Оформление. В меню выберите Add New Fill/Добавить заливку. Укажите новой заливе светло-серый цвет.

Шаг 4

Выделите светло-серую заливку в палитре Appearance/Оформление и в меню выберите Effect > Texture > Grain/Эффект>Текстура>Зерно. Настройте параметры эффекта как показано ниже. Теперь разберите (expand) эту заливку с эффектом, в палитре Appearance/Оформление кликните по настройкам Opacity/Непрозрачности и выберите в качестве Blending mode/Режима наложения Multiply/Умножение.

Если вам важно, чтобы работа была в чистом векторе, вы можете скачать подобную текстуру в векторном формате . Она была создана автором специально для урока.

Шаг 5

Для выполнения следующего шага вам нужно скачать файл Vector-Mill-Sample.ai . Это текстура бетонной стены. Откройте файл, скопируйте (Command + C) большую текстуру и вставьте (Command + V) ее поверх нашей доски. Укажите текстуре белый цвет заливки и Blending mode/Режим наложения Overlay/Перекрытие. Затем снизьте Opacity/Непрозрачность до 10 в палитре Transparency/Непрозрачность.

Шаг 6

Мы почти закончили с текстурой доски. Осталось лишь добавить немного глубины при помощи Bristle Brush/Кисти из щетины. Если вы пользуетесь версией программы старше CS5, у вас не получится выполнить этот шаг как показано в уроке. Вместо этого вы можете использовать одну из акварельных кистей .

Если у вас версия CS5 и новее, нажмите кнопку New Brush/Новая кисть в нижней части палитры Brush/Кисть и выберите New Bristle Brush/Новая кисть из щетины. В диалоговом окне укажите параметры, указанные на третьей картинке ниже.

После этого возьмите инструмент Paintbrush/Кисть (B) и рисуйте поверх нашей доски, имитируя следы, которая оставляет тряпка после вытирания доски.

Шаг 7

Возьмите инструмент Type/Текст (T) и введите ваш текст. В примере использован шрифт Vitesse Book, но вы можете выбрать любую гарнитуру. После того, как текст будет написан, укажите ему отсутствие обводки и заливки. Так будет проще работа над текстом в палитре Appearance/Оформление в следующих шагах.

Шаг 8

В выпадающем окне в палитре Appearance/Оформление выберите Add New Stroke/Новая обводка и укажите новой обводке белый цвет.

Шаг 9

Теперь вернитесь к документу Vector-Mill-Sample.ai и выделите кисти. Это кисти из набора March Crate’s . Копируйте обе кисти и вставьте их в наш документ. Теперь они должны быть доступны в палитре Brushes/Кисти. Выделите вашу белую обводку и выберите кисть VM-Conté-01-Closed. Чтобы сделать ее потолще, увеличьте толщину обводки до 2 pt.

Шаг 10

Теперь нам нужен последний исходник из файла Vector-Mill-Sample.ai . Это заливка паттерном. Копируйте прямоугольник с заливкой паттерном и вставьте его в наш документ. В палитре Swatches/Образцы появится паттерн, поэтому вы можете сразу же удалить сам прямоугольник.

Выделите текст и укажите ему в качестве заливки VM-WC-Paper-Seamless-Rev-White в палитре Appearance/Оформление.

Результат

В качестве финальных штрихов вы можете создать несколько линий и других декоративных элементов и применить к ним кисть VM-Conté-01-Open.

Перевод — Дежурка

Сегодня попробуем сделать зеленую школьную доску и написать на ней мелом текст. Как всегда, за идею урока спасибо Vectips , который реализовал ее в иллюстраторе. Я же ее воплотила в жизнь с помощью фотошопа. В этом уроке есть несколько любопытных простых приемов, которые дают потрясающий эффект. Сначала поколдуем над доской, придав ей немного потертый вид в прямом и переносном смысле. Потом напишем текст и с помощью режима наложения «Растворение» (Dissolve) будем добиваться эффекта надписи, сделанной мелом. Потом немного украсим надпись.

Шаг 1.
Создаем в фотошопе новый документ, заливаем его цветом #365722. Сразу же делаем дубликат слоя и отключаем его, он нам пригодится в 4 Шаге.

Шаг 2.
Берем большую мягкую кисть размером 250 пикселей и цветом #7a975f щелкаем в центре холста, чтобы получилось такое светлое пятно.

Шаг 3.
Теперь добавим шума. «Фильтр» (Filter) > «Шум» (Noise) «Добавить шум…» (Add Noise) со значениями, как на рисунке ниже.

Шаг 4.
Устанавливаем цвет переднего фона — белый, цвет заднего фона — #365722. Теперь воспользуемся вспомогательным дубликатом слоя из Шага 1. Включаем вспомогательный слой и применяем к нему «Фильтр» (Filter) > «Эскиз» (Sketch) > «Линогравюра» (Stamp) с настройками, как на рисунке ниже.

Шаг 5.
Получился такой эффект.

Шаг 6.
Теперь выделяем белый цвет и отключаем вспомогательный слой.

Шаг 7.
На новом слое заливаем выделение белым и меняем режим наложения на «Мягкий свет» (Soft Light). Снижаем прозрачность слоя до 10%.

Шаг 8.

Теперь выберем кисть. В стандартном наборе «Thick Heavy Brushes» я нашла подходящую кисть. Нажимаем F5 и в открывшемся диалоговом окошке выбираем закладку «Форма отпечатка кисти». Ставим настройки, как на рисунке ниже.

Шаг 9.
В закладке «Двойная кисть» ставим следующие установки.

Шаг 10.
В закладке «Динамика цвета» ставим следующие установки.

Шаг 11.
Теперь на панели под верхним меню ставим для кисти значения «Непрозрачность» — 50% и «Нажим» — 20%. После этого на новом слое делаем несколько штрихов кистью.

Шаг 12.
Меняем режим наложения слоя со штрихами на «Мягкий свет» (Soft Light). Снижаем прозрачность слоя до 65%.

Шаг 13.
Теперь шрифтом Book Antiqua, размер 90 пикселей, пишем слово «ДИЗАЙН».

Шаг 14.
Растрируем текст. Меняем режим наложения слоя на «Растворение (Затухание)» (Dissolve). Прозрачность слоя снижаем до 95%.

Шаг 15.
Два раза щелкаем по слою и открываем стиль слоя, закладка «Обводка» (Stroke). Устанавливаем следующие параметры.

Шаг 16.
Должно получиться так.

Шаг 17.
Щелкаем по слою правой кнопкой мыши и выбираем «Сгруппировать в новый смарт-объект» (Convert to Smart Object). А уже после этого применим к тексту «Фильтр» (Filter) > «Размытие» (Blur) > «Размытие по Гауссу…» (Gaussian Blur) со значением 0,3 пикселя.

Шаг 18.
Теперь пишем еще несколько произвольных слов и, используя Шаги с 14 по 17, добиваемся эффекта надписи, сделанной мелом.

Финал
Теперь добавляем декоративные однопиксельные полоски и, с помощью Шагов с 14 по 17, добиваемся для них такого эффекта, как на рисунке ниже.

В этом Коротком Уроке мы рассмотрим использование инструментов Деформации (Wrap Tool) и Кисть из Щетины (Bristle Brush), чтобы создать иллюстрацию со школьной доской. Начнем!

Шаг 1

Нарисуйте прямоугольник размером 700 рх х 500 рх. Пока он выделен зайдите в Объект > Контур > Создать Параллельный Контур (Object > Path > Offset Path). Задайте - 30.

Шаг 2

Увеличьте изображение, чтобы вы лучше видели углы, и используйте инструмент Отрезок Линии (/) (Line Segment), чтобы нарисовать линию под углом 45 градусов. Вы можете использовать Быстрые Направляющие (Smart Guides) себе для подмоги. Линии должны заходить за прямоугольники в обоих направлениях, как на рисунке ниже. Сделайте это для каждого угла.

Шаг 3

Выберите все и нажмите кнопку Разделение (Divide) на панели Обработка Контуров (Pathfinder).

Теперь возьмите инструмент Выделение Группы (Group Selection tool) и щелкните раз на линиях внутри улов. Так вы выберите все накладывающиеся контуры сразу. Нажмите Удалить.

Шаг 4

Чтобы сымитировать волокна дерева, нарисуйте длинный прямоугольник. Удерживая нажатой клавишу Alt, потяните вниз, чтобы создать копию. А теперь нажмите Command/Ctrl-D несколько раз, чтобы создать несколько копий.

Шаг 5

Далее выделите все линии и используйте Эффект > Исказить и Трансформировать > Трансформировать (Effect > Distort & Transform > Transform). Введите около 40% по вертикальной шкале, и отметьте галочку Случайно (Random).

Результат получится как на рисунке ниже. Зайдите в Объект > Разобрать Оформление (Object > Expand Appearance).

Шаг 6

Дважды щелкните на инструменте Деформация (Shift-R) (Warp tool), чтобы войти в меню настроек. Введите параметры, как на картинке ниже.

Теперь проведите поверх линий пару раз, чтобы деформировать их, как на картинке ниже.

Шаг 7

Выберите инструмент Воронка (под инструментом Деформация). Чтобы изменить форму удерживайте нажатой Option/Alt пока вы тяните. Сдалайте узкий овал, и сделайте легкую закрутку в нескольких местах, как на картинке ниже.

Масштабируйте, все "древесные волокна" вместе, уменьшив блок объектов.

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

Шаг 8

Сделайте копию рамки и отставьте ее в сторону. Разгруппируйте, а затем поместите один сегмент поверх деревянной текструы. Выберите и элемент рамки и текстуру, а затем нажмите Объект > Обтравочная Маска > Создать (Object > Clipping Mask > Make). Сделайте это для каждого элемента рамки. Результат должен выглядеть, как на картинке ниже.

Повторите этот процесс с другими тремя сторонами рамки. Вот как выглядят вместе четыер элемента рамки, смотрите ниже.

Шаг 9

Возьмите копию рамки и зайлете ее светлым градиентом, для дерева, как показано ниже.

Поместите рамку с текстурой, поверх рамки с градиентом. Наша рамка закончена.

Шаг 10

Нарисуйте прямоугольник, размером чуть больше чем внтурення часть рамки. Залейте его голубовато-зеленым и отправьте за рамку.

Шаг 11

В верху в панели Кисти, щелкните по иконке Новая Кисть. Выберит Кисть из щетины (Bristle Brush), а затем введите параметры, как показано ниже.

Шаг 12

Нарисуйте линии в форме Z, используя Перо. Выберите Кисть со Щетиной в панели Кистей, и применти ее к контуру. Возможно вам захочется увеличить размер линий, чтобы получить более абстрактную текстуру.

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

Заключение

Вы можете добавить тени, придав тем самым объем, и кончено можете написать свой текст на доске. На рисунке ниже шрифт Chalkduster - системный шрифт для MacOS.

В этом уроке мы научимся создавать меню, написанное на доске мелом в Adobe Illustrator. Мы будем использовать базовые инструменты программы, а также эффекты. Это простая техника, которая дает весьма симпатичные результаты. Усвоив ее вы сможете создать любой дизайн в похожем стиле. А выполнение урока наверняка принесет вам массу удовольствия! Особенно часть с рисованием мелками.

Результат

Шаг 1

Создайте новый документ размером 600x600px и в цветовом режиме (Color Mode) CMYK.

Создайте прямоугольник при помощи инструмента Rectangle/Прямоугольник (M). Залейте его любым цветом.

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

В меню выберите Effect > Stylize > Drop shadow/Эффект>Стилизация>Тень и укажите следующие параметры:

Шаг 2

Поместите в документ текстуру дерева, которую можно скачать Возьмите копию прямоугольника, который мы создали в предыдущем шаге и поместите его над текстурой. Выделите текстуру и прямоугольник и в меню выберите Objects > Clipping Mask > Make/Объект>Обтравочная маска>Создать.

Вот что должно получиться:

Копируйте (Ctrl/Cmd + C) текстуру дерева и вставьте ее на передний план (Ctrl/Cmd + F). Укажите ей режим наложения Multiply/Умножение.

Шаг 3

Создайте новый прямоугольник цвета #2A2A2A. Дублируйте его и на время забудьте о копии.

Укажите прямоугольнику обводку толщиной в 3,5pt и укажите обводке градиент как показано ниже.

Не снимая выделения с объекта, выберите в меню Effect > Stylize > Inner Glow/Эффект>Стилизация>Внутреннее свечение и настройте эффект как показано ниже.

Выделите копию прямоугольника, разместите ее на переднем плане, затем в меню выберите Effect > Artistic > Rough Pastel/Эффект>Имитация>Пастель. Настройте эффект следующим образом:

Укажите прямоугольнику с текстурой режим наложения Soft light/Мягкий свет и Opacity/Непрозрачность в 30%. Затем в меню выберите Effect > Stylize > Inner Glow/Эффект>Стилизация>Внутреннее свечение и укажите настройки как показано ниже:

Шаг 4

Возьмите инструмент Paintbrush/Кисть (B) и нарисуйте произвольные линии на доске, как показано ниже. Выделите все штрихи, выберите в меню Brush Library > Artistic > Artistic_Watercolor/Галерея кистей>Имитация>Акварель, и примените кисть Watercolor Stroke 6.

Укажите кисти толщину в 1pt и Opacity/Непрозрачность в 2%.

Шаг 5

В этом шаге мы создадим текст. В примере использован шрифт «Myriad Pro» для слова «Menu». Укажите тексту цвет заливки #FFFFFF и толщину обводки в 1pt.

Откройте галерею кистей Artistic_ChalkcharcoalPencil (Уголь и мел) и примените к обводке кисть Pencil – Feather, убрав Opacity/Непрозрачность до 80%.

Копируйте (Ctrl/Cmd + C) слово «Menu» и вставьте копию на задний план (Ctrl/Cmd + B). Укажите тексту цвет #000000 и чуть сместите его вправо.

Повторите предыдущий шаг для слова «Healthy food», только на этот раз выберите кисть «Pencil».

Копируйте (Ctrl/Cmd + C) слова «Healthy food» и вставьте их на задний план (Ctrl/Cmd + B). Укажите тексту цвет #00ADEF и чуть сместите его вправо.

Возьмите инструмент Star/Звезда и нарисуйте три звездочки. Затем инструментом Pen/Перо (P) нарисуйте две линии.

Укажите обводке линий и звезд цвет #FFFFFF и примените к обводке кисть «Pencil – Thick».

Шаг 6

Инструментом Rectangle/Прямоугольник (M) создайте прямоугольник, а инструментом Ellipse/Эллипс (L) — четыре круга по его углам, как показано на картинке ниже.

Выделите прямоугольник и четыре круга и в меню выберите Windows > Pathfinder > Minus Front/Окно>Обработка контура>Минус Верхний.

Укажите получившейся фигуре отсутствие заливки и обводку цвета #FFFFFF. Примените к обводке кисть «Pencil – Feather» и снизьте Opacity/Непрозрачность до 50%. Дублируйте фигуру и уменьшите копию. Должно получиться как на картинке ниже:

Возьмите инструмент Pen/Перо (P) чтобы создать линии как показано ниже.

Укажите им обводку цвета #FFFFFF и примените кисть «Pencil – Feather». Дублируйте это солнышко и разместите копии по всем углам доски.

Шаг 7

В этом шаге мы будем рисовать фрукты и овощи. Это просто. Возьмите инструмент Brush/Кисть (B) и рисуйте в простом схематичном стиле. Раскрашивайте овощи и фрукты при помощи цветов обводки, но не заливки. Используйте кисть «Pencil – Thickfor». Вот что примерно должно у вас получиться:

Не снимая выделения с мела, выберите в меню Effect > Stylize > Drop shadow/Эффект>Стилизация>Тень и введите следующие параметры:

Шаг 9

Теперь создадим фон. Инструментом Rectangle/Прямоугольник (M) кликните где-нибудь в рабочей области и в появившемся окне введите желаемый размер фигуры: 600 x 600 px.

В палитре Swatches/Образцы найдите Open Swatches Library > Gradients > Skintones/Открыть галерею образцов>Градиенты>Оттенки кожи. Выберите «Skintone 11» и залейте им прямоугольник. Пошлите прямоугольник на задний план.