Vectorboom
Советы / Техники / Comments: 30

Как создать реалистичную деревянную текстуру в Adobe illustrator

Ярослав Лазунов
08.09.2012
Цель урока
как создать реалистичную деревянную текстуру в Adobe illustrator

 

 

Вы можете скачать исходный векторный файл к данному уроку

 

 

 

 

В этом уроке вы узнаете, как создать векторную деревянную текстуру, используя простые техники и стандартные инструменты Adobe Illustrator. Я уверен, что после изучения этого урока, вы поработав в Adobe Illustrator не больше 10 минут, легко сможете самостоятельно создать подобную текстуру, используя ее в своих стоковых иллюстрациях, иконках или веб интерфейсах.


Шаг 1

Берем инструмент Adobe Illustrator - Polar Grid Tool и кликаем на пустом месте текущего документа. Это действие откроет диалоговое окно с настройками инструмента. Устанавливаем параметры, указанные на рисунке ниже и нажимаем кнопку OK.

Adobe Illustrator polar grid tool панель
как создать реалистичную деревянную текстуру в Adobe illustrator

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

как создать реалистичную деревянную текстуру в Adobe illustrator

Шаг 2

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

радиальный градиент, создание деревянной текстуры в иллюстраторе

Для управления цветом я использую режим HSB.

режимы управления цветами в Adobe Illustrator

Шаг 3

Уменьшим ширину группы окружностей, трансформируя их в эллипсы, используя инструмент Direct Selection Tool (V).

как создать реалистичную деревянную текстуру в Adobe illustrator

Теперь повернем их на некоторый произвольный угол.

как создать реалистичную деревянную текстуру в илюстраторе

Шаг 4

Дважды кликаем по иконке Warp Tool (Shift + R) в Tool bar, для того чтобы вызвать диалоговое окно с его настройками. Устанавливаем параметры, указанные на рисунке ниже.

как создать реалистичную деревянную текстуру в иллюстраторе

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

как создать реалистичную деревянную текстуру в Adobe illustrator

Шаг 5

При помощи инструмента Adobe Illustrator - Rectangle Tool (M) создадим прямоугольник, который должен ограничить нашу текстуру. Вы можете уменьшить прозрачность (opacity) прямоугольника. Это поможет выбрать место его расположения.

как создать реалистичную деревянную текстуру в Adobe illustrator

Выделяем все созданные объекты, затем нажимаем на Crop в панели Pathfinder.

как создать реалистичную деревянную текстуру в Adobe illustrator

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


Шаг 6

Использование панели Pathfinder  приводит к созданию множества лишних объектов.

урок создания деревянной texture в Adobe illustrator

Это лишняя информация, несомненно, увеличит размер вашего векторного файла. Если вы создаете подробную текстуру, которая содержит множество объектов, то лучше использовать другой метод. Вернемся к предыдущему шагу. Выделяем прямоугольник и текстуру, затем в меню Adobe Illustrator переходим Object > Clipping Mask > Make или используем  Cmd / Ctrl + 7

урок как создать реалистичную деревянную текстуру в Adobe illustrator
урок как создать реалистичную деревянную текстуру в Adobe illustrator

Заблокируйте  подслой с Clipping, затем берем Eraser Tool (Shift + E) и, удерживая клавишу Opt / Alt, удаляем невидимые части текстуры.

урок как создать реалистичную деревянную текстуру в Adobe illustrator
урок как создать реалистичную деревянную текстуру в Adobe illustrator

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


Шаг 7

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

урок как создать реалистичную деревянную текстуру в Adobe illustrator
векторная деревянная текстура

Шаг 8

Описанным выше способ я создал восемь досок.

урок как создать реалистичную деревянную текстуру в Adobe illustrator

Теперь создадим прямоугольник с заливкой темно-коричневого цвета. Поместим этот прямоугольник ниже всех объектов для того чтобы заполнить пробелы между досками.

градиентная заливка векторной деревянной текстуры в иллюстраторе

Создадим еще один прямоугольник и поместим его выше всех объектов. Заливаем его радиальным градиентом, который содержит два оттенка коричневого цвета. Применим к нему режим смешивания Overlay.

градиентная заливка векторной деревянной текстуры в иллюстраторе

Таким способом мы можем изменять цвет и освещение деревянной текстуры.


Шаг 9

Для создания более яркого освещения создадим эллипс, который залит эллиптическим градиентом от серого к черному цвету. Применим к нему режим смешивания Color Dodge.

градиентная заливка векторной деревянной текстуры в иллюстраторе
градиентная заливка векторной деревянной текстуры в иллюстраторе

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

 

 

Вы можете скачать исходный векторный файл к данному уроку

 

 

 

 

урок в Adobe illustrator по созданию векторной текстуры дерева

Будьте всегда в курсе свежих новостей о векторной графике, новых уроков работы в Adobe Illustrator, статей и интервью посвященных графическому дизайну. Команда RU.Vectorboom работает для Вас!

Всего комментариев: 30
0
1  
Здравствуйте, Ярослав. Спасибо большое за Ваши уроки и за сайт. Очень полезно и интересно. Это мой первый урок, поэтому я немного запуталась. Когда я блокирую подслой с Clipping, а затем стираю, то у меня стирается и сама коричневая структура. Это так и должно быть? И еще подскажите, пожалуйста. После создания одной доски, другие доски можно создавать копируя первую? Я попыталась, но скопировался только контур прямоугольника.

0
2  
Можно и не стирать, я просто этим уменьшаю размер файла. Стирать нужно деревянную структуру, которая не видна. По моему на рисунке это четко видно.
Перед тем как что-то копировать нужно это выделить. Если у вас копируется только контур, значит только он и был выделен.

0
3  
У меня, несмотря на блокировку подслоя, стирается и невидимая, и видимая деревянная структура. Что я делаю не так?

0
4  
При этом вы не заходите ластиком за контур маски?

0
5  
Захожу. Но она же заблокирована, стираться не должно бы.

0
6  
Правильно, контур маски не стирается, а сама текстура стираться будет. Не заходите за контур маски и дело концом

0
7  
Понятно. Еще раз спасибо за объяснения. Вопросы дилетантские, поэтому стесняюсь спрашивать, а понять хочется.

0
8  
Не в коем случае не стесняйтесь, я здесь чтобы помочь

0
9  
Спасибо большое, Ярослав. Ваши уроки такиеполезные. А для начинающих - просто находка. Объяснения ваши понятны.
 Скажите, пожалуйста, а есть где-то урок как создать подобный текст?

0
10  
Урока нет, можно посмотреть исходник, я уже сам не помню детали

0
11  
К сожалению не смогла сама разобраться. Там три слоя, к двум скорее всего применены какие-то эффекты, а потом они видимо разобраны.  Я знаю как такое делается в Фотошопе, с ним я на ты, а вот Иллюстратор - пока для меня только по урокам.

0
12  
Это вы исходник ковыряли то?

0
13  
Да, я скачала и там увидела что 3 группы.  1 - сами буквы, и 2 других - разобранные пути.  Моих знаний не хватило.  Но я сейчас нашла урок в интернете с подобными буквами.  буду осваивать. Спасибо.

0
14  
вот такой - на мой взгляд похоже на ваш http://vectips.com/tutorials/embossed-vector-text   Сейчас попробую.

0
15  
Только там растровые эффекты. Если для стоков, то не подойдет

0
16  
Ну вот!   sad Не успела и сделать все по уроку.  А можно потом все проэкспандить для стока?

0
17  
Растровые эффекты развалятся на чистый раст, то есть нет смысла

0
18  
Спасибо, Ярослав. Значит не годится этот метод. Попробую еще поискать.

0
19  
Не велик интернет оказывается.  А это урок подойдет для моей цели?  http://ru.vectorboom.com/load....1-0-269

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

0
21  
Спасибо, Ярослав.

0
22  
Ярослав, со смущением напоминаю (как просили).  shy

0
23  
Привет, хорошо, что напомнили, сорри
Так, исходного файла с текстом не нашлось, ну и ладно.
Делаем так
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
24  
Спасибо Ярослав.

0
25  
Да, на здоровье!

0
26  
Добрый день. Ярослав. Я опять к вам. Делаю ваш урок "фактура дерева" и не могу понять почему у меня последний шаг "осветление основы" не получается рассеянным, как у вас. У меня выходит так, что осветляется четкий контур элипса. Шо делать? Спасибо

0
27  
Черный должен быть R=0, G=0, B=0

0
28  
все по нулям

0
29  
Может вы CMYK работаете или растяжка градиента выходит за границы круга

0
30  
Ха! Все получилось! СПАСИБО!

Только зарегистрированные пользователи могут добавлять комментарии.
[ Registration | Login ]
twitter RSS facebook deviantart feed dribbble
Логин
Пароль
Новости Форума
 
Перепечатка, копирование или воспроизведение информации в каком-либо виде строго запрещены.
Все материалы, которые размещены на этом сайте не подлежат дальнейшему воспроизведению и/или распространению в любой форме, кроме как с письменного разрешения автора.