Создаем бесшовный векторный паттерн во флеше

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

Шаг 1. Чтобы не рисовать объекты для паттерна, скачаем бесплатный клипарт со знакомыми многим образами. Именно этих птичек и свинюшек используем в уроке. Формат файла .eps, у кого нет иллюстратора, можно скачать исходник в конце урока, там эти птички уже во флеше. Или взять другие объекты, на свой вкус и просто делать по примеру.

 

Шаг 2. Создаю новый документ, выставляю внушительный размер рабочей области (Document Settings) 1500Х1500px (можно взять и меньше, на свое усмотрение) Перебрасываем персонажей из иллюстратора во флеш копипастом.

Шаг 3. Рисую белый квадрат размером 500х500. Это будет заготовка для нашего паттерна. Чтобы квадрат не сливался с белым фоном рабочей области, то лучше ее поменять на более темную (правой по рабочей области – Document PropertiesBackground Color). Я выбрала серый цвет для фона.

 

Шаг 4.Сохраняем все в символ pattern (выделение – F8).Распределяем графику внутри символа по слоям: нижний слой – белый квадрат, слоем выше – персонажи:

 

Шаг 5. Делаем 5 копий (Ctrl+D) нашей заготовки и располагаем на рабочей области таким образом:

Чтобы ровно расположить объекты, помогаем себе инструментом выравнивания Align. Обязательно следим, чтобы между символами не было зазоров в палец. Используя стрелочки на клавиатуре и максимальное увеличение рабочей области (zoom tool), подгоняем объекты относительно друг друга поплотнее, чтобы они соприкоснулись.

Шаг 6. Закончился подготовительный этап, теперь приступим непосредственно к созданию бесшовной текстуры. Заходим в режим редактирования в центральный символ (дважды кликам по нему или кликам правой – Edit in place). Когда мы находимся внутри символа, то соседние выглядят более блекло (картинка ниже). Теперь, создавая изменения в нем, автоматически будут меняться соседние символы, и в режиме реального времени мы будем наблюдать, как меняется наша текстура, что очень удобно.

Шаг 7. Расположим наших птичек и зверушек в рамках белого квадрата. Но это совсем не означает, что мы не должны выходить за его пределы. Как раз наоборот. Располагаю персонажей, используя инструменты Scale и Rotate, чтобы они не просто сидели на попе, как в клипарте, а будто левитировали в космосе:) Белую подложку я временно скрыла (сделала невидимой), чтобы были заметнее границы символа (а границей служит белый квадрат).

Шаг 8. Как видим, объекты вылезают за пределы области квадрата ( эти части обозначены зелеными квадратами), поэтому их нужно обрезать. Но не обрезать торчащие кусочки и выбросить, а переместить следующим образом:

1) С правого края сместить влево (видим нечеткие очертания благодаря соседству объектов, куда именно сместить).

2) Кусочек свинячей морды, который выходит за границу квадрата снизу – поднимаем вверх:

3)И все, что вышло за пределы нашего паттерна сверху (ухи свиньи и чубчик рябчика) – смещаем вниз.

Как это удобней делать:

1) Каждого персонажа разбиваем– Ctrl+B, чтобы он не находился в группе.

2) Вручную, ориентируясь по краю, аккуратненько отрезаем, используя стрелочку (Selection Tool). Лучше приблизить максимально нужную область (удобно использовать горячие клавиши зума – Ctrl+ (увеличение рабочей области) и Ctrl– (уменьшение)).

3) Выделенную часть, которую мы будем переносить в нужное место, группируем (Ctrl+G) и, уменьшив максимально рабочую область (Ctrl–) и используя стрелочки на клавиатуре, сдвигаем. В это же время меняется расположение этого объекта в 4-х соседних символах одновременно. Вот так выглядит картинка, когда мы перенесли кусочек справа на новое место. Очень аккуратно нужно состыковать, чтобы не выпирало и не вылезало, где не нужно.

4)Не забываем максимально увеличивать область стыка. Даже несостыковка в 1 пиксель на таком паттрене будет сильно заметна.

5)Проделав все манипуляции, описанные выше, мы должны получить вот такую заготовку.

Шаг 9. Размножим нашу заготовку для бесшовного паттерна, используя Deco Tool (расстояние по Х и У ставим 0). Это можно сделать вручную, но будет дольше. А вот и результат кропотливого труда – бесшовный векторный паттерн:

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

Как сделать растровый бесшовный паттерн из векторного во флеше?

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

Кликаем по образцу правой – Convert to Bitmap. В библиотеке появляется растровая текстура Bitmap 1.

На панели Properties выбираем Bitmap fill (растровая заливка) и кликаем по текстуре внизу.

Мы можем залить растровой текстурой любой векторный объект:

Вот и все.

Исходник паттерна (Сs5).

И напоследок несколько примеров креативных паттернов от иллюстраторов:

1)Chris Piascik

Pattern2 Pattern3 Pattern7 Pattern8 Pattern9 Pumpkin-Pattern

2)Сергей Ратников

ptic2 ptichkihuichki tweeterhuiter

3)Abi Hall

BIRD_PATTERN

4)Ольга Павлова

panda_pattern rabbits

5)Aleix Gordo Hostau

monsters_pattern

Комментарии
Аватар пользователя e.artem.volga

Хороший и интересный урок, впрочем как и всегда=)

NiTRoEx

Аватар пользователя Гость =)

скажите а как потом можно достать векторное изображение из флеша?

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

File/Export/Export Image...

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

Интересно, а для Фотошопа нет ли такого плагина, который в реальном времени показывает изменение всей заливки при редактировании отдельного элемента паттерна?
Лет 5-7 назад часто приходилось делать растровые паттерны, тогда не нашёл подобного - всё вручную приходилось делать.

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

Есть для иллюстратора - называется madpattern, растр тоже можно

Что бы вы сделали, если бы точно знали что всё получится?...

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

к сожалению, не в курсе про фотошоп(

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

как вы вовремя и с таким шикарным уроком! большое отдельное спасибо и за подборочку, вдохновлялась с удовольствием! Smile

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

на здоровье)

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

Отличный, полезный и очень своевременный урок, спасибо большое! Smile

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

это хорошо, что пригодилось)

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

Оксана, отличный урок!
Но вот обрезку паттерна можно сделать гораздо быстрее и точнее, чем вручную. Нарисовать квадраты один больше сцены, другой размером со сцену, разместив его по центру. Вырезать из большего меньший. Вернуться к месту где у нас готовы 5 символов с птичками, ctrl+A, ctrl+B и скопировать наш квадрат. Клик по пустому месту - клик по квадрату и его удаление. Останется только то, что попало в центральную пустую зону.
PS для того чтобы все получилось, все объекты должны быть на одном слое.
PPS Извиняюсь что влез, просто так точно будет точнее, а если ещё понять то, что я так запутанно объяснил, то и быстрее)

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

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

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

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

моя радость тут ))) http://leetovetz.deviantart.com/gallery/

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

я тут со скриншотиками набросал
http://rusfolder.com/33930560

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

теперь поняла) но нам не нужно удалять края в этом случае, их нужно перебросить к противоположному краю. или вы обрезанные части как-то сохраняете предварительно?

.

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

Сохраняю, проделывая то же самое, только удаляя видимое поле (все кроме краев.

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

В добавление к паттернам. Средний паттерн дублируем в библиотеке с другим именем, и swap его в центр. Теперь меняем всё наполнение кроме краёв. Вуа-ля, у нас два «разных» паттерна. Если рисовать вручную, то можно и «края» перерисовывать, главное, чтобы точки соприкосновений тайлов-паттернов друг-с-другом, и цвета заливки оставались неизменными.

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

да-да, все верно

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

Да, создание тайлов любимое занятие для меня)) Это очень просто и полезно если надо быстро сделать незамысловатый фон или ещё что нибудь. Особенно полезно для левелдизайна игр. Благодаря чудесному свойству клипов во флеше можно чудить много магии. Спасибо большое за урок!)))

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

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

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

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

моя радость тут ))) http://leetovetz.deviantart.com/gallery/

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

спасибо, значит есть смысл объединять матчасть с красочными примерами уже готовых работ)

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

поддерживаю эту идею. Мат.часть + Примеры от профи = Знать+Уметь )))
ну или типа того )))

моя радость тут ))) http://leetovetz.deviantart.com/gallery/

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

Оксана (ничего что я так фамильярно:), урок реально просто очень классный, плюс подборочка в тему.
Сделано от души и для людей.

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

благодарю, старалась)

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