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. 「ブロガーがこんなの読んだら反則レベルでしょっ、、」と思うくらい文章力が上がりそ…
  2. 思わずクリックしてしまう画像でアクセスアップ!2番目に簡単なブログのアイキャッチ…
  3. 「特訓Photoshopプロのテクニック教えます!」という本のWEB版を『無料』…
  4. フリーランスや起業家になる前にこれだけは理解しておきたい5つのマトリックス&チャ…
  5. 見ているだけで「Photoshopの実践的な使い方が学べる」日本語解説付き動画の…

関連記事

  1. webデザイン

    これは知らないと損!背景が透明なPNG画像の輪郭をなじませるPhotoshopの使えるテクニック《動…

    人物と背景を合成したい場合、予め人物の背景を透明にしたままでPNG画像…

  2. フォトショップ

    「Photoshopのカラーピッカーがおかしい、、」いつもと色が違う時の対処法

    Photoshopで色を変更しようと思ってカラーピッカーを開くと、知ら…

  3. フォトショップ

    Photoshopの【色の置き換え】の使い方

    Photoshopで【色の置き換え】を使うと部分的に色を変えることがで…

  4. webデザイン

    Photoshopでネオン管が光っているような文字の作り方を解説

    歓楽街を歩いているとBARやライブハウスなどのネオン看板が夜の街を彩っ…

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

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

最近の記事

  1. 「特訓Photoshopプロのテクニック教えます!」という本…
  2. 「いつも締め切りに追われてしまう」そんな人がミッションを成し…
  3. Photoshop CCのメニュー文字やツールバーが異常に小…

思考系のおもろい記事

ブログラ
  1. 3分の話

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

    必読!安易に起業ブームに乗っかる前に…絶対に読んでおきたい【おすすめのビジネス書…
  3. SNS

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

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

    「特訓Photoshopプロのテクニック教えます!」という本のWEB版を『無料』…
PAGE TOP