こんにちは、WPホームページ研究所の運営サポートチーム(@WP_LABO)です。
こんな疑問にお答えしていきます。
目次
背景が白くなっているロゴ画像を無料で透明の切り抜きデータにする方法
本記事の内容
- 製作会社に背景が透過状態のPNGデータをほしいと言われてしまった
- PNGデータをもらったけど背景に色がついて透過処理されていない
- 費用をかけずに無料で透過画像データを作る方法があれば教えてほしい
PNGデータは透明処理された画像を扱えるファイル形式です。PNGは色数が多く扱えるため繊細なグラデーションまで再現できるのが最大の特徴です。ちなみにGIFデータでも背景が透過されたデータを扱えますが最大色数が限られているため綺麗な状態では書き出せません。
背景が透明処理されたロゴ画像を作る手順
背景に色がついた状態のPNGデータが存在する理由は、ロゴ画像を書き出す際に背景カラーが透明処理されないままでパブリッシュ(書き出し)されているからです。本来であればロゴを作成した張本人に背景を透過してもらってから再度画像データを書き出してもらうのがベストです。
アドビが提供するイラストレーターやフォトショップで「ロゴ(文字)に沿ってトレース」して書き出す範囲を編集・確定すれば『背景カラーを透明な状態』にして書き出せます。
しかし、上記の手順でPNGデータを書き出すと費用がかかります。本手順では無料で対応できる範囲で誰もが扱えるWebサービスで透過画像を作る手順をご紹介させていただきます。
手順1. 編集サービスを開く
無料公開されている「ツール」を開きましょう。
手順2. 画像を編集する
デスクトップに保存した画像を「ドラッグ&ドロップ」できるエリアにアップしてください。
手順3. 透明化したい箇所を選択
参考でご用意したロゴ画像には白色の背景色がついています。マウスで白い部分を選択。
手順4. 透明化を確認する
背景のホワイト(白色)がなくなりました。よく見るとわずかに白い部分が残っていますが繊細なデザインは文字付近にグラデーション処理がありますので仕方ありません。もし完璧な状態に仕上げたいなら先述した通りイラストレーターやフォトショップを使ってトレースすればOKです。
手順5. ファイルを書き出す
ツールの「ファイル > 保存」をクリック。
手順6. 画像をダウンロード
保存をクリックするとファイルのダウンロードが開始されます。アップロードしたファイル名と同じ名前でデータが生成されます。以上で『透過ロゴ画像(PNG形式)』の出来上がりです。
まとめ
PNG画像は透明データを扱えるファイル形式を言います。しかし、あまり知識のないロゴ作成者だと背景カラーをつけた状態で書き出してしまい本来の効果を発揮できません。
もしグラデーション箇所まで鮮明に書き出すには「オリジナルデータから再度書き出し直す」か「ロゴ画像からトレースして作り直す」しか方法がありません。今回ご紹介させていただいた方法は80点の透過画像を無料で作り出せる手順です。グラデーション箇所や繊細なデザイン部分を100点で書き出すにはそれなりに手間もかかりますので費用がない場合は代用できるでしょう。
ロゴが綺麗に書き出されているかどうかでもウェブサイトの印象は変わってきます。また閲覧者の使用しているスマートフォンやパソコンのディスプレイが高性能な場合は明確に違いも判ります。自身の環境だけで判断せず多くのお客様が気づいている可能性まで考えて対策していくと吉です。
最新式の無料プラグインを事前公開
WordPressは公式サイトに登録済みのプラグインだけで全機能を補足しきれません。当サイトでは使いやすさを追求した魅惑的なプラグインを無料でダウンロードいただけます。運営ホームページのマーケティング力をさらに高めるチャンスです。まずは無料でDLしてお試しくださいませ。
→ 改良されたプラグインを確認する