Macユーザーなら「プレビュー」で簡単に透過PNGが作れる

以前の記事でPhotoshop(フォトショップ)を使用して、背景が透明の画像「透過PNG」の作り方をご説明しました。
また、Photoshop(フォトショップ)をお持ちでない方向けに、web上の画像編集サービスを使った方法もご紹介しましたが、Macユーザーなら標準アプリの「プレビュー」を使って「透過PNG」が簡単に作れるので、その方法をご紹介します。

Macの「プレビュー」がこんなに便利アプリだと知りませんでした!

以前の記事は↓こちらからご覧いただけます。

透明にしたい画像を「プレビュー」で開く

透明にしたい画像をMacの標準アプリ「プレビュー」で開きましょう。
設定を変更していなければ画像ファイルをダブルクリックすると、だいたい「プレビュー」で開かれます。

透明にしたい画像をMacの標準アプリ「プレビュー」で開きましょう。
設定を変更していなければ画像ファイルをダブルクリックすると、だいたい「プレビュー」で開かれます。

今回は「プレビュー」アプリのアイコン画像から背景を切り抜いて、アイコンだけの透過PNG画像を作りたいと思います。

「マークアップツールバー」を表示する

上部のメニューバーの「表示」から「マークアップツールバーを表示」を選択します。

上部のメニューバーの「表示」から「マークアップツールバーを表示」を選択します。

ただの画像を閲覧するだけのアプリだと思っていた「プレビュー」が、このツールバーを表示するだけで画像編集ソフトへとアップデートされます。
Abobe(アドビ)が提供するPhotoshop(フォトショップ)などの専門の画像編集ソフトがなくても、「プレビュー」だけでそこそこの画像編集はできてしまいます。

「インスタントアルファ」ツールで透明にしたい箇所をドラック

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

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

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

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

切り抜きたい範囲のところでクリックを外すと赤く着色されていた箇所が、点線で囲われ選択された状態になります。

切り抜きたい範囲のところでクリックを外すと赤く着色されていた箇所が、点線で囲われ選択された状態になります。

このまま右上の「切り抜き」ボタンをクリックしてしまうと、真ん中のアイコン側が切り抜かれてしまいますので、選択範囲を反転させます。

上部のメニューの「編集」より「選択部分を反転」をクリックします。

上部のメニューの「編集」より「選択部分を反転」をクリックします。

選択範囲を反転させると、真ん中のアイコンのだけ点線で囲われている状態になります。
そのまま「マークアップツールバー」の一番右にある「切り抜き」をクリックすると、下のようなPNG画像に変換して良いですか?というポップアップが表示されるので「変換」をクリックすると自動でPNG画像として保存してくれます。

「マークアップツールバー」の一番右にある「切り抜き」をクリックすると、下のようなPNG画像に変換して良いですか?というポップアップが表示されるので「変換」をクリックすると自動でPNG画像として保存してくれます。

無事に背景を透明に切り抜いたアイコンだけの透過PNG画像が出来上がりました!

無事に背景を透明に切り抜いたアイコンだけの透過PNG画像が出来上がりました!

背景を透明にすることで、下の画像のように他の画像の上に配置した時に違和感なく合成することができます。

背景を透明にすることで、下の画像のように他の画像の上に配置した時に違和感なく合成することができます。

まとめ

いかがでしたでしょうか。

資料の作成やホームページ・ブログなどで使用する、背景が透明になっている透過PNG画像。
Macユーザーなら特別なソフトをインストールしなくても標準アプリの「プレビュー」で誰でも簡単に背景が透明に切り抜かれた透過PNG画像を作成することができます。

Photoshop(フォトショップ)を使った透過PNGの作り方、
web上の画像編集サービスを使った透過PNGの作り方はこちらのリンクよりご覧ください。

最後までご覧いただきありがとうございました。

2 Comments

  1. […] Macユーザーなら「プレビュー」で簡単に透過PNGが作れる […]

    返信
  2. […] Macユーザーなら「プレビュー」で簡単に透過PNGが作れる […]

    返信

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

Scroll to top