Заполнение текста изображением — это самый быстрый и простой способ применить маску к тексту, но он не позволяет контролировать, какая часть изображения используется в маске.

В этой статье будут представлены пошаговые инструкции по двум продвинутым методам, которые позволяют полностью контролировать применение маски к тексту, сохраняя при этом возможность редактирования текста.

Метод 1: Комбинированная фигура. Создает единую фигуру для маски, но ее нужно разгруппировать, чтобы изменить изображение.

Метод 2: Псевдомаска. Наиболее гибкий способ, обрабатывает текст как фигуру и позволяет использовать опцию создания маски в контекстном меню.

Эти методы не используют преобразование текста в контуры или смешивание цвета, что позволяет применять их с любым фоном.

Скачать файл Sketch.

Метод 1: Комбинированная фигура

Этот метод позволит нам точно выбрать какая часть изображения будет использоваться в текстовой маске. Текст и изображение нельзя комбинировать напрямую, но текст и фигуру можно. Таким образом, используя функцию перекрытия (intercept), мы будем комбинировать заполненную изображением фигуру с текстом.

Шаги

  • Выделив прямоугольник, щелкните цвет заливки в инспекторе.
  • Щелкните иконку Pattern Fill и Choose Image, чтобы выбрать изображение.
Заполнение прямоугольника изображением в Sketch
Заполнение прямоугольника изображением
  • Добавьте текстовый слой поверх части изображения, которая появится в маске.
  • Выберите прямоугольник и текст, затем нажмите Intersect на панели инструментов или Layer menu > Combine > Intersect.

Используйте перекрытие для объединения текста и прямоугольника в Sketch
Используйте перекрытие для объединения текста и прямоугольника
Изображение и прямоугольник теперь объединены. Изображение, заполняющее прямоугольник было перенесено в заполнение комбинированной фигуры.

Изменение текста

Даже после создания комбинированной фигуры текст может быть изменен. Двойной клик по комбинированной фигуре показывает текстовый слой внутри.

Текст можно редактировать внутри фигуры в Sketch
Текст можно редактировать внутри фигуры

Совет

Если обновленный текст шире изображения, размер изображения должен быть изменен вручную, чтобы заполнить текст. В противном случае часть текста будет прозрачной.

Чтобы изменить изображение или расположение маски, разгруппируйте комбинированную фигуру и снова объедините после обновления.

Метод 2: Псевдотекстовая маска

Когда я впервые начал использовать Sketch, я попытался применить маску к тексту, кликнув правой кнопкой мыши на текстовом слое и выбрав Mask, точно так же, как с фигурой. К сожалению, этот параметр был неактивен в контекстном меню. Таким образом, мы включим его, рассматривая текст как фигуру, объединив его со скрытым прямоугольником.

Шаги

  • Создайте текстовый слой и прямоугольник.
  • Скройте прямоугольник.
  • Объедините текстовый слой и скрытый прямоугольник, выбрав Union на панели инструментов или в меню Layer menu > Combine > Union.
Объедините текст и скрытый прямоугольник в Sketch
Объедините текст и скрытый прямоугольник

Текст теперь обрабатывается как фигура. Опция Mask теперь доступна из контекстного меню и применит маску к любому слою поверх него.

  • Добавьте изображение поверх текстового слоя.
  • Щелкните правой кнопкой мыши на слое Combined Shape и выберите Mask.

Применение маски к изображению с комбинированной фигурой в Sketch
Применение маски к изображению с комбинированной фигурой
В отличие от первого метода, изображение можно легко передвинуть, потому что оно не в комбинированной фигуре, поэтому очень легко точно разместить изображение в текстовой маске.
Слой изображения можно перемещать в маске в Sketch
Слой изображения можно перемещать в маске

Изменение текста

Чтобы легко отредактировать текст в комбинированной фигуре, заблокируйте слой изображения над ним. Двойной клик по комбинированной фигуре показывает текстовый слой внутри.

Текст можно редактировать внутри фигуры в Sketch
Текст можно редактировать внутри фигуры

Совет

Так же, как при использовании фигуры для маски, текст применяет маску ко всем слоям, расположенным выше. Это можно предотвратить, сгруппировав текст и изображение или выбрав Ignore Underlying Mask на слое, который не должен быть в маске.

Используя эти два метода, вы можете создавать текстовые маски, работающие на любом фоне, легко обновляемые и позволяющие детально контролировать, какая часть изображения будет использоваться в текстовой маске.

Скачайте файл Sketch.