鮮明な画質で表示する

Photoshopでバナーを作り保存した時に綺麗な画質で表示する方法の 解説です。

120×60のサイズの新規カンバスで作成したバナーがあります。 文字のサイズは30pxに設定しています。

⇩

メニューバーの「ファイル」→「Web用に保存」の順にクリックします。

⇩

「Web用に保存」の画面右下でバナーのサイズを確認し任意の場所にgif形式を選択し保存します。

⇩

保存したバナーをHTMLタグで呼び出します。 バナー画像の表示方法は
画像を表示するのページを 参照してください。

よく見るとバナーの文字が少しぼやけているのがわかります。

■ 2倍のサイズのカンバスで保存した場合

今度は240×120の新規カンバスでバナーを作成します。先程のカンバスサイズは 120×60のサイズだったので縦横の長さが2倍になっています。 文字のサイズも2倍の60pxに変更します。 メニューバーの「ファイル」→「Web用に保存」から保存します。

⇩

保存したバナーをHTMLタグで呼び出します。今度は 元のカンバス120×60のサイズでそのまま表示した時より綺麗な画質で表示されています。

以上まとめると以下のような違いが分かります。（HTMLタグで呼び出す際のサイズは3種類とも120×60）

各サイズでの画質の違い
ブラウザ表示	カンバスのサイズ	倍数	説明
	120×60	等倍	元のカンバスのサイズで保存して表示すると文字の縁などが滲んでるように見えて画質が荒い。
	240×120	2倍	予め元のカンバスサイズをブラウザで表示するサイズより縦2倍、横2倍で 作成しているため文字の縁など鮮明に表示されている。
	360×180	3倍	予め元のカンバスサイズをブラウザで表示するサイズより縦3倍、横3倍で 作成しているため文字の縁など2倍の時と同様に鮮明に表示されている。

Tweet