Текстура металлической пластины — достаточно полезная штука, когда нужно нарисовать какую-нибудь металлическую панель (от рубки управления космическим кораблем в игре до вызывающего зубовный скрежет интерфейса VST-синтезатора «под старину»). Как и рассмотренное ранее хромирование, «металлические» текстуры часто ложатся в основу совершенно чудовищных с точки зрения эстетики иллюстраций, приводя человека разумного в хтонический ужас.
В основе техники лежит всего несколько шагов: создание фона, создание шума и его размывание в одном направлении. Все это с легкостью воспроизводится как в GIMP, так и в Inkscape. В первом — ценой необходимости переделывать текстуру с нуля, если нужно увеличить размер рисунка при преимуществе в виде скорости внесения изменений. Во втором — ценой без вины умерщвленных ресурсов системы ради возможности на лету поменять параметры обработки. Замечу, что в обоих случаях речь идет о растровой графике, поскольку даже фильтры SVG суть растровая обработка векторных данных (о чем позже).
GIMP
Все делается в три простых шага:
[row]
[col width=»six»]1. Создайте новый файл нужного размера и залейте его нейтральным серым цветом. [/col]
[col width=»six»] 
[/col]
[/row]
[row]
[col width=»six»] 2. Примените фильтр «Фильтры → Шум… → Шум RGB…». Значение каждого канала установите равным 0.2. Флажки «Корреляция шума»и «Независимое RGB» должны быть сняты. [/col]
[col width=»six»]
[/col]
[/row]
[row]
[col width=»six»]3. Примените гауссово размывание со значением 20 по горизонтали и 0 по вертикали, для чего нужно один раз щелкнуть по значку с цепочкой, чтобы предвариетльно рассинхронизировать эти значения. [/col]
[col width=»six»] 
[/col]
[/row]
Всё.
Но за кажущейся простотой — необходимость переделывать все сызнова, как только форма металлического объекта поменяется. Посему перейдем к более продвинутому варианту решения задачи.
Inkscape
Для того, чтобы понять, почему на последних этапах нужно использовать примитив «Совмещение» (feComposite), нужно представлять себе, как работают фильтры SVG. Вы не поленились прочитать подробное описание? Замечательно! Не осилили весь текст целиком? Тоже не беда. Вот краткое изложение сути.
Во-первых, стоит уяснить, что если в терминологии GIMP тот же фрактальный шум — это фильтр, то в терминологии SVG — всего лишь примитив (а точнее даже — облик примитива), т.е. составляющая часть фильтра. Это немного непривычно, но как только вы это запомните и закрепите парой упражнений, путаница в голове развеется.
Во-вторых, необходимо помнить, что фильтры SVG работают только с растровыми данными. Поэтому все, что попадает в их цепкие лапки, принудительно растеризуется. Умилительный котенок с ярким бантиком? Растеризовать! Пучеглазая анимешная девочка-ангел? Растеризовать! Щетинистый гангстер с «береттой»? Всех растеризовать! :)
Есть два способа растеризации исходных векторных данных для фильтра SVG, которые нужно запомнить для начала. Первый способ — создать моментальный снимок, отражающий вид объекта или его альфа-канал в этот самый момент и на веки вечные («Фоновое изображение» в диалоге фильтров SVG). Второй способ — постоянно считывать изменения исходного векторного объекта («Исходный объект» в диалоге фильтров SVG) или его альфа-канала. Этот второй способ используется довольно часто и является достаточным поводом для использования каркасного режима, так здорово экономящего ресурсы системы, не говоря уж о времени и нервах художника.
Примитивы (такие как используемый ниже фрактальный шум), если использовать лишь т.н. исходный объект, на стиль (т.е. заливку и обводку) исходного объекта не будут реагировать никак. Поэтому если вы хотите работать с результатом того, что выдал фильтр применительно к исходному объекту, исходный объект и выход фильтра нужно совместить — точно так, как вы совместили бы в GIMP два слоя в режимах «Нормальный» и «Экран», чтобы применить к итоговой картинке, скажем, нерезкую маску. Как и в GIMP, в SVG совмещение можно производить при помощи разных математических действий. GIMP дает режимы наложения с заведомо известными и описанными в любом учебнике результатами, SVG же — возможность экспериментировать.
Перейдем к последовательности шагов:
[row]
[col width=»six»] 1. Нарисуйте объект, который превратится в текстуру или просто металлический объект. Пускай для тренировки это будет банальный прямоугольник. [/col]
[col width=»six»]
[/col]
[/row]
[row]
[col width=»six»]
2. Теперь создайте новый фильтр SVG («Объект → Фильтры эффектов…», «Создать»), добавьте примитив «Турбулентность» (feTurbulence) и задайте примерно такие параметры:
- Тип — Фрактальный шум;
- Основная частота — 0.4;
- Числа Кейли — 4;
- Случайное значение — 11.
Этот примитив создаст область шума с координатами, позаимствованными у исходного прямоугольника. Остальные примитивы будут по умолчанию работать в этой же области (что можно при необходимости скорректировать на вкладке «Общие параметры фильтра» диалога).
[/col]
[col width=»six»]
[/col]
[/row]
[row]
[col width=»six»] 3. Добавьте примитив «Цветовая матрица», поменяйте его тип на «Насыщенность» и укажите значение равным нулю. Тем самым вы обесцветите созданный шум, что в дальнейшем позволит единообразно менять цвет металлической поверхности (под золото, серебро, медь…) сменой заливки исходного объекта.[/col]
[col width=»six»] 
[/col]
[/row]
[row]
[col width=»six»]4. Добавьте примитив «Гауссово размывание» (feGaussianBlur), щелчком по кнопке «Связь» рассинхронизируйте значения размывания по горизонтали и вертикали. Верхнее значение (горизонталь) укажите равным 20 или даже 40, а нижнее (вертикаль) можно оставить равным нулю или, скажем, 0,1. [/col]
[col width=»six»]
[/col]
[/row]
[row]
[col width=»six»]5. Ширина и высота области действия размывания по умолчанию всегда больше объекта, к которому применена. Поэтому, хоть сама текстура и выглядит что надо, исходная форма не соблюдена, верно? Значит пора свести шум с исходным объектом.
Добавьте примитив «Сведение» (feComposite), переключите оператор на «Арифметический» и укажите значения K1 и K4 равными нулю, а K2 и K3 — единице.
[/col]
[col width=»six»] 
[/col]
[/row]
[row]
[col width=»six»]6. Больше похоже на правду, но фон вокруг объекта не вдохновляет, не так ли? Самое время вспомнить об альфа-канале, который тоже растеризуется, и прочитать его из исходного объекта еще одним примитивом «Сведение», объединив прочитанное с результатом предыдущего сведения.
Оператором на этот раз послужит «Вход». Получив на вход то, что окружает исходный объект, примитив зарисует полученным область вокруг исходного объекта. [/col]
[col width=»six»] 
[/col]
[/row]
[row]
[col width=»six»] Как несложно догадаться, в режиме «Выход» будет произведена ровно обратная операция. Что тоже можно использовать в мирных целях.[/col]
[col width=»six»]
[/col]
[/row]
Собственно, на этот раз все. Ну а позднее о фильтрах SVG будет рассказано еще немало.
Оставить комментарий