Unlimited PS Actions, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
  1. Design & Illustration
  2. Appearance Panel

Как создать реалистичный стиль печенья с помощью только одной фигуры в Адобе Иллюстратор

by
Read Time:14 minsLanguages:

Russian (Pусский) translation by Mavka (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

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

Если вы не знакомы с этой концепцией, вот еще один мой урок, где я создаю авокадо, используя только одну форму. В этот раз мы пойдем на шаг дальше и создадим текстовый эффект, поэтому вместо одного контура у нас будет семь отдельных контуров букв, но концепция останется неизменной. Эти атрибуты "все в одном", поэтому других форм, кроме семи буквы не будет; так что подготовьте себя к множеству действий в панели Оформление. Если вы заинтригованы этим вызовом и вам он нравится, давайте начнем!

Если вы изголодались по большему количеству векторной пищи, или, возможно, в вашей жизни нужны текстовые эффекты, обязательно ознакомьтесь по возможности с Envato Market. Вы непременно найдете там то, что искали.

Активы урока

Для завершения урока вам понадобятся следующие активы:

1. Начнем новый проэкт

Запустите Иллюстратор и перейдите к Файл > Новый, чтобы открыть пустой документ. Введите имя файла, настройте размеры, выберите Пиксели как Единицы и Цветовой режим как RGB. Убедитесь, что нет галочки выровнять новые объекты по пиксельной сетке.

Затем перейдите в меню Редактирование > Установки > Основные и установите Перемещение курсора на 1 рх, и перейдите к Единицам измерения, чтобы убедиться, что они установлены, как на следующем рисунке. Обычно я работаю с этими настройками, и они помогут вам в течение всего процесса рисования.

open new illustrator documentopen new illustrator documentopen new illustrator document

2. Подготовим буквы

Шаг 1

Возьмите инструмент Текст (Т) и напишите "BISCUIT" на монтажной области с помощью шрифта Geist Knt, размером 140 pt. Также установите Трекинг для выбранных букв на 200, чтобы создать больше места между буквами.

Пока текст выделен, выберите Разобрать оформление в меню Объект и Разгруппируйте (Shift-Ctrl-G). Выберите все отдельные буквы и взгляните на панель Оформление. Ваши буквы состоят из контуров или составных контуров? Если ответ - составные контуры, тогда отправьтесь в меню Объект > Составной контур > Отменить.

type the biscuit texttype the biscuit texttype the biscuit text

Шаг 2

Сосредоточимся на букве "B". Возьмите инструмент Перо (P) и нарисуйте треугольник из трех точек, опираясь на референс (1). Переместите треугольник в правую сторону буквы "C". Сделайте копию этого треугольника для буквы "U" и затем разместите сверху.

Выберите букву "C" вместе с треугольником и нажмите Минус верхний в панели Обработка контуров. Повторите то же самое для буквы "U" (3).

modify the biscuit textmodify the biscuit textmodify the biscuit text

3. Создадим узор печенья.

Шаг 1

Используйте инструмент Эллипс (L) и Прямоугольник (M) чтобы нарисовать прямоугольник и круг, разместите круг поверх прямоугольника. Пользуйтесь указанными размерами, чтобы конечный результат прекрасно вписался в величину букв (1).

Теперь выберите обе формы и нажмите Пересечение в панели Обработка контуров. Залейте полученную форму цветом на ваш выбор (2). Наконец, нарисуйте прямоугольник между двумя опорными точками основы (3).

Сгруппируйте (Ctrl-G) обе формы и назовите группу "большой угол".

create the big corners of biscuitcreate the big corners of biscuitcreate the big corners of biscuit

Шаг 2

Далее, нарисуйте круг размером 16 х 16 px инструментом Эллипс (L). Используйте Прямое выделение (А), чтобы выбрать опорную точку внизу и нажмите Delete на клавиатуре.

С помощью инструмента Прямое выделение (A), перетащите выделение двух конечных точек и перейдите в меню Объект> Контур> Соединить (Ctrl-J) (2). В результате мы получим полукруг (3). Нарисуйте новый прямоугольник 16 x 7 px у основания (4), после чего выберите обе формы и нажмите Соединение на панели Обработка контуров.

Залейте полученную форму цветом на ваш выбор (5).

create biscuit edge patterncreate biscuit edge patterncreate biscuit edge pattern

Шаг 3

Перетащите форму из предыдущего шага на панель Кисти и выберите Новая узорчатая кисть. В окне Параметры узорчатой кисти, введите название новой кисти, оставив другие настройки как есть, и нажмите ОК.

save biscuit edge pattern brushsave biscuit edge pattern brushsave biscuit edge pattern brush

Шаг 4

Давайте вернемся к буквам. Выберите группу "большой угол" и сделайте кучу копий сначала. Вращайте их, и разместите по одной из них в каждом углу буквы "I", как показано крупным планом. Следуя примеру, сделайте то же для других букв. Разместите "большой угол" на внешних углах букв, но не на всех из них, потому что это будет слишком.

arrange the big corners of biscuitarrange the big corners of biscuitarrange the big corners of biscuit

Шаг 5

Сосредоточимся на букве "I". Возьмите Перо (P) или Отрезок линии (\) и нарисуйте прямую линию между каждым "большим углом", двигаясь вдоль границ букв. Обведите эти четыре пути узорчатой кистью Края печенья, сохраненной вами ранее. Оставьте Толщину Обводки на 1 pt.

Если вашу кисть перевернуто (волны изнутри, а не снаружи), тогда с выделенным контуром дважды щелкните на обводке кисти в панели Оформление, чтобы открыть окно Параметры узорчатой кисти и поставить флажок на Зеркальное отражение по ширине.

apply the biscuit edge pattern brushapply the biscuit edge pattern brushapply the biscuit edge pattern brush

Шаг 6

Сфокусируйтесь на букве "В". Нарисуйте три прямые пути между "большими углами", слева, вверху и внизу. Придайте им 1 pt Обводки с помощью узорчатой кисти Края печенья и отразите по необходимости.

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

create biscuit edge for Bcreate biscuit edge for Bcreate biscuit edge for B

Шаг 7

Проследив за последовательностью изображений, создайте край печенья для остальной части буквы. Примените ко всем путям 1 pt Обводки, использовав узорчатую кисть Края печенья, и не забудьте отразить, если необходимо.

create biscuit edge for the letterscreate biscuit edge for the letterscreate biscuit edge for the letters

Шаг 8

Прежде чем мы продолжим, приблизьте каждую букву, и проверьте их на предмет пустых участков между обводкой, как показано крупным планом. Если они есть, возьмите Прямое выделение (A) и двигайте опорные точки ближе друг к другу, чтобы заполнить пустые места.

make adjustments to biscuit edgemake adjustments to biscuit edgemake adjustments to biscuit edge

Шаг 9

Выберите один из обведенных путей и перейдите к меню Выделить > По общему признаку > С одинаковой толщиной линий. В результате Иллюстратор выделит все пути для вас. Выберите Разобрать оформление в меню Объект, чтобы превратить обводку в фигуры.

expand biscuit edge pattern brushexpand biscuit edge pattern brushexpand biscuit edge pattern brush

Шаг 10

Выделите все фигуры, которые составляют букву "B" и нажмите Соединение в панели Обработка контуров, чтобы превратить все в одну фигуру. То же повторите для оставшихся букв.

Прежде чем вы продолжите, в панели Слои убедитесь, что новые буквы и пути не является составными контурами. Иначе перейдите в меню Объект> Составной контур> Отменить.

create the biscuit letterscreate the biscuit letterscreate the biscuit letters

4. Создадим графический стиль печенья.

Шаг 1

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

Заполните все буквы указанным цветом, после чего перейдите в Эффект > Стилизация > Внутреннее свечение. Примените показанные настройки, и нажмите ОК.

apply inner glow to lettersapply inner glow to lettersapply inner glow to letters

Шаг 2

Пока все буквы выделены, перейдите в панель Оформление и нажмите Добавить новую заливку, для того, чтобы добавить новую заливку над первой. Используйте тот же цвет; затем перейдите в меню Эффект> Текстура> Текстуризатор и примените параметры, показанные ниже. Примените к заливке Режим наложения Умножение и 25% Непрозрачности.

create the biscuit texturecreate the biscuit texturecreate the biscuit texture

Шаг 3

Пока буквы выбраны, нажмите Добавить новую заливку и перетащите ее ниже в панели Оформление. Используя указанный цвет примените Эффект> Исказить и Трансформировать> Трансформировать. Примените Переместить По вертикали 2 px и нажмите OK.

create the biscuit thicknesscreate the biscuit thicknesscreate the biscuit thickness

Шаг 4

С все еще выбранными буквами Добавьте новую заливку в нижней части панели Оформление и используйте указанный цвет. Затем перейдите к Эффект > Исказить и Трансформировать > Трансформировать и примените 4 px Переместить По вертикали.

make the biscuit thickermake the biscuit thickermake the biscuit thicker

Шаг 5

Теперь выберите 0,5 pt белой Обводки (хотя в визуальных целях я использовала красную) и примените дискретную кисть Ink Splats которую вы можете найти в Меню библиотеки кистей> Художественный> Художественный_Чернила. Дважды щелкните в панели Оформление на мазке кисти, чтобы открыть окно Параметры дискретной кисти и измените параметры, на показанные ниже.

Как вы можете видеть на картинке, всплески проходят по краю букв, и это не то, чего нам хотелось бы. Далее мы это исправим.

add white splats for texture on biscuitadd white splats for texture on biscuitadd white splats for texture on biscuit

Шаг 6

Выберите букву "B", а также атрибут Обводки на панели Оформление. Теперь перейдите в меню Эффект> Преобразовать в фигуру> Прямоугольник и установите Ширину на 85 px и Высоту на 110 px. Так мы принудим букву "B" (только обводку, а не форму целиком) превратиться в прямоугольник, меньший по размеру чем сама буква; следовательно, мазок кисти будет небольшим и будет сосредоточен в центре буквы, а не возле краев.

Примените этот же эффект к другим буквам, но учтите, что размер прямоугольника зависит от формы каждой буквы. Те же размеры, 85 x 110 px, сработают для букв "C" и "U", но для буквы "I" нужен более тонкий прямоугольник размером примерно 15 x 110 px. Используйте 70 х 110 px для буквы "S" и 50 х 110 px для буквы "T".

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

convert brush stroke to rectangleconvert brush stroke to rectangleconvert brush stroke to rectangle

Шаг 7

Сбавьте Непрозрачность до 15% для этого атрибута Обводки, и на данный момент эффект печенья должен выглядеть как на следующем изображении.

create texture on biscuitcreate texture on biscuitcreate texture on biscuit

Шаг 8

Добавьте Новую обводку над предыдущей на панели Оформление. Используйте черный цвет, установите значение Ширины на 0,5 pt, а затем снова примените дискретную кисть Ink Splats. Откройте окно Параметры дискретной кисти и измените настройки для каждой буквы, как показано ниже.

add black splats for texture on biscuitadd black splats for texture on biscuitadd black splats for texture on biscuit

Шаг 9

Теперь мы собираемся заставить черные всплески оставаться внутри букв, как ранее.

Выбирая одну букву за раз, а, также, атрибут черной обводки на панели Оформление, перейдите в меню Эффект> Преобразовать в фигуру> Прямоугольник. Для размеров прямоугольника используйте те же значения обводки белой кистью, поскольку, если они сработали там, они сработают и тут. После того, как вы закончите, установите Режим наложения на Перекрытие и уменьшите Непрозрачность до 20%.

На этом этапе мы хорошо поработали с текстурой, и все, что вам необходимо, это маленькие отверстия на поверхности печенья.

convert black stroke to rectangleconvert black stroke to rectangleconvert black stroke to rectangle

Шаг 10

Количество отверстий зависит от формы и размера каждой буквы. Давайте начнем с буквы "I" поскольку она самая маленькая и это будет проще вначале.

Пока буква "I" остается выделенной, добавьте Новую заливку и перетащите ее в верхнюю часть панели Оформление. Используйте черно-коричневый радиальный градиент; Затем перейдите к Эффект> Преобразовать в фигуру> Эллипс и примените показанные настройки. Это заставит этот атрибут Заливки превратиться в крошечный эллипс в центре буквы размером 4 х 3 px.

create the first hole on biscuitcreate the first hole on biscuitcreate the first hole on biscuit

Шаг 11

С выделенной буквой "I" и последним атрибутом Заливки, перейдите в Эффект> Исказить и Трансформировать> Трансформировать и примените 10 px Переместить По горизонтали. В результате, крошечный эллипс будет немного перемещен вправо.

move the first hole on biscuitmove the first hole on biscuitmove the first hole on biscuit

Шаг 12

С выделенной буквой "I" и последним атрибутом Заливки, выберите Эффект> Стилизация> Тень и примените этот эффект дважды, используя настройки, показанные ниже.

apply effects to biscuit holeapply effects to biscuit holeapply effects to biscuit hole

Шаг 13

Пока последний атрибут Заливки выделен, в панели Оформление внизу справа выберите Создать дубликат выбранного объекта. В результате вы получите второе крошечное отверстие, но на данный момент они друг над другом. Разверните новый атрибут Заливки сверху, откройте окно эффекта Трансформировать и измените настройки Переместить По горизонтали с 10 px на -10 px.

create the second hole on biscuitcreate the second hole on biscuitcreate the second hole on biscuit

Шаг 14

Теперь выберите два атрибута Заливки (два крошечных отверстия) и снова примените Создать Дубликат выбранного объекта. В результате вы получите два новых атрибута Заливки вверху (два новых отверстия), но сейчас они совпадают, так что вам нужно изменить параметры эффекта Трансформировать.

Разверните новые атрибуты Заливки, откройте окно Трансформировать и введите -22 px в поле Переместить По вертикали. Сохраните то же значение По горизонтали, поскольку вы просто хотите переместить два новых отверстия на 22 px вверх.

create the second row of holes on biscuitcreate the second row of holes on biscuitcreate the second row of holes on biscuit

Шаг 15

Выберите два последних атрибута Заливки и примените Создать дубликат выбранного объекта снова, чтобы получить два новых отверстия. Откройте окно эффекта Трансформировать и измените параметр Переместить По вертикали с -22 px до -45 px для обоих отверстий.

create the third row of holes on biscuitcreate the third row of holes on biscuitcreate the third row of holes on biscuit

Шаг 16

Теперь выберите первые два атрибута Заливки (первые два отверстия) и дублируйте их. Разверните два новых атрибута Заливки, откройте окно эффекта Трансформировать и введите 25 px в поле Переместить По вертикали для обоих.

create the forth row of holes on biscuitcreate the forth row of holes on biscuitcreate the forth row of holes on biscuit

Шаг 17

Выберите два последних атрибута Заливки и дублируйте их, чтобы получить два новых отверстия. Разверните два новых атрибута Заливки, откройте окно эффекта Трансформировать и измените параметр Переместить По вертикали с 25 px до 50 px для обоих. Это последние два отверстия, и на данный момент буква "I" готова. Мы добавим тень позже в этом уроке.

create the last row of holes on biscuitcreate the last row of holes on biscuitcreate the last row of holes on biscuit

Шаг 18

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

Пока буква "B" остается выделенной, добавьте Новую заливку над уже существующими и используйте тот же черно-коричневый радиальный градиент.  Для эффектов Эллипс, Трансформировать и Тень используйте те же параметры, показанные ранее для первого отверстия на букве "I".

create the first biscuit hole for Bcreate the first biscuit hole for Bcreate the first biscuit hole for B

Шаг 19

Дублируйте этот атрибут Заливки (первое отверстие) дважды, а затем откройте эффект Трансформировать и измените параметр Переместить По горизонтали, на указанный. В результате вы получите две другие отверстия слева.

create the first row of holes on Bcreate the first row of holes on Bcreate the first row of holes on B

Шаг 20

Выберите первые три атрибута Заливки (три отверстия) и снова выберите Создать дубликат выбранного объекта. Разверните новые атрибуты Заливки в верхней части экрана, откройте эффект Трансформировать и измените параметр Переместить По вертикали с 0 px до -22 px для всех трех отверстий. Это позволит переместить их на 22 px вверх.

create the second row of holes on Bcreate the second row of holes on Bcreate the second row of holes on B

Шаг 21

Снова выберите первые три атрибута Заливки и примените Создать дубликат выбранного объекта. На этот раз измените настройки Переместить По вертикали с 0 px до -45 px, чтобы переместить новую строку отверстий наверх.

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

create the other biscuit holes on Bcreate the other biscuit holes on Bcreate the other biscuit holes on B

Шаг 22

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

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

create the last two biscuit holes on Bcreate the last two biscuit holes on Bcreate the last two biscuit holes on B

Шаг 23

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

create the biscuit holes on other letterscreate the biscuit holes on other letterscreate the biscuit holes on other letters

Шаг 24

Последнее, что мы сделаем - это добавим тень. Выберите первую букву и посмотрите на панель Оформление. Добавьте Новую заливку сверху и используйте черный цвет. Пока атрибуты заливки остаются выделенными, ходите в Эффект> Исказить и Трансформировать> Трансформировать и введите в Переместить По вертикали размер 4 px. Теперь перейдите в Эффект> Стилизация> Тень и примените этот эффект три раза.

После завершения, повторите то же для других букв.

add shadow to lettersadd shadow to lettersadd shadow to letters

Здесь настройки для трех эффектов Тень.

drop shadow settingsdrop shadow settingsdrop shadow settings

Шаг 25

Текстовый эффект печенья теперь готов. Если вы перейдете в Просмотр> Контуры, вы можете увидеть формы букв, и что там нет других форм. Все атрибуты находятся в том же контуре.

final biscuit stylefinal biscuit stylefinal biscuit style

5. Сохраним графический стиль печенья.

Вы можете сохранить стиль печенья для будущего использования. Выберите одну из букв и нажмите Новый стиль графики на панели Стили графики. Введите имя вашего стиля и нажмите ОК.

Вы можете применять этот стиль печенья к другим формам, но вам понадобится сделать несколько изменений чтобы переставить позиции отверстий, так как все формы разные. Для этого, откройте эффекты Трансформировать под каждым атрибутом Заливки и измените настройки перемещения По горизонтали и По вертикали, чтобы сместить отверстия на верные места. Это все.

save and apply the biscuit stylesave and apply the biscuit stylesave and apply the biscuit style

Отличная работа! Мы закончили!

Панель Оформление полна магии, если вы знаете, как полностью использовать ее потенциал. Я надеюсь, что вам понравился этот урок так же, как мне его создание. Я всегда открыта для сложных задач.

Не забудьте показать мне свое создание этого текстового эффекта печенья, потому что мне бы очень хотелось увидеть вашу работу.

final biscuit text effectfinal biscuit text effectfinal biscuit text effect
One subscription.
Unlimited Downloads.
Get unlimited downloads