Sketchで背景をテキストでマスクする＆背景の中のテキスト部分を透過させる方法
Sketchを使って画像やシェイプを文字の形に切り抜くやり方と、
画像やシェイプの中のテキストの部分を透明にするやり方のメモです。
次の画像のようなものを作ります。
公式サイト
参考サイト様
①シェイプの中のテキスト部分を透明にする
Rectangleのシェイプのレイヤーの上にテキストのレイヤーを重ねます。
テキストはそのままでもいいし、Convert to Outlinesでパスにしてもいいです。
テキストレイヤーとシェイプのレイヤーを同時に選択します。
メニューからLayer → Combine → Subtract 又は Differenceを選択します。
するとCombined Shape というレイヤーになりテキスト部分が透過されます。
②画像の中のテキスト部分を透明にする
画像で行う場合は、画像レイヤーの上にテキストのレイヤーを重ねてCombined Shapeを作ってもうまくいきません。
シェイプの背景を画像にした後にCombined Shapeを作ります。
まずRectangleのシェイプを作ります。（説明のためRectangleのシェイプにしていますが、Ovalなどの形でも大丈夫です）
右側のスタイル設定の中の Fills から Pattern Fill をクリックし、
IMAGES をクリックして画像を読み込み、Display はFill にします。
上の説明画像とは違う背景ですが、シェイプの背景が設定されました。
後は ①シェイプの中のテキスト部分を透明にすると同じように、
テキストレイヤーを作成し、 テキストレイヤーとシェイプのレイヤーを同時に選択した状態で
メニューからLayer → Combine → Subtract 又は Differenceを選択すれば Combined Shape というレイヤーになりテキスト部分が透過されます。
③背景画像をテキストでマスクして画像を文字の形に切り抜く
参考サイト様がとても詳しく説明してくださっているので、そちらを読むのが一番よいと思いますが、
私の手元で試したものを軽く説明させていただきます。
Advanced Text Mask In Sketch - Design + Sketch - Medium
③-1 Combined Shapeによるマスク
まず、②画像の中のテキスト部分を透明にする と同様に
シェイプを作成し、背景画像を設定します。
テキストレイヤーも作成します。
テキストレイヤーとシェイプのレイヤーを同時に選択した状態で
メニューからLayer → Combine → Intersectを選択すれば Combined Shape というレイヤーになり背景がテキストの形にくり抜かれたようになります。
この方法だと、テキストレイヤーを背景の上の方や下の方に配置しても背景の中央にテキストがあるかのように
背景の中央部分が切り抜かれるようです。
切り抜きの位置を柔軟に変えたければ、次に説明するやり方のほうがよいと思います。
③-2 Combined Shapeレイヤーの上に画像を重ねてマスクする
今までのやり方と違い、テキストをマスク用のシェイプにして、その上に画像を重ねてマスクします。
例えば画像を丸くくり抜くような普通のマスク方法と似たような感じです。
テキスト部分と画像が結合していないので、マスク位置を柔軟に変更することが出来ます。
まずはテキストの形をした透明のシェイプレイヤーを作ります。
Rectangleのシェイプとテキストのレイヤーを作ります。
テキストの色はなんでもいいので、目立つ色にしてます。
Rectangleのシェイプを非表示にします。
テキストレイヤーとシェイプのレイヤーを同時に選択した状態で
メニューからLayer → Combine → Unionを選択します。
これでMaskもできるテキストの形のレイヤーになりました。
このレイヤーの上に画像を重ねて、テキストのレイヤーの右クリックメニューからMaskを選択すると
テキストの形に画像がマスクされます。
画像を動かすとマスクされる位置も変えられます。
以上です。
