webデザイン

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で保存することができました!

スリームデザインの無料メールマガジン

ピックアップ記事

  1. フリーランスや起業家になる前にこれだけは理解しておきたい5つのマトリックス&チャ…
  2. 見ているだけで「Photoshopの実践的な使い方が学べる」日本語解説付き動画の…
  3. 「ブロガーがこんなの読んだら反則レベルでしょっ、、」と思うくらい文章力が上がりそ…
  4. 思わずクリックしてしまう画像でアクセスアップ!2番目に簡単なブログのアイキャッチ…
  5. 必読!安易に起業ブームに乗っかる前に…絶対に読んでおきたい【おすすめのビジネス書…

関連記事

  1. webデザイン

    初心者でも60秒でマスターできるPhotoshopで角丸の画像を作る方法

    WEBデザインなどをしていると画像の角を丸くしたいケースはよくあります…

  2. webデザイン

    知っといて損はない、魅力的なヘッダーデザインを作成するための目的・用途別の指南書。(photosho…

    ホームページやブログ・コンテンツサイトに欠かすことのできないヘッダー(…

Wordpress日本語テーマのまとめ
photoshop日本語チュートリアル

よく読まれている人気の記事

最近の記事

  1. 思わずクリックしてしまう画像でアクセスアップ!2番目に簡単な…
  2. 「コレがやりたかった!」GIFアニメ(動く画像)のPCモック…
  3. Photoshopを使って動画をGIFアニメーション(動く画…

思考系のおもろい記事

ブログラ
  1. コピーライティング

    「ブロガーがこんなの読んだら反則レベルでしょっ、、」と思うくらい文章力が上がりそ…
  2. キュレーション

    WordPress日本語有料テーマの決定版っ!TCDシリーズのまとめ
  3. SNS

    思わずクリックしてしまう画像でアクセスアップ!2番目に簡単なブログのアイキャッチ…
  4. 3分の話

    柔軟な思考を大切にしたいクリエイター必読の5冊。私の頭をグニャングニャンに柔らか…
  5. 3分の話

    フリーランスや起業家になる前にこれだけは理解しておきたい5つのマトリックス&チャ…
PAGE TOP