Эффекты Фильтра Svg. Часть 5. Сопоставление Текста С Текстурой Поверхности С Помощью Fedisplacementmap

В следующей статье из серии о SVG-фильтрах Сара Суэйдан покажет, как заставить текст соответствовать текстуре поверхности, используя примитив feDisplacementMap .

Предлагаемая серия статей «Эффекты фильтрации SVG» Сары Суейдан, внештатного разработчика пользовательского интерфейса и технического писателя из Ливана, посвящена тому, как работают фильтры SVG, и состоит из следующих статей: Эффекты фильтров SVG

1. Эффекты фильтрации SVG. Часть 1. Фильтры SVG 101
2. Эффекты фильтрации SVG. Часть 2. Обрисовываем текст с помощью feМорфология
3. Эффекты фильтрации SVG. Часть 3. Эффект постеризации изображения с помощью feComponentTransfer
4. Эффекты фильтрации SVG. Часть 4. Использование двухцветных изображений feComponentTransfer .

5. Эффекты фильтрации SVG. Часть 5. Сопоставление текста с текстурой поверхности с помощью feDisplacementMap

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

У меня есть статья прямо здесь, на Codrops , который даст вам полный обзор различных способов создания текстурированного текста в Интернете с помощью CSS и SVG, которые могут вас заинтересовать сегодня.

Йоксель затронул еще одну область этой темы и написал статья об анимации заполнения текста .

Однако одним из нетронутых эффектов стал текст, соответствующий текстуре поверхности.

Когда текст соответствует поверхности, он принимает форму этой поверхности.

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

Именно этого я и коснусь в этой статье.

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

Сопоставление текста с текстурой поверхности: метод Photoshop

В уроке Photoshop дизайнер создал этот эффект, используя так называемую карту смещения.

Карта смещения — это изображение, информация о цвете которого используется для искажения содержимого другого элемента.

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

В Photoshop, чтобы текст соответствовал поверхности, дизайнер сделал следующее:

• Обесцвечил изображение.

• Уменьшили детализацию изображения, размыв его на 1 пиксель.

• Сохранил изображение как карту смещения.

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

• Повторно использовал исходное изображение в качестве фона для текста.

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

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

Если вы читали предыдущие статьи этой серии, вы знаете, что поэтапное мышление важно для создания или воссоздания эффектов с использованием примитивов фильтрации SVG. И вы, возможно, уже догадались, как повторить некоторые из этих шагов, используя примитивы фильтрации SVG, некоторые из которых мы рассмотрели в предыдущих статьях.

Но самым важным шагом в этом эффекте является создание и применение карты смещения.

Как мы можем создать это в SVG?

Сопоставление текста с текстурой поверхности в SVG

В примитиве SVG feDisplacementMap используется для смещения контента с помощью карты смещения.

feDisplacementMap принимает два входа для получения одного результата.

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

in2 .

Атрибут в зарезервировано для входов, к которым вы захотите применить эффект смещения.

Как и в случае со всеми другими примитивами, входные данные для feDisplacementMap может быть что угодно из вашего собственного графического источника ( ИсточникГрафика ), к результату другой операции фильтрации.

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

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

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

• Давайте обесцветим изображение, используя feColorMatrix .

• Примените к изображению размытие по Гауссу 0,5 пикселя, используя feGaussianBlur .

• Использование изображения для деформации текста с помощью feDisplacementMap .

• Давайте смешаем текст с фоновым изображением, используя feBlend и примените к нему эффект прозрачности (уменьшите непрозрачность, используя feComponentTransfer ).

• Давайте отобразим текст и изображение позади него, объединив два слоя, используя feMerge .

Итак, для рендеринга изображения в области фильтра мы будем использовать feImage .

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

Он будет использоваться для загрузки в операцию feColorMatrix обесцветить его.

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

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

   

 matrix | saturate | hueRotate | luminanceToAlpha

   

Другие клавиши добавляют возможности.

Чтобы обесцветить изображение, используйте тип насыщать .

В атрибуте ценности указывает степень обесцвечивания изображения.

Поскольку мы хотим полностью обесцветить наше изображение, мы установим значение 0. Обратите внимание, что значения представлены в виде дробей: 1 (значение по умолчанию) означает полную насыщенность, а 0 — полную ненасыщенность (оттенки серого).

Итак, приступим к переводу наших шагов в код:

<!-- I'm extending the filter region just to increase its area for visual purposes. This is not required or needed for the effect to work.--> <filter id="conform" x="-50%" y="-50%" width="200%" height="200%"> <!-- Get the image. --> <feImage xlink:href=".

" x="0" y="0" width="100%" height="100%" preserveAspectRatio="none"></feImage> <!-- Desaturate the image. --> <feColorMatrix type="saturate" values="0" result="IMAGE"/> <!-- .

-->

На данный момент наша область фильтра выглядит так:



Рисунок 1. Исходное изображение после обесцвечивания.

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

Для этого конкретного эффекта я решил размыть его всего на 0,25 пикселя.

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

<!-- I'm extending the filter region just to increase its area for visual purposes. This is not required or needed for the effect to work.--> <filter id="conform" x="-50%" y="-50%" width="200%" height="200%"> <!-- Get the image. --> <feImage xlink:href=".

" x="0" y="0" width="100%" height="100%" preserveAspectRatio="none"></feImage> <!-- Desaturate the image. --> <feColorMatrix type="saturate" values="0" result="IMAGE"/> <!-- decrease level of details so the effect on text is more realistic --> <feGaussianBlur in="IMAGE" stdDeviation="0.25" result="MAP"></feGaussianBlur> <!-- .

-->

И наша карта смещения теперь выглядит так:



Рис_2. Просмотр карты смещения.

С использованием feDisplacementMap , теперь мы можем искажать текст, используя нашу карту смещения:

<!-- I'm extending the filter region just to increase its area for visual purposes. This is not required or needed for the effect to work.--> <filter id="conform" x="-50%" y="-50%" width="200%" height="200%"> <!-- Get the image. --> <feImage xlink:href=".

" x="0" y="0" width="100%" height="100%" preserveAspectRatio="none"></feImage> <!-- Desaturate the image. --> <feColorMatrix type="saturate" values="0" result="IMAGE"/> <!-- decrease level of details so the effect on text is more realistic --> <feGaussianBlur in="IMAGE" stdDeviation="0.25" result="MAP"></feGaussianBlur> <!-- Use the displacement map to distort the source text --> <feDisplacementMap in="SourceGraphic" in2="MAP" scale="15" xChannelSelector="R" yChannelSelector="R" result="TEXTURED_TEXT"></feDisplacementMap> <!-- .

-->

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

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



Рис_3. Отображать искаженный текст. Вы уже можете видеть, как текстура ткани принимает форму по краям текста.

Это потрясающе.

Как и в уроке по Photoshop, мы повторно визуализируем изображение позади текста, снова используя feImage :

<!-- I'm extending the filter region just to increase its area for visual purposes. This is not required or needed for the effect to work.--> <filter id="conform" x="-50%" y="-50%" width="200%" height="200%"> <!-- Get the image. --> <feImage xlink:href=".

" x="0" y="0" width="100%" height="100%" preserveAspectRatio="none"></feImage> <!-- Desaturate the image. --> <feColorMatrix type="saturate" values="0" result="IMAGE"/> <!-- decrease level of details so the effect on text is more realistic --> <feGaussianBlur in="IMAGE" stdDeviation="0.25" result="MAP"></feGaussianBlur> <!-- Use the displacement map to distort the source text --> <feDisplacementMap in="SourceGraphic" in2="MAP" scale="15" xChannelSelector="R" yChannelSelector="R" result="TEXTURED_TEXT"></feDisplacementMap> <!-- Re-display the image as a background image --> <feImage xlink:href=".

" x="0" y="0" width="100%" height="100%" preserveAspectRatio="none" result="BG"></feImage> <!-- .

-->

Наконец, мы хотим смешать текст с фоном, чтобы усилить эффект. Мы уменьшим непрозрачность текста до 0,9 с помощью feColorMatrix , а затем примените примитив feBlend к тексту, чтобы он сливался с фоном.

Так же Режимы наложения CSS , у нас есть выбор 16 режимов наложения .

Для нашего эффекта подойдет режим умножать .

В уроке Photoshop дизайнер использовал линейную систему обозначений, которая недоступна в SVG/CSS. feBlend для смешивания потребуется два входа: текст и фоновое изображение:

<!-- I'm extending the filter region just to increase its area for visual purposes. This is not required or needed for the effect to work.--> <filter id="conform" x="-50%" y="-50%" width="200%" height="200%"> <!-- Get the image. --> <feImage xlink:href=".

" x="0" y="0" width="100%" height="100%" preserveAspectRatio="none"></feImage> <!-- Desaturate the image. --> <feColorMatrix type="saturate" values="0" result="IMAGE"/> <feGaussianBlur in="IMAGE" stdDeviation="0.25" result="MAP"></feGaussianBlur> <!-- Use the displacement map to distort the source text --> <feDisplacementMap in="SourceGraphic" in2="MAP" scale="15" xChannelSelector="R" yChannelSelector="R" result="TEXTURED_TEXT"></feDisplacementMap> <!----> <feImage xlink:href=".

" x="0" y="0" width="100%" height="100%" preserveAspectRatio="none" result="BG"></feImage> <!-- Reduce the opacity of the text --> <feColorMatrix in="Textured_Text" result="Textured_Text_2" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 .

9 0" /> <!-- Blend the text with the background --> <feBlend in="BG" in2="Textured_Text_2" mode="multiply" result="BLENDED_TEXT"></feBlend> <!-- .

-->

И последнее, но не менее важное: мы добавим новый слой со смешанным текстом поверх слоя фонового изображения, используя feMerge :

<!-- I'm extending the filter region just to increase its area for visual purposes. This is not required or needed for the effect to work.--> <filter id="conform" x="-50%" y="-50%" width="200%" height="200%"> <!-- Get the image. --> <feImage xlink:href=".

" x="0" y="0" width="100%" height="100%" preserveAspectRatio="none"></feImage> <!-- Desaturate the image. --> <feColorMatrix type="saturate" values="0" result="IMAGE"/> <!-- decrease level of details so the effect on text is more realistic --> <feGaussianBlur in="IMAGE" stdDeviation="0.25" result="MAP"></feGaussianBlur> <!-- Use the displacement map to distort the source text --> <feDisplacementMap in="SourceGraphic" in2="MAP" scale="15" xChannelSelector="R" yChannelSelector="R" result="TEXTURED_TEXT"></feDisplacementMap> <!----> <feImage xlink:href=".

" x="0" y="0" width="100%" height="100%" preserveAspectRatio="none" result="BG"></feImage> <!-- Reduce the opacity of the text --> <feColorMatrix in="Textured_Text" result="Textured_Text_2" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 .

9 0" /> <!-- Blend the text with the background --> <feBlend in="BG" in2="Textured_Text_2" mode="multiply" result="BLENDED_TEXT"></feBlend> <!-- Layer the text on top of the background image --> <feMerge> <feMergeNode in="BG"></feMergeNode> <feMergeNode in="BLENDED_TEXT"></feMergeNode> </feMerge> </filter> <text dx="60" dy="200" font-size="10em" font-weight="bold" filter="url(#conform)" fill="#00826C"> organic </text>

И вот наш окончательный результат:



Рис_4. Конечный результат.

Примечания по использованию карт смещения в SVG

• xChannelSelector : Указывает, какой цветовой канал (R/G/B/A) in2 использование для горизонтального перемещения;
• yChannelSelector : Указывает, какой цветовой канал (R/G/B/A) in2 использование для вертикального перемещения;
• шкала (масштаб): определяет степень искажения изображения.

  Выше шкала , тем сильнее эффект искажения.

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

КОРС .

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

Вы также можете встроить изображение в фильтр (в feImage ) и использовать ее как карту смещения.

Этот ручка от Габи — отличный пример использования встроенного шаблона SVG для искажения исходного изображения.

Этот круговой узор, создающий эффект ряби, — мой любимый.

Применение преобразования к исходному тексту

Если вы примените преобразование вращения к к которому применен фильтр, вся фильтруемая область будет повернута, включая фоновое изображение:



Рис_5. Вид изображения после применения поворота, фон также повернут. Это также происходит, если к исходному тексту применить другие стили.

Например, если вы установите параметр непрозрачности при значении 0,5 это также повлияет на текст и фоновое изображение.

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

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

Этот метод любезно предоставлен Амелия Беллами-Ройдс .

<g filter="url(#conform)"> <text dx="60" dy="200" font-size="10em" transform="translate(-20 30) rotate(-7)" fill="#00826C">organic</text> </g>

Я немного изменил преобразование, добавив повторную выборку, чтобы текст оставался по центру области фильтра.

Результат этого преобразования теперь выглядит так:



Рис_6. Трансформация с пересчетом для центрирования текста.

Обратите внимание, что я применяю преобразование вращения к тексту, используя атрибут преобразования SVG, а не CSS, поскольку на момент написания этой статьи Internet Explorer и MSEdge не поддерживают преобразования CSS для элементов SVG.

Реальная демо-версия

В этой теме содержит дополнительную информацию по этому вопросу.

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

Ниже приведен скриншот того, как выглядит демо-версия в Chrome:



Рис_8. Как сейчас выглядит эффект искажения текста в Chrome. Вы можете посмотреть демо Здесь .

Заключение

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

SVG может создавать текстуры.

.

В следующей статье мы узнаем, как создать простую текстуру, используя комбинацию шумовых и световых эффектов, созданных SVG. Оставайтесь с нами.

Теги: #CSS #веб-дизайн #svg

• «Смартфон И Его Команда» Или Скройте Номер Звонящего И Управляйте Звонком С Помощью Api Мтт

  19 Oct, 24

• Установка Версии Hpl Для Графического Процессора С Openblas

  19 Oct, 24

• Перевод Документации Webloginpe

  19 Oct, 24

• Дайджест Интересных Материалов Из Мира Drupal #20

  19 Oct, 24

• О Пластиковых Картах

  19 Oct, 24

• Наступление Эры Ico

  19 Oct, 24

• Последовательность Поиска Ошибки В Программе Плк

  19 Oct, 24

• Сколько Вы Спите В Сутки, Хабра-Люди?

  19 Oct, 24

• Raspberry Pi 2: 4 Ядра, Гб Озу, Шестикратная Производительность

  19 Oct, 24

• Выпуск Фреймворка Qt 5.8

  19 Oct, 24