design WEB フォトショップ 作りたい

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

透過PNG画像の作り方

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

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

ここでは画像加工編集ソフトPhotoshop(フォトショップ)を使用し制作します。
背景を透明にすることで、画像を重ねて配置することが可能になります。

Photoshop(フォトショップ)をお持ちでない方向けにMac標準アプリ「プレビュー」での作成方法WEB上の画像編集ページでの作成方法もご紹介しております。

あわせて読みたい!
透過PNG画像の作り方をまとめてご紹介
透過PNG画像の作り方をまとめてご紹介

資料やプレゼンシートなどの作成時に重宝する「透過PNG(ピング)画像」。そんな透過PNG画像の作り方を背景が透明な透過PNG画像を作る方法を「Macの標準アプリ」「photoshop」「ブラウザ」の3種類ご紹介します。

続きを見る

「透過png(ピング)」画像とは

簡単に言うと「背景が透明なPNG画像」のことで、PNG画像とはJpeg画像やgif画像と同じ画像ファイルの1種で、ファイル名の最後に「.png」と言う拡張子がつく。

フォトショで新規カンバスを作成

画像加工編集ソフトPhotoshop(フォトショップ)を立ち上げます。
立ち上がったら、上部のメニューから「ファイル」→「新規」を選択します。
ショートカットキーは「command」+「N」です。
新規カンバスウィンドウが立ち上がります。

背景色に「透明」を選択

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

新規カンバスウィンドウのサイズ・カラーモードを選択します。
今回はWEBで使用する、ロゴマークの入った透過PNGを作成してみます。

サイズはロゴマークのサイズに合わせて数値を指定してください。
WEBで使用する際は、解像度「72」カラーモード「RGB」に指定します。

次のカンバスカラーを「透明」に設定し、右上の「OK」をクリックします。

オブジェクトを配置し、保存

カンバスカラーを「透明」に選択し新規カンバスを開くと、下のようにグレーと白の市松模様のスペースが生まれます。(何も設定を変更しなければ背景が白色のカンバスが開きます。)

ここにロゴマークの画像(オブジェクト)をドラッグやコピペで配置すると、下のようになります。

そのまま、上部のメニューから「ファイル」→「Webおよびデバイス用に保存」を選択します。
すると保存の設定ウィンドウが表示されます。

右上の保存形式を選択するプルダウンで「PNG-24」を選択し、
下の保存をクリック。
ファイル名、保存するフォルダを選択して保存完了です。

こちらで背景が透明な透過PNG画像が完成です。
パッと見は普通の背景が白色のjpeg画像と違いが無いように見えますが、別の画像の上に配置すると一目瞭然です。

このように空の画像や一色のベタの上に配置しても
背景が透過しているので、ロゴマークだけが表示されます。

これが通常の背景が白のJPEG画像だと下のようにロゴマークの背景の白が出てしまいます。

まとめ

いかがでしたでしょうか。
Photoshop(フォトショップ)を使った背景が透明の透過PNG(ピング)画像の作り方をご紹介いたしました。
ホームページの制作では非常に便利な透過PNG画像ですので上記の方法で作って使ってみてください。

Photoshop(フォトショップ)をお持ちでない方向けにMac標準アプリ「プレビュー」での作成方法WEB上の画像編集ページでの作成方法もご紹介しております。併せてご覧下さい。

あわせて読みたい!
透過PNG画像の作り方をまとめてご紹介
透過PNG画像の作り方をまとめてご紹介

資料やプレゼンシートなどの作成時に重宝する「透過PNG(ピング)画像」。そんな透過PNG画像の作り方を背景が透明な透過PNG画像を作る方法を「Macの標準アプリ」「photoshop」「ブラウザ」の3種類ご紹介します。

続きを見る

-design, WEB, フォトショップ, 作りたい
-, , , , ,

© 2021 ひゃくやっつ