【ドラッグするだけ】Canvaのフレームを使って切り抜き画像(マスク)を作ろう!

ブログに使う画像などで、丸や四角などの図形で画像を切り抜きたい時ってありますよね。

たとえばこんな風に。

Canvaフレーム

ブログなどで使うと映えますよね。

このような画像の切り抜き処理は Photoshop などの画像ソフトでは「レイヤーマスク」って呼んだりする処理ですが、無料のウェブツール「Canva」を使うと、このような切り抜き画像がドラッグするだけですぐに出来ちゃうんです。これは便利ですよ。

センパイセンパイ

Canvaとは、ブログのアイキャッチや素敵なバナーなどが、まるでプロレベルの仕上がりで自分で作れるサービスです。

というわけで、今回はCanvaを使った「切り抜き画像(マスク)」の作り方について紹介していきます。

それではやってみましょう!

切り抜き画像(マスク)の仕組み

まず、どうして丸や四角などの図形で画像が切り抜かれるのか?という仕組みについてちょっと解説しますよ。

さっき出てきたように、画像を図形の形に切り抜きたいだけならいろいろな方法があります。

たとえば画像の余計な部分を消してしまいたいなら、余計な部分を「削除」しちゃえばいいですよね。

不要な部分を削除

これでもいいんですが、キレイに切り抜くのは大変ですよね。

それに、削除しちゃうとやり直したくなってもやり直せなくなります。

そこで「マスク」という手法があるんですよ。

 

マスクとは?

マスクとは…、詳しい仕組みはググってほしいですが、簡単にいえば「被せて隠す」みたいな感じです。

こんな感じ。

レイヤーマスクの説明図

これが「マスク」です。画像の上に黒い布をかぶせて余計な部分を「被せて隠す」ようなイメージです。

マスクなら、元の画像を加工せずに黒い布を被せているだけだから、後でやり直すことも出来るし、切り抜きたい位置を微調整することだってできます。

Photoshopなどの画像ソフトにはこうしたマスク機能が搭載されているのですが、このマスクと同じようなことがCanvaのフレーム機能を使うとホントに簡単に出来るんですよ。

ドラッグするだけでマスクできるんです。すごい!

 


Canvaのフレーム機能

ではさっそくやってみましょう。

Canvaにアクセスします。

Canva
https://www.canva.com/

Canvaに登録していない人は、登録しておきましょう。

Canvaの無料登録についてGoogleやFacebookアカウントを使って登録する事もできますし、「メールアドレスで登録」ボタンからなら、GoogleやFacebookのアカウントとは関係なくCanvaのアカウントを作ることが出来ますよ。僕はメールアドレスで登録しました。

 

Canvaのフレーム機能

Canvaの詳しい使い方は今後記事にしていきますね。

今回はフレーム機能の使い方を解説します。

豊富にあるテンプレート(下画像)を使ってもいいんですが、今回はフレームを使うだけなのでテンプレートは使わずに「カスタムサイズ」でカンバスを作りました。

Canvaテンプレート
豊富にあるCanvaのテンプレート

 

デザインを作成

Canvaの「デザインを作成」

今回は画面右上の「デザインを作成」から作成しました。

 

カスタムサイズでカンバス作成

カスタムサイズで作成

今回は「カスタムサイズ」で1000px×1500pxのサイズでカンバスを作りました。

 

素材メニュー

左メニューから「素材」を選択

左メニューから「素材」を選択して、フレームのところの「すべて表示」を選択します。

 

フレームを配置

フレームを配置

フレームの形を選んでクリックするとカンバスにフレームが配置されます。

フレームに空と雲のイラストが描かれているのは、「ここに写真が入りますよー」という意味です。

 

画像を配置

フレームの上に画像をドラッグ

フレーム内に配置する画像は、自分の書いたイラストや撮影した写真などをアップロードして使う事ができますよ。

今回は左メニューの写真から画像を選んで、フレームの上に画像をドラッグしました。

ここがポイント画像を配置する時に、フレームから外れるとマスクされないので、フレーム内にドラッグしてマスクされるところで離してください。

 

位置調整

フレームやフレームの中の画像は好きな位置に移動したり拡大縮小することが出来ます。

センパイセンパイ

ひとつ前に戻りたい時は、Ctrl+Zか、画面上部の「元に戻す」の矢印アイコンで戻れます。

フレームごと位置を移動したい

マスクの移動

フレームは、好きな位置に移動したり、画像の見える範囲を調整したりできます。

これは、そのままドラッグすればOKです。

 

マスクされた画像ごと拡大縮小する

マスクの拡大縮小

 

画像のマスクされている位置を調整する

マスクの画像の位置を調整する

フレーム内の画像の位置を調整したい場合は以下のように操作します。

  1. 画像部分をダブルクリックすると画像が選択される
  2. 拡大縮小したりドラッグして移動したりできる

フレームの中の画像の位置を微調整する際のポイントですが、画像をフレームに配置した時にピッタリサイズでマスクされているので、上下か左右にしか移動できないことが多いです。

なので、画像の位置を微調整したい時には少し拡大してから移動させるとストレスがないです。

 

フレーム機能は組み合わせるといろいろできるよ

Canvaのフレームは、組み合わせて使うといろいろ表現できると思います。

Canvaフレームの使用例

今回はフレーム機能の説明だったので、カスタムサイズからイメージを作りましたが、豊富に用意されているテンプレートを使って、フレームを足したり好きな画像を使ったりしていけば、自分好みのイメージが作れると思います。

センパイセンパイ

ホントCanvaは使えば使うほど魅力があるツールだなぁと思います。

というわけで、今回はCanvaのフレーム機能を使ったマスクのやり方についての紹介でした。