Текстура металлической пластины — достаточно полезная штука, когда нужно нарисовать какую-нибудь металлическую панель (от рубки управления космическим кораблем в игре до вызывающего зубовный скрежет интерфейса VST-синтезатора «под старину»). Как и рассмотренное ранее хромирование, «металлические» текстуры часто ложатся в основу совершенно чудовищных с точки зрения эстетики иллюстраций, приводя человека разумного в хтонический ужас.

Впрочем, задача этого урока — не запугать начинающего художника, а научить его делать такие простые вещи и тем самым дать ему в руки знания, с которыми он(а), будем надеяться, не перейдет на темную сторону Силы. Итого, довольно несложная техника имитации металлической поверхности сэкономит вам время на фотографировании блестящей передней планки старенькой «Радиотехники» или забытого на балконе дюралевого уголка, лежащего там со времен последнего ремонта.

В основе техники лежит всего несколько шагов: создание фона, создание шума и его размывание в одном направлении. Все это с легкостью воспроизводится как в GIMP, так и в Inkscape. В первом — ценой необходимости переделывать текстуру с нуля, если нужно увеличить размер рисунка при преимуществе в виде скорости внесения изменений. Во втором — ценой без вины умерщвленных ресурсов системы ради возможности на лету поменять параметры обработки. Замечу, что в обоих случаях речь идет о растровой графике, поскольку даже фильтры SVG суть растровая обработка векторных данных (о чем позже).

GIMP

Все делается в три простых шага:

1. Создайте новый файл нужного размера и залейте его нейтральным серым цветом.

   

2. Примените фильтр «Фильтры → Шум… → Шум RGB…». Значение каждого канала установите равным 0.2. Флажки «Корреляция шума»и «Независимое RGB» должны быть сняты.

   

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

   

Все.

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

Inkscape

Для того, чтобы понять, почему на последних этапах нужно использовать примитив «Совмещение» (feComposite), нужно представлять себе, как работают фильтры SVG. Вы не поленились прочитать подробное описание? Замечательно! Не осилили весь текст целиком? Тоже не беда. Вот краткое изложение сути.

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

Во-вторых, необходимо помнить, что фильтры SVG работают только с растровыми данными. Поэтому все, что попадает в их цепкие лапки, принудительно растеризуется. Умилительный котенок с ярким бантиком? Растеризовать! Пучеглазая анимешная девочка-ангел? Растеризовать! Щетинистый гангстер с «береттой»? Всех растеризовать! :)

Есть два способа растеризации исходных векторных данных для фильтра SVG, которые нужно запомнить для начала. Первый способ — создать моментальный снимок, отражающий вид объекта или его альфа-канал в этот самый момент и на веки вечные («Фоновое изображение» в диалоге фильтров SVG). Второй способ — постоянно считывать изменения исходного векторного объекта («Исходный объект» в диалоге фильтров SVG) или его альфа-канала. Этот второй способ используется довольно часто и является достаточным поводом для использования каркасного режима, так здорово экономящего ресурсы системы, не говоря уж о времени и нервах художника.

Примитивы (такие как используемый ниже фрактальный шум), если использовать лишь т.н. исходный объект, на стиль (т.е. заливку и обводку) исходного объекта не будут реагировать никак. Поэтому если вы хотите работать с результатом того, что выдал фильтр применительно к исходному объекту, исходный объект и выход фильтра нужно совместить — точно так, как вы совместили бы в GIMP два слоя в режимах «Нормальный» и «Экран», чтобы применить к итоговой картинке, скажем, нерезкую маску. Как и в GIMP, в SVG совмещение можно производить при помощи разных математических действий. GIMP дает режимы наложения с заведомо известными и описанными в любом учебнике результатами, SVG же — возможность экспериментировать.

Перейдем к последовательности шагов:

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

   

2. Теперь создайте новый фильтр SVG («Объект → Фильтры эффектов…», «Создать»), добавьте примитив «Турбулентность» (feTurbulence) и задайте примерно такие параметры: Тип — Фрактальный шум, Основная частота — 0.4, Числа Кейли — 4, Случайное значение — 11. Этот примитив создаст область шума с координатами, позаимствованными у исходного прямоугольника. Остальные примитивы будут по умолчанию работать в этой же области (что можно при необходимости скорректировать на вкладке «Общие параметры фильтра» диалога).

   

3. Добавьте примитив «Цветовая матрица», поменяйте его тип на «Насыщенность» и укажите значение равным нулю. Тем самым вы обесцветите созданный шум, что в дальнейшем позволит единообразно менять цвет металлической поверхности (под золото, серебро, медь…) сменой заливки исходного объекта.

   

4. Добавьте примитив «Гауссово размывание» (feGaussianBlur), щелчком по кнопке «Связь» рассинхронизируйте значения размывания по горизонтали и вертикали. Верхнее значение (горизонталь) укажите равным 20 или даже 40, а нижнее (вертикаль) можно оставить равным нулю или, скажем, 0,1.

   

5. Ширина и высота области действия размывания по умолчанию всегда больше объекта, к которому применена. Поэтому, хоть сама текстура и выглядит что надо, исходная форма не соблюдена, верно? Значит настала пора свести шум с исходным объектом. Добавьте примитив «Сведение» (feComposite), переключите оператор на «Арифметический» и укажите значения K1 и K4 равными нулю, а K2 и K3 — единице.

   

6. Больше похоже на правду, но фон вокруг объекта не вдохновляет, не так ли? Самое время вспомнить об альфа-канале, который тоже растеризуется, и прочитать его из исходного объекта еще одним примитивом «Сведение», объединив прочитанное с результатом предыдущего сведения. Оператором на этот раз послужит «Вход». Получив на вход то, что окружает исходный объект, примитив зарисует полученным область вокруг исходного объекта.

   

   Как несложно догадаться, в режиме «Выход» будет произведена ровно обратная операция:

   

   Что тоже можно использовать в мирных целях.

Собственно, на этот раз все. Ну а позднее о фильтрах SVG будет рассказано еще немало — уж поверьте на слово.