Webデザイン初心者でもうまくいく！Photoshopで画像を切り抜く方法

この記事は、2015年9月2日に公開された記事を再編集しています。

Webデザイン初心者、もしくはデザイナーではないけど画像制作をやられてるような方は、画像の一部分だけを使いたい時、どのような処理をされているでしょうか。
Adobe Photoshopを利用して切り抜きするのが一般的だと思いますが、様々な切り抜き方法が搭載されており、初心者には少しわかりづらいかもしれません。

今回は、Webデザイン初心者でも簡単に行えるPhotoshopを使った画像の切り抜き方法をご紹介します。

Photoshopで切り抜きを行いたいのであれば以下の2つの機能を活用する

Photoshopでは、「切り抜きツール」と「自動選択ツール」のいずれかを使うと、簡単に切り抜きを行えます。
以下より、それぞれのツールの使い方をご紹介します。自分に合う方を選択しましょう。

切り抜きツールを使用する

1.Photoshopのアイコン「切り抜きツール」を選択します。

2.選択後、 上部にある「幅×高さ×解析度」の項目に必要な数値を入力し「enter」キーを押します。
項目の設定がなくても、「Shift ＋alt」キーの両押しで切り取りたい幅の調整ができるので、便利です。

3.必要な箇所だけ切り取った後、ツールメニューから「WEB用に保存」を選択し、jpgやpng形式で書き出したら完了です。

自動選択ツールを使用する

1.Photoshopの「背景レイヤー」をダブルクリックして、「レイヤー」状態にします。
（背景状態で自動選択ツールを使用しても、切り抜きが出来ないので要注意です）

2.ツール上にある「自動選択ツール」を選択します。

3.選択後、上部の選択ツールの範囲や調整を決めます。

4.レイヤーの上から、切り取りたい部分を選択しましょう。
（選択状態中はカーソルを離さないでください。選択範囲をやり直したいときは「altキー」を押しながらドラッグします。）

5.「shiftキー」を押しながら、画像内で複数選択も可能です。

6.「マスクツール」を選択します。先ほど画像を選択した部分が赤く表示されます。

自動選択ツールで切り取りたい部分が選択されていなかったり、逆に切り取りすぎた場合は「ブラシツール」を使って範囲の微調整をかけましょう。
（ブラシツールの「塗り」や「消しゴムツール」で余分箇所を消すことも可能です。）

8.マスクツールで微調整が終わったら、マスクを解除します。
ツールの「選択範囲」から「選択範囲を反転」を選択すると不要な箇所のみ選択できるので、「delete（消去）」ボタンを押します。

9.切り取れたら選択を解除し（ctrl＋D）で完了です。（この段階で選択した画像の境界線の調整もできます。）

まとめ

画像を切り抜いてデザインするスキルを身に付けておくと、Webデザインの幅が広がり、訴求力の高いページ作りに役立ちます。
何度もくり返して練習し、切り抜きの精度を高めていきましょう。

このニュースを読んだあなたにおすすめ

ノンデザイナーでも簡単！画像の切り抜きができるツール4選
初心者でも簡単！無料のインフォグラフィック作成ツール厳選10選
簡単！ロゴ作成やフライヤー作成にオススメのツール22選