В этом уроке мы будем создавать эффект текста , написанного мелом на школьной доске. Для этого будем использовать простую технику с использованием градиента, кистей и текстуры. Я буду работать в 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) и наносим хаотичные мазки.
Шаг шестой
Доска готова и теперь мы можем на ней писать. Набираем необходимый текст любым шрифтом. Убираем заливку и даем контуру белый цвет.
Этот урок научит вас, как использовать кисть и её настройки для создания текста с эффектом мела.
Материалы для урока:
Откройте изображение с доской в фотошоп и с помощью инструмента Рамка (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. Увеличьте картинку, нажмите правой кнопкой мыши и сохраните изображение.
Автор урока желает вам удачного учебного года.
Типографика, нарисованная мелом очень популярна. Однако далеко не все хорошо управляются мелом, да и школьную доску не в каждом доме найдешь.
Сегодня мы с вами будем создавать красивую типографику с реалистичным эффектом мела, используя при этом подручные средства и Adobe Photoshop/Illustrator. Для начала мы создадим сам концепт в Illustrator, затем при помощи интересной технике превратим работу в рисунок мелом.
Изюминка этого урока в том, что мы скомбинируем работу за компьютером и рисование руками. Конечно, есть способ сделать все в графических редакторах, однако добиться столь реалистичного эффекта, как в нашем уроке, удастся вряд ли.
Итак, начнем. Откройте Adobe Illustrator и создайте концепт, который хотите превратить в рисунок мелом. На этом этапе мы будем пользоваться благами ПО, которое позволяет нам применять и отменять действия, в то время как в реальной жизни, от штрихов так просто не избавиться. Введите ваш текст и выберите любимый шрифт.
Конвертируйте текст в кривые при помощи комбинации клавиш CMD/Ctrl+Shift+O, затем кликните правой кнопкой по тексту и выберите Ungroup/Разгруппировать, чтобы разделить надпись на отдельные буквы.
Растяните выделение поверх каждого слова или группы слов и нажимайте CMD/Ctrl+G, чтобы сгруппировать их.
Выделите первую группу слов и в меню выберите Effect > Distort & Transform > Free Distort/Эффект>Исказить и трансформировать>Произвольное искажение. Поднимите нижнюю правую точку выше, чтобы исказить группу текста.
Вообще-то подобное искажение текста обычно нежелательно, являясь своеобразной дизайнерской бестактностью, но в нашем случае работа будет практически рукописной, поэтому мы можем себе это позволить. Масштабируйте текст по вертикали, чтобы ужать его немного.
Возьмемся за следующую группу из нашего текста. Выделите ее и в меню выберите Object > Transform > Shear/Объект>Трансформировать>Наклон. Укажите угол, совпадающий с углом скоса предыдущей группы.
Нарисуйте тонкий прямоугольник под текстом и примените к нему трансформацию Shear/Наклон, повторив угол наклона текста. Дублируйте прямоугольник и обрамите им вторую группу текста. Инструментом Pen/Перо нарисуйте треугольник, чтобы заполнить пустое пространство в правом верхнем углу.
Выделите третью группу текста и в меню выберите Effect > Apply Free Distort/Эффект>Применить произвольное искажение, чтобы применить эффект с теми же параметрами, что мы выбрали ранее.
Временно измените цвет текста, чтобы вам было удобнее подогнать третью группу под размеры первой.
Откройте палитру Appearance/Оформление и кликните по по эффекту Free Distort/Произвольное искажение. Переместите верхнюю левую точку так, чтобы создать параллель прямоугольнику. Затем переместите нижнюю правую точку обратно на оригинальную позицию.
Вы можете дублировать любые элементы, нарисованные ранее, и отражать их, чтобы добиться симметричного дизайна и заполнить пустые места.
Масштабируйте следующую группу слов, чтобы она совпала по ширине с нашим дизайном. Расположите группу так, чтобы между ней и предыдущим текстом было такое же расстояние как между остальными элементами.
Завершаем концепт последним словом, масштабированным и выровненным по остальным элементам. При помощи узких прямоугольников сделайте дизайн интереснее.
Нарисуйте прямоугольник вокруг работы. Укажите ему отсутствие заливки и обводку в 7pt. Копируйте (CMD/Ctrl+C) прямоугольник, затем вставьте копию на передний план (CMD/Ctrl+F). Удерживая ALT, масштабируйте копию, сделав ее меньше. Снизьте толщину обводки до 2pt.
Выделите одно из самых больших слов, копируйте его (CMD/Ctrl+C), затем укажите объекту тонкую белую обводку с закругленными углами и выравнивание внутрь.
В меню выберите Object > Expand Appearance/Объект>Разобрать оформление, затем кликните по группе правой кнопкой и выберите Ungroup/Рагруппировать, чтобы разбить группу на отдельные символы.
Поочередно выделяйте каждую букву и нажимайте кнопку Minus Front/Минус в палитре Pathfinder/Обработка контура. После этого у вас должны остаться только внутренние части букв.
Сгруппируйте все что осталось, смените для них цвет обводки на белый, затем нажмите CMD/Ctrl+B, чтобы вставить на задний план ранее скопированный текст.
Где-нибудь в документе нарисуйте маленький черный квадрат. Нажмите CMD/Ctrl+C и CMD/Ctrl+F, чтобы создать копию, затем уменьшите копию в половину оригинала (включите Smart Guides/Быстрые направляющие, чтобы сделать все точно). Укажите меньшей фигуре белый цвет заливки, выделите оба объекта и перетащите их в палитру Swatches/Образцы.
Примените этот образец к внутренним фрагментам букв, чтобы придать им крутой винтажный стиль.
Используйте этот прием, чтобы оформить при желании и другой текст, также сделайте последние штрихи для завершения дизайна.
Выделите все элементы типографики, сгруппируйте их и снизьте opacity/непрозрачность примерно до 15%.
Распечатайте работу. Дизайн должен быть еле виден на бумаге, благодаря сниженной непрозрачности. Теперь найдите старый добрый карандаш.
Небольшими штрихами начинайте аккуратно обрисовывать работу. Этот шаг позволит нам сделать из электронного эффекта работу в стиле выполнения от руки.
После того как вы обвели всю работу, отсканируйте ее. Работа выглядит так же, как созданная в Illustrator, но теперь она выглядит как нарисованная от руки из-за неточных, неэлектронных штрихов. Кто же знает что вы ее обрисовывали? Мы никому не расскажем)
Откройте отсканированную работу в Adobe Photoshop и в меню выберите Image > Adjustments > Invert/Изображение>Коррекция >Инвертировать. После этого выберите в меню Image > Adjustments > Desaturate/Изображение>Коррекция>Обесцветить, чтобы убрать цветность из работы.
В меню выберите Image > Adjustments > Levels/Изображение>Коррекция>Уровни и переместите бегунок светлых оттенков к началу гистограммы.
18 июня Adobe выпустили обновления для некоторых инструментов Adobe Illustrator CC 2014. В число этих инструментом вошло и Перо / Pen Tool. В этом уроке вы узнаете как создать типографический эффект и заодно сможете попробовать обновленный инструмент. Мы будем создавать надпись, написанную мелом.
1. Работа с инструментом Pen/Перо
Шаг 1
Начнем с создания эскиза инструментом Pencil /Карандаш (N).
Напишите им слово, к которому хотите применить эффект. В примере это слово «Serenity». Сгруппируйте (Control-G)
все контуры, составляющие надпись, копируйте (Control-C)
и вставьте (Control-V)
текст, чтобы быстро создать некий объем слову.
Если у вас нет планшета, или вы не привыкли рисовать непосредственно в ПО, вы можете написать текст от руки и импортировать его в Иллюстратор, или просто использовать готовый шрифт.
Шаг 2
Заблокируйте набросок в палитре Layers/Слои . Под слоем с наброском инструментом Rectangle/Прямоугольник (M) нарисуйте большую черную фигуру, покрывающую рабочую область.
Начнем обводить буквы. Инструментом Pen/Перо (P) обведите первую букву. Смотрите ниже как работает этот инструемнт.
Шаг 3
Продолжайте обводить буквы. Обращайте внимание на то, как соединяются буквы, или как перетекают одну в другую.
Шаг 4
Если вам нужно поправить точки или узлы в тексте, возьмите инструмент Direct Selection/Прямое выделение (A).
Шаг 5
Когда вы закончите обводить все буквы, выделите все составляющие элементы и в палитре Pathfinder/Обработка контура нажмите на иконку Unite/Объединить .
Обратите внимание как удобно работает обновленный инструмент Pen/Перо:
2. Применяем текстуру в палитре Оформление
Шаг 1
Выделите текст и в меню выберите Effect > Sketch > Reticulation/Эффект>Эскиз>Ретикуляция. Настройте эффект как показано ниже.
Шаг 2
В палитре Appearance/Оформление смените Opacity/Непрозрачность на 44 % . Добавьте новую заливку (Add a New Fill ) и переместите ее под заливку с эффектом. Укажите обводку толщиной в 1pt белого цвета и Opacity/Непрозрачности в 51% .
Шаг 3
Теперь создадим паттерн, который применим ко второй заливке текста. Инструментом Paintbrush/Кисть (B) круглой каллиграфической кистью толщиной в 1pt нарисуйте штриховку, как на картинке ниже.
Выделите штриховку и в палитре Pattern Options/Настройки узора выберите Make a New Pattern/Создать новый узор . В режиме редактирования узора той же кистью заштрихуйте и края паттерна, чтобы не оставалось больших пустых областей.
Шаг 4
Укажите обводке текста кисть похожую на штрих мела в палитре Brushes/Кисти.
3. Текстура для фона
Шаг 1
Примените легкий радиальный градиент к прямоугольнику, что служит нам фоном. Используйте инструмент Gradient/Градиент (G) и палитру Gradient/Градиент , чтобы настроить цвета, положение, и прозрачность.
В примере использован градиент от черного цвета на полной непрозрачности к черному цвету на нулевой непрозрачности.
Шаг 2
Создайте для прямоугольника еще одну заливку, ниже предыдущей, и примените к ней эффект Reticulation/Ретикулция с параметрами как показано ниже.
Третья заливка (еще ниже) — это небольшой градиент от белого к белому на нулевой непрозрачности к 100% непрозрачности. Четвертая заливка (в самом низу) просто черный цвет .
Мы уже не раз создавали векторный текст имитирующий мел в 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.
Перевод — Дежурка
