Трассировка акварели в Adobe Illustrator. Как нарисовать русалку в акварельном стиле в Illustrator

Originally posted by twins_nika at Трассировка акварели в Adobe Illustrator.

На выходных у меня возникла необходимость трассировать акварельные фоны для стоков. И здесь нарисовалась проблема - простой векторный фон весит 6Мб. А по моей задумке у меня набор из четырех изображений, содержащих подобные фоны. Плюс к нему - несколько векторных элементов на самом фоне.
В итоге: вес конечного файла около 30Мб.

При том, на самом стоке достаточно изображений, где акварельные фоны идут наборами. И как-то же их вес уменьшили.

В Интернете ничего толкового мне найти не удалось. Если по обработке акварели и подготовке её к трассировке, что-то можно найти, то о самой трассировке подробностей нет. Нажимай кнопку в Illustratore - дёргай настройки и получай результат.

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

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

А теперь о самой трассировке.





Акварель будет «тяжелой», так как при трассировке образуется множество контуров, которые увеличивают вес файла. При помощи команды Упростить (Объект-Контур-Упростить...), можно уменьшить их количество. Но не намного. Иначе начинает страдать качество вектора. А именно появляются пустоты - иллюстрация становится в «дырочку».
Значит надо каким-то образом упростить саму акварель перед трассировкой. Сделать её более сглаженной.
Можно, наверное, изначально брать бумагу менее пористую, но мне на более гладкой не нравятся заливки. Плотная и пористая бумага позволяет краске интересно растекаться.

Я прибегла к средствам Photoshop, а в частности к группе фильтров Topaz Labs. Они не идут в комплекте с Photoshop, но их можно найти в Интернете и без труда установить. Можно и самому попробовать упростить акварель в Photoshop. Но, честно, мне возиться - лень. Когда это можно сделать быстро и просто, я иду по пути меньшего сопротивления.

В этой группе фильтров нам понадобится Topaz Clean 3:

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

Вот это изображения я буду трассировать в Illustrator.

У меня по умолчанию количество цветов при трассировке стоит - 85, я использую вариант «Интенсивный цвет». Количество контуров вы видите внизу - 17 788.
Кстати на экране уже трассированное изображение.

Я решила количество цветов сократить, потому что оно влияет и на количество контуров. Для себя оптимальным подобрала вариант - 65 цветов. Вот результат:

Зрительно разница не слишком заметна, зато количество контуров сократилось аж до 7 582.
После этого, я ещё упрощаю контур через команду «Упростить...». При этом заметила, что точность кривой лучше выставлять не на 100%, а на 98%.
Почему-то количество контуров при этом значении у меня меньше. При параметре в 99% оно даже превышает исходные значения.
Такое упрощение много нам не сэкономит, но в таком деле даже 1000 довольно приличное значение.
Я ещё уменьшила физический размер и в итоге получила вес файла - 4,30Мб.

Не могу сказать, что это слишком много. Но уменьшив физический размер заливок, мне удалось разместить в одном наборе 4 подобные заливки с векторными элементами. Общий вес файла составил - 14,9 Мб. При этом на мой взгляд, качество самой акварели приемлимо для векторного варианта.

Ещё раз покажу: исходный файл (слева) и конечный резльтат- векторный файл (справа):


Если у вас есть свои методы, советы, хитрости - с интересом почитаю.
Спасибо за внимание.

Я когда хотела оттрейсить свои акварели искала информацию, какие настройки лучше делать, в чем векторить, но нашла очень немного. В основном на форумах. В итоге собрав информацию, попробовав то что мне нравиться самой, решила написать статью для тех кто как и я задался таким же вопросом. Как перевести растр 9 скетч, эскиз, дудл (doodle), акварель и др.) в вектор?

Я для микростоков сканирую картинки для нескольких целей:

  1. оттрассировать акварель, гуашь, карандаш в вектор (трассировка от слова trace, то есть переведение растровой графики в векторную)
  2. отвекторить черно-белую графику, скетчи, дудлы (doodle)
  3. сделать разные пятна и потертости для фона
  4. сделать сам фон.

Сначала я сканирую или фотографирую изображение. Иллюстрации, дудлы лучше отсканировать. Пятна или мятую бумагу для фона проще, для меня, сфотографировать. Пятна подойдут всякие разные: пролили чай, кофе? Фотографируем. Остались потертости от наждачки или от времени краска облупилась? Фотографируем. На земле набросаны мелкие камушки? Фотографируем!

Скан акварели. Теперь его нужно привести в приличный вид.

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

По хорошему фон проверяют пипеткой в палитре Инфо. Ну а так как постоянно тыкать надоест, я проверяю так в конце, в местах скопления грязи.

Как я делаю фон чисто белым:

  1. Создаю корректирующий слой Уровни или Кривые (ищите его в палитре Слои внизу) и сильно затемняю картинку. Тут вся грязи и вылезает.
  2. Далее можно просто пройтись белой кистью (мягкой или жесткой), а можно взять инструмент осветлитель (dodge) и пройтись им. Части фона просто убрать лассо или другими выделениями и залить белым цветом.
  3. Проверяем пипеткой в палитре инфо где цвет белый, а где нет. Дочищаем.
  4. Удаляем корректирующий слой.

Отсканировано в Иллюстраторе СС

Сканирование в Иллюстраторе CS5

В иллюстрациях выше: трассировка в 5 иллюстраторе с количеством цветов 255. и векторизация из иллюстратора СС, количество цветов 85%, то, что стоит по умолчанию (значение можно менять). Файл в cs5, естественно, больше, количество цветов потому что больше.


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

Акварельная арт кисть

Для начала необходимо настроить инструмент карандаш. Двойной клик по инструменту карандаш откроет окно с параметрами. Здесь надо выставить отклонение равное 0.5.

Начинаем рисовать карандашом (N) контур кисти как показано на рисунке ниже. Края не должны совпадать точно. Постарайтесь создать грубые края которые хорошо будут смешиваться в акварельном эффекте. Также убедитесь что контур у Вас получился закрытым. Для этого перед замыканием можно нажать Alt. Заливку сделайте белой и уберите обводку.

Нарисуйте третий контур внутри второго не пересекая его. Заполните 30%черного без обводки.

Выберите все три контура и создайте переход (объект>переход>создать). Если переход получился не плавный а ступеньками нужно проверить закрытость контуров и отсутствие пересечения. В панели прозрачность выберете режим наложения умножение.

Теперь перетягиваем переход в панель кисти с помощью инструмента выделение(v). В диалоговом окне выбираем новая объектная кисть. В методе окраски выбираем сдвиг цветового тона. Это позволит менять цвет мазка без создания новой кисти.

Теперь данную кисть можно применять к любому контуру или тексту.

Акварельная дискретная кисть

Создайте окружность как показано на картинке. Заливку сделайте 40% черного без обводки.

Теперь используя карандаш с прежними настройками рисуем контур вокруг круга как показано на рисунке. Убедитесь что контур замкнут. Заливаем белым без обводки и отправляем на задний план(объект>монтаж>на задний план).

Выделяем оба контура и создаем переход. Режим наложения делаем умножение.

Перетягиваем переход в панель кистей и выбираем дискретная кисть. Опции выбираем следующие.
Размер = Выбираем случайный и ставим от 10% до 150%.
Интервалы = Выбираем случайный и ставим от 10% до 80%.
Разброс = Выбираем случайный и ставим от -150% до 150%.
Rotation = Выбираем случайный от -180° до 180°.
Метод окраски = выбираем сдвиг цветового тона.

Иллюстратор великолепно подходит для создания строгих линий и элементов с четкими границами, но иногда хочется создать картинку с текстурой и глубиной.
Акварельный рисунок обладает и глубиной и текстурой, но думается, что бесполезно создавать его в иллюстраторе.
Вы думаете "Отчего бы не сделать это в Фотошопе?". Но тогда вы теряете такое преимущество вектора как масштабируемость.

Шаг 1
Для начала найдем картинку цветка. Этой картинке не нужно быть чем то особенным в смысле качества. Я взял и быстро cтфоткал первый попавшийся подходящий цветок найденный рядом. На картинке ниже вы видите фотку этого цветка.

Шаг 2
Для начала, создадим новый документ 18 на 22 см. Затем перейдем в меню File > Place, и найдем свой цветок на вашем компьютере.
Выберем желаемый размер. Затем выберем Template из всплывающего меню Layers Panel (панели Слои). Если изображение становится слишком прозрачным, дважды щелкните по слою, чтобы открыть диалог Layer Options Dialog (свойств слоя). Здесь можете изменить настройки Dim Images на любой процент.

Шаг 3
Нажмите кнопку Create New Layer (создать новый слой) внизу палитры слоев для того чтобы создать новый слой.
Дважды кликните по новому слою и переименуйте его в "Контур Цветка". Использование подписывания слоев - лучший путь чтобы стать организованнее.

Шаг 4
В новом слое используем инструмент Элипс Ellipse Tool [L].
Щелкнуть инструментом Ellipse Tool по рабочей области документа и в окне опций установить ширину 2 дюйма, а высоту 0.05 дюйма, чтобы создать узкий эллипс. Установить заливку для созданного эллипса 100% черного, без цвета контура.

Шаг 5
Далее, инструментом Selection Tool ("Выделение") перетащите эллипс в палитру Кисти. Когда вы перетащите эллипс, то всплывет диалог New Brush (Новая кисть). Отметьте опцию New Art Brush(Новая Арт Кисть), всплывет диалог Art Brush Options(свойств Арт кисти).
Назовите кисть "Обводка цветка". Затем перейдите вниз диалогового окна для выбора Method(способа) и Tints оттенков из выпадающего списка. Это позволит изменить цвет кисти, не создавая новых кистей.

Шаг 6
Выберем инструмент Brush(Кисть) из Панели инструментов. Убедитесь, что вы выбрали только что созданную кисть. Потом начните отрисовку одного из лепестков цветка.
Если вы чувствуете что линии толстоваты, измените Stroke Weight (Толщину линии) в Stoke Panel(Палитре линий) в палитре. Некоторым из вас, может удобнее рисовать pen tool (ручкой), но вы сейчас увидите, что вы можете очень быстро управляться и с Brush Tool(Кисточкой).

Шаг 7
Продолжайте отрисовку цветка и стебелька наиболее предпочтительными линиями.
Отрисовывая не беспокойтесь о том чтобы пути были замкнуты. Затем выберите
все штрихи и измените цвет на фиолетовый. После скройете слой исходного изображения Flower Pic Template Layer нажав иконку Visibility Icon (Видимость).

Шаг 8
Создадим новый слой, назовем его Background Watercolor (Подложка акварели). Затем перетащим его под слой Flower Outline (Контур Цветка). Блокируем слой Flower Outline (Контур Цветка), нажав значок Lock Icon (Блокировка) следующий за Visibility Icon (Значком видимости).

Шаг 9
Для этого шага нужно будет использовать Pencil Tool (Карандаш), но для начала нужно изменить
настройки этого инструмента в Pencil Tool настройках карандаша.
Дважды кликнем на Pencil Tool (Карандаш) в панеле инструментов чтобы всплыл диалог Pen Tool Preferences (Установки карандаша).
В этом диалоге, установите Fidelity (точность) 0.5 пикселей. Это создаст путь из множества точек, помогая создавать эффект акварели.

Шаг 10
С выбранным Pencil Tool (Карандашом) начинаем рисовать путь вокруг контура цветка. Рисуя этот путь, грубо изменяйте неровности краев. Убедитесь, что путь закрыт. Легчайший способ закрыть путь удерживать в процессе рисования клавишу Option / Alt
Залейте фигуру белым и уберите его контур. Затем нарисуйте путь вокруг первого. Снова грубо меняйте неровности краев. Залейте фигуру 18% Cyan голубым цветом. Отправьте этот объект за первый.

Шаг 11.
Выделите обе фигуры и следуйте Object > Blend > Make для создания размытия. Это позволит создать эффект плавного смешивания. Если у вас не получается этого эффекта (фигуры в уступах не размыты), убедитесь что фигуры замкнуты и не повторяют одна другую. Blend Options проследовав Object > Blend > Blend Options. Убедитесь что выставлен Smooth Color

Шаг 12
Далее создайте 2 новых контура Карандашом которые намного больше предыдущих. Убедитесь что края действительно расходятся в стороны неровно. Меньший путь нужно залить на 18% голубым, больший - зальем белым. Следуем Object > Blend > Make для создания размытия Отправляем за первый бленд.

Шаг 13
Блокируем слой Background Watercolor Layer (Подложка Акварели). Создаем новый слой и подписываем его Water Color Textures (Текстуры акварели) , тащим его под слой "Flower Outline(Обводка Цветка)

Шаг 14
Первый набор текстур это кляксы краски. Используя Ellipse Tool (инструмент - Эллипс) рисуем окружность. Она не должна быть идеальной. Залейте его любым цветом на ваш выбор. Лучше использовать неброские цвета. Для первой точки я выбрал 30% Синего.
Далее используя Pencil Tool (карандаш), рисуем сильно ломанный контур вокруг окружности.
Убедитесь, что фигура замкнута, используя Option/Alt. Когда зальете фигуру белым, отправьте ее под окружность. Выделите обе фигуры и создайте бленд как и перед этим. Установите размытие Multiply в палитре Прозрачность. Также измените значение Opacity (прозрачности) на 50%.

Шаг 15
Повторите эти шаги для создания пятен разных форм и цветов. Для пятен белого цвета не устанавливайте Transparency (Прозрачность) в Multiply, просто убедитесь, что внешние относительно элипсов фигуры (которые вокруг эллипсов) соответствует цвету который перекрывает.

Шаг 16
Вы можете хранить Water Blob (размытые пятна) элементы в том же самом слое - Water Color Textures (Акварельные текстуры). Используйте Pencil Tool (карандаш) для рисования пятен.
Попробуйте сделать фигуры более эллиптическими, менее угловатыми чем прежде нарисованные. Залейте его 10% Cyan (10% голубым) и уберите контур. Затем создайте другое пятно Карандашом чуть меньше уже созданных. Залейте белым и уберите контур. Выделите обе пятна и создайте Blend (Размытие).

Шаг 17
Расположите пятна там где вам нравится. Кроме данного пятна, поставьте на картинке больше пятен там и так, как вам кажется более уместным.

Шаг 18
Создайте новый слой, назовите Flower Color (Окраска цветка). Перетащите его под слой Flower Outline (Обводка цветка) и блокируем все другие слои.

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

Шаг 20
Когда вся картинка будет готова, будет весьма кстати обрезать её с помощью Clipping Masks(Обрезающая маска).
Создайте фигуру которой вы бы хотели обрезать слой Flower Outline (Обводку цветка) и скопируйте её.
Я использую для этого прямоугольник по размеру моего документа.