Рисование текстур в Иллюстраторе (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

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

Здравствуйте. Извините, что не по теме. Нуждаюсь в помощи, в подсказке. Я пишу игру с уровнями. Хочу реализовать интерфейс и саму концепцию перехода к уровням как у Angry Birds.

Т.е. Титульная страница -> Страница уровней -> уровень.
я пытался подобное реализовать через переходы по кадрам, но сам уровень (игра) не корректно работала, можно сказать, что вообще не работала.
Подскажите пожалуйста как реализовать саму концепцию. Спасибо.

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

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

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

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

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

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

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

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