ロゴの背景を透過する

要点

やり方

1. 見つかる中で一番大きいものから始めるメール署名のロゴは幅200 px未満のことがよくあります。ブランドのフォルダ、プレスキット、PDF、サイトの画像ファイルで元データを探しましょう。切り抜きで元にない細部は足せないので、2000 pxの元画像なら輪郭がきれいに、150 pxの元画像ならぼやけてギザギザになります。
2. 背景を削除して穴を確認する背景を削除したら、O、A、B、e、gのような閉じた形の文字や、アイコンと文字の間のすき間を拡大します。その内側も透明でないと、スライドやヘッダーの色が透けて見えません。プレビューを暗い背景に切り替えて、残った白を見つけましょう。
3. 使う場所に合わせて書き出すスライド、文書、グッズのモックアップには透過PNGを、Webサイトにはサイズが小さいWebPをダウンロードします。ファビコンやSNSのプロフィール用には、円形にトリミングされても切れないよう、マークの周りに余白を取った正方形版を作りましょう。

コツとよくある失敗

• 暗い背景での白いふち白の上で保存されたロゴの輪郭のピクセルは白と混ざっているので、切り抜くと紺や黒の上で薄いふちとして見えます。もっと大きい元画像から切り抜くか、暗い背景用に明るい色のロゴ（白や反転色）を別に作って直しましょう。両方を用意しているブランドは多くあります。
• SVGがあればSVGを使うWebサイトのヘッダーのロゴについてMDNは、ベクター版があればSVGを、ラスター画像のロゴには可逆形式を推奨しています。くっきりした輪郭の周りのにじみがとても目立つからです。手元に写真やJPGしかないときは、透過PNGが代わりになります。
• ファビコンには文字ではなくマークをファビコンはブラウザのタブや検索結果でとても小さく表示されます。シンボルや頭文字にトリミングし、正方形（Googleは1:1が必須）にして、明るいタブでも暗いタブでも読めるよう、単色かコントラストの高い形にしましょう。
• スライドと文書PowerPointのワイド画面のスライドは13.333 x 7.5インチ（16:9）です。ロゴはJPGではなくPNGで挿入すれば、スライドの色が透けて見え、色付きのテンプレートに白い四角が出ません。
• グッズと印刷ラスター画像のロゴは、ピクセルの細かさ以上にくっきり印刷できません。ベクターファイルがあればそれを渡し、透過PNGはモックアップ、ストアの商品ページ、簡単な校正に使いましょう。
• SNSで使う文字入りロゴFacebookは、ロゴや文字を含むプロフィール写真やカバー写真はPNGのほうがきれいに見える場合があるとしています。JPGの非可逆圧縮はくっきりした輪郭をぼかしてにじませ、それは文字で特に目立ちます。