Rivalry2

HTML Diff

1 added 1 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#Руководства</a>

2 <ul><li>7 фев 2025</li>

3 <li>0</li>

4 </ul>Рассказываем о базовых настройках эффектов и показываем, как за две минуты сделать "матовое стекло".

5 Иллюстрация: Полина Честнова для Skillbox Media

6 Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.

7 Базовых эффектов в Pixso, как и в Figma, всего два - тени и размытие. Но с помощью них можно создавать стёкла и кнопки, которые очень похожи на реальные. О том, где найти все эти эффекты и как их настроить, - читайте в нашей инструкции.

8 Outside shadow - внешняя тень, подходит для отделения объекта от фона. Inner shadow - внутренняя, подходит для создания объёмных объектов:

9 Изображение: Skillbox MediaЧтобы добавить тень, в разделе Effects нажмите на "+". По умолчанию Pixso добавит обычную тень, но если нажать на надпись Outside shadow, в выпадающем меню её можно изменить на Inner Shadow.

10 Базовые настройки у теней одинаковые:

11 <ul><li>X и Y - смещение относительно центра объекта. X - влево и вправо, а Y - вверх и вниз.</li>

12 <li>Blur - размытие краёв тени.</li>

13 <li>Spread - размер тени (работает только в Outside shadow).</li>

14 <li>Также у тени можно настроить её цвет и непрозрачность.</li>

15 </ul>Смещение и размер у внешней тени могут быть какими угодно, так как явных границ у неё нет. У внутренней тени те же параметры ограничены самим объектом.

16 Также у тени можно изменить цвет и режим наложения. Работает это так же, как и в Photoshop - в зависимости от режима и цвета тень будет подстраиваться под фон:

17 Обычно тени используют в интерфейсах, чтобы показать уровни взаимодействия кнопок или сделать их похожими на реальные аналоги. О том, как правильно сделать тени для вашего приложения, читайте в инструкции дизайнера Марии Булиной. Она написана для Figma, но те же функции доступны и в Pixso:

18 В Figma есть два вида размытия: Gaussian blur и Background blur. Настроить у них можно только уровень размытия, но работает он в этих режимах по-разному.

19 Чтобы добавить размытие, в разделе Effects нажмите на "+". Нажмите на надпись Gaussian blur и в выпадающем меню выберите Layer blur или Background blur.

20 Gaussian blur просто размывает слой целиком в зависимости от выбранного значения в настройках:

21 Background blur работает немного хитрее. Если просто указать у него уровень размытия, то ничего не произойдёт. Но если в пункте Fill снизить непрозрачность заливки, то фон под слоем с Background blur будет размыт:

22 Не путайте непрозрачность слоя (Layer) и заливки (Fill). Если вы снизите непрозрачность слоя, то эффект Background blur работать не будет.

23 Изображение: Samuel Ferrara / Unsplash / Skillbox MediaВ разделе Effects можно добавить сколько угодно разных эффектов: например, несколько теней и несколько размытий. Благодаря этому можно добиться интересных результатов. Для примера рассмотрим, как сделать эффект матового стекла.

24 1. Добавьте на макет фотографию и поверх неё наложите любую фигуру: круг, квадрат, треугольник.

25 2. В настройках эффектов фигуры добавьте тень со следующими настройками: X и Y - 12, Blur - 25, Spread - 2, непрозрачность тени - 25%.

26 3. В настройках эффектов фигуры добавьте Background blur с размытием 25.

27 4. Снизьте непрозрачность заливки фигуры до 10%.

28 5. По желанию можно добавить обводку с непрозрачностью 50%.

29 Если делать тень чёрной, а цвет фигуры белым, то эффект получится недостаточно реалистичным. Лучше использовать основной цвет фона, чтобы имитировать падающий на ваше стекло свет.

30 Подробнее о том, как можно сочетать разные эффекты, читайте в нашей инструкции по морфизмам в интерфейсах:

31 Другие инструкции по Pixso

32 - <a>Научитесь: Профессия Графический дизайнер PRO Узнать больше</a>

32 + <a>Научитесь: Профессия Графический дизайнер PRO + ИИ Узнать больше</a>