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. 見ているだけで「Photoshopの実践的な使い方が学べる」日本語解説付き動画の…
  2. WordPressの使い方に迷ったらまずこの記事をチェック!すごく参考になる秀逸…
  3. 思わずクリックしてしまう画像でアクセスアップ!2番目に簡単なブログのアイキャッチ…
  4. 「特訓Photoshopプロのテクニック教えます!」という本のWEB版を『無料』…
  5. WordPress日本語有料テーマの決定版っ!TCDシリーズのまとめ

関連記事

  1. フォトショップ

    photoshopで違和感なくほくろやシミを消す方法。

    photoshopで人物写真のほくろやシミを消したい場合にはコピースタ…

  2. フォトショップ

    印刷用データを入稿する際に「インキ総使用量を300%以下にしてください」ってマジかっ!?Photos…

    デザインが完成したぁっ~!!ってことで印刷業者さんへデータを送ったら「…

  3. webデザイン

    ブロガー必見!パソコン画面のはめ込み画像がわずか10秒で作れるMockDropが便利すぎた。

    ブログを書いているとパソコン画面の"はめ込み画像"を作りたい場合があり…

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

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

最近の記事

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

思考系のおもろい記事

ブログラ
  1. キュレーション

    WordPress日本語有料テーマの決定版っ!TCDシリーズのまとめ
  2. コピーライティング

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

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

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

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