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選