Рисование текстур в Иллюстраторе (AI). Фон для игры. Кисти для создания текстур (Vector Brush Textures)

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

Вот такой фон для хтмл-игры полностью нарисовала в иллюстраторе, анимацию делала во флеше.

 

В постах ниже я писала, что начала активно использовать иллюстратор в работе, поэтому для блога подготовила серию постов про разные фишки и трюки в этой программе. Каждый раз узнавая какую-то интересность – делаю себе пометку в блокноте, что напишу о ней в блог. Признаюсь, что таких черновых записей у меня уже насобирался вагонJ А это первая заметка из этой серии. Уверена, будут комментарии, что блог про флеш, при чем здесь иллюстратор и хтмл? Мне кажется, не стоит зацикливаться на одном флеше, надо смотреть в  сторону более продвинутых программ (в плане создания графики иллюстратор более продвинутый все же).

Если присмотреться ближе, то на полу и стенах наложены  текстуры:

Я использовала всего лишь одну кисть, которая входит в стандартный набор кистей иллюстратора – Chalk Brush.Находится она на вкладке Brushes (Window-Brushes), кликаем по книжечке внизу и выбираем Artistic – Artistic_ChalkCharcoalPencil .

 

А вот и кисточка, которую я использовала – самая верхняя в списке, называется Chalk(Мел).

 

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

 У таких кистей есть свои особенности - в зависимости от толщины карандашной линии - они видоизменяются. Я взяла размер побольше (10 px), как на картинке.

 

И важный ньюанс – линию нужно разобрать (во флеше: Выделение - Ctrl+B, в иллюстраторе: Object – Expand Appearence).

 

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

Открываем FLA файл в AI

Неожиданно я задалась вопросом: что делать, если мы все нарисовали во флеше, а хочется картинку доработать в иллюстраторе, добавить текстуры и прочее? Или, например, нам нужен .ai формат (например, для стоков, где .fla файлы не принимаются).

Открыть .ai файл во флеше очень просто: file - import - …ai. А вот на оборот уже посложнее.

Если мне нужно флеш файл доработать в Иллюстраторе,  я его сохраняю в формате SVG. У меня версия СС 2014.

 

А вот в версии флеш СС 2015, уже нет возможности сохранения  в этот формат (если не ошибаюсь, эту функцию убрали).

Возвращаясь к текстурным кистям,  поделюсь ссылками на бесплатные, которые скачала себе в библиотеку:

1. Texture Brushes (Текстурные кисти)

https://dribbble.com/shots/908101-Vector-Brushes-Free

 

2. Dry Brushes

http://trzown.me/store/trzowns-dry-brushes-for-illustrator

 

 3. Halftone Vector Brushes

https://dribbble.com/shots/2083395-FREE-Halftone-Vector-Brushes

 

4. Childs Play Crayons – Free Illustrator Brush set

( Векторные кисти, имитирующие цветные мелки).

http://www.melsbrushes.co.uk/childs-play-crayons-free-illustrator-brush-set/

5. Chalk Illustrator Brush Set (Меловые кисти)

http://www.melsbrushes.co.uk/free-chalk-illustrator-brush-set/

 

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

P.S. Пока я сочиняла этот пост, вышел Adobe Animate.Разработчики просто прочитали мои мысли и добавили библиотеку текстурных кистей!( Adobe Animate – это следующая версия флеша, кто не в курсе)

 

И теперь, по идее, не нужно ходить в иллюстратор. Потестю новую версию и напишу свои впечатления в следующий раз.

Видео работы с кистями - https://helpx.adobe.com/animate/how-to/create-vector-art-brushes.html

Комментарии
Аватар пользователя CookieMz

Спасибо! очень полезная информация. буду с нетерпением ждать новые записи о фишках и интересностях в иллюстраторе))

Аватар пользователя Oksana

Будет в ближайшее время)

Аватар пользователя PycckuuJuice

Есть способ текстурирования прямо во флэше. Создается три слоя. Самый нижний - непосредственно объект (форма, цвет). Затем он копируется и используется в качестве самого верхнего слоя-маски. На маскируемом слое (под ним) помещаем растровую картинку-текстуру, предварительно упаковав её в символ и выставив необходимую прозрачность, например, 40%. Можно поэкспериментировать с параметрами наложения. Подмотрел у Cartoon Smart. Для игр, наверное, такой способ не подойдёт, увеличивает вес файла в разы. А вот для видео или изображения вполне)

Аватар пользователя Oksana

Да, есть такой способ) правда он не всегда удобен, из-за сложности редактирования растровой картинки.

Пожалуйста, оставьте ваш комментарий. Спасибо!
Содержимое этого поля является приватным и не будет отображаться публично.
CAPTCHA
Вопрос для проверки
Заполните поле проверки