THREEMDESIGN
ホーム / ブログ

2014-05-07

photoshopで背景を透明なままPNGで保存するのは簡単だよ!

WEBサイトでアイコンやイラストなどを使用する場合、背景を透明なままで使用したいケースがあります。しかしJPGでWEB用にデータを保存しようとするとせっかく切り抜いたのに白い背景がくっついてきます。

また、GIFでは背景を透明なまま保存することは可能ですが、曲線ライン部分がガタガタ・カクカクするので見栄えが良くありません。

PNG

そのような際にはPNGで保存するのがベターです。ここでは背景を切り抜いたイラストをPNGでWEB用にデータを保存する方法を1分程度で解説します。

イラストをPNGでWEB用にデータを保存する方法

使用するイラストをフォトショップで開く。

PNG

詳しい切り抜き方法についてはこちらを参考にしてください ⇒ これで完璧っ!5種類のphotoshop切り抜き方法を使い分けて輪郭線を背景になじませるクオリティの高い合成をマスターしよう。(今回はケース③を使用)

新規レイヤーを作成しペンツールなどで輪郭に沿ってシェイプを作成。

PNG

背景を複製し最前面に移動、右クリックでクリッピングマスクを作成し、背景を非表示。

PNG

背景が透明になったら、ファイル 》Web用に保存。

PNG

▼にカーソルを持っていきPNG-24に変更、透明部分にチェックマークを入れ保存。

PNG

これでphotoshopで背景を透明なままPNGで保存することができました!