Блюр в фигма: как настроить / Skillbox Media |

Содержание

Как сделать эффект стекла в Фигме – пошаговый гайд

Оглавление:

Как сделать эффект неонового стекла

Как сделать голографический эффект

Готовые текстуры для «Фигмы»

Оглавление:

Как сделать эффект неонового стекла

Как сделать голографический эффект

Готовые текстуры для «Фигмы»

Эффект матового стекла в «Фигме» – это тренд. Для наглядности сделаем такой эффект на примере простой фигуры. Создадим новый фрейм и поместим на него какую-нибудь картинку или иконку, чтобы эффект стекла был заметен.

Создаем новый фрейм в «Фигме»

Добавляем во фрейм любую фоновую картинку

Сверху наложим любую фигуру, к примеру, прямоугольник. По умолчанию фигура задается цветом #C4C4C4, его и оставляем. Справа в блоке Fill задаем прозрачность цвету – 1 %, а в блоке Effects задаем Background blur 50 %.

Задаем параметр Background blur фигуре, которая будет с эффектом стекла

Затем накладываем тени на наш объект в том же разделе Effects – жмем плюсик и добавляем Inner Shadow три раза с разными параметрами.

Первый: с Blur 65 %, по оси Y -80, цвет #D4D4D4, прозрачность 20 %.

Второй: с Blur 40 %, по оси Y 1, цвет #E2E2E2, прозрачность 20 %.

Третий: с Blur 16 %, по оси Y 4, цвет #E9E9E9, прозрачность 20 %.

Задаем три раза эффект Inner Shadow с разными параметрами

С тенями можно «играться» по-разному, в зависимости от того, какой эффект нужен. В данном случае получается такой результат:

Как сделать эффект стекла в «Фигме»

Как сделать эффект неонового стекла

Создадим фрейм и также разместим на нем любую фигуру. Цвет оставляем у фигуры изначальный – #C4C4C4. Прозрачность задаем 1 %, а Background blur ставим на 100.

Добавляем эффект Background blur

Теперь задаем внутреннюю тень (Inner Shadow) три раза с разными параметрами.

Первый: с Blur 40 %, по оси Y 1, цвет #E3DEFF, прозрачность 20 %.

Второй: с Blur 18 %, по оси Y 4, цвет #9A92D2, прозрачность 30 %.

Третий: с Blur 100 %, по оси Y 98, цвет #CAACFF, Spread -48, прозрачность 30 %.

Добавление внутренних теней на фигуру

Затем добавляем еще три параметра Inner Shadow.

Первый: с Blur 68%, по оси Y -82, цвет #604490, Spread -64, прозрачность 30 %.

Второй: с Blur 11%, по оси Y 7, цвет #FFFFFF, Spread -4, прозрачность 100 %.

Третий: с Blur 56%, по оси Y 39, цвет #FFFFFF, Spread -36, прозрачность 50 %.

Добавляем 7 эффектов с внутренней тенью на фигуру с разными параметрами

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

Итоговый результат

Разработаем вам фирменный стиль

Быстро и красиво!

Подробнее

Как сделать голографический эффект

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

Заполняем фигуру радиальным градиентом

В палитре ниже жмем на цветовую дорожку и таким образом добавляем новые цвета в градиент. Создаем всего 6 цветов: #22AADD, #E1F664, #FEB0FE, #ABB3FC, #5DF7A4, #58C4F6.

Добавляем цвета в градиент

Как сделать градиент в «Фигме»? Инструменты и полезные плагины

Затем в блоке Fill жмем плюс и создаем еще одну заливку цветом. Способ заливки выбираем Angular, затем жмем на капельку рядом (Blend mode) и выбираем Difference.

Измененяем метод наложения (blend mode)

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

Меняем метод наложения (blend mode) на Difference

Затем дублируем предыдущий шаг, только в Blend Mode ставим Screen. В результате у нас получится 3 разных цветовых слоя в блоке Fill.

Заполняем фигуру тремя разными градиентами в блоке Fill

В целом мы уже получили голографический эффект, но можно добавить немного шума с помощью плагина Noise. Он устанавливается бесплатно из Community «Фигмы».

Выбираем из списка плагинов Noise, подбираем необходимые для себя параметры, жмем галочку и получаем готовый слой с шумом.

Добавление шума на фигуру

Накладываем его на наш эффект, уменьшаем прозрачность до 50 %.

Итоговый результат – голографический эффект с шумом

Как сделать анимацию в Фигме – простая инструкция

Готовые текстуры для «Фигмы»

Самый простой и быстрый способ подобрать ненавязчивый бесшовный фон – обратиться к сервисам с паттернами. К примеру, toptal.com. Там собрано множество готовых паттернов, которые можно посмотреть в работе сразу на сайте – на странице каждого показывается, как он будет выглядеть на фоне в дашборде, презентации или landing page.

Toptal – сервис с готовыми паттернами для «Фигмы»

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

Поиск фонов и паттернов с эффектом дерева на freepik.com

Фон с эффектом бумаги на freepik.com

Также Community «Фигмы» предлагает для установки плагин Pattern Hero, в котором можно создать разнообразные текстуры самостоятельно.

Для этого достаточно на фрейме создать любую фигуру – квадрат, круг, треугольник или что-то другое, добавить ей заливку, градиент и тени, если необходимо. Затем открыть в меню Plugins -> Pattern Hero.

Открытие плагина Pattern Hero в «Фигме»

Откроется окошко с созданием паттерна из созданной нами фигуры. Нам предлагается на выбор пункты: Rows (Строки), Columns (Столбцы), Padding (Отступ), Repeat Nodes (Повторение фигуры), Shuffle Nodes (Расположение фигур вразброс, если используем для создания паттерна несколько фигур), Group Nodes (Сгруппировать фигуры).

Плагин Pattern Hero для «Фигмы» в работе

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

Создание повторяющихся фигур с помощью Pattern Hero

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

Пример использования паттерна, созданного при помощи Pattern Hero

Как редактировать изображения для блога и сайта: пример в Figma

05 июля 2021 г.

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

Какие бывают варианты работы:
— Создатели сайта сразу готовят шаблоны изображений и маркетолог вносит контент в данные шаблоны
— Фирма заказывает разработку уникальных изображений для каждой отдельной новости
— Маркетинг готовит изображения своими усилиями

Многие специалисты думают, что для того, чтобы редактировать фотографии и графику им требуется освоить сложные инструменты для редактирования Adobe Photoshop или Illustration. На самом деле манипуляции с изображением можно осуществлять в современных простых для использования инструментах, например Figma.

Рассмотрим техники работы с фотографиями:

1. Обрезка фотографии

С помощью обрезки вы можете удалить нежелательные или отвлекающие элементы, улучшить композицию или выделить фокус.
Также, вы можете сделать визуальное представление нетривиальным.

Чтобы обрезать изображение в Figma используйте функцию Crop, находящуюся в верхней панели по центру.

Для того, чтобы сделать обрезку по фигуре — нужно создать фигуру с помощью ряда стандартных фигур — квадрата, круга, прямоугольника и т.д. > объединить их в Union > вставить изображение с помощью поля заливки (заменяем Solid на Image).

Советы:

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

2. Нанесение теней

Вы можете сохранить узнаваемые фигуры или силуэты на ваших фоновых фотографиях с использованием теней.

В Figma тени наносятся следующим образом: Design > Effects > Inner Shadow / Drop Shadow.

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

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

3. Размытие фона

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

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

Этот эффект также часто используется для интерактивных меню в iOS.

Путь в Figma следующий: Design > Effects > Layer Blur / Background Blur.

4. Насыщенность

Чем насыщеннее изображение — тем интенсивнее его цвет и яркость. С другой стороны, чем ниже насыщенность, тем изображение ближе к оттенкам серого.

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

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

5. Контраст

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

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

Цветовой контраст — используется с цветными фотографиями, он помогает вашему объекту выделиться на фоне.

Недавние публикации

Эффекты тени и размытия — Руководство по рисунке

добавить в фавориты

Изучение способов включения тени и размытия в ваш дизайн

Рис. На рис.