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プロのテクニック教えます!」という本のWEB版を『無料』…
  2. 必読!安易に起業ブームに乗っかる前に…絶対に読んでおきたい【おすすめのビジネス書…
  3. WordPress日本語有料テーマの決定版っ!TCDシリーズのまとめ
  4. 見ているだけで「Photoshopの実践的な使い方が学べる」日本語解説付き動画の…
  5. フリーランスや起業家になる前にこれだけは理解しておきたい5つのマトリックス&チャ…

関連記事

  1. webデザイン

    境界線が複雑な模様やイラストを切り取りせずに合成する裏ワザ的フォトショップ【CS6】技術

    フォトショップで画像を合成させるためには、さまざまな切り取り方法がある…

  2. フォトショップ

    photoshopでしわ取りするのは案外簡単だよ。

    しわ取りするのは案外簡単、というより最近のphotoshopはすごい!…

  3. webデザイン

    Photoshopユーザー必見!無料になったNik Collectionのヤバすぎる使い方

    Photoshopでクオリティの高い加工が可能なプラグインのNik C…

  4. フォトショップ

    photoshopで上手なカラーハーフトーン設定をすると面白い印象になりますよ。

    ポップ調、アニメ、サイケデリックなどでよく用いられるドット柄はphot…

  5. webデザイン

    123RFの格安素材を活用して素人っぽいWEBサイトから卒業しよう!

    ここでは123RFの格安素材を活用して素人っぽいWEBサイトから卒業す…

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

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

最近の記事

  1. 「特訓Photoshopプロのテクニック教えます!」という本…
  2. 新規のWordPressブログをSSL化(http⇒http…
  3. 画像スライダーだけじゃない!WordPressのブログ記事が…

思考系のおもろい記事

ブログラ
  1. フォトショップ

    見ているだけで「Photoshopの実践的な使い方が学べる」日本語解説付き動画の…
  2. コピーライティング

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

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

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

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