Types of Text Mask in Sketch

1
Types of Text Mask In Sketch
2
Index

• Text Mask In Sketch
• Types of Text Mask In Sketch
• Method 1 Combined Shape
• Method 2 Pseudo Mask

3
Text Mask In Sketch

• Filling text content with an image is the easiest
  way to mask text, but it doesn't allow control
  for what portion of the image is used in the
  mask.
• This PPT will provide you step by step
  information on two advanced methods of masking
  that allow complete control over text mask, while
  still allowing the text to be editable.

4
Types of Text Mask In Sketch
5
Method 1 Combined Shape

• It creates a single shape for the mask but has to
  be ungrouped to change the image.
• This method allows us to precisely select which
  portion of the image will be used in the text
  mask.

6

• Image and text can't be combined directly, but
  text and shape can be combined.
• So using the intercept option, we will combine
  an image filled shape with text.

7
Steps of Combined Shape

• With the rectangle selected, click the fill color
  in the inspector.
• Click the pattern fill icon and then choose an
  image to select an image.
• Add a text layer over the part of the image that
  will appear in the mask.

8

• Select the text and rectangle, then click
  Intersect from the toolbar or Layer menu gt
  Combine gt Intersect.
• The image and rectangle are now combined. The
  rectangles image fill has been moved to the
  combined shapes fill.

9

• Modifying the Text
• After creating a combined shape, the text can be
  modified.
• Double clicking on the combined shape reveals the
  text layer in.

10
Method 2 Pseudo Mask

• Most flexible treat text like the shape and that
  enables the mask option in the context menu.

11
Steps of Pseudo Mask

• Create a rectangle and text layer.
• Hide the rectangle.
• Combine hidden rectangle and text layer by
  selecting Union from the toolbar.
• Add an image above the text layer.

12

• Right click on the Combined Shape layer and
  select the Mask.
• Unlike the first method, the image can just be
  moved around because its not in the combined
  shape, making it easy to place the image in the
  text mask precisely.

13

• Modifying the Text
• To quickly edit the text in the combined shape,
  lock the image layer over it.
• Double-clicking on the combined shape reveals the
  text layer within.

14
Thank You