WEB デザイン 作りたい

資料作成に便利な「透過PNG」とは?作り方・保存方法をまとめてご紹介

透過PNG画像の作り方をまとめてご紹介

資料やプレゼンシートなどを作る時に活躍する「透過PNG(ピング)画像」をご存知でしょうか。簡単に言うと背景が透明な画像のこと。

背景が透明だと、どんな資料・どんな場所にも馴染んで、スマートに魅せることができます。そんな背景が透明な「透過PNG画像」の作り方をツール・環境ごとにご紹介します。

ネットで配布されている背景が白色のフリー素材を、簡単に透明にして見栄えのする資料を作りましょう!

併せて読みたい背景が透明な【透過PNG素材】サイトご紹介
併せて読みたい無料のアニメーションGifがダウンロードできるサイトまとめ

透過PNG(ピング)画像とは

「PNG」画像は、よく見る画像形式の「jpeg(ジェイペグ)」と同じような画像形式の1つです。

ただ1つ特徴があって、普通は白くなる背景を透過色として指定する事ができます。背景が透明でオブジェクトのみの画像を「透過PNG(ピング)画像」といいます。

背景に色がある資料などに白背景のイラスト画像を載せると、イラストの周りだけ白くなってしまいますよね。

背景に色がある資料などに白背景のイラスト画像を載せると、イラストの周りだけ白くなってしまいますよね。
jpeg画像と透過PNG画像との違い

そんな時に背景が透明の【透過PNG素材】のイラストを使うと、背景が白色にならずスマートにイラストを挿入することが出来ます。

透過PNG画像は無料のソフトや、WEBページなどでも簡単に作成することが出来るので、作り方をいくつかのパターンでご紹介します。

透過PNG画像の作り方

無料ウェブページで透過PNG画像を作る

MacやWindowsなど作業環境も問わず、専用の画像編集アプリをダウンロードする必要もなく、ネット上の無料ツールを使って「透過PNG画像」を作ることができます。

どんな環境でもインターネットに繋がっていれば作成可能!あまり画像編集などに詳しくない、初心者の方も安心です。

「無料で画像を加工できるサイト PEKO STEP」さんを使用し透過PNGを作成していきます。
PEKO STEP トップページ

無料で画像を加工できるサイト PEKO STEP
https://www.peko-step.com/tool/alphachannel.html

WEBページに1度画像をアップし、編集機能で背景を透明に加工して、ダウンロードするという流れになります。


詳しい使い方は下記のページで紹介しています。

詳しくは
簡単な透過pngの作り方
【初心者向け】透過PNG(ピング)画像の作り方【画像編集ソフト不要】

続きを見る

Macの標準アプリで透過PNG画像を作る

Mac(マック)ユーザーの方は、インターネットに繋がっていなくても透過PNG画像の編集ができます。

画像ファイルを開くために最初から入っている「プレビュー」というアプリを使います。

表示させた「マークアップツールバー」の左から2番目の「インスタントアルファ」ツールを選択します。
Macの標準アプリ「プレビュー」

「インスタントアルファ」という機能を使い、範囲を選択し削除すると選んだエリアが透明になります。

「インスタントアルファ」ツールで透明にしたい背景をクリックすると、切り抜く範囲が赤く着色されます。そのまま左右にドラッグすることで切り抜きたい範囲を調整することができます。
Macの標準アプリ「プレビュー」で透明にしたいエリアを選択

透明にする範囲をドラッグで選べるので操作も簡単!背景が単純な画像の方がオススメです。

アプリの詳しい使い方はコチラのページにまとめています↓

詳しくは
透過PNG画像をMac標準アプリ「プレビュー」で簡単に作る

続きを見る

Photoshop(フォトショップ)で透過PNG画像を作る

プロも使う画像編集ソフトPhotoshop(フォトショップ)」があれば、MacやWindowsなどのPC環境は問わず、透過PNG画像が簡単に作成できます。

画像加工編集ソフトPhotoshop(フォトショップ)を立ち上げ新規カンバスを開きます。
Photoshopで新規カンバスを開く時に背景を透明に

新規でカンバスを開く時に、背景の設定を透明にしてからオブジェクトを配置すると、背景が透明な画像が作成できます。

また、複雑な写真からでも好きな部分を切り抜いて透過PNG画像を作ることも可能です。

保存形式で「PNG」を選択して保存すれば「透過PNG画像」が完成です!
Photoshopで保存形式を「PNG」に

保存形式で「PNG」を選択して保存すれば「透過PNG画像」が完成です!

詳しい使い方はコチラのページにまとめています↓

詳しくは
透過PNG画像の作り方
【初心者向け】透過PNG(ピング)画像の作り方【Photoshop】

続きを見る

無料の透過PNG素材が手に入るサイト

自分で背景が透明な「透過PNG画像」を作るのは難しい!という方は、最初から背景が透明になっている「透過PNG素材」をダウンロードしてみましょう!

ネット上には無料で透過PNG素材をダウンロードできる素材サイトがたくさんあります。

グッズ化などで人気のイラスト素材サイト「いらすとや」さんの素材は全て背景が透明な透過PNG素材です。そんな使い易さも人気の秘訣でしょう!

daruma108
daruma108

ダウンロードも簡単!

「いらすとや」さんの透過PNG素材

下の記事では、「いらすとや」さんの他にも背景が透明な「透過PNG素材」がダウンロードできるサイトを紹介しています。ご興味がある方はぜひ覗いてみてください。

あわせて読みたい!
【無料】背景が透明なイラスト素材サイト【透過PNG素材】

続きを見る

まとめ:「透過PNG」の作り方・保存方法

背景が透明な透過PNG画像を作る方法

  • 無料ウェブページ
  • Macの標準アプリ「プレビュー」
  • Photoshop(フォトショップ)

3種類ご紹介いたしました。

それぞれご自身の環境・使いやすいソフトでの方法で、透過PNG画像を作り資料作りなどにお役に立てください。

また、作るのが難しい!という方は、ネット上の素材サイトから「透過PNG素材」をダウンロードしてくる。というのもオススメです!

オススメ背景が透明な【透過PNG素材】サイトご紹介

イラレでテキストの回り込みを作成!できない時の対処法も【オブジェクトに沿ったテキストエリア】

デザイン 作りたい

2024/5/13

イラレでテキストの回り込みを作成!できない時の対処法も...

デザイン

2024/2/20

【Mac】Excelファイルが壊れて開けない時の修復ツ...

壊れた写真・動画・ファイルの修復ツール「EaseUS Fixo」

イイモノ デザイン

2023/12/29

壊れた写真/動画/PDFなどのファイルの修復ツール「E...

動画編集ソフト「Filmora(フィモーラ)13」の新機能を紹介!AI搭載で編集がむっちゃ簡単に!

イイモノ デザイン

2023/11/4

動画編集ソフト「Filmora(フィモーラ)13」の新...

パソコンのゴミ箱から完全に削したファイルを復元「Tenorshare 4DDiG」

デザイン

2023/10/11

Macで誤って完全削除したファイルを復元するソフト「T...

-WEB, デザイン, 作りたい
-,