【初心者向け】透過PNG(ピング)画像の作り方【画像編集ソフト不要】

資料の作成やホームページ・ブログなどで使用する、背景が透明の画像の作成方法をご紹介します。通常の画像の形式は「.jpg」という拡張子を使用することが多いと思いますが、背景が透明の画像は「.jpg」では作れず、「.png（ピング）」形式を使用します。

背景が透明になっている.png（ピング）画像「透過PNG画像」の作り方をご説明します。

ここではPhotoshop（フォトショップ）などの画像加工編集ソフトを使用せずに制作します。
Photoshop（フォトショップ）での作成方法、Macの標準アプリ「プレビュー」での作成方法はこちらの記事よりご覧下さい。

透過PNG（ピング）画像とは

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

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

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

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

透過PNG画像の作り方をご紹介します。

背景を透明にしたい画像を用意

まずは背景を透明にしたい画像を準備します。

こちらの手書きしたダルマの画像の背景（黄色の部分）を透明にし、ダルマの透過PNG画像を作成したいと思います。

web上の画像編集サービスで背景を透明に

Photoshop（フォトショップ）などの画像編集ソフトをお持ちでない場合は、WEBブラウザ上で画像を編集できるサービスを使用します。
ここでは「無料で画像を加工できるサイト PEKO STEP」さんを使用し透過PNGを作成していきます。

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

透明にしたい画像をドロップ

無料で画像を加工できるサイトPEKO STEPさんにアクセスし、「ここに画像をドロップしてください」と書かれた場所に、透明にしたい画像をドラック＆ドロップで持っていきます。

透明にしたい場所をクリック

画像を開くと上のようになります。
左のツールが「色の透明」、下の透過対象が「クリックした色」を選択していることを確認し、画像中の透明にしたい箇所をクリックします。

すると、クリックした色が一瞬で透明に変わります。
もし完全に透明ではなく、薄く見えている状態にしたい場合は「透過対象」の下の「不透明度」の数値を「0」ではなく「50%」などに変更してください。

ですがこのままではダルマの周りに微妙に黄色の箇所が残ってしまっています。

微妙に残ってるところを消しゴムで削除

そんな時は左のツールから「消しゴム」ツールを使って黄色いところを消していきます。下の「線の太さ」で太さを調整して、ダルマの周りの黄色をグルっと消します。

細かいところが見えにくい場合は、上の「拡大率」でアップにして調整して完成です！

保存して「透過PNG」画像完成！

完成したら「ファイル」の保存から保存場所、ファイル名を決めて保存します。

透過PNG画像が完成しました！
これで他の画像やいろんな所に合成し放題です！

まとめ

いかがでしたでしょうか。
以前は、画像編集ソフト「Photoshop（フォトショップ）」を使用した作成方法をご紹介しましたが、今回は特別な画像編集ソフトを使わないで作成する、背景が透明の透過PNG（ピング）画像の作り方をご紹介いたしました。
WEB上で画像の編集ができるなんて！感謝です。

プレゼン資料やホームページの制作では非常に便利な透過PNG画像ですので上記の方法で作って使ってみてください。

Photoshop（フォトショップ）での作成方法、Macの標準アプリ「プレビュー」での作成方法はこちらの記事よりご覧下さい。