株式会社グローバルゲート公式ブログ
こんにちは。グローバルゲート制作部のモーリーです。
緊急事態宣言が解除され、当社周辺でも営業を再開する店舗が増えてきました。このまま普段通りの日常に戻ってほしいですが、油断は禁物です。今しばらくは不要不急の外出を控え、手洗いとうがいを欠かさないように注意しましょう。
とりあえず……ラーメンを食べたいです。
さて、今回は写真の切り抜き方法についてご紹介したいと思います。
商品の紹介をホームページで行う場合、撮影された商品の写真をそのまま掲載するのではなく、商品のみを切り抜いて掲載したいということはよくあると思います。ホームページ制作の際にも、商品や人物のみを切り抜いて組み合わせてイメージをつくるという作業は多く発生します。ぜひ参考にしてください。
従来の方法:ペンツールでコツコツとパスを書く
たとえばこの写真から島の住人だけを切り抜きたい場合、
従来はペンツールを使ってベジエ曲線で被写体を囲み、パスを選択範囲に変換する方法が主流でした。
このように被写体の周囲にアンカーポイントを打っていきます。
この方法はどんな形状のものでも確実に切り抜けますが、手間と時間がかかり写真の枚数が増えるととにかくめんどくさい…そこで最新のPhotoshopや外部ツールを使用した方法をご紹介します。
Photoshop:「被写体を選択」
Photoshopの新機能、「被写体を選択」を使用した例です。
「選択範囲」から「被写体を選択」を選ぶと、PhotoshopのAIがメインの被写体を自動で認識し、その被写体が選択されます。
うまく選択できないこともありますが、その場合はクリックマスクツールを使って余計な部分を消しゴムツールで消したりブラシツールで塗りつぶしたりして補正します。
Photoshop:オブジェクト選択ツール
前述の「被写体を選択」機能はメインの被写体と判定されたものが選択の対象となるため、画面の隅に写っているものは選択されないことが多く、また、複数の被写体の場合はまとめて選択されてしまいます。
「オブジェクト選択」ツールの場合、範囲を指定してその範囲内の被写体と判定されたものも選択してくれますので、より精度の高い結果を得ることができます。
オブジェクト選択ツールを選択し、
選択したい被写体をざっくりを囲います。
今回はフリーハンドで線を書くなげなわツールを使いましたが、矩形選択も可能です。
このようにももこだけを選択することで、ハムスケを選択させないという使い方ができます。
外部ツール:remove.bg
remove.bgはブラウザから使用できるWebサービスです。
画像の切り抜きだけで比較すると、Photoshopよりも高精度できれいに切り抜きができます。
無料&アカウント未登録で使用する場合は取得できる画像の解像度が640px以内となってしまいます。切り抜き作業が頻繁に発生する場合、有料アカウントの登録を検討してみてください。
実際に使ってみると…
Photoshopでは足元の土台(緑のステージ)の選択がうまくいかないケースが多かったのですが、remove.bgではきれいに判定されています!
remove.bgを初めて使ったときはその精度の高さにおどろきました。有料登録する価値は十二分にあります。
まとめ
今回はホームページの運営中でもよく必要になる画像の切り抜きについてご紹介しました。
なお、ツールを使いこなせば切り抜きもずっと楽になりますが、背景が真っ白や真っ黒の切り抜きやすい写真を用意するという点も重要です。次回はそんな切り抜きやすい写真を撮る方法をご紹介したいと思います。
【関連記事】
カテゴリー
月別アーカイブ
ブログ内検索
執筆メンバーについて
モーリー
Webデザイナー。
当サイトのデザインと管理も担当しています。
ナミー
Webディレクター。
本社制作部の紅一点。お客様に寄り添った提案を心かげています。
タカ
サーバーエンジニア。
Webサイトにとってサーバーは命、ネットワークは血液です。Webサイトの安定稼働のために日夜注力しています。
たっくん
ITアドバイザー
Webサイトの活用方法からオフィスのネットワーク整備まで、多角的にITの活用方法をご案内させていただきます。
ノーさん
制作部ディレクター。
業種を問わず多くのお客様を担当させていただきました。Webサイトのお悩み、活用方法などぜひご相談ください。
カン
制作部デザイナー。
制作部最年少の若手ですが、だからこそ生まれるアイデア・発想にご期待ください。
当社サービスについてのお問い合わせは下記までご連絡下さい。
06-6121-7581 / 03-6415-8161