Как да създадете ефект на матирано стъкло във Figma

Матово стъкло работи добре за поверителност или за добавяне на финес към дизайна, в реалния живот и дигитален дизайн. Създаването на ефект от матирано стъкло е лесно във Figma и може да добави уникален усет към вашите дизайни по начин, който изглежда много по-сложен, отколкото е. Нека ви покажем как.

Как да създадете ефект на матирано стъкло

За пълния ефект на матирано стъкло вече трябва да имате някакво фоново изображение във вашия дизайн. Ефектът работи най-добре върху фотографски или визуално сложни изображения, а не само на обикновени цветни блокове или обикновен фон.

Използваме ефекта на матирано стъкло като индикатор за точка върху дизайн на презентация, за да добавим елегантен, минималистичен ефект към презентацията. Това дава допълнителен усет към вашите дизайни, вместо просто да използвате обикновена линия или обикновена точка като индикатор.

Можете да създадете a главен шаблон за презентации във Figma и използвайте този ефект на матирано стъкло в него. Ако искате да създадете елегантен индикатор за точка, просто следвайте.

1. Чертая линия

Начертайте линията си, като използвате Инструмент за линия (Л). За да запазите линията хоризонтална, задръжте натиснат Shift докато го рисуваш. Изберете цвят за линията, като щракнете върху цветния квадрат под Удар докато линията е избрана.

Цветът трябва да е достатъчно тъмен, за да контрастира на фона ви, но също така трябва да изглежда добре с цветовете на вашата презентация. Можеш използвайте Adobe Illustrator, за да създадете цветова палитра за да намерите цветове, които работят заедно.

Променете ширината на линията в настройките на Stroke; щракнете върху иконата с три хоризонтални линии и увеличете числото до желаната от вас дебелина. За да получите заоблени краища, щракнете върху падащото меню с хоризонтална линия в менюто Stroke и превъртете до дъното на падащото меню за опцията за заоблени краища.

2. Начертайте кръг

Начертайте малък кръг с помощта на Инструмент Елипса (О). Задръж Shift докато рисувате кръга, за да го направите идеално сферичен. Вашият кръг трябва да е достатъчно малък, за да се използва като куршум, но достатъчно голям, за да се вижда матираното стъкло.

За да добавите цвят, изберете кръга и го използвайте Напълнете в дясната лента с инструменти. Можете да използвате неутрален цвят - като сиво или бежово - или по-светъл цвят от цветовата палитра на вашия дизайн.

След това променете непрозрачност до Напълнете до някъде между 40% и 70%. Искате да можете да видите дизайна зад кръга, като същевременно виждате цвета, с който сте запълнили кръга.

3. Добавете размазване на фона

Това е частта, която придава матов ефект на вашата форма. Изберете кръга и отидете на Ефекти. Ефектът по подразбиране е Падаща сянка, задръжте курсора на мишката върху него и щракнете върху стрелката, която се показва. Избирам Размазване на фона.

За да увеличите или намалите размазването, щракнете върху иконата до Размазване на фона и променете числото на желания ефект на размазване.

За да завършите своя индикатор за точка, преместете линията, така че да се изравни с ръба на вашия кръг. Изберете както линията, така и кръга, щракнете с десния бутон и изберете Групов избор. Сега можете да преместите или дублирате това за използване в различни части от вашия дизайн.

Размазването работи върху всяка част от дизайна по същия начин, както е показано в друг пример, който направихме по-горе. Защо да не включите тази техника креативно дизайнерско предизвикателство? Ефектът ще се превърне в страхотен дизайнерски актив.

Добавете елегантен минимализъм към вашите дизайни с ефект на матирано стъкло

Ефектът от матирано стъкло във Figma е лесен начин да добавите елегантен стил към иначе обикновените аспекти на дизайна. Можете да използвате ефекта на матирано стъкло по много начини, като например пълноцветни панели, ленти за търсене или прозорци за поверителност върху дизайни. Опитайте да добавите граница, да направите градиент или да поставите матирания слой между други слоеве за някаква текстурна разлика.

Как да създавате и добавяте макети към вашите дизайни на Figma с помощта на плъгини

Прочетете Следващото