その他

2022.07.20

Photoshopで簡単に白背景を透過させる方法

できれば透過のpngで設置したいのに支給された画像や素材でダウンロードした画像がjpgだったり背景が透過されていない…!なんてことよくありますよね。
今回はそんなお悩みを簡単に解決できる方法を2つご紹介いたします!

動画はこちら

当記事の内容を動画化しました!ぜひご覧ください!

色域指定で透過させる方法

1つ目は色域指定で透過にする色を選択し、一気にくり抜く方法です。

手順1

[選択範囲]→[色域指定]を選択します。

手順2

色域指定のウィンドウ内の[許容量]を0にし、画像の透過させたい色をクリックします。(今回のような画像の場合は白い部分のどこかをクリックします。)
クリックすると下のプレビューにくり抜く範囲が表示されるため、問題がなさそうであればそのまま[OK]を押します。

手順3

[OK]を押してウィンドウが消えると選択された状態になるため、選択状態で[back]キーなどで選択内容を削除すると、白かった部分だけが消えて透過された状態になります。

マジック消しゴムツールを使う方法

次にご紹介するのは細かい部分だけを透過することができる[マジック消しゴムツール]を使用する方法です。

手順

難しい手順はなく、消しゴムツールの部分で[マジック消しゴムツール]を選択し、透過させたい部分をクリックするだけで透過させることができます。
色域選択の様に一括でのくり抜きはできませんが、部分的に透過をさせた画像を作成したい場合はこちらの方法が便利です!

まとめ

透過させる方法は色々ありますが、色がはっきりとしているコンテンツをくり抜く場合はこちらの方法が早くて簡単かな?と個人的には思います!

ぜひご活用ください!

関連記事はこちら

[card url=”http://note.spiqa.design/wp/photoshop_svg/”]

この記事をシェアする

関連記事

  • 2024.03.22

    Webデザインにおけるアニメーションについて考えてみた〜実例編〜

    その他

  • 2024.03.12

    Webデザインにおけるアニメーションについて考えてみた〜メリット・デメリット編〜

    その他

  • 2023.12.30

    案件を切り替える拡張機能「Project Manager」が便利!

    その他

おすすめ記事

  • 2020.12.12

    【HTML5】意外と知らないfigureタグの使い方

    その他

  • IE clip-path

    2021.02.10

    【IE対応】CSSで画像を好きな形に切り抜く方法(clip-path)

    その他

  • 2021.03.28

    【勝手にWEBサイトレビュー#22】配色や画像の使い方が光るギリシャの食品メーカーのコーポレートサイト

    その他

TAG

×