Заливка узором в illustrator

Обновлено: 03.07.2024

Спасибо за совет! М. быть, кто нибудь еще знает? Собственно, если формулировать проблему более широко: как заливку паттерном преобразовать в полноценный объект для дальнейшей работы с ним (изменение цвета, градиенты и т.д.)

russelbrown

Забанен

Ответ: работа с паттернами

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

Участник

Ответ: работа с паттернами

Все гениальное - просто Спасибо! Т.е. таким образом мы можем на основе пресетов делать свои цветные паттерны. А вот как быть с объетом, уже залитым паттерном? Можно что то сделать с заливкой паттерном, чтобы потом работать с ней как с обычной группой объектов? Двигать, удалять, трансформировать отдельные элементы и т.д.

russelbrown

Забанен

Ответ: работа с паттернами

В смысле - как достать паттерн из заливки объекта? Заливка паттерном аналогична функции маскирования объекта объектом.

Expand > Release Clipping Mask > Ungroup.

В зависимости от сложности залитого паттерном объекта могут потребоваться дополнительные итерации Expand > Ungroup. Но в финале должно быть Release Clipping Mask > Ungroup.

Ну и объект сдыхает при такой разборке. Так что разбирать нужно копию.

russelbrown

Забанен

Ответ: работа с паттернами

Если паттерн не укладывается плиткой по углам (tile corner pattern) то нужно определить габариты внутри внешних габаритов объекта. В справке написано как это делать, но почему-то не написано ничего насчет того, что габаритная рамка должна быть под объектом (если в группе с ним, то в самом низу группы). Видимо это разумеется божественным откровением. Как и то, что она не должна быть залита и обведена цветом.

Так вот, паттерн полученный после разборки объекта нужно проверить на наличие лишних габаритных рамок, а также недостающих.

Гуру, а может быть там есть где-то кнопка Edit Pattern?

Arkady

Участник

Ответ: работа с паттернами

В смысле - как достать паттерн из заливки объекта?
Expand > Release Clipping Mask > Ungroup…
Ну и объект сдыхает при такой разборке…

Боже упаси… Если в хотя бы одном объекте используется pattern, то он обязательно будет присутствовать в Swatch palette. Для редактирования pattern перетаскивается из Swatch palette куда-нибудь в уголок рабочего поля, правится как нужно и с нажатым <Alt> черной стрелкой перетаскивается (вместе с бесцветным прямоугольником!) на свое изображение в Swatch palette.
Все это расписано в Help'е, кстати.

Illustrator поставляется с множеством узоров, доступ к которым можно получить в палитре «Образцы» и в папке Illustrator Extras на установочном компакт-диске Illustrator. Можно изменять параметры существующих узоров и создавать узоры «с нуля» с помощью любого из инструментов программы Illustrator. Узоры, предназначенные для заливки объектов (узоры заливки), отличаются по виду и распределению элементов от узоров, предназначенных для применения к контуру с помощью палитры «Кисти» (узоры кисти). Для получения наилучших результатов используйте узоры заливки для заливки объектов и узоры кисти для обводки объектов.

При создании узоров следует учитывать принципы распределения элементов узора программой Adobe Illustrator.

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

Примечание. Начало координат в версии CS5 отличается от CS4. В результате, оформление элементов узоров может отличаться при копировании и вставке объектов из CS4 в CS5. Чтобы соответствовать оформлению CS4 элементы узоров в таких объектах могут трансформироваться с использованием палитры «Трансформирование».

Узоры заливки, как правило, состоят из одного элемента.

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

Элементы узоров заливки распределяются перпендикулярно оси x.

Элементы узоров кисти распределяются перпендикулярно контуру (верхняя сторона элемента узора всегда направлена наружу). Кроме того, угловые элементы поворачиваются на 90° по часовой стрелке всякий раз, когда контур меняет направление.

Элементы узоров заливки распределяются по иллюстрации в пределах ограничительной рамки узора — прямоугольника без заливки и обводки (не подлежащего печати) на заднем плане иллюстрации. Для узоров заливки ограничительная рамка выступает в роли маски.

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

Общие рекомендации по созданию элементов узора

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

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

Чем сложнее узор, тем меньше по размеру должен быть фрагмент, использованный для его создания, однако чем меньше фрагмент (и элемент узора, создаваемый из него), тем больше копий необходимо для создания узора. Таким образом, квадратный элемент размером 1х1 дюйм более эффективен, чем элемент размером 1/4х1/4 дюйма. При создании простого узора можно включить несколько копий объекта во фрагмент, предназначенный для элемента узора.

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

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

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

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

Рисуя ограничительную рамку вокруг рисунка, убедитесь в том, что она имеет строго прямоугольную форму, является самым нижним объектом элемента узора и не имеет заливки и обводки. Если предполагается использовать эту ограничительную рамку для узора кисти, убедитесь в том, что никакие участки узора не выходят за ее пределы.

Дополнительные рекомендации по созданию узоров кисти

Если возможно, всегда заключайте рисунок в нераскрашенную ограничительную рамку, что позволит контролировать распределение элементов узора.

Угловые элементы должны быть квадратными и иметь ту же высоту, что и боковые элементы. Это необходимо для корректного выравнивания вдоль контура. Если предполагается использовать угловые элементы для узора кисти, выровняйте объекты в угловых элементах по горизонтали с объектами в боковых элементах, чтобы элементы узора распределялись правильно.

Создайте специальные угловые эффекты для узоров кисти с помощью угловых элементов.

Если у кого-то с самостоятельным обучением возникают какие-либо затруднения, то вы можете взять онлайн консультацию по Adobe Illustrator через Skype.


Заливка цветом с помощью палитры цветов (Color Picker)


Изменяем заливку и обводку, используя управляющую палитру (Сontrol Palette)

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


Концы обводки

От того, какой тип конца обводки Вы выберете, будет зависеть вид ее начальной и конечной точек. Этот инструмент применяется только к открытым контурам. Вы можете выбрать между срезанным (Butt), скругленным (Round) и выступающим (Projecting) концами.


Срезание (Milter Limit)

Срезание (Milter Limit) применяется к стыкам в фигурах. Обратите внимание, как выглядят стыки звезды после применения разных настроек срезания.


Применение градиента к объектам

Чтобы применить градиент к Вашему объекту, на панели инструментов выставьте градиентную заливку (Gradient Fill).


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


Проделаем то же самое для начальной точки в градиентной шкале (сейчас она белая). Выставьте режим RGB и выберите голубой цвет.


Чтобы добавить новый цвет в градиентную шкалу, Tony предлагает кликнуть левой кнопкой мышки прямо под шкалой в нужном месте. Затем к новому цвету можно применить процедуру, описанную выше, выбрав на этот раз белый цвет.

Чтобы убрать лишний цвет из градиентной шкалы, просто потяните ползунок мышкой вниз.


Радиальный градиент


Если остались какие-то вопросы по работе с градиентом, то можете посмотреть еще Видеоурок Adobe Illustrtator: основы работы с градиентом

Текстурная заливка


Заключение

Используя радиальный и линейный градиенты, мы можем придать реализма нашим работам. Радиальная заливка может добавить глубины и объема круглым объектам, а линейная создаст объем цилиндрическим объектам. Вот пример использования градиентов для создания рождественских колокольчиков:

3d gold bells


Кстати, насчет этих самых колокольчиков:) Они тоже не лежат просто так в портфолио Tony, а активно приносят ему деньги, продаваясь на Istockphoto:)



Подпишитесь на нашу рассылку, чтобы не пропустить ничего нового:

Пошаговое создание шаблона в иллюстраторе


Для будущего паттерна я нарисовала вот такую бабочку.


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


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


Выделяем слева все то, что выходит за пределы области, нажимаем «Трансформирование»-«Перемещение».



Вводим значение по горизонтали равное ширине нашей монтажной области 2000 px, по вертикали ставим 0 и нажимаем копировать. Появляется такая же бабочка с противоположной стороны.


То же самое проделываем с элементами, выходящими за область сверху. Получим следующее.


Теперь подкорректируем изображение, заполняя пустующие зоны, раскрашивая дополнительные элементы.


Методы создания паттерна

Обрезать все, что выходит за пределы паттерна, можно несколькими способами:

  • использование пустой рамки по краям тайла;
  • обрезка;
  • разделение;
  • функция «создать шаблон».

Первый способ можно назвать самым легким и используемым в работе иллюстраторов, но его не принимают фотостоки. Необходимо создать квадрат без заливки и контура точно такого же размера, как монтажная область и поместить его на задний план. Затем все выделить и перетащить в панель «Образцы». После этого можно выполнять заливку любого объекта, используя этот образец. Пустой квадрат будет задавать границы нашего тайла, но не будет обрезать лишнее, а только скрывать.



Во втором способе мы будем совершать похожие действия. Берем квадрат одинакового размера с областью и помещаем его на наш рисунок. Далее все выделяем и нажимаем «Обрезка». Получим требуемый паттерн. В данном случае минусом будет образование нарезок элементов.


Третий способ является сложным, но считается более профессиональным. Квадрат, созданный по аналогии с двумя предыдущими методами, помещаем сверху изображения, выделяем его и отделяем при помощи функций «Объект»-«Контур»-«Разделить нижние объекты».


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


После удаления снова группируем все и добавляем узор в панель с образцами. Созданный паттерн этим способом можно смело размещать на фотостоках, например на Shutterstock.

Четвертый способ намного облегчил работу дизайнеров и отлично работает в версиях Adobe Illustrator CS6 и выше. На монтажную область помещается нужный элемент, а затем при помощи функции «Узор»-«Создать» получаем заготовку будущего паттерна.


Здесь возможно корректировать элементы: цвет, форму, размер, расположение.

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


Данные способы создания шаблона очень просты. Готовые паттерны не образуют швов и могут использоваться для создания бесконечных фонов.


Не так давно мы публиковали урок о применении текстуры карандаша к объектам в Adobe Illustrator. Если вы пропустили эту публикацию, посмотрите ее здесь. Сегодня автор этого урока Veerle Pieters порадует нас еще одной техникой. В прошлом уроке для применения текстуры мы использовали дискретную кисть. Но конечно есть множество других способов применения текстуры. На этот раз мы рассмотрим заливку паттерном, используя пунктир. Вы узнаете как создать такой узор, как применить его к иллюстрации в комбинации с маской и как сохранить набор этих паттернов в галерее образцов.

Illustration with a text press pattern applied to it

Рисуем черную точку

Draw a black 3 x 3 pixels dot

Начнем с создания обычной точки размером 3 на 3 px. Возьмите инструмент Ellipse/Эллипс, кликните в любое место на холсте и введите 3 px в параметры Height/Высота и Width/Ширина. Нажмите OK. Укажите точке черную заливку.

Трансформация

Going into the Object menu

В меню выберите Object > Distort & Transform > Transform/Объект>Исказить и Трансформировать>Трансформировать.

Transform window

В появившемся коне включите опцию Preview/Просмотр, затем укажите 8 px в поле Move Horizontal/Переместить горизонтально, и введите 19 в число Copies/Копий. Нажмите OK.

Transform window

Вновь найдите в меню Object > Distort & Transform > Transform/Объект>Исказить и Трансформировать>Трансформировать. Нажмите OK в предупредительном окне, которое появится. Вновь включите опцию Preview/Просмотр. На этот раз укажите 4 px в полях Move Horizontal/Переместить горизонтально и Vertical/Вертикально, и укажите 1 в количестве Copies/Копий. Нажмите OK.

Transform window

Не снимайте выделения с точек и в меню выберите Object > Expand Appearance/Объект>Разобрать оформление. Затем вновь в меню выберите Object > Distort & Transform > Transform/Объект>Исказить и Трансформировать>Трансформировать. Нажмите OK в предупредительном окне. Опять включите Preview/Просмотр. Укажите 8 px в поле Move Vertical/Переместить вертикально и введите 19 в количестве Copies/Копий. Нажмите OK. В меню выберите Object > Expand Appearance/Объект>Разобрать оформление, чтобы точки стали полностью редактируемыми объектами.

Настраиваем параметры растрирования документа

Document Raster Effects Settings window

Далее нам нужно применить эффект Photoshop, а это значит что наши точки будут растрированы. Поэтому нам нужно убедиться что разрешения документа достаточно, чтобы получить качественный результат. В меню выберите Effect > Document Raster Effects Settings/Эффект>Параметры растровых эффектов в документе и смените Resolution/Разрешение на High/Высокое (300 ppi).

Применяем эффект океанских волн

Going into the Effect menu

Убедитесь что выделены все точки. Теперь в меню выберите Effect > Distort > Ocean Ripple/Эффект>Искажение>Океанские волны.

Dotted halftone pattern with the Ocean Ripple effect applied

Укажите значение 15 в настройках Ripple Size/Размер Волны и Ripple Magnitude/Амплитуда волны , затем нажмите OK. У вас должно получиться нечто похожее на картинку выше.

Трассировка изображения

Halftone pattern after Image Trace

Для начала в меню выберите Object > Expand Appearance/Объект>Разобрать оформление, затем Window > Image Trace/Окно>Трассировка изображения. Чтобы видеть результат в реальном времени, включите опцию Preview/Просмотр. При желании вы можете поэкспериментировать с настройками, но и параметры по умолчанию должны дать хороший результат. Включите только опцию Ignore White/Игнорировать белый. Если все смотрится хорошо, нажмите кнопку Expand/Разобрать в верхней панели настроек.

Создаем паттерн

Halftone pattern in Pattern Mode

Почти готово. Теперь нам нужно превратить то, что мы имеем в паттерн, чтобы можно было применять его к объектам. Убедитесь что ваш узор выделен полностью и в меню выберите Object > Pattern > Make/Объект>Узор>Создать. Illustrator покажет вам окно, в котором сообщит что узор будет создан в палитре Swatches/Образцы. Вам не нужно ничего редактировать в самом паттерне — он и так должен выглядеть бесшовным, поэтому просто нажмите Done/Готово. Ваш паттерн появится в палитре Swatches/Образцы.

Применение паттерна к иллюстрации

Добавляем заливку паттерном

Вы можете применить заливку к объекту различными способами. Мы будем указывать паттерн дополнительным заливкам объектов. При этом эта заливка с паттерном будет в режиме наложения (blending mode) Overlay/Перекрытие на 60% opacity/непрозрачности. Overlay/Перекрытие в таких случаях подходит отлично, так как он замечательно подстраивается под нижний цвет. Дополнительную заливку вы можете создать в палитре Appearance/Оформление, кликнув по иконке Add Fill/Добавить заливку, расположенной в нижней части палитры.

adding a pattern fill as a separate object

В примере выше паттерн был добавлен для всей елки, хотя она состоит из трех разных объектов. Для этого нужно копировать все три объекта (cmd/ctrl+C), вставить копии на передний план (cmd/ctrl + F) и затем в меню выбрать Pathfinder > Unite/Обработка контура>Объединить. В палитре Layers/Слои кликните по круглой иконке справа от слоя и укажите 60 % Opacity/Непрозрачности и режим наложения Overlay/Перекрытие (это же вы можете сделать в палитрах Appearance/Оформление или Transparency/Прозрачность).

Масштабируем заливку паттерном

Scaling the pattern texture

Иногда паттерн может оказаться слишком крупным или мелкими для вашего объекта. Вы можете легко его масштабировать, не трогая сам объект. Для этого включите только опцию Transform Patterns/Трансформировать узоры в окне Scale/Масштабировать, после того как выберите инструмент Scale/Масштабировать.

Добавляем маску

applying a gradient fill to a rectangle

Иногда вы можете захотеть сделать так, чтобы паттерн был виден лишь в одной части объекта. В этом случае вам поможет Opacity Mask/Непрозрачная маска. В этом случае вам нужно чтобы ваш паттерн находился в отдельном объекте поверх остальных объектов. Нарисуйте фигуру, которая будет перекрывать объект с паттерном (это может быть обычный прямоугольник). Залейте этот прямоугольник градиентом от белого к черному цвету. После применения маски в местах с белым цветом ваш узор будет виден, а по мере появления черного — исчезать. Вы можете отредактировать этот градиент в любой момент, поэтому не очень переживайте о точности в момент создания.

applying the opacity mask

Теперь вам нужно выделить оба объекта: прямоугольник с градиентом и объект с паттерном, затем в палитре Transparency/Прозрачность кликните по иконке Make Mask/Создать маску. Если результат не очень вам нравится, вы можете кликнуть по иконке маски, войти в режим редактирования маски и поменять что-то в градиенте. На забудьте кликнуть по иконке с изображением, чтобы вернуться в нормальный режим, когда закончите.

Создаем набор паттернов

Такой паттерн может понадобится вам в будущем, поэтому иметь его под рукой будет удобно.

Белая версия

Проще всего создать белую версию нашего паттерна. Нам просто нужно сделать копию созданного нами ранее паттерна. Для этого кликните дважды по паттерну в палитре Swatches/Образцы, чтобы войти в режим редактирования паттерна. Теперь кликните Save a copy/Сохранить копию и укажите паттерну имя. Копия появится в палитре Swatches/Образцы. Кликните Done/Готово, так как вы все еще находитесь в режиме редактирования вашего первого паттерна. Теперь кликните дважды по копии паттерна в палитре Swatches/Образцы, выделите все элементы узора, укажите им заливку белого цвета и нажмите Done/Готово.

example of where I applied a white halftone texture pattern

В примере выше вы можете видеть белый вариант паттерна в действии на 75% opacity/непрозрачности.

Вариации паттерна

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

Сохраняем файл образца

После того как вы создали желаемое количество различных вариаций паттерна, вы можете сохранить их как файл образца. Для этого вам нужно сначала очистить палитру Swatches/Образцы от всех остальных образцов, которые вы не хотите включать в набор. Когда в палитре останутся только файлы с нашими паттернами, нажмите кнопку со стрелкой в правой верхней части палитры и выберите Save Swatch Library File as AI/Сохранить библиотеку образцов как AI. Место сохранения выберите сами. Если вы хотите, чтобы этот набор появлялся в палитре образцов при каждой загрузке Illustrator, сохраните этот файл в папке иллюстратора Presets. Эта локация будет указана по умолчанию. Когда вам понадобится файл, вы можете загрузить его через меню Open Swatch Library > Other Library/Открыть библиотеку образцов>Другая библиотека, которое находится в палитре Swatches/Образцы.

Читайте также: