Androidはワンツーパンチ 三歩進んで二歩下がる

Android卵プログラマーの記録ブログ

Sketchで背景をテキストでマスクする&背景の中のテキスト部分を透過させる方法

Sketchを使って画像やシェイプを文字の形に切り抜くやり方と、
画像やシェイプの中のテキストの部分を透明にするやり方のメモです。
次の画像のようなものを作ります。

f:id:sakura_bird1:20190804120943p:plain
出来上がり

公式サイト

参考サイト様

①シェイプの中のテキスト部分を透明にする

Rectangleのシェイプのレイヤーの上にテキストのレイヤーを重ねます。
テキストはそのままでもいいし、Convert to Outlinesでパスにしてもいいです。

f:id:sakura_bird1:20190804121530p:plain:w500

テキストレイヤーとシェイプのレイヤーを同時に選択します。

f:id:sakura_bird1:20190804121942p:plain

メニューからLayerCombineSubtract 又は Differenceを選択します。

f:id:sakura_bird1:20190804123115p:plain:w500

するとCombined Shape というレイヤーになりテキスト部分が透過されます。

f:id:sakura_bird1:20190804141750p:plain:w500

②画像の中のテキスト部分を透明にする

画像で行う場合は、画像レイヤーの上にテキストのレイヤーを重ねてCombined Shapeを作ってもうまくいきません。
シェイプの背景を画像にした後にCombined Shapeを作ります。

まずRectangleのシェイプを作ります。(説明のためRectangleのシェイプにしていますが、Ovalなどの形でも大丈夫です)
右側のスタイル設定の中の Fills から Pattern Fill をクリックし、
IMAGES をクリックして画像を読み込み、DisplayFill にします。

f:id:sakura_bird1:20190804124044p:plain:w400

上の説明画像とは違う背景ですが、シェイプの背景が設定されました。

f:id:sakura_bird1:20190804124421p:plain:w500

後は ①シェイプの中のテキスト部分を透明にすると同じように、
テキストレイヤーを作成し、 テキストレイヤーとシェイプのレイヤーを同時に選択した状態で
メニューからLayerCombineSubtract 又は Differenceを選択すれば Combined Shape というレイヤーになりテキスト部分が透過されます。

f:id:sakura_bird1:20190804125312p:plain:w500

③背景画像をテキストでマスクして画像を文字の形に切り抜く

参考サイト様がとても詳しく説明してくださっているので、そちらを読むのが一番よいと思いますが、
私の手元で試したものを軽く説明させていただきます。

Advanced Text Mask In Sketch - Design + Sketch - Medium

③-1 Combined Shapeによるマスク

まず、②画像の中のテキスト部分を透明にする と同様に
シェイプを作成し、背景画像を設定します。
テキストレイヤーも作成します。

テキストレイヤーとシェイプのレイヤーを同時に選択した状態で
メニューからLayerCombineIntersectを選択すれば Combined Shape というレイヤーになり背景がテキストの形にくり抜かれたようになります。

f:id:sakura_bird1:20190804131227p:plain:w500

f:id:sakura_bird1:20190804131402p:plain:w500

この方法だと、テキストレイヤーを背景の上の方や下の方に配置しても背景の中央にテキストがあるかのように
背景の中央部分が切り抜かれるようです。
切り抜きの位置を柔軟に変えたければ、次に説明するやり方のほうがよいと思います。

③-2 Combined Shapeレイヤーの上に画像を重ねてマスクする

今までのやり方と違い、テキストをマスク用のシェイプにして、その上に画像を重ねてマスクします。
例えば画像を丸くくり抜くような普通のマスク方法と似たような感じです。
テキスト部分と画像が結合していないので、マスク位置を柔軟に変更することが出来ます。

まずはテキストの形をした透明のシェイプレイヤーを作ります。
Rectangleのシェイプとテキストのレイヤーを作ります。
テキストの色はなんでもいいので、目立つ色にしてます。

f:id:sakura_bird1:20190804134953p:plain:w500

Rectangleのシェイプを非表示にします。

f:id:sakura_bird1:20190804135142p:plain:w500

テキストレイヤーとシェイプのレイヤーを同時に選択した状態で
メニューからLayerCombineUnionを選択します。

f:id:sakura_bird1:20190804135437p:plain:w500

これでMaskもできるテキストの形のレイヤーになりました。

f:id:sakura_bird1:20190804135731p:plain:w500

このレイヤーの上に画像を重ねて、テキストのレイヤーの右クリックメニューからMaskを選択すると
テキストの形に画像がマスクされます。

画像を動かすとマスクされる位置も変えられます。

f:id:sakura_bird1:20190804141142p:plain:w500

以上です。