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

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

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

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