Дизайнер Тиаки Ёсихара создал мебель из пенополистирола с текстурой древесины

Дизайнер Тиаки Ёсихара представил коллекцию мебели Seam of Skin, включающую два табурета, сиденье и ящик из пенополистирола с текстурой под дерево. Ёсихара сначала разрезал большой кусок пенополистирола на тонкие полоски с помощью нагретой проволоки, затем распылил краску на одну сторону каждого тонкого листа, а затем прижал две стороны друг к другу. После чего разрезал слоистый…

Эффекты фильтра SVG: согласование текста с текстурой поверхности с помощью

Узнайте, как привести текст в соответствие с текстурой поверхности, используя feDisplacementMap, в этой пятой статье нашей серии SVG Filter.

 SVGFilterEffects_displacementMap_featured "width =" 800 "height =" 600 "class =" alignnone size-full wp-image-38121 "/> </p>
<p> Применение текстур к тексту — один из самых популярных текстовых эффектов в графическом дизайне. Поскольку большая часть печатного и графического дизайна проникла на веб-платформу, такие эффекты также были воссозданы в Интернете с использованием CSS, а также с использованием таких возможностей SVG, как шаблоны, маски и обтравочные контуры. У меня есть статья прямо здесь о Codrops, которая дает вам полный обзор различных способов создания текстурированного текста в Интернете с использованием CSS и SVG, которые вы можете быть заинтересованы в проверке. Йоксель затронул другую область этой темы и написал статью об анимации текстовых заливок. </p>
<p> Однако, один эффект, который не был затронут, — это эффект текста <em>соответствующего </em> текстуре поверхности. Когда текст соответствует поверхности, он принимает форму этой поверхности. В зависимости от используемой поверхности и текстуры, вы можете получить действительно привлекательные результаты. Это то, что эта статья будет касаться. И лучшая часть? Все эти эффекты применяются к <em> реальному </em>доступному для поиска, выбираемому и доступному тексту. </p>
<p> Это пятая в серии статей о фильтрах SVG. В предыдущие недели мы познакомились с фильтрами SVG и узнали, как их создавать и использовать для создания различных эффектов от выделенного текста до постеризованных изображений, а также как копировать эффекты двойного изображения в стиле Photoshop с помощью фильтров SVG. </p>
<h2> Соответствие тексту текстуре поверхности: путь Photoshop </h2>
<p> Как и в случае с эффектом дуотона, я попытался привести текст в соответствие текстуре поверхности в Photoshop, пытаясь воспроизвести этот эффект с помощью фильтров SVG. Я нашел это пошаговое руководство на YouTube. Следующее видео является ускоренной версией этого урока: </p>
<div class='code-block code-block-3 ai-viewport-1 ai-viewport-2' style='margin: 8px 0; clear: both;'>
<!-- Yandex.RTB R-A-268541-2 -->
<div id=

В руководстве по Photoshop дизайнер создал этот эффект, используя так называемую карту смещения . Карта смещения — это изображение, информация о цвете которого используется для искажения содержимого другого элемента. Чтобы создать наш текстовый эффект, текстура изображения будет использоваться для искажения текста, чтобы он соответствовал форме текстуры.

В Photoshop для согласования текста с поверхностью дизайнер выполнил следующие действия:

  1. Обесцвечивать изображение.
  2. Уменьшите количество деталей на изображении, размывая его на 1 пиксель.
  3. Сохраните изображение как карту смещения.
  4. Создайте текст и примените к нему фильтр искажения, используя изображение в качестве карты смещения.
  5. Повторно использовать исходное изображение в качестве фона позади текста.
  6. Затем уточните эффект, добавив небольшую прозрачность к тексту и смешав его с фоновым изображением.

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

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

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

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

Чтобы воссоздать эффект из урока Photoshop выше, нам нужно сначала создать карту смещения. В SVG примитив feDisplacementMap используется для перемещения контента с использованием карты смещения.

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

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

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

  1. Получите изображение, которое будет использоваться в качестве текстуры, используя feImage .
  2. Обесцветить изображение, используя feColorMatrix .
  3. Примените к изображению размытие по Гауссу 0,5px, используя feGaussianBlur .
  4. Используйте изображение для искажения текста, используя feDisplacementMap .
  5. Смешайте текст с фоновым изображением, используя feBlend и примените к нему полупрозрачный эффект (уменьшите непрозрачность, используя feComponentTransfer ).
  6. Показать текст и изображение позади него, объединив два слоя, используя feMerge .

Примитив фильтра feImage является версией фильтра элемента и имеет те же атрибуты, что и [19459] ] тоже элемент. Поэтому для рендеринга изображения в области фильтра мы будем использовать feImage . Получив наше изображение, мы можем использовать его в качестве входных данных для других операций фильтрации. Он будет использоваться операцией feColorMatrix для загрузки, потому что нам нужно его обесцветить.

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

 Матрица | насыщать | hueRotate | luminanceToAlpha 

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

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

Итак, давайте начнем переводить наши шаги в код:

  

        
        
         <feImage  xlink: href = "..." x = "0" y = "0" width = "100%" height = "100%" preserveAspectRatio = "none"> 
        
        
        <feColorMatrix  type = "saturate" values ​​= "0" result = "IMAGE"  />

          

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

 Снимок экрана 2019-01-16 в 15.15.00 "width =" 1310 "height =" 756 "class =" alignnone size-full wp-image-37725 "/> </p>
<p> После обесцвечивания изображения мы размым его на небольшое количество, достаточное для уменьшения количества деталей, не теряя при этом слишком много. Для этого конкретного эффекта я выбрал размытие только на 0,25 пикселей. Возможно, вам придется поэкспериментировать со значениями, чтобы получить правильные значения, в зависимости от используемого вами изображения и эффекта, который вам нужен. </p>
<pre class=                                                                                 

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

 Снимок экрана 2019-01-16 с 15.43.19 "width =" 1484 "height =" 850 "class =" alignnone size-full wp-image-37726 "/> </p>
<p> Используя <code> feDisplacementMap </code>теперь мы можем исказить текст с помощью нашей карты смещения: </p>
<pre class=                                                                                                            

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

 Снимок экрана 2019-01-16 с 15.39.23 "width =" 1368 "height =" 764 "class =" alignnone size-full wp-image-37727 "/> </p>
<p> Вы уже можете видеть, как текстура ткани принимает форму по краям текста. Это замечательно. </p>
<p> Как и в уроке по Photoshop, теперь мы снова отобразим изображение позади текста. Мы сделаем это, снова используя <code> feImage </code>: </p>
<pre class=                                                                                                                                                

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

Как и в режимах смешивания CSS, у нас есть 16 режимов смешивания на выбор. Для нашего эффекта подойдет режим смешивания multiply . (В руководстве по Photoshop дизайнер использовал линейную запись, которая недоступна в SVG / CSS.)

feBlend будет использовать два входа для смешивания: текст и фоновое изображение:

  

        
        
         
        
        
        

        
         
        
        
         
        
        
         
        
        
          

        
           

          

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



        
        
         
        
        
        

        
         
        
        
         
        
        
         
        
        
        

        
         

        
         
             
             
         


<text dx = "60" dy = "200" font-size = "10em" font-weight = "bold"  filter = "url (#conform)"  fill = "# 00826C"> Organic 

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

 Снимок экрана 2019-01-16 в 16.12.16 "width =" 1702 "height =" 978 "class =" alignnone size-full wp-image-37731 "/> </p>
<h2> Примечания по использованию карт смещения в SVG </h2>
<p> Элемент <code> feDisplacementMap </code> имеет три атрибута, которые определяют <em>как </em> карта смещения повлияет на исходную графику: </p>
<ul>
<li> <code> xChannelSelector </code>: указывает, какой цветовой канал (R / G / B / A) из <code> in2 </code> использовать для горизонтального смещения; </li>
<li> <code> yChannelSelector </code>: указывает, какой цветовой канал (R / G / B / A) из <code> in2 </code> использовать для вертикального смещения; </li>
<li> <code> scale </code>: определяет величину, на которую вы хотите исказить изображение. Чем выше масштаб, тем сильнее эффект искажения. Возможно, вы обнаружите, что экспериментируете с этим значением, чтобы получить желаемый результат. </li>
</ul>
<p> Возможно, самое важное, что следует знать при использовании изображений для смещения контента в фильтрах SVG, это то, что <strong> изображение и контент подчиняются правилам CORS </strong>. Убедитесь, что вы отправляете как изображение, так и контент из одного источника, чтобы браузер не пропускал операцию смещения. </p>
<p> Вы также можете встроить изображение в фильтр (в <code> feImage </code>) и использовать его в качестве карты смещения. Это перо от Gabi является отличным примером, который использует встроенный SVG-шаблон для искажения исходного изображения. Круглый узор, приводящий к волнообразному эффекту, мой любимый. </p>
<h2> Применение преобразования к исходному тексту </h2>
<p> В руководстве по Photoshop, которое мы использовали для этого эффекта, дизайнер применяет преобразование поворота к тексту, которое добавляет приятный штрих к общему эффекту. </p>
<p> Если мы применим преобразование вращения к <code> <text> </code>к которому мы применяем фильтр, <strong> будет повернута вся область фильтра </strong>включая изображение на заднем плане: </p>
<p> <img src=       органические

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

 Снимок экрана 2019-01-16 в 19.40.50 "width =" 1320 "height =" 754 "class =" alignnone size-full wp-image-37748 "/> </p>
<p> Обратите внимание, что я применяю преобразование поворота к тексту с использованием атрибута SVG <code> transform </code>а не с помощью CSS, поскольку на момент написания этой статьи Internet Explorer и MSEdge не поддерживали CSS преобразования на элементах SVG. </p>
<h2> Демонстрация в реальном времени </h2>
<p> Этот эффект смещения текста в настоящее время работает во всех основных браузерах, включая MSEdge. Ниже приведен скриншот эффекта в MSEdge: </p>
<p> <img src=

Предыдущая:
Эффекты искажения текста с помощью Blotter.js
Далее:
Отображение эффектов сетки с помощью Anime.js