こんにちは！ASUE株式会社広報のN村です。

さて、大好評！デザイン初心者のためのバナー制作講座シリーズ。これまでは第一回「文字デザインと白黒バナー」、第二回「フルカラーでバナー制作」、第三回「リサイズに挑戦」と、架空の商品を使って実際にバナー制作に挑戦してきました。

今回は少し趣向を変えて、バナー制作…ひいてはデザイン業務には必ず必要になるあのスキルに挑戦します！

写真の切り抜きです！

便利なツールにたより、高を括るN村を見て、デザキは不敵な笑いを浮かべるのであった。

最初はわたしが取り組んだ課題とフィードバックのご紹介、後半にトリミングを行うときのポイントや実際にWebデザイナー・デザキが使っている方法をご紹介します！

写真の切り抜きに挑戦！

今回の課題は写真の切り抜きです。難易度別に3枚、Lv.1からLv.3まで（ちなみにLv.1,2は複数枚から選択可能）それぞれ挑戦しました。

そして、Photoshopの選択機能使えば簡単でしょ……と高を括ったわたしの初回提出物がこちら……。

※わかりやすいように色付きの背景を置いた画像でおとどけします。

パッと見た印象だと意外とイケてるのでは！？と思いますが（思いませんかね？）、フィードバックと修正してOKをもらった最終的な提出物がこちら！

Lv.1：普通の切り抜き

Lv.2：直線部分をガタガタさせずに切り抜こう

Lv.3：細かい髪の束を綺麗に切り抜こう

最初は全体的に境界部分がモヤモヤとしてしまったり、細かい部分に背景の白が残ってしまったり、髪の隙間がきちんと抜けていなかったり……だったのが、最終的には綺麗になっています。

髪の細かいところは人によってどの程度やるか変わってくると思いますが、わたしは紆余曲折頑張って選択したところから細かい髪をどんどん消していきました。

ということで、次からはお待ちかねの「きれいに切り抜くためのポイント」をご紹介します！

写真のトリミングをきれいにするためのポイントは？

ということで、詳しく解説します！

マスクレイヤーを使ってデータを壊さずに編集しよう

マスクレイヤーとは、通常のレイヤーとは別に透過処理ができるレイヤーの事です。マスクレイヤー上で黒く塗った部分が透過し、逆に白く塗ると不透明になります。Photoshopなどの画像編集ソフトに搭載されている機能で、写真のトリミング等に使えます。

Photoshop上だとこんな感じ……。

マスクレイヤーを追加したいレイヤーやグループを選択して、「レイヤー」→「レイヤーマスク」→「すべてのレイヤーを表示」で追加できます。もしくはレイヤーウィンドウ下部のアイコンからも追加できます。

背景を選択→削除でも背景部分を透過することは可能です。ですが、その場合は後から「やっぱりここを戻したい……」と思った時や修正が必要になった時に調整ができなくなってしまうため、マスクレイヤーを使用して元の写真そのものに影響が出ないように編集することが推奨されています。

マスクレイヤーを使えば、間違えて被写体まで消してしまっていた……！という場合でも、その部分をマスクレイヤー上で白く塗れば復活させられるから何かと便利ですよね。ちなみに、フリーの画像編集ソフトにも多く搭載されている機能です。

（失敗編）自動選択した範囲でレイヤーマスク→ブラシツールで調整

当初N村が頼ろうとしていた「被写体の自動選択」ですが、それを使ってLv.1を選択してみたのがこちら！

写真によって異なりますが、一発でキレイに選択できた経験は今のところありません……。
この写真は女性の服も背景も白く、境界線が上手く判別できなかったようで、袖の一部が欠けてしまいました……。

なので、ここから調整をするのですが、この時点のわたしはブラシで黒か白に塗る！！！しか調整方法を知らず、マウスを使ったフリーハンドで地道に境界を調整しておりました……。そりゃ時間もかかるし上手くもいかないぜ……。

この時点で本講座の講師役であるデザイナーのデザキから「こういう風にやると効率がいいよ！」という方法を伝授（？）してもらい、やり直しへ……

（成功編）：選択&塗りつぶしとブラシツールを上手く使い分ける

基本は選択&塗りつぶしで効率化できる！

「多角形選択ツール」はクリックした箇所を起点として、直線的に選択範囲を生成できるツールです。細かい部分も広い範囲も選択できるので、細かい調整から広くざっくりとしたトリミングに使用できます。直線的な選択しかできないツールですが、クリックするポイントを細かくすれば擬似的な曲線も作れるので、丸みのあるものの切り抜きにも利用できます。

「ペンツール」は本来パスを作るツールですが、選択範囲の生成にも使えます。「アンカーポイント」と「ハンドル」を利用することで直線だけでなく曲線も選択できるため、そこまで複雑ではない切り抜きなら一発でやれちゃうこともあるとか……。（※わたしのレベルではちまちまやった方が多分早い）

選択が面倒/上手くいかない場合はブラシツールを駆使しよう

マスクレイヤー上では黒く塗った部分にマスクがかかるので、ブラシで直接黒く塗っても透過できます。ざっくり切り抜いた後の細かい調整などで重宝します。

ブラシの種類や形状を調整・カスタマイズすることでボカシを加えながらマスクをかけたり、特殊な形のトリミングもできるように……！

方法はなんでもいいので、自分がきれいにやりやすい方法で！

今回わたしがデザキに教えてもらって使える！やりやすい！と思った方法をここではご紹介しましたが、業務でやる上では時短&クオリティの担保ができれば使うツールはなんでもOKです。

写真のトリミング=素材を用意するための一工程なので、特定のツールではなく時短&クオリティにこだわって、いろんな方法を駆使して自分が一番効率的に作業できるようにしていけるといいですね！

ぼかし機能を活用して切り抜きの境界線を調整しよう！

さて、一口に写真をトリミングする！と言っても、素材や被写体によって様々です。被写体内でピントの合い方が違うことも珍しくありません。

例えば、上の画像のようなちょっと奥行きのある写真だと、机の奥側は手前と比べてかなりボヤーッとしています。これをそのまま机の端に沿ってはっきりした線でトリミングすると……。

机の奥側が明らかに不自然になってしまいます。こんなふうに、被写体の境界線を何も考えずに全部同じはっきりした線でトリミングしてしまうと、遠近感がなくなったり不自然になってしまったり、輪郭が合わなくなって破綻したりという問題が起きてしまいます。

そんなときは、ピントに合わせて境界線をぼかしましょう！

多角形選択ツール・ペンツールの場合

「多角形選択ツール」は、オプションバーで「ぼかし」の項目を設定できます。また、「ペンツール」の場合は選択範囲の生成時にぼかしの設定ができるウインドウが表示されます。

ピントの状況によって、どの程度のぼかしを入れると自然になるかを確認しながら作業をしましょう！

ブラシの場合

「ブラシツール」選択時にF5キーを押すとブラシパネル（ブラシを細かくカスタマイズできるウィンドウ）が開きます。ブラシの境目をぼかしたい場合は「硬さ」の値を小さくして写真に合わせましょう。

あとからぼかす方法も！ぼかしツール・ガウスぼかし

選択ツールでマスクをかけたあとにぼかしをかけることももちろん可能です。

ブラシのようにぼかしを入れられる「ぼかしツール」や、ピントが合ってない場所を選択して均一なぼかしをかけられる「ガウスぼかし」などの機能を使ってみてもいいかもしれません！

 

おまけ：ﾈｺﾁｬﾝのふわふわ毛並みをどうトリミングする？N村が挑戦！

さて、必須の課題だったLv.1-3以外に、任意で挑戦できるLv.Ex「動物のふわふわの毛並みの切り抜き」があったので挑戦してみました！

ポイントは何と言ってもその毛並み！そして細かいヒゲ！あとはトリミングした後でも不自然に見えないよう調整をしていきます。

完成形がこちら！

一番のポイントである毛並みの切り抜きのために、新たにブラシを用意しました。ギザギザがついた部分を毛の流れに合わせながら、傾けたりサイズを変えたりして地道に切り抜いていきます。

ギザギザがはっきりしすぎて不自然に見える場合は、境界の内側からブラシを使って少しぼかすと、ふんわりダ○ニー仕上げ！みたいな毛並みのﾈｺﾁｬﾝに仕上がります。ﾈｺﾁｬﾝはダ○ニーでは仕上げません。
ぼかした丸に手書きで放射状に線を足すと毛玉かケサランパサランのような感じに見えませんか？そういうことです。（言葉で説明できないので察してほしい）

まとめ：トリミング、奥が深かった……

いろいろなパターンのトリミングに挑戦してみて分かったのは、トリミングの奥は深い……。

幸い、わたしはしばらく業務上でﾈｺﾁｬﾝを切り抜く必要性がなさそうですが、クライアント企業のデザインを行う必要がある！という方はいろんな素材を扱う場面も増えると思うので、いろんな方法を知っておくとよさそうですね。