Об'ємні градієнтні букви, що плавно переходять у фон будуть дуже ефектно виглядати на будь-якому постері чи cайті. Як зробити цей ефект у Figma легко та швидко.

Для виконання уроку вам знадобляться плагіни з Figma Community:

Easometric, BlendingMe

Напишіть літери

  1. Виберіть інструмент "Text T" та напишіть 2 літери окремо.
  2. Виберіть стиль та розмір шрифту.
  3. У пункті "Fill" виберіть колір.

Поверніть літери

  1. На верхній панелі відкрийте "Resources".
  2. Виберіть пункт "Plugins", у пошуку впишіть "Easometric"
  3. Знайдіть плагін, по черзі виберіть кожну букву та натисніть "Run" - "Left". Поставте їх по лінії з точки 60°
  4. По черзі вибирайте літери та натискайте "Ctri/Command+E"

Дублюйте літери

  1. Дублюйте літери, вибравши їх та натиснувши Ctrl/Command+D".
  2. 1-шу "R" і 1-шу "e" перетягніть на 7 пікселів вправо, затиснувши "Shift".
  3. Перетягніть літери на 4 пікселі вгору, натиснувши клавішу Shift.
  4. У пункті "Fill" налаштуйте колір у літер.

Створіть обсяг

  1. У пункті "Resources" у пошуку плагіна знайдіть "BlendingMe" та натисніть "Run"
  2. Виберіть "R" та її копію, вкажіть у вікні плагіна 40 та натисніть "Create".
  3. Теж саме повторіть з літерою "е" та її копією.
  4. З усіх букв видаліть контур "Stroke"

Зробіть отвори

  1. Дублюйте "R" та "е" на лицьовій стороні та натисніть "Edit Object"
  2. Видаліть всі точки, залишивши їх лише навколо отворів.
  3. У пункті "Fill" налаштуйте колір.
  4. Дублюйте їх "Ctrl/Command + D" та перетягніть на 7 пікселів вправо і на 4 пікселі вгору, затиснувши "Shift"
  5. У пункті "Fill" змініть колір у копій.

6. Виберіть отвори та їх копії та використовуйте плагін "BlendingMe"40.

7. Виберіть усі отвори та видаліть обведення "Stroke"

8. Дублюйте нижній шар отвору "Ctrl/Command +D"

9. Згрупуйте всі копії отвору, крім копії нижнього, вибравши їх і натиснувши "Ctri/Command+G".

10. Виберіть групу та нижній шар отвору та натисніть ("Use as mask").

Готово!

Автор


⚡ Якщо тобі сподобався цей матеріал, підпишись на наші соціальні мережі Instagram / Facebook / Linkedin / Telegram. Там ти знайдеш більше цікавих матеріалів про дизайн.

🖤  Підтримати проект ←Банка Mono

Поділитись публікацією