Webデザイン初心者、もしくはデザイナーではないけど画像制作をやられてるような方は、画像の一部分だけを使いたい時、どのような処理をされているでしょうか。
Adobe Photoshopを利用して切り抜きするのが一般的だと思いますが、様々な切り抜き方法が搭載されており、初心者には少しわかりづらいかもしれません。
今回は、Webデザイン初心者でも簡単に行えるPhotoshopを使った画像の切り抜き方法をご紹介します。
Photoshopで切り抜きを行いたいのであれば以下の2つの機能を活用する
Photoshopでは、「切り抜きツール」と「自動選択ツール」のいずれかを使うと、簡単に切り抜きを行えます。
以下より、それぞれのツールの使い方をご紹介します。自分に合う方を選択しましょう。
切り抜きツールを使用する
1.Photoshopのアイコン「切り抜きツール」を選択します。
2.選択後、 上部にある「幅×高さ×解析度」の項目に必要な数値を入力し「enter」キーを押します。
項目の設定がなくても、「Shift ＋alt」キーの両押しで切り取りたい幅の調整ができるので、便利です。
3.必要な箇所だけ切り取った後、ツールメニューから「WEB用に保存」を選択し、jpgやpng形式で書き出したら完了です。
自動選択ツールを使用する
1.Photoshopの「背景レイヤー」をダブルクリックして、「レイヤー」状態にします。
（背景状態で自動選択ツールを使用しても、切り抜きが出来ないので要注意です）
3.選択後、上部の選択ツールの範囲や調整を決めます。
4.レイヤーの上から、切り取りたい部分を選択しましょう。
（選択状態中はカーソルを離さないでください。選択範囲をやり直したいときは「altキー」を押しながらドラッグします。）
5.「shiftキー」を押しながら、画像内で複数選択も可能です。
6.「マスクツール」を選択します。先ほど画像を選択した部分が赤く表示されます。
自動選択ツールで切り取りたい部分が選択されていなかったり、逆に切り取りすぎた場合は「ブラシツール」を使って範囲の微調整をかけましょう。
（ブラシツールの「塗り」や「消しゴムツール」で余分箇所を消すことも可能です。）
8.マスクツールで微調整が終わったら、マスクを解除します。
ツールの「選択範囲」から「選択範囲を反転」を選択すると不要な箇所のみ選択できるので、「delete（消去）」ボタンを押します。
9.切り取れたら選択を解除し（ctrl＋D）で完了です。（この段階で選択した画像の境界線の調整もできます。）
まとめ
画像を切り抜いてデザインするスキルを身に付けておくと、Webデザインの幅が広がり、訴求力の高いページ作りに役立ちます。
何度もくり返して練習し、切り抜きの精度を高めていきましょう。
このニュースを読んだあなたにおすすめ
ノンデザイナーでも簡単！画像の切り抜きができるツール4選
初心者でも簡単！無料のインフォグラフィック作成ツール厳選10選
簡単！ロゴ作成やフライヤー作成にオススメのツール22選