ロゴ画像などをPNG形式でつくるとき、透過部分に余白ができてしまうことはありませんか？
余白があると、サイト上で不自然なスペースが空き、意図せぬサイズ感で表示されてしまいます（余白がある分、小さく表示されている）。
- 余白カット前
- 余白カット後
というわけで今回は、透過PNGの不要な余白を綺麗にカット（トリミング）する方法をご紹介します。
トリミングすることで、デザイン通りのサイズ感でロゴを設置でき、レイアウトのズレも防げます。
Photoshopでトリミングする方法
Photoshopを使って、次の3ステップで綺麗にトリミングできます。Photoshopは持ってないよという方は「無料ツールで代用する方法」をご覧ください。
- 画像全体を選択
- イメージ > トリミングを選ぶ
- 「透明ピクセル」にチェックを入れてOKする
画像全体を選択
まずはPhotoshopで画像を開いて、「Ctrl（command）＋ A」で画像全体を選択します。
透過している部分もまるごと選択です。
イメージ > トリミングを選ぶ
その状態で、上部のイメージの中からトリミングを選択します。
「透明ピクセル」にチェックを入れてOKする
その後、表示される選択肢で「透明ピクセル」にチェックを入れてOKします。
これで、透過している余分な箇所を綺麗にトリミングしてくれます。
細かい部分もカツカツの状態で綺麗にカットされていることがわかります。
無料ツールで余白を削除する方法
Photoshopを持っていない、使えない方は、無料のオンラインツールでも十分代用可能です。
「Trim Transparent Pixels」というページにアクセスして、以下のようにPNG画像をドラッグ&ドロップすれば、透過の余白を瞬時にカットできます。無料かつアカウント登録不要です。
アプリを立ち上げなくても、ブラウザ上でさくっとトリミングできます。ロゴ画像一枚程度ならこういったサービスを使うのも便利です。
まとめ
ロゴ画像は、サイトの第一印象を左右します。余分な箇所をトリミングして、正確なサイズで綺麗に表示しておきましょう。
透過PNGの画像は、基本的に余白をカットしてカツカツで書き出すのがセオリーです。サイト上で意図したサイズ感で表示され、調整もしやすいからです。
また、ロゴ画像自体のサイズが小さいと、MacやiPhoneなどの高精細ディスプレイでは、ぼやけて見える場合があります。その場合は、2倍や3倍のサイズで書き出して再設定すれば解決します。
さまざまなテクノロジーが発展する昨今、スマホやモバイル端末でも、とても美しい画質で画像や映像を見られるようになりました。しかし、iPhoneやMacなどで採用されているRetina（レティーナ）ディスプレイで画像がぼやけていたり、鮮明に表示されないことがあります。なぜ高画質な液晶で評判のRetina...
Webデザイン関連のおすすめ記事
サイトデザインは、何かが欠けていたり有りすぎるだけで、全体のバランスを崩してしまうもの。特にトップページやヘッダー周りはユーザーの目にも止まりやすいため、印象に関わる影響は大きいものです。 今回は、WordPressテーマなどサイトテンプレートを使って構築しているサイト向けに、ロゴとグローバル...
Webサイトのタブや、ブックマークに表示される小さな「ファビコン」。目立たない存在ですが、意外とユーザーの記憶に残る部分でもあります。 この記事では、ロゴやサイト名からファビコンをデザインし、作成する方法を解説します。特別なツールや高度なデザインスキルがなくても大丈夫です。 まずは、基本...
Webデザインやサイト制作時に配色に困ることってありませんか？ かっこいいデザインや配色が綺麗なサイトを参考にすることもあると思います。そこで今回は、WEB上から簡単にサイトのカラーコードを取得できるChromeの拡張機能をご紹介いたします。 「ColorZilla」の機...
WordPressテーマ集
コメント