Как нарисовать иллюстрацию маркерной доски в Adobe Illustrator. Создание реалистичной надписи мелом

В этом уроке мы будем создавать эффект текста , написанного мелом на школьной доске. Для этого будем использовать простую технику с использованием градиента, кистей и текстуры. Я буду работать в Adobe Illustrator CS5, но подойдёт и предыдущая версия CS4, т.к. именно с этими версиями совместима текстура, которую мы будем использовать.

Шаг первый

С помошью инструмента Rectangle Tool (m) создаем прямоугольник. Это будет доска, на которой мы будем писать мелом.

Шаг второй

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

Шаг третий

На этом шаге нам понадобится текстура, которую можно скачать . Распакуйте архив, откройте файл и скопируйте текстуру поверх нашего прямоугольника. После этого измените цвет текстуры на белый, режим наложения на Overlay и показатель Transparency на 10.

Шаг пятый

Мы почти закончили создавать доску. Осталось только добавить ей немного естественной потертости. Для этого создадим кисть (Illustrator CS5) со следующими параметрами:

• Type = Round Fan
• Size = 10 mm
• Bristle Length = 150
• Bristle Density = 75
• Bristle Thickness = 50
• Paint Opacity = 15
• Stiffness = 100

После этого берем инструмент Paintbrush Tool (b) и наносим хаотичные мазки.

Шаг шестой

Доска готова и теперь мы можем на ней писать. Набираем необходимый текст любым шрифтом. Убираем заливку и даем контуру белый цвет.

Текстуры дерева являются одними из самых востребованных среди дизайнеров. В этом уроке мы узнаем как всего за несколько минут самому сделать деревянную текстуру в 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

Создайте новый документ размером 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» и залейте им прямоугольник. Пошлите прямоугольник на задний план.

Мы уже не раз создавали векторный текст имитирующий мел в 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.

Этот урок научит вас, как использовать кисть и её настройки для создания текста с эффектом мела.

Материалы для урока:

Откройте изображение с доской в фотошоп и с помощью инструмента Рамка (Crop Tool) избавьтесь от углов с чёрным фоном.

Идём в меню Изображение - Коррекция - Уровни (Image -> Adjustments -> Levels) и ставим для теней значение 20, для полутонов значение 0,88. Это сделает изображение темнее.

Теперь идём в меню Изображение - Коррекция - Цветовой тон/Насыщенность (Image -> Adjustments -> Hue/Saturation) и изменим значение насыщенности до 10. Это сделает цвета более яркими.

Напишите текст шрифтом Blokletters Potlood с размером 270 пт.

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

Откройте палитру настроек кисти в меню Окно - Кисть (Window -> Brush), а затем измените параметры, как показано ниже:

Форма отпечатка кисти (Brush Tip Shape)

Выберите кисть Chalk 44

Динамика формы (Shape Dynamics)

Двойная кисть (Dual Brush)

Выберите кисть Spatter 14

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

Кликните правой кнопкой мыши по слою с текстом и выберите пункт Создать рабочий контур (Create Work Path).

Активируйте инструмент Стрелка (Direct Selection Tool), установите цвет переднего плана на белый, и создайте новый слой поверх всех слоев, затем дайте ему название “Chalk”.

Щелкните правой кнопкой мыши по рабочему контуру и выберите опцию Выполнить обводку контура (Stroke Path).

В диалоговом окне обводки в выпадающем меню выберите инструмент Кисть (Brush). Проверьте чтобы был снят флажок с параметра Имитировать нажим (Simulate Pressure).

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

Обведём каждую букву второго слоя с надписью другим цветом. Для этого щёлкните правой кнопкой мыши по слою с текстом и выберите пункт Создать рабочий контур (Create Work Path). Теперь, используя инструмент Стрелка (Direct Selection Tool), протяните и выделите первую букву в слове для того чтобы выделить её опорные точки.

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

Цвета используемые в уроке:

S - #f5989d
c - #fff799
h - #bd8cbf
o - #fdbd89
o - #79bcde
l - #82ca89

Чтобы улучшить цветопередачу, последнее что мы сделаем, это добавим корректирующий слой. Нажмите иконку выбора корректирующего слоя внизу палитры слоёв и выберите коррекцию Карта градиента (Gradient Map).

Убедитесь, что корректирующий слой находится поверх всех слоев в палитре, а затем измените ему режим наложения на Умножение (Multiply) и уменьшите Непрозрачность (Opacity) до 40%.

В градиенте используем два цвета - слева # c3ae99 и справа # FFFFFF .

И вот наш текст на школьной доске готов!

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