Создание разделочной доски в adobe illustrator
Узнайте, что лучше всего делает каждый инструмент рисования, включая инструмент «Перо», «Карандаш», «Кривизна», «Кисть» и другие.
Вам понадобятся следующие файлы
Что вы узнали: Понимание различных инструментов рисования в Adobe Illustrator
В Illustrator имеется широкий набор инструментов для рисования на панели инструментов, каждый из которых позволяет создавать различные способы. В этом уроке представлены различные инструменты рисования.
Понимание, что создают инструменты рисования
Все инструменты рисования создают контуры. Пути имеют форму закрытого пути, такого как квадрат или круг, или открытого пути, как линия. Все пути — закрытые или открытые — состоят из опорных точек, которые управляют направлением и формой пути, и отрезков (или путей), которые соединяют эти опорные точки.
Инструмент «Кисть»
Инструмент «Кисть», аналогичный инструменту «Карандаш», предназначен для создания более произвольных контуров. Самое замечательное в инструменте Paintbrush заключается в том, что вы можете выбрать кисть, например, каллиграфическую или текстуру, которая будет применена к контуру, который вы рисуете.
Инструмент Blob Brush
Инструмент Blob Brush, который можно найти, нажав инструмент «Кисть» на панели инструментов, предназначен для создания заполненных составных контуров. Новые фигуры, нарисованные с помощью инструмента «Кисть-капля», будут объединены с существующими фигурами с теми же настройками внешнего вида.
Карандаш
Инструмент «Карандаш», который можно найти, нажав инструмент «Кисть» на панели инструментов, предназначен для создания более произвольных контуров, аналогично рисованию карандашом на бумаге.
Инструмент кривизна
Инструмент Кривизна — это более интуитивно понятный инструмент рисования, который дает вам возможность создавать контуры с большой точностью без переключения инструментов. С помощью инструмента Curvature вы сосредотачиваетесь на добавлении, редактировании и удалении опорных точек, чтобы управлять внешним видом пути.
Перо
Самый мощный инструмент для рисования в Illustrator — это инструмент «Перо». С помощью инструмента «Перо» вы можете создавать и точно редактировать опорные точки для создания контуров.
Доброго времени суток. А у нас снова гости - это Юлия Драч, иллюстратор и микростокер, которая научит нас рисовать деревянную текстуру в Adobe Illustrator. Встречайте новый урок на нашем блоге. Дерево - это ходовая вещь в самых разных областях дизайна. Так что лишних векторных деревяшек нам не помешает. Передаю слово Юлии, и давайте рисовать!
Всем привет! В этом уроке я хочу поделиться своим личным опытом по созданию текстур для векторных иллюстраций. А конкретнее - по рисованию деревянных поверхностей. Конечно, кто-то скажет, что это очень старая, можно сказать, даже «заслуженная» тема, в которой сложно сказать что-то откровенно новое и будет абсолютно прав! Согласна! На просторах интернета сегодня можно найти массу прекрасных уроков для создания шикарных разнообразных текстур. Но сейчас речь пойдет, строго говоря, не о полноценной деревянной текстуре как таковой, которую, например, можно выставить в своей работе в качестве крупномасштабного фона-подложки или сделать главным «действующим лицом» всей композиции. Я хочу поделиться небольшим рисовальным рецептом, если надо быстро сотворить несколько небольших деревянных деталей в основном объекте или сделать деревянную отделку фонового характера. И когда совсем нет смысла тщательно прорисовывать текстуру по объемным урокам. Если приловчиться, времени и усилий при данной технике тратится совсем не много, а результат выглядит вполне достойно. Опытные стокеры наверняка имеют свои проверенные техники на такой случай, а вот новичкам, скорее всего, пригодится.
Итак, что нам понадобится. Создаем новый документ Ctrl+N и для начала рисуем какую-нибудь прямоугольную форму средних размеров. Ее мы будем превращать в деревянную дощечку. Это тренировка, поэтому размер и масштаб выбираем наиболее удобный, чтобы с одной стороны можно было рисовать, не увеличивая поминутно для прорисовки деталей (они будут достаточно мелкими), а с другой стороны, чтобы форма полностью помещалась на экране и рука не уставала контролировать линию на большом расстоянии. У меня получился квадрат примерно 275x275 пикселей.
Далее приступим к уже довольно банальной процедуре – поиску референса. Нужен он нам будет для двух моментов:
1. Для подсматривания более-менее правдоподобного рисунка линий на деревянной поверхности.
2. Для подбора палитры цветов, которая будет убедительно «деревянной».
Как мы знаем, обработанное дерево бывает весьма разнообразным, так что подбирайте себе наиболее подходящий вариант и помещайте в документ – Файл/File → Поместить/Place → Выбрать файл с референсом текстуры. Присмотритесь к нему и, либо на глазок, либо пипеткой, возьмите средний цвет и сохраните удобным вам способом. Это будет основной цвет нашей текстуры. У меня получился вот такой. Это подойдет для светлого дерева. Еще нам понадобится цвет чуть темнее для боковых граней или затененных мест.
А также сохраните два градиента.
Градиент от белого к нашему основному цвету и от черного к основному цвету. Эти градиенты понадобятся нам для выделения освещенных и затененных мест. Они будут использоваться с режимами наложения, поэтому сразу обратите внимание, что нам нужны чистые белый и черный RGB цвета. Эту маленькую палитру можно закинуть в образцы и пользоваться оттуда, а вот мне удобно набрать столбик из небольших квадратиков и поместить его сбоку от основной работы, чтобы он всегда был перед глазами. Если поместить его на отдельный слой (обычно это слой с белым фоном), который я блокирую в процессе работы над объектом, чтобы не сдвинуть его с артборда, то пипеткой очень удобно брать цвета. Референс я удалила, поэтому на данном этапе у меня получилось вот это:
Создаем новый слой, переносим на него наш рабочий квадрат, а слой с фоном и палитрой блокируем. Теперь выбираем какой-нибудь контрастный цвет (например, черный) и кликаем инструмент Карандаш (N). Если вы не совсем дружите с этим инструментом, так как он весьма сложен в контролировании линий (особенно, если у вас, как и у меня, нет планшета и приходится рисовать мышью), ничего страшного. Нам Карандаш (N) подходит как раз своей непредсказуемостью и естественной кривизной линий. Мы будем рисовать деревянные «полосы», которые нам подойдут для рисунка текстуры. Тут у вас полная свобода творчества – вспомните референс и приступайте к рисованию.
Для более правдоподобного «деревянного» рисунка, я обычно чередую полосы двух видов – широкие, свободного контура замкнутые формы, как выделено на квадрате 2, и тонкие незамкнутые контуры, как выделено на квадрате 1. Замкнутые формы заливаем цветом, а незамкнутые линии делаем разной толщины (1-3 pt) и присваиваем им профиль ширины 2, тот, который с неравномерной толщиной по контуру. После, не забываем эти линии разобрать.
Однако, особенно не частите и не усердствуйте с разнообразием форм и прорисовыванием большого количества круглых «сучков» (достаточно одного-двух, в зависимости от величины объекта), так как текстура в данной работе будет больше угадываться и создавать ощущение дерева, чем просматриваться в деталях. И действуйте смелее - чем ваши полосы будут кривее, тем интереснее. Главное, чтобы у замкнутых толстых форм боковые контуры не соприкасались и не пересекались, иначе в последствие они у вас распадутся на несколько кусочков.
Когда поверхность заполнена узором линий и все разобрано, проводим еще две вспомогательные горизонтальные линии за пределами квадрата, но так, чтобы они захватывали все торчащие хвосты узора. Смотрим пример выше на квадрате 4. Линии нужны сверху и снизу, так как, например, в моем случае не все линии одинаково выступают за оба края. Есть такие, которые не доходят до верха из-за рисунка «сучка». Есть еще короткие линии, которые вообще нигде не выступают, они могут доставить нам впоследствии некоторое неудобство при обрезке для оформления граней. Их придется обрезать отдельно, повторяя процедуру столько раз, сколько линий не обрежется в основном контуре. Поэтому следите, чтобы этих «коротышек» было поменьше и только там, где это необходимо по узору. Вспомогательные линии разберите. Потом выделите всю нарисованную вами «полосатость», исключая сам квадрат, и в панели Обработка контуров/Pathfinder нажмите Объединить/Unite. Это нужно для более быстрой обрезки полос в последствие по контуру дощечки. У вас получится группа объектов из линий «коротышек» и составного контура. Мы получили основную заготовку. Нам ее понадобится несколько штук. Поэтому, удобно будет скопировать эту группу в панели слоев или с помощью Ctrl+F и скрыть лишние до поры до времени. Важно, чтобы копии не сместились.
Теперь возьмем одну из заготовок и обрежем ее. Для новичков напомню – копируем основной квадрат → выделяем его и составной контур (не всю группу) в нашей заготовке → в панели Обработка контуров/Pathfinder нажимаем Пересечение/Intersect.
Обрезанную группу полос заливаем основным цветом и назначаем им режим наложения Умножение/Multiply и небольшую прозрачность. Смотрите сами, как будет лучше с вашим основным цветом. Я выбрала 20%.
Теперь берем нашу следующую копию заготовки, делаем ее видимой и произвольно смещаем в сторону на некоторое расстояние от предыдущей обрезанной с прозрачностью 20%. Важно, чтобы она не перекрывала равномерно темные полоски, иначе вы просто сделаете им объем. После чего, также обрезаем. Заливаем полученное основным цветом и присваиваем режим наложения Осветление/Screen с прозрачностью, допустим, 10%.
На этом вполне можно остановиться, однако дощечка имеет довольно большую плоскость, хорошо просматривается и я решила добавить ей еще третий слой полос. Из третей копии заготовки. Я сместила ее так, чтобы она поместилась примерно между светлыми и темными полосками и чуть-чуть перекрывала их. Осветление/Screen с прозрачностью, 5%. Вот так:
Вот, собственно, и вся текстура. Форма с основным цветом и три слоя полосок с разным режимом наложения.
Однако, если она будет на объекте, то нам потребуется элементарная свет и тень. Ее можно делать по-разному, в зависимости от стиля рисования. Лично я для второстепенных текстур использую стандартный, но подходящий практически везде, вариант с градиентами. Для этого скопируем основной квадрат Ctrl+F и переместим его Объект/Object → Монтаж/Arrange → На передний план/Bring to Front. Зальем его черно-коричневым градиентом из нашей палитры, назначим ему режим наложения Осветление/Screen с прозрачностью 100%. В вашем случае процент может быть иным. Установим направление и ползунок градиента так, как будет падать свет по вашему плану.
Теперь скопируем квадрат с градиентом Ctrl+F и зальем его градиентом от белого к цвету из сохраненной палитры. Установим направление и ползунок градиента для тени и назначим режим наложения Умножение/Multiply с прозрачностью 100%. У вас может быть свой вариант.
Необходимый минимум выполнен!
Но, ведь вряд ли наш объект с текстурой всегда будет таким плоским. Скорее всего, он будет иметь толщину, а значит, и грани. Как рисовать грани объектов, кубики, изометрию вы можете посмотреть в других уроках. Я же, чтобы зря не увеличивать количество букв J, остановлюсь только на том, что касается текстуры. В данном случае важен вопрос – как оформить боковые стенки. Я предлагаю два варианта – грань с поперечным спилом, либо крашенная, где не видно рисунка колец и грань, на которой видно рисунок. Покажу их одновременно на нашей дощечке. Нарисуйте квадрату небольшой объем любым способом – верхнюю и правую боковые стенки. Залейте их более темным цветом из палитры.
Грань с рисунком. Так как текстура предположительно накладывается нами на небольшой объект, то боковых граней будет почти не видно, поэтому нет смысла вырисовывать текстуру правильно и соблюдать логику расположения полос. Главное, чтобы при взгляде на объект не возникало ощущения неряшливости и мельтешения линий от излишнего разнообразия. Поэтому, возьмите очередную копию нашей полосатой заготовки и поместите ее на верхнюю грань. Проследите, чтобы на плоскость грани не попали вспомогательные линии. С помощь. Клавиш O → Enter → Горизонтальная – отразите заготовку вверх ногами.
Затем, при выделенной заготовке, зайдите в панель Трансформирование/Transform и поставьте наклон так, чтобы полосы «легли» на вашу грань. У меня понадобилось наклонить заготовку на 50 градусов. Если не угадали с первого раза – не страшно, отмените действие и повторите заново с другими параметрами. Наши полосы после наклона немного сдвинулось, поэтому подтянем их так, чтобы они совпали с темными полосами на верхушке нашего квадрата. Это не будет достоверно, но добавит аккуратности работе. Обрежьте заготовку уже описанным ранее способом и раскрасьте ее. И повторите все то же самое, делая светлые полоски. Не забудьте, что сдвинуть их надо до обрезки, а не после. Поиграйте с процентами прозрачности. Добавьте слои с градиентами для света и тени. Для боковой грани без рисунка достаточно будет просто выбрать цвет чуть темнее из нашей палитры и оформить его градиентами. Должно получиться что-то подобное.
Напоследок хочу добавить, что подобная текстура хорошо смотрится не только на прямоугольных, но и на круглых объектах. Только, в этом случае, для окончательного оформления шара нужно линейные градиенты изменить на радиальные и сместить им центр в сторону места падения наибольшего света. Возможно, придется коричневый цвет сделать еще более темным, для придания шару объема. На небольших объектах градиент сам визуально исказить прямые полосы и придаст им ощущение изогнутости. Я еще добавила пару полукруглых теней основного цвета в режиме наложения Умножение/Multiply
Вот и все. Урок окончен. Вот вам еще несколько примеров того, как можно оформить рисунки таким способом.
Желаю и вам, чтобы этот несложный прием пригодился для создания новых интересных работ! Удачи!
Подпишитесь на нашу рассылку, чтобы не пропустить ничего нового:
by Liuda Dunaf. Posted on 19.04.2022
Продолжим изучение Blend Tool и функции Blend в Adobe Illustrator CS5. И сегодня мы попробуем применить блэнд к более сложным объектам. Также узнаем как с помощью блэнд можно создать тень, которая будет соответствовать требованиям микростоков. Кнопочка инструмента Blend Tool находится на панели инструментов, а также можно использовать Blend выбрав соответствующий пункт на вкладке Object > Blend. Мне больше нравится использовать сочетание горячих клавиш Ctrl + Alt + B (чтобы применить бленд), Ctrl + Shift + Alt + B (обратное действие). Блэнд для градиентов Для этого примера рисуем две линии (можно и больше). В моем случае разного цвета. Выделяем их и […]
Эффект текста с помощью функции Blend
by vecart_admin. Posted on 19.09.2013
Сегодня мы создадим один прикольный эффект текста в Adobe Illustrator с помощью функции Blend. Для этого урока я использовал Adobe Illustrator CS6, но подойдет любая друга версия. Создаем новый документ и на рабочей области с помощью инструмента Pen Tool чертим линию. Для большей привлекательности я создал эту линию изогнутой. Берем инструмент Type on a Path Tool (находится в группе инструментов Type — Текст). Подводим курсор к ранее созданной линий и делаем на ней щелчок мыши. После этого набираем необходимы текст. Копируем созданный текст и вставляем сзади (Ctrl+C, Ctrl+B). Изменяем размер текста и цвет. Так как мой фон белый, то и […]
Создаем летящую комету
by vecart_admin. Posted on 06.02.2013
В этом уроке узнаем, как создать комету в Adobe Illustrator CS5 с помощью инструмента бленд. Для создания векторной кометы будем использовать как уже знакомые нам инструменты, функции и панели, так и новые ранее не использовавшиеся. Это инструменты Flare Tool и Convert Anchor Point Tool. Простые фигуры На заранее подготовленном фоне инструментом Elipse Tool создаем два круга белого цвета без контура. Создаем бленд Выделяем оба круга и создаем бленд, нажав комбинацию клавиш Ctrl + Alt + B или выбрав пункт Make на вкладке Object > Blend. Выделяем созданный бленд и двойным щелчком мыши […]
Создаём летящий шар с огненным следом
by vecart_admin. Posted on 03.11.2012
Сегодня постараемся создать реалистичный летящий шар с огненным следом. Для его создания будем использовать бленд, поработаем с градиентами и различными режимами наложения. 1. Создаем новый документ размером 800 на 800 пикселей. Берем инструмент Rectangle Tool и создаем квадрат на всю рабочую область. Заливаем его радиальным градиентом. Смещаем градиент выше центра. Далее берем инструмент Elipse Tool и создаем фигуру шара и заливаем её тем же градиентом. 2. Добавляем свечение фигуре шара. Для этого при выделенной фигуре на вкладке Effect > Stylize выбираем пункт Outer Glow и выставлявляем параметры свечения. 3. Создаем огненный след. Здесь нам понадобятся несколько фигур прямоугольников. Рисуем […]
Функции Blend в Adobe Illustrator CS5
by vecart_admin. Posted on 01.09.2012
Сегодня рассмотрим очень полезный инструмент из арсенала Adobe Illustrator – это Blend Tool. После освоения Blend Tool Adobe Illustrator CS5 станет незаменимым помощником в создании иллюстраций для микростоков. Объекты, созданные с помощью Blend Tool, не противоречат современным требованиям к загрузке работ на большинство микростоков. В отличии от других инструментов Blend Tool создает объекты, которые можно легко редактировать и видеть результат сразу. Это придает больше гибкости в работе с этим инструментом, хотя и за это есть своя цена. Blend Tool дает нагрузку на оперативную память, что может создать неудобства на слабых компьютерах (замедление работы), а также существенно добавляет вес созданным […]
Добавляем градиент на контур
by vecart_admin. Posted on 21.04.2012
Возможно ли применить градиентную заливку к контуру? Хороший вопрос! Контур не является фигурой и ответ, в этом случае, был бы — нет. Но есть одна тонкость, используя которую можно это сделать. И сегодня мы узнаем как добавить градиент на контур. Суть этой хитрости в том, что сначала нам понадобится создать кисть необходимого вида, которую мы будем применять к контуру. Для этого создаем две фигуры круга разного цвета. Выделив обе фигуры, на вкладке Object > Blend выбираем пункт Blend, либо жмем сочетание клавиш Ctrl + Alt + B. Берем получившийся градиент и перетаскиваем его на панель Brushes, тем самым создавая […]
Создаем затмение
by vecart_admin. Posted on 24.03.2012
В этом уроке мы будем рисовать затмение в Adobe Illustrator CS5. Интересный эффект света на фоне темной планеты. В работе мы будем использовать технику, которая может пригодится при создании иллюстраций для микростоков. Создаем прямоугольник на всю рабочую область и заливаем его черным цветом. Берем инструмент Elipse Tool и создаем круг размером 100 на 100 пикселей. Копируем его (Ctrl + C) и вставляем снизу (Ctrl + B). Выделяем нижнюю копию и удерживая клавишу Alt, растягиваем его по вертикали. Заливаем его цветом фона (черным). Теперь выделяем оба круга и применяем к ним бленд, нажатием комбинации клавиш Ctrl + Alt + B, либо […]
Абстрактный фон с помощью Бленда (Blend)
by vecart_admin. Posted on 08.01.2012
В предидущей статье мы создавали абстрактный фон из Градиентного мэша. Сейчас же мы рассмотрим ещё одни простой метод создания абстрактного фона. Для этого мы будем использовать Бленд (Blend). Создадим новый документ и прямоугольник того же размера. Как заливку будем использовать линейный градиент. В моём случае это тёмный и светлый оранжевые цвета. Далее рисуем пару красивых линий карандашом (Pensil Tool) или пером (Pen Tool). Выделяем обе получившиеся линии и в закладке Objects выпираем пункт Blend > Make. В результате этого был создан Бленд. Теперь нам нужно его настроить. Для этого делаем двойной щелчок на инструменте Blend Tool . В […]
В сегодняшнем уроке мы рассмотрим новый способ создания векторной деревянной текстуры в Adobe Illustrator. Рассмотренная здесь техника стала возможной благодаря использованию плагина WidthScribe, который позволяет эффективно работать с переменной шириной пути.
Шаг 1
Текстура древесины имеет ярко выраженные волокна. Это годовые кольца, которые в продольном сечении могут выглядеть как эллипсы. Давайте создадим основу для будущей текстуры. Рисуем два эллипса при помощи Ellipse Tool (L), как это показано на рисунке ниже.
Выделяем созданные объекты, затем переходим Object > Blend > Make. Теперь переходим Object > Blend > Blend Options… и устанавливаем требуемое количество specified steps в диалоговом окне.
Используя эту технику, создадим еще один бленд объект, который также состоит из двух эллипсов.
Шаг 2
Выделяем все созданные объекты, затем переходим Object > Blend > Expand. Теперь мы получили набор эллипсов разного размера, которые находятся в нескольких группах.
Разгруппируем все эллипсы, для этого два раза используем комбинацию горячих клавиш иллюстратора Cmd / Ctrl + Shift + G.
Шаг 3
Окрашиваем обводку эллипсов в светло-коричневый цвет и устанавливаем для нее ширину 3px. Открываем панель Appearance (Window > Appearance), затем добавляем новую обводку к эллипсам, нажав на кнопку Add New Stroke в нижней части панели. Окрашиваем новую обводку в коричневый цвет и устанавливаем для нее ширину 1 px.
Теперь все эллипсы имеют обводку, состоящую из двух цветов.
Шаг 4
Ограничим площадь нашей деревянной текстуры. Создаем прямоугольник с заливкой светло-коричневым цветом.
Дублируем этот прямоугольник (Cmd / Ctrl + C; Cmd / Ctrl + F), затем размещаем копию выше всех созданных объектов (Cmd / Ctrl + Shift + ]).
Выделяем все созданные объекты (Cmd / Ctrl + A), затем используем комбинацию клавиш Cmd / Ctrl + 7 для создания Clipping Mask.
Шаг 5
Заблокируем Clipping path в панели Layers.
Берем Warp Tool (Shift + R) и деформируем эллипсы так, чтобы их края были больше похожи на волокна древесины.
Шаг 6
В дальнейшей работе мы будем использовать плагин WidthScribe. Нам также предстоит работать c панелью Width Selector (Window > WidthScribe > Width Selector) и панелью Appearance.
Итак, берем Width Bush Tool, затем открываем диалоговое окно с опциями настройки Width Bush Tool. На рисунке ниже красной рамкой выделены параметры, которые вы должны установить обязательно.
Остальные параметры вы можете изменять в процессе работы. Я также установил зависимость толщины обводки от давления, так как использовал графический планшет. Хотя, вы можете создать подобную текстуру, используя только мышку.
Шаг 7
Выделяем один из путей текстуры, затем выделяем нижнюю обводку в панели Appearance. Теперь совершаем несколько мазков при помощи Width Bush Tool вдоль этого пути.
Так как в предыдущем шаге мы выбрали опцию "Edit Focal Stroke Only”, то инструмент будет воздействовать только на светло-коричневую обводку.
Теперь выделим верхнюю обводку в панели Appearance и совершим несколько мазков при помощи Width Bush Tool по этой обводке.
Для изменения размеров кисти используйте клавиши "[" и "]”. Конечно, вы также можете устанавливать другие параметры для Width Bush Tool, в зависимости от того, какие результаты вы хотите получить. У нас только одна цель – трансформировать пути в пути с переменной шириной.
Шаг 8
Берем Width Selector Tool, не снимая выделения с верхней обводки в панели Appearance. Как вы можете видеть, появились маркеры ширины для изменения ширины путей.
Выделим их при помощи Width Selector Tool.
В дальнейшем вам предстоит работать с более длинными путями, поэтому для выделения всех маркеров ширины будет удобней использовать панель Width Selector. Для этого достаточно выделить один маркер, затем нажать на кнопку "Select all markers on path”.
Шаг 9
Нажимаем на Turn / Enter key, что приведет к открытию диалогового окна Width Selector Preferences. Отметим "Shift Stroke From Side to Side” в этом окне.
Теперь, используя клавиши "[" и "]” мы можем перемещать выделенные маркеры ширины наружу или внутрь пути.
Нам осталось применить описанные техники ко всем путям текстуры.
Теперь вы можете использовать полученную текстуру в вашем дизайне. Давайте посмотрим, как сделал это я.
Шаг 10
Создадим несколько досок, используя одинаковые текстуры и Clipping Masks.
Теперь создаем фаски на досках при помощи прямоугольников с заливкой светло-коричневого цвета, к которым применен режим смешивания Screen.
Шаг 11
Создаем прямоугольник с заливкой вертикальным линейным градиентом, который содержит два оттенка коричневого цвета. Расположим прямоугольник ниже досок, для того чтобы заполнить пробелы между ними.
Создаем новый прямоугольник выше всех объектов. Заливаем его радиальным градиентом от белого к коричневому цвету, затем применяем режим смешивания Multiply в панели Transparency.
Таким образом, мы создали общее освещение.
На самом деле я знаю только два способа создания векторных деревянных текстур в Adobe Illustrator, не считая автотрейсинга фотографии:
Теперь, благодаря WidthScribe плагину мы имеем еще одну технику, которая, на мой взгляд, ничем не уступает указанным выше, не так ли?
0
В этом уроке вы узнаете, как создать векторную деревянную текстуру, используя простые техники и стандартные инструменты Adobe Illustrator. Я уверен, что после изучения этого урока, вы поработав в Adobe Illustrator не больше 10 минут, легко сможете самостоятельно создать подобную текстуру, используя ее в своих стоковых иллюстрациях, иконках или веб интерфейсах.
Шаг 1
Берем инструмент Adobe Illustrator - Polar Grid Tool и кликаем на пустом месте текущего документа. Это действие откроет диалоговое окно с настройками инструмента. Устанавливаем параметры, указанные на рисунке ниже и нажимаем кнопку OK.
Вы также можете управлять параметрами сетки в процессе ее создания. Для увеличения и уменьшения количества окружностей используйте клавиши стрелок вверх и вниз.
Шаг 2
Заливаем полученную группу окружностей радиальным градиентом, который состоит из двух оттенков коричневого цвета.
Для управления цветом я использую режим HSB.
Шаг 3
Уменьшим ширину группы окружностей, трансформируя их в эллипсы, используя инструмент Direct Selection Tool (V).
Теперь повернем их на некоторый произвольный угол.
Шаг 4
Дважды кликаем по иконке Warp Tool (Shift + R) в Tool bar, для того чтобы вызвать диалоговое окно с его настройками. Устанавливаем параметры, указанные на рисунке ниже.
Теперь деформируем эллипсы, для того чтобы придать им вид волокон древесины.
Шаг 5
При помощи инструмента Adobe Illustrator - Rectangle Tool (M) создадим прямоугольник, который должен ограничить нашу текстуру. Вы можете уменьшить прозрачность (opacity) прямоугольника. Это поможет выбрать место его расположения.
Выделяем все созданные объекты, затем нажимаем на Crop в панели Pathfinder.
Таким образом, мы получили деревянную доску.
Шаг 6
Использование панели Pathfinder приводит к созданию множества лишних объектов.
Это лишняя информация, несомненно, увеличит размер вашего векторного файла. Если вы создаете подробную текстуру, которая содержит множество объектов, то лучше использовать другой метод. Вернемся к предыдущему шагу. Выделяем прямоугольник и текстуру, затем в меню Adobe Illustrator переходим Object > Clipping Mask > Make или используем Cmd / Ctrl + 7
Заблокируйте подслой с Clipping, затем берем Eraser Tool (Shift + E) и, удерживая клавишу Opt / Alt, удаляем невидимые части текстуры.
Таким образом, мы получили минимальное количество точек и объектов.
Шаг 7
Вы можете комбинировать несколько групп эллипсов, регулировать цвета радиального градиента и параметры Warp Tool для получения большого разнообразия текстур.
Шаг 8
Описанным выше способ я создал восемь досок.
Теперь создадим прямоугольник с заливкой темно-коричневого цвета. Поместим этот прямоугольник ниже всех объектов для того чтобы заполнить пробелы между досками.
Создадим еще один прямоугольник и поместим его выше всех объектов. Заливаем его радиальным градиентом, который содержит два оттенка коричневого цвета. Применим к нему режим смешивания Overlay.
Таким способом мы можем изменять цвет и освещение деревянной текстуры.
Шаг 9
Для создания более яркого освещения создадим эллипс, который залит эллиптическим градиентом от серого к черному цвету. Применим к нему режим смешивания Color Dodge.
Надеюсь, вам пригодятся техники работы в иллюстраторе, описанные в этом уроке. Вы сможете применять полученные знания при создании иллюстраций, иконок или веб-интерфейсов.
Будьте всегда в курсе свежих новостей о векторной графике, новых уроков работы в Adobe Illustrator, статей и интервью посвященных графическому дизайну. Команда RU.Vectorboom работает для Вас!
0
Здравствуйте, Ярослав. Спасибо большое за Ваши уроки и за сайт. Очень полезно и интересно. Это мой первый урок, поэтому я немного запуталась. Когда я блокирую подслой с Clipping, а затем стираю, то у меня стирается и сама коричневая структура. Это так и должно быть? И еще подскажите, пожалуйста. После создания одной доски, другие доски можно создавать копируя первую? Я попыталась, но скопировался только контур прямоугольника.
0
Можно и не стирать, я просто этим уменьшаю размер файла. Стирать нужно деревянную структуру, которая не видна. По моему на рисунке это четко видно.
Перед тем как что-то копировать нужно это выделить. Если у вас копируется только контур, значит только он и был выделен.
0
У меня, несмотря на блокировку подслоя, стирается и невидимая, и видимая деревянная структура. Что я делаю не так?
0
0
0
Правильно, контур маски не стирается, а сама текстура стираться будет. Не заходите за контур маски и дело концом
0
Понятно. Еще раз спасибо за объяснения. Вопросы дилетантские, поэтому стесняюсь спрашивать, а понять хочется.
0
0
Спасибо большое, Ярослав. Ваши уроки такиеполезные. А для начинающих - просто находка. Объяснения ваши понятны.
Скажите, пожалуйста, а есть где-то урок как создать подобный текст?
0
0
К сожалению не смогла сама разобраться. Там три слоя, к двум скорее всего применены какие-то эффекты, а потом они видимо разобраны. Я знаю как такое делается в Фотошопе, с ним я на ты, а вот Иллюстратор - пока для меня только по урокам.
0
0
Да, я скачала и там увидела что 3 группы. 1 - сами буквы, и 2 других - разобранные пути. Моих знаний не хватило. Но я сейчас нашла урок в интернете с подобными буквами. буду осваивать. Спасибо.
0
0
0
0
0
0
0
Нет, там тоже растровые эффекты. Ладно, залезу в свой исходник и где-то отпишусь, наверное, на форуме. Напомните, если это не случится в ближайшие дни
0
0
0
Привет, хорошо, что напомнили, сорри
Так, исходного файла с текстом не нашлось, ну и ладно.
Делаем так
1. Переводим текст в кривые Type > Create Outlines
2. Делаем из полученного Compound Path (Ctrl + 8)
3. Если пропала заливка, то заливаем объект нейтральным серым цветом, хотя в любом случае им.
4. Дублируем объект два раза (Ctrl + F + F)
5. Выделяем верхнюю копию и смещаем ее на пару пикселей вниз.
6. Выделяем две верхние копии - Minus Front from Pathfinder panel. Получили объекты для тени. Перекрасьте их в более темны оттенок серого цвета.
7. Для исходного текста и объектов тени Multiply
Аналогичным образом вырезаются формы для бликов ниже текста. Только заливка для них светло-серая и Screen.
0
0
0
Добрый день. Ярослав. Я опять к вам. Делаю ваш урок "фактура дерева" и не могу понять почему у меня последний шаг "осветление основы" не получается рассеянным, как у вас. У меня выходит так, что осветляется четкий контур элипса. Шо делать? Спасибо
0
0
0
0
Читайте также: