UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Лайфхак: Как залить текст изображением в Sketch
Редакція
Редакція

Опубліковано • Оновлено

Лайфхак: Как залить текст изображением в Sketch

Возможности браузеров растут с каждым днем, и очень важно уметь использовать все нововведения, чтобы воплощать свои задумки в дизайне. Пример тому – сравнительно новая техника в CSS, дающая возможность заливать текст изображением. Чтобы воссоздать такой эффект в Sketch, следуйте этим инструкциям:

  1. Напишите слово или предложение, которое хотите использовать в качестве маски.
  2. Кликните правой кнопкой мыши на слое и выберите опцию “Convert to Outlines” (преобразовать в контуры), которая преобразует текст в обычные фигуры.
  3. Вставьте изображение, которым вы хотите залить текст и поместите его поверх слоя с текстом.
  4. Кликните правой кнопкой мышки по тексту снова и выберите опцию “Use as Mask” (использовать как маску).

Лайфхак: Как залить текст изображением в Sketch Другой способ, который также позволяет редактировать текст, но не дает такой же точности в управлении, заключается в применении Pattern Fill (текстурная заливка) перед конвертацией текста в контуры. К сожалению, вы не можете задать, какой конкретно сегмент изображения использовать для заливки, и также довольно сложно подогнать размер изображения под текст, так что нужно использовать подходящую картинку со старта. screen-sep-1-2015-2 Для воссоздания такого эффекта в CSS я рекомендую ознакомиться с Приемами текстурирования текста от Codrops.

Топ коментарі (0)