How to put a photo inside text with a clipping mask

Put a photo inside text in seven steps

1. 1

   Open the photo

   Go to lilcactus.app and choose File› then Open… (Ctrl+O or ⌘O), or drag the photo onto the window. To follow along exactly, open the sample photo from this page. It becomes a layer called Background.

2. 2

   Add a white background layer

   Press D and then X, so white is your foreground color (the top swatch at the bottom of the toolbar). Choose Layer› then New Fill Layer› then Solid Color…: the color starts as the foreground color, white. Click Apply. A Color Fill layer covers the photo with white; it will be the background around the letters.

   

   

3. 3

   Type the word

   Press D again for black, then T for the Text tool. On the options bar (the strip under the menus), choose Impact in the Font list and type 400 for Size. Click about a quarter of the way in from the left edge and two-thirds of the way down (the click marks the bottom of the letters), type LAKE, and press Ctrl+Enter or ⌘↩ or click the green tick.

   Thick letters work best: the photo shows only inside them. If the letters come out thin (Impact isn’t installed on every computer), choose Arial and click the B (Bold) button on the options bar.

   

   

4. 4

   Drag the photo to the top

   In the Layers panel, drag the Background row up and let go over the top half of the top row. The photo now covers everything again. A clipping mask needs the photo directly above the text.

   Dragging a row doesn’t select it, so click the Background row now to select it.

   

5. 5

   Choose Layer › Create/Release Clipping Mask

   With Background selected, choose Layer› then Create/Release Clipping Mask. The photo now shows only inside the letters, and white shows around them.

   In the Layers panel a small bent arrow appears before the photo’s thumbnail: it marks a layer clipped to the one below.

   Tip Quicker: hold Alt or ⌥ and click the photo’s row in the Layers panel. To release the clip later, Alt or ⌥-click the row again, click the bent arrow, or choose the same menu command; the photo goes back to covering everything.

   

   

   

6. 6

   Move the photo inside the letters

   Choose the Move tool from the top of the toolbar. With the photo still selected, drag down in the picture: the letters stay where they are and a different part of the photo shows through them. Drag about a fifth of the photo’s height down, until the snowy peaks fill the tops of the letters.

   To move the letters instead, select the Text layer and drag. To retype the word, choose the Text tool and click it; the photo follows the new letters.

   

7. 7

   Save, or export the picture

   To keep the text and the photo editable, choose File› then Save As› then Lil Cactus Project… (Ctrl+Shift+S or ⇧⌘S) or File› then Save As› then Photoshop (.psd)… After that, File› then Save updates that file.

   To share the picture, choose File› then Export› then PNG… or JPEG… and click Export: a new, flat image. For letters on a transparent background, hide the white Color Fill layer with its eye icon and export a PNG. Until you save a project or PSD, File› then Save writes a flat picture back into the JPEG you opened; the first Save of a JPEG, including the sample, opens the Save Image dialog.

How clipping decides what shows

• The base is the unclipped layer at the bottom of the clipped stack; every clipped layer above it shows only where the base has pixels.
• Several layers can clip to the same base: clip a photo, then add a layer above it and clip that too. They all share the letters’ shape.
• A clipped layer’s own mask still works, so you can hide part of the photo inside the letters as well. See layer masks.

Other things to clip

• A texture into a shape: draw a shape with the Shape tool (U), put a texture photo above it and clip it.
• An adjustment to one layer: clip an adjustment layer to a pixel layer and it changes only that layer, not everything below. See adjustment layers.
• A gradient over text: add Layer› then New Fill Layer› then Gradient… above a text layer, choose its colors in the dialog and click Apply, then clip it: colored letters that stay editable.

Fix common problems

Create/Release Clipping Mask is grayed out

The selected layer is the bottom layer, so there is nothing below it to clip to. Drag the photo’s row above the Text row, select it, and choose the command again. The command is also grayed out while the layer is locked: unlock the layer, or the group that holds it, with the padlock in the Layers panel.

The photo fills the whole picture, not the letters

The photo is clipped to the wrong layer, or not clipped at all. The layer directly below it is the shape it uses: drag the photo so it sits directly above the text, then clip it again. If the bent arrow is on the Text row, the text was selected when you clipped: select Text, choose the command again to release it, then select the photo and clip it.

Part of the letters turns black

That is the text’s own color: the photo no longer covers those letters after you moved it. Drag the photo back with the Move tool until it fills them.

Coming from another editor

Photoshop

Layer › Create Clipping Mask, or Alt-click (Option-click on a Mac) between two layers in the Layers panel.

GIMP

Right-click the text layer › Alpha to Selection, then add a layer mask from the selection to the photo layer. The mask doesn’t follow later text edits.

Clipping masks: questions and answers