PhotoshopマスターTOPページへ

初心者の為のPhotoshopの解説サイトです。画像の切り抜きや合成の方法などを 写真付きでわかりやすく解説しています。
これからPhotoshopを勉強したい、復習したいと思っている方に役立つサイトです。
TOP >鮮明な画質で表示する

鮮明な画質で表示する

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

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

120×60バナー

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

WEB用に保存

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

Web用に保存

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

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

120×60

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

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

240×120バナー

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

240×120

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

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



TOP

Copyright (C) 2015-2017 Photoshopマスター All rights reserved.