Эффект стекла в векторе

This article was originally published on Vectips.com in English. You can view the original article here.

В сегодняшнем уроке мы научимся создавать векторные стеклянные объекты, которые можно использовать как элементы инфографики. Вы видели график тренда по запросу infographics elements? Я видел, поэтому мы еще не раз вернемся к этой теме на страницах нашего сайта.

Видео:Как нарисовать стекло в adobe illustrator | Glassmorphism в иллюстраторе #OrlovillustratorСкачать

Шаг 1

Переходим File > New… или используем горячие клавиши Command/Ctrl + N для создания нового документа. Выбираем Pixels из выпадающего меню Units, затем вводим 750px по высоте и ширине и кликаем на кнопке Advanced. Теперь выбираем RGB color mode и нажимаем OK.

Видео:Эффект стекла в Adobe Illustrator [Самая гибкая методика]Скачать

Шаг 2

Нарисуем прямоугольник при помощи Rectangle Tool (M). Его размеры соответствуют размеру фона нашей иллюстрации. Заливаем прямоугольник радиальным градиентом от голубого цвета (R= 148; G= 231; B= 255) к темно-синему цвету (R= 0; G= 56; B= 71). Безусловно, вы можете использовать другие цвета.

Берем Gradient Tool (G) и кликаем сверху, за пределами artboard, превращая радиальный градиент в эксцентрический.

Видео:Реалистичные осколки стекла в векторе с помощью мешей и градиентов.Скачать

Шаг 3

Приступим к созданию стеклянных элементов. Рисуем прямоугольник с заливкой произвольным цветом.

Теперь округлим его два противоположных угла. Для этих целей я использую Dynamic Corners Tool (VectorScribe plug-in). Вы также можете осуществить выборочное округление углов объекта, используя стандартные средства Adobe Illustrator. Как это сделать, подробно написано в моей статье Как применить разные радиусы округления к углам векторного объекта в Adobe Illustrator.

Видео:Как сделать эффект матового стекла в фотошопеСкачать

Шаг 4

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

Берем Gradient Tool (G) и перемещаем черную ручку of the Gradient Annotator вниз. Это действие приведет к трансформации радиального градиента в эллиптический.

Если после выбора Gradient Tool (G) вы не видите Gradient Annotator, то его необходимо включить. Для этого переходим View > Show > Gradient Annotator или используем Option/Alt + Command/Ctrl + G shortcuts. Не советую вам перемещать центр эллиптического градиента. Это может привести к неприятным последствиям при сохранении в формате EPS. Если хотите узнать об этом подробней, читайте мою статью Эллиптический градиент для стоков.

Видео:Эффект матового стекла в Figma | Создаём модный эффект для топ-дизайна 🔝Скачать

Шаг 5

Применяем к нашему объекту Color Dodge blending mode в панели Transparency. Не правда ли это уже похоже на стекло! Нам осталось только добавить детали.

При помощи Pen Tool (P) создадим фору, подобную показанной на рисунке ниже. Обычно я уменьшаю непрозрачность создаваемого объекта для того чтобы правильно оценивать его форму на фоне уже существующего объекта.

Выделяем обе формы, берем Shape Builder Tool, затем кликаем на части верхней формы, которая находится за пределами нижней формы, удерживая Option/Alt. Это действие приведет к удалению этой части.

Видео:⭐️Эффект матового стекла в Фотошопе (Как сделать Глассморфизм)Скачать

Шаг 6

Восстановим непрозрачность верхней формы до 100% в панели Transparency. Заливаем верхний объект радиальным градиентом от черного к белому цвету, затем применяем Color Dodge blending mode.

Теперь сместим центр радиального градиента и изменим его диаметр, используя Gradient Tool (G). Если вы хотите быстро получить нужный результат при работе с режимами смешивания, всегда действуйте именно в такой последовательности: сначала применяется blending mode, затем регулируется градиентная или сплошная заливка.

Видео:Как сделать эффект стекла в Adobe Illustrator | Space SchoolСкачать

Шаг 7

Создадим окружность при помощи Ellipse Tool (L) и зальем ее радиальным градиентом от белого к черному цвету.

Применим к окружности Color Dodge blending mode.

Теперь при помощи Selection Tool (V) трансформируем окружность в эллипс, при этом радиальный градиент будет также трансформирован в эллиптический. Таким образом, мы создали блик в нижней части стеклянной формы.

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

Выделяем и группируем все созданные объекты (Command/Ctrl + G), кроме фона, конечно.

Видео:Glassmorphism in 2 minutes | Глассморфизм за 2 минуты | Adobe Illustrator Tutorial | Эффект стеклаСкачать

Шаг 8

Не снимая выделения с группы, переходим Effect > Transform > Transform & Distort и в открывшемся диалоговом окне устанавливаем параметры, указанные на рисунке ниже. Конечно, величина горизонтального и вертикального смещения зависит от размера вашей формы и должна подбираться вами на глаз, для того чтобы воспроизвести мой результат.

Теперь переходим Object > Expand Appearance.

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

Видео:СОЗДАЁМ ЭФФЕКТ СТЕКЛА В PHOTOSHOP | ШТФСкачать

Шаг 9

Создадим блики на изогнутой части стеклянных форм. К сожалению, радиальный градиент невозможно нелинейно деформировать, в отличие от линейного градиента. Поэтому нам придется создать специальную кисть. Создадим белую и черную окружность. Выделяем оба объекта, затем переходим Object > Blend > Make. Установим необходимое количество шагов, для этого переходим Object > Blend > Blend Options…. Думаю, для нашего случая достаточно двадцати шагов.

Бленд объект должен быть достаточно маленького размера. На рисунке ниже показано соотношение элементов иллюстрации.

Устанавливаем для бленд объекта Color Dodge blending mode.

Видео:ЭФФЕКТ СТЕКЛА В ФОТОШОПЕСкачать

Шаг 10

Перетаскиваем бленд объект в Brushes panel и, не изменяя параметров установленных по умолчанию, сохраняем новую кисть как Art Brush.

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

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

Создадим подобные блики на других стеклянных формах.

Если вы рисуете для микро стоков, то вам необходимо выделить все криволинейные сегменты, затем перейти Object > Expand Appearance, так как векторный файл не должен содержать открытых путей. Группируем созданные элементы, затем поворачиваем группу под углом 45 градусов, используя Selection Tool (V) и удерживая клавишу Shift.

Видео:ЭФФЕКТ СТЕКЛА ЗА 30 СЕКУНД / ССЫЛКА В КОМЕНТАХ / ТУТОРИАЛ ПО ФОТОШОПУ / ФОТОШОП ЗА 30 СЕКУНДСкачать

Шаг 11

Мы создаем элементы инфографики, поэтому нанесем на них некоторый, условный текст. Берем Type Tool (T) и печатаем цифры от 1 до 4, затем размещаем их на стеклянных элементах так, как сделал это я.

Трансформируем текстовые объекты в обычные пути. Для этого выделяем их и переходим Type > Create Outlines.

Видео:# 23 Как сделать эффект стекла в Figma. Glass Morphism - новый тренд в дизайне интерфейсов.Скачать

Шаг 12

Копируем все цифры и вставляем их вперед (Command/Ctrl + C; Command/Ctrl + F) (для наглядности я буду окрашивать новые объекты в разные цвета).

Выделяем все зеленные цифры, затем переходим Object > Compound Path > Make или используем горячие клавиши Command/Ctrl + 8.

Видео:Эффект стекла за минуту #photoshoptutorial #tutorial #photoshop #design #artСкачать

Шаг 13

Копируем Compound Path и вставляем его вперед. Смещаем новый compound path на несколько пикселей вверх и вправо, используя клавиши со стрелками.

Выделяем оба compound paths, затем нажимаем на кнопку Minus Front в панели Pathfinder.

Видео:Занятие 6. Рисуем предметы из стеклаСкачать

Шаг 14

Заливаем черные цифры серым цветом, затем применяем к ним Multiply blending mode in the Transparency panel.

Заливаем все зеленные объекты линейным градиентом от белого к черному цвету, который расположен под углом 45 градусов, затем применяем к ним Color Dodge blending mode.

На стеклянные элементы я также добавил Lorem Ipsum текст, который вы можете получить при помощи on-line генератора.

Видео:Как сделать эффект матового стекла в Tilda Zero Block с помощью CSSСкачать

Шаг 15

И наконец, создадим блик на поверхности, над которой расположены стеклянные элементы инфографики. Создаем окружность и заливаем ее радиальным градиентом, который состоит из четырех цветов. Деформируем окружность в эллипс, используя Selection Tool (V), затем применяем к объекту Screen blending mode в панели Transparency.

На этом наш урок по созданию элементов инфографики закончен. Впереди еще много интересного.

Видео:Эффект стекла в PhotoshopСкачать

Создание реалистичного эффекта стекла в SVG

Сегодня я расскажу, как создать эффект стеклянного текста с помощью SVG.

Видео:Как сделать эффект матового стекла в CorelDRAW + инфографикаСкачать

Шаг 1: Размещаем основное изображение

Сначала нужно указать адрес основного изображение. Для этого используются тег с элементом внутри него. Размеры атрибута viewBox и элемента в SVG одинаковы. Это гарантирует, что элемента будет одинакового размера с исходным изображением.

Сам файл SVG не содержит растровое изображение. Но мы можем разместить ссылку на него в SVG-коде.

Видео:DESIGN TREND 2021. СТЕКЛО МОРФИЗМ В ADOBE ILLUSTRATOR (за 10 минут) GLASS MORPHISM IN ILLUSTRATORСкачать

Шаг 2: Обработка изображения

Обработаем изображение с помощью фильтра. Создаем еще один для хранения фильтров.

Первый фильтр (#displacement ) искажает изображение. В нем используются два примитива: feTurbulence и feDisplacementMap. Они воссоздают на изображении эффект вибрации.

После добавления фильтра применим его к элементу .

Видео:Как создать матовое стекло в Фотошопе. Глассморфизм.Скачать

Шаг 3: Вырезаем текст

Для этого нужно добавить элемент

в тег и присвоить ему id . Это ограничивает область вырезанного текста контейнером

Видео:Уроки CorelDRAW: осколок стеклаСкачать

Шаг 4: Открываем изображение полностью

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

Можно было бы добавить фильтр в

и использовать свойство in=“BackgroundImage в feDisplacementMap, чтобы исказить картинку за текстом. Но этот способ поддерживается не всеми браузерами, поэтому придется работать с несколькими изображениями.

Шаг 5: Снова размещаем текст

Создадим копию слоя с текстом. Теперь у нас должно получить изображение с черным текстом сверху.

Шаг 6: Создаем темный край текста

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

Теперь нужно воссоздать тень, которую будет отбрасывать стекло. Для реализации этого эффекта мы используем примитива: feMorphology, feOffset, feFlood и feComposite.

feMorphology сделает текст толще. В следующей версии примера закомментируйте три примитива ( feOffset, feFlood, feComposite ) и поэкспериментируйте с feMorphology .

feOffset используется для перемещения всех «пикселей» в предыдущем примитиве ( feMorphology ). Значения dx=’5′ и dy=’5′ перемещают «пиксели» по оси x и по оси y соответственно. Чем больше число, тем дальше они перемещаются. Установите для dx отрицательное значение и «пиксели» переместятся влево. При отрицательном значении dy они будут двигаться вверх.

Я пишу слово «пиксели» в кавычках, потому что это не пиксели экрана. Это размеры, установленные для родительского элемента . Я воспринимаю их как проценты. В примере, приведенном ранее, мы использовали настройки viewBox= “0 0 1890 1260” . Это значит, что ширина контейнера составляет 1890 «пикселей». Если мы установим dx=“189” , элемент переместится по холсту SVG на 10%.

feFlood ­– отличный примитив для заливки указанной области изображения! Но сейчас мы не сможем прочитать текст, так как фильтр просто заполняет определенную область цветом.

feComposite поможет исправить эту проблему. Этот примитив влияет на альфа-слой канала in в канале in2 .

Шаг 7: Создаем светлый край

Теперь нам нужно сместить фигуру вверх и влево, используя отрицательные значения dx/dy . На этот раз установим белый цвет. Наша цель – достичь хорошего эффекта глубины. Но мы не будем использовать feComposite , потому что альфа-канал темного края не должен закрашиваться светлым краем.

Шаг 8: Соединяем края

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

Шаг 9: Наклон

Получился хороший эффект 3D-зеркала. Но буквы все еще выглядят плоскими. Сделаем их более округлыми с помощью эффекта наклона. Сначала используем примитив feGaussianBlur . Он немного размоет уже существующие фильтры. Затем применим feSpecularLighting . Оригинально изображение темное, поэтому установим для атрибута lighting-color какой-нибудь яркий цвет. Если выбранное изображение слишком яркое, это может затруднить чтение букв. В этом случае можно задать для lighting-color более темный оттенок.

Векторное зеркальное отражение эффекта текстуры для стекла, пластика или акрилового окна. png прямоугольник формы 16 х 9 глянцевый, блеск, све� — Сток Вектор .

Векторное зеркальное отражение эффекта текстуры для стекла, пластика или акрилового окна. png прямоугольник формы 16 х 9 глянцевый, блеск, све� — Векторная графика Компьютерный монитор роялти-фри

Описание

Vector mirror reflection effect texture for glass, plastic or acrylic window. png rectangle shape 16 x 9 glossy, shine, light, glare, clear plate