写真の背景を透明にしたい場合は、サイト制作の中でも意外と多いものです。

最近ではいろんな画像編集ツールが出てきていますが、今回は、photoshopで簡単に背景を透明にする方法をお伝えします。

画像はhttps://stock.adobe.com/jp/より

photoshopに写真を追加

まずはphotoshopに写真を追加します。

鍵のマークがついている場合は、クリックして外してください。

クイック選択ツールを選択

上部の「被写体を選択」をクリックします。

すると、切り抜きたい人物が自動で選択されます。

選択されていない箇所がある場合

この画像では、女性の肩の部分が選択されていません。

選択されていない箇所がある場合は、手動(マウス)で切り抜きたい部分を選択していきます。

選択しすぎてしまったら・・

手動で選択しすぎてしまった場合は、


macの場合→ option + マウス

windowsの場合→ alt + マウス

で修正します。

綺麗に全て選択ができたら、右下の 「マスク」をクリックします。

背景が綺麗に透過されました。

(マスクで覆われている状態です)

画像の書き出し

次に、背景透過のまま、画像を書き出していきます。

まずは、カンバスの背景が透明になっていることを確認します。

透明になっていない場合は、

プロパティー
→カンバス
→モード:透明

を選択しておきます。

透過の必要がない場合は、「ホワイト」や「黒」を選択しておきましょう。(選択した色で書き出しされます)

次に、左上のファイルから
→書き出し
→書き出し形式
を選択します。

①書き出したい画像にチェックが入っていることを確認し、

②右側のファイル形式をPNGにします。

③その下の”透明部分”にチェックを入れておきます。

ここでjpegを選択してしまうと、背景がしろになってしまうので、必ずPNGを選択してください。

④右下の「書き出し」をクリックします。

背景透過の画像が完成しました。

まとめ

画像の背景透過はサイトにロゴを設置する場合や、色付きの背景に画像を配置するときなどに欠かせない編集作業です。

photoshopは難しいイメージがありますが、慣れるととても簡単にできるので、是非いろんな画像で挑戦してみてください。

投稿者プロフィール

志水泉
志水泉
2018年より始めた事業のホームページを自作し運用していくなかで、ホームページ制作の楽しさをしり、独学から本格的にWebを学ぶ。
2020年より、自分の周りのWebが苦手な人たちを助けたいという思いからWeb制作を中心にフリーで活動。
2022年より株式会社ウェブロードに所属し、制作・デザインの知識をさらに深めながら、初心者でもわかりやすいWordPressの操作方法などを発信中。

お問い合わせフォームはこちら

(※営業電話が多いため、お電話は留守電にしています。お急ぎの方は下記メールフォームをお使いください。)

お見積りのご依頼・打ち合わせはZOOM/GoogleMeet/お電話等、オンラインでも対応可能です。全国からお問い合わせを受付けています。
2営業日を過ぎても弊社からの連絡がない場合はメールが届いていませんので、大変お手数をお掛けしますが、下記メールアドレスにご連絡ください。

    お問い合わせの前に下記、ご確認をお願いいたします。

    必須お問い合わせ項目

    必須お名前

    必須フリガナ

    必須メールアドレス

    必須貴社名

    任意貴社サイトURL

    任意電話番号(ハイフン無し・半角数字)

    必須制作費のご予算はどれくらいですか?

    企画・設計、デザイン、画像・文章の作成、サイト内検索システムの導入等、
    ヒアリングを元にご予算やご希望に応じたお見積りをご提案させて頂きます。
    弊社制作費の費用感につきましてはこちらの記事をご参照ください。

    必須制作目的はどうお考えですか?(複数選択可)

    どこに力を抜きどこに力を入れるのか、
    ご予算とご要望の中から最適なご提案をさせていただきます。

    必須どのような機能が必要ですか?(複数選択可)

    SSL(https://~)対応、ブログ機能、スマホ対応(レスポンシブ)、
    ログイン等セキュリティ対策、ページタグSEOの最適化は標準搭載。

    必須どのような作り方がご希望でしょうか?(複数選択可)

    WordPressでの構築になりますので、お客様のご要望に比較的柔軟にお応えすることが可能です。
    企画ご提案する前に参考にさせていただく項目です。

    必須お問い合わせ内容を教えてください