Sketchで画像を切り抜く(マスクする)方法
今回はSketchで写真や画像を丸や四角に切り抜く方法を紹介していきます。
円形に切り抜くのは例えば、プロフィール画面などにもよく使われたりするのでここで抑えておきましょう。
今回は上記画像のように写真を円形に切り抜く(マスクする)方法を紹介していきます。
サンプル画像の用意
ここから猫の画像を使ってさっそく説明していきます。
お手元の好きな写真でもいいですし、こちらの画像をそのままダウンロードして使っていただいても構いません。
参照元：https://pixabay.com/ja/猫-若い動物-好奇心が強い-山猫-動物-2083492/
マスク機能を使ってみる(準備編)
それではさっそくマスク機能を使ってみましょう。
上記、猫の画像で猫の顔の部分だけ丸く切り抜いてみます。
まず、猫の画像をSketchに展開します。フォルダから画像をそのままドラッグ&ドロップで展開します。
その隣にメニューバーの+アイコン＞Shape＞Ovalで丸を描きましょう。
キーボードの「O」でショートカットしても描けます。
この時に綺麗な正円を使いたいので、shiftキーを押しながら描画しましょう。
Sketchの図形の描き方について分からない方はこちらも参考にしてみてください。
ここで注意点が1つ。画面左側のレイヤー画面で、円形(Oval)が猫画像の下にくるように配置してください。
レイヤーの配置の仕方について分からない方はこちらの記事も参考に。
Sketchのレイヤーとは？Sketchのレイヤーに関する情報まとめ
マスク機能を使ってみる(実践編)
それでは準備が整ったので、さっそく画像を円形に切り抜いてみましょう。
言葉で説明すると、
①猫画像を円形の上に移動させる
②レイヤー画面から円形右クリック＞Maskをクリック
という流れになります。
①猫画像を円形の上に移動させる
これはおよその位置で大丈夫です。
②レイヤー画面から円形右クリック＞Maskをクリック
次に画面左側のレイヤー画面に注目しましょう。
このOvalの箇所で右クリックをMaskをクリックします。
すると、下に配置している円形の形に沿って上に配置されている画像が切り取られます。
厳密には切り取られるのではなくマスクがかけられた状態となります。
マスク機能のポイント
覚えてしまえば簡単なマスク機能ですが、ここでポイントを２つまとめます。
まず1つ目に切り抜きたい図形は下側に配置すること。
ここでは猫の写真を円形にマスクしたので、猫の写真＞円形という配置になっていますね。
四角に切り抜きたい場合も同じく、切り抜きたい図形が下側に配置されます。
そして、2つ目のポイントはマスク機能を利用した場合、上のレイヤー全てにそのマスクが適用されるということです。
ここでは猫写真を円形にマスクしましたが、円形より上に配置されたレイヤーには全て適用されてしまいます。
これでは不便ですよね。
こういった時の解決方法としてはレイヤーをグループ化することです。
つまりは、猫写真と円形を１つのセットとしてまとめてしまうことです。こうしてしまえばマスクの範囲は上のレイヤー全てに適用されるようなことはありません。
レイヤーをグループ化する方法は簡単で、２つのレイヤーを選択した状態で上部のグループ化ボタンをクリックします。
もしくはcommandキー + G のショートカットでもグループ化ができます。
▼関連記事
