画像素材を編集したい時に、好きなところに配置しやすくするために、背景が透明な画像が必要なこともありますよね。

方法をみていきましょう。

さく

こんにちは。さく（@SakuBase78）です。整理整頓が好きなシンプリストです。

検索の手間を減らし「解決したい！」に役立つサイトを運営しています。

ドキュメントの新規作成時にカンバスを透明にする

新規作成

新規ドキュメント作成時に、右側の「プリセットの詳細」でカンバスカラーを「透明」にします。

このように格子状の「レイヤー１」があるファイルが出来上がります。

画像を切り抜く

切り抜いた画像を貼り付け、「オブジェクト選択ツール」と「レイヤーマスク」で画像を切り抜きます。

コントラストがはっきりしていると、この方法で簡単に切り抜けます。

「クイック選択ツール」は、より詳細な範囲を選ぶこともできますよ。

画像切り抜き等の詳細はこちらも参考にしてみてください。

書き出す①

レイヤーの大きさ（犬の画像の大きさ）を調整して、「ファイル」の「書き出し」から「PNGとしてクイック書き出し」をクリックする。

「PNG形式」の画像が出来上がりました。

書き出す②

または、「ファイル」の「書き出し」から、「Web用に保存」で保存。

PNGまたはGIF（動く画像等）の選択や、「透明部分」のチェックが入っている状態での保存をする。

新規レイヤーで透明を選択（作成途中でOK）

白背景で作成

ドキュメントの新規作成時に白背景で作成すると、白の背景レイヤーが「レイヤーパネル」に表示されます。

画像を切り抜く

先ほどと同様です。

「オブジェクト選択ツール」をクリックし、右下の「レイヤーマスク」をクリック。

アートボードを新規作成する

「レイヤーパネル」の「右側横３本線」をクリックし、「アートボードを新規作成」する。

アートボードの背景色を透明にする

「アートボード」をクリックし、「プロパティ」の「アートボード背景色」を「透明」にする。

背景レイヤーだったレイヤーを非表示にする

背景レイヤーだったレイヤーの左側の目のマークをクリックして、非表示にする。

書き出す

レイヤーの大きさ（犬の画像の大きさ）を調整して、「ファイル」の「書き出し」から「PNGとしてクイック書き出し」をクリックする。

書き出せました。

まとめ

Photoshopで画像を切り抜いて背景を透明にする方法をご紹介しました。

Adobeソフトではなくとも、PowerPointやWordなどでも背景を透明にすることはできますが、初心者向けでも慣れてくるとPhotoshopは便利なので、使う時には試してみてください。

前回は、「アートボードぴったりに枠線（境界線）をつける方法」をご紹介しました。今回は、「画像に枠線をつける方法」です。

さく

こんにちは。さく（@SakuBase78）です。整理整頓が好きなシンプリストです。

検索の手間を減らし「解決したい！」に役立つサイトを運営しています。

画像に縁取りした枠線をつける（レイヤースタイルの追加）

※　素材：いらすとや

以下、応用できますので、一部割愛します。

画像を取り込む

画像素材をアートボード上へ、ドラッグ&ドロップして取り込む。

レイヤースタイルの追加

「画像レイヤー」をクリックして選択し、左下の「fx」（レイヤースタイルを追加）をクリックする。

境界線の追加

「境界線」をクリックして、設定していく。

レイヤースタイルの設定

各種設定をする。

• サイズ：太さ
  位置：塗りたい場所
  カラーなど

完成・書き出す

完成です。

書き出し方法①

アートボードごと書き出す時には、「アートボード」を選択した状態で、「レイヤーパネル」右上の３本線マークをクリック。
　※または、右クリック。

「書き出し形式」を選んで書き出したり、「PNGとしてクイック書き出し」等をする。

保存先を選んだり、各種設定をして「書き出し」をクリックする。

書き出し方法②

上部メニューバーの「ファイル」から、「書き出し」にマウスポインターを合わせて、右に移動しどれかで書き出す。

• PNGとしてクイック書き出し
• 書き出し形式
• 「Web用に保存」などを選んで書き出す。　※複数のアートボードが保存される。

画像を切り抜く方法

画像を輪郭線に沿って切り抜く（オブジェクト選択ツール）

切り抜きたい部分と、背景のコントラストがはっきりしている場合には簡単に行えます。

「クイック選択ツール」も便利です。

輪郭線をつける部分を選択し、切り抜く

左側の「ツールバー」から「オブジェクト選択ツール」を選ぶ。

アートボード上のレイヤー（画像）をクリックした状態で、画像の対象部分にカーソルを乗せると、ピンク色で対象範囲が自動で選択される。

「レイヤーパネル」の下の「レイヤーマスク」をクリックする。

切り抜きができました。

輪郭線（境界線）を設定

　　上記方法と同様に設定する。「レイヤースタイル」ダイアログから、各種設定をする。

改めて追加や設定をしたい時には、「画像レイヤー」を左クリックして、「レイヤー効果」をクリックすると、再編集や追加ができる。

図形の形に切り抜き縁取りする（シェイプツール）

切り抜きたい大きさの図形を作る（シェイプツール）

右側の「レイヤーパネル」から「画像レイヤー」を選択した状態で、左側の「ツールバー」から「楕円形ツール」をクリックする。

クリッピングマスクで図形に切り抜く

右側の「レイヤーマスク」の「楕円形レイヤー」と切り抜く「画像レイヤー」を選択する。切り抜く元の「画像レイヤー」を上に、切り抜く「シェイプレイヤー」を下に配置しておく。切り抜きたい「画像レイヤー」を右クリックして、「クリッピングマスクを作成」をクリックする。

輪郭線（境界線）を描く

「レイヤーパネル」の「シェイプレイヤー」をクリックして、下にある「レイヤースタイルを追加」をクリックする。「境界線」をクリックして追加する。

各種設定をすると完成。

クリッピングマスクで作っているため、図形も画像も後から移動することができます。

まとめ

Photoshopで画像を好きな形に切り抜いて、枠線をつける方法を見ていきました。

Illustratorとやり方が似ている部分と異なるところがあるので、目的に応じて活用してみてください。

よく見かける枠線。簡単に作れそうと思ってやってみるのだけど、ちょっとしたところでつまずく方も多いかも。設定のためのいろんなパネルがあるから、その辺りも見ていきます。

「アートボードサイズピッタリのイメージで枠線を作る」方法と、簡単にできそうな見方や考え方もお伝えしていきます。

さく

こんにちは。さく（@SakuBase78）です。整理整頓が好きなシンプリストです。

検索の手間を減らし「解決したい！」に役立つサイトを運営しています。

アートボードに縁取り（フレーム）がついたような枠線（境界線）の作り方を順を追って説明するよ。

長方形ツールを使う

アートボードの選択

右下にある　「レイヤーパネル」のにある「アートボード」をクリックし、選択しておきます。

長方形ツールの選択

左側にある「ツールバー」から「長方形ツール」を探し、クリックします。
　　※ ショートカットキー：「U」

長方形を作る

「十」に近いマークに変わるため、任意の場所をクリックして、アートボードと同じ大きさの長方形を作ります。

重ねる

方法①

作成した長方形を移動して、アートボードと重ねます。
　　※ ショートカットキー：「V」で「移動ツール」へ切り替えて、長方形を移動させます。
　　※ ショートカットキー：「shift」＋「V」で同じボックス内のツール切り替えができます。

方法②

上部にある「オプションバー」に、「整列」ができるアイコンがあるので、整列させたいアイコンをクリックして、「左右中央揃え」「上下中央揃え」をして、「アートボード」と「長方形」をピッタリと重ね合わせます。

色をつける

右側にある「レイヤーパネル」の「長方形１（任意の名前）」をクリックして選択した状態で設定していきます。

　・右側の「プロパティ」　→　「アピアランス」で設定。

　・「塗り」:なし
　・「線」：色を変更。

・「アピアランス」の「塗り」をクリックして、「なし（赤斜線）」を選択。

・「アピアランス」の「線」をクリックして、好みの色を選択。

・次に、「線」の太さを設定していきます。

線の太さを変える

「アピアランス」の「線」の「数値」を変更します。
　・太さ：10px
　・塗る部分：内側を選択　※ 好みの設定。

選択を解除

「レイヤー」の「選択を解除」をクリックすると、作成が完了です。

長方形選択ツールを使う

レイヤーを用意

右側の「レイヤーパネル」に、「枠線用のレイヤー」を用意します。

長方形選択ツールの選択

「レイヤーパネル」の「枠線用のレイヤー」をクリックした上で、左側の「ツールバー」から「長方形選択ツール」を探し、クリックする。

アートボードの選択

アートボード全体をマウスでドラッグして選択することで、「アートボード」が動く波線で囲われます。

境界線を描く

アートボード上で右クリックして、「境界線を描く」をクリックします。

※ または、上部「メニューバー」の「編集」から、「境界線を描く」をクリックする。

線の太さや色を設定

５　境界線の「幅」や「カラー」、描く位置（内側外側等）を設定して、「選択を解除」をクリックすると完成です。

完成（書き出し）

まとめ

図形を使った方法は、他の応用もできますし、Photoshopで枠線を作る時にいくつかの方法があります。目的に合った方法を試しながら、ショートカットキーもやっていく中で少しずつ覚えられると、作業効率もグンとアップします。