LESSON_8 Web 用 途 での 活 用 1 Web 画 像 の 書 き 出 し 形 式 2 Web 用 バナーの 作 成 3 スライス 機 能 学 習 目 標 Lesson8 では というソフトが Web ページの 制 作 においてどのように 役 割 を 担 っているのかを 学 び 具 体 的 な Web 画 像 の 書 き 出 し 方 法 を 身 につけましょう LESSON 8-1 Web 画 像 の 書 き 出 し 形 式 で 作 成 した 画 像 などは すべてが Web 用 に 使 用 できるわけではありません ファイル 形 式 やカラーモードが Web に 適 してなくてはいけません Web に 適 したとはブラウザーで 表 示 できる 状 態 のものをいいます ここでは Web で 使 用 する 画 像 の 特 徴 と 代 表 的 な2つの 形 式 を 学 習 します Web 画 像 はモニターに 表 示 して 見 るので カラーモードはモ ニターと 同 じ RGB カラー モードになります カラーモードは 画 像 ウィンドウのタイトルバーやステータス バーに 表 示 されます カラーモードが RGB カラー 以 外 の 場 合 は イメージメ ニューの モード - RGB カラー を 選 択 しましょう (カラーモードについては Lesson7 を 確 認 しましょう) ブラウザー IE ( インターネットエクスプローラー) や Firefox などに 代 表 される Web サイトを 閲 覧 するためのソフトのこと をブラウザーといいます 150
Web 画 像 の 解 像 度 解 像 度 についても Web 画 像 に 合 わせた 設 定 が 必 要 です モニタの 解 像 度 に 合 わせて 72ppi にします 解 像 度 は 本 来 画 質 の 精 細 度 ( 高 さ ) を 表 す 言 葉 です Web 画 像 はモニターに 表 示 するために モニターの 解 像 度 に 合 わせます 印 刷 用 データを Web 解 像 度 に 変 換 してみましょう 素 材 フォルダーの lesson8 から 8_1_ 解 像 度 変 更.psd を 開 きましょう 1 メニューバーの イメージ - 画 像 解 像 度 を 選 択 し ます 画 像 解 像 度 ダイアログボックスが 表 示 されます 画 像 解 像 度 ダイアログボックスでは 画 像 の ピクセル 数 ドキュメントのサイズ を 確 認 することができます また ファイルサイズも 確 認 することができ この 例 では 3.86M の 画 像 であることがわかります ちなみにこれは 圧 縮 なしのビットマップのファイルサイズを 表 しています 151
直 接 画 像 のサイズを 変 更 します 2 画 像 の 再 サンプル を オン にして 解 像 度 : 72 に 変 更 しましょう 3 Web で 使 用 する 画 像 の 大 きさにするため ピクセル 数 の 幅 : 600 にします 高 さは 縦 横 比 を 固 定 が オン になっているため 幅 に 連 動 してサイズが 変 更 します 画 像 の 再 サンプル を オフ にするとピクセル 数 の 欄 がグレーになり 変 更 ができなくなります ピクセル 数 のファイルサイズを 確 認 すると 3.86M から 748.5K となり Web 画 像 で 使 用 できる 容 量 の 少 ない 画 像 になったことが 確 認 できます 元 の 画 像 に 比 べ 画 質 は 劣 化 しますが Web 画 像 として 使 用 するには 十 分 です 注 意 として 350ppi を 72ppi に 減 らしたものを 350ppi に 増 やしても 一 旦 再 サンプルされて 減 らされた 情 報 は 元 に 戻 せません この 場 合 解 像 度 を 上 げることができるの は 単 にピクセルとピクセル 間 を 近 似 的 な 色 で 補 っている からです ファイルを 閉 じて 次 のページに 進 みましょう 152
Web 画 像 のファイル 形 式 で 編 集 した 写 真 は 様 々な 形 式 の 画 像 に 書 き 出 すことができますが Web 用 として 利 用 するのに 代 表 的 な 画 像 形 式 を 学 習 しましょう Web で 使 えるファイル 形 式 Web 画 像 用 のファイル 形 式 は JPEG GIF PNG Flash (SWF) のいずれかになります どれも 画 像 データを 圧 縮 する 技 術 が 使 用 されています PSD( 形 式 ) Tiff BMP などの 画 像 は 使 えません ここでは 最 も 使 用 頻 度 が 高 い JPEG と GIF について 詳 しく 解 説 します JPEG (Joint Photograph Experts Group) 形 式 JPEG の 特 徴 最 も 一 般 的 な 画 像 形 式 といわれる JPEG(ジェイペグ) 形 式 は 色 味 を 24 ビット (1670 万 色 ) まで 扱 うことができます このため 多 くの 色 数 を 必 要 とする 写 真 などに 適 しており デジタルカメラの 標 準 保 存 形 式 になっている 事 も 多 くみられま す グラデーションのように 色 調 が 連 続 して 変 化 する 画 像 の 表 現 も 得 意 としていますが 逆 にアイコンやアニメ 調 の 平 坦 な イラストなどの 表 現 には 向 いておらず JPEG で 保 存 すると 部 分 的 に にじんだような 画 像 になることがあります 拡 張 子 は jpeg または jpg のどちらかになります 不 可 逆 圧 縮 JPEG は データを 編 集 して 新 たなファイルとして 書 き 出 すときに 隣 接 する 画 素 間 の 色 調 変 化 に 関 する 情 報 を 捨 ててデー タサイズを 圧 縮 するという 不 可 逆 圧 縮 という 圧 縮 形 式 を 採 用 しています 圧 縮 で 捨 ててしまったデータは 元 に 戻 すこ とができず 編 集 を 行 う 度 にデータが 劣 化 していくので JPEG 形 式 で 圧 縮 率 を 上 げて 保 存 する 際 には 必 ず 元 データのバッ クアップを 残 しておくようにしましょう ファイル 容 量 の 抑 え 方 画 像 を 書 き 出 す 際 に 最 も 注 意 を 払 うのがファイル 容 量 です Web サイトを 閲 覧 する 場 合 は ネット 回 線 を 経 由 してデータ のやりとりをしているため ファイル 容 量 が 小 さいほど 閲 覧 者 にデータを 高 速 に 提 供 することができます JPEG では 単 純 に 色 数 を 減 らしても ファイル 容 量 はほとんど 変 化 しません 逆 に 反 対 色 が 隣 接 しているような 画 像 では 色 数 を 増 やして 連 続 して 滑 らかに 変 化 するようにしてやるとファイル 容 量 を 減 らすことができます 具 体 的 には 画 像 の 中 で 色 や 明 るさが 急 激 に 変 化 する 箇 所 を 減 らす コントラストを 下 げる ぼかしをかける などの 補 正 が 効 果 的 です ファイル 容 量 が 大 きすぎる 場 合 は 画 質 と 照 らし 合 わせながら 試 してみましょう 153
JPEG の 書 き 出 しと 圧 縮 率 圧 縮 率 JPEG は 圧 縮 率 を 上 げるほどファイル 容 量 は 小 さくなります が トーンジャンプ ( 色 抜 け) が 増 えて 画 質 は 劣 化 してい きます 圧 縮 率 を 決 める 際 には 同 じ 画 像 を 異 なる 圧 縮 率 で 保 存 したものを 見 比 べながら 決 定 しましょう には 圧 縮 率 が 異 なる 画 像 を 最 大 4パターン まで 見 比 べることができる 機 能 がついています 後 ほど 実 際 に 使 用 して 書 き 出 しの 練 習 を 行 うので その 際 に 確 認 してください JPEG 画 像 ( 高 画 質 画 質 : 80) 左 の 画 像 は 元 は 同 じデータですが 圧 縮 率 を 変 化 させて 書 き 出 した 画 像 です 上 の 画 像 に 対 し 下 の 画 像 は 最 低 画 質 で 書 き 出 した 為 にじみのようなものが 多 く 発 生 してし まいました 実 際 に PC の 画 面 で 確 認 しなければ 画 質 の 違 いが 分 かりにくい 場 合 があります JPEG 画 像 ( 低 画 質 画 質 : 10) GIF(Graphics Interchange Format) 形 式 GIF の 特 徴 GIF(ジフ) は 最 大 8 ビット (256 色 ) までの 色 を 扱 うことのできる 画 像 形 式 です 256 色 以 上 必 要 ないロゴ リンクボタン アイコン アニメ 調 のイラストなど 特 に 単 色 で 構 成 されている 平 坦 な 画 像 に 向 いています 逆 に 写 真 やグラデーションなど 表 示 に 多 くの 色 数 を 必 要 とする 画 像 には 向 いていません JPEG では 表 現 できない 透 明 色 の 指 定 や アニメーション 効 果 をつけることができるなど JPEG とは 異 なる 特 性 を 多 数 持 ち 合 わせています 拡 張 子 は gif になります 可 逆 圧 縮 形 式 水 平 方 向 ( 横 方 向 ) に 同 じ 色 のピクセルが 連 続 する 箇 所 を 数 値 に 置 き 換 えることで 圧 縮 する 可 逆 圧 縮 形 式 このた め 縦 ストライプと 横 ストライプの 画 像 では 横 ストライプの 画 像 の 方 がファイル 容 量 が 小 さくなります 154
特 殊 な GIF 画 像 透 過 GIF - 特 定 色 を 透 明 化 し 画 像 の 背 景 を 透 過 表 示 します CSS によるレイアウト 手 法 が 発 達 するまではレイアウト 調 整 に 使 用 されていました アニメーション GIF - 複 数 画 像 を 1 つのファイルに 収 録 して パラパラマンガのようにアニメーション 表 示 します インターレース GIF - ファイル 読 み 込 みの 進 捗 に 合 わせ 段 階 的 に 画 像 を 表 示 することができます GIF の 書 き 出 しと 圧 縮 率 ファイル 容 量 の 抑 え 方 GIF のファイル 容 量 を 抑 えるには 色 数 を 減 らす こと が 効 果 的 です さらに 横 方 向 の 色 数 を 統 一 するとより ファイル 容 量 を 小 さくすることができます 他 単 色 の 割 合 を 増 やす ことや 画 像 面 積 を 小 さくする ことも 効 果 があるでしょう GIF 画 像 (256 色 ) 左 の 画 像 は 元 は 同 じデータですが 容 量 を 抑 えるために 使 用 している 色 数 を 変 化 させて 書 き 出 した 画 像 です 上 の 画 像 に 対 し 下 の 画 像 は 色 が 少 ないため メリハリがなく 単 調 な 仕 上 がりになっているのがわかります 実 際 に PC の 画 面 で 確 認 しなければ 画 質 の 違 いが 分 かりにくい 場 合 があります GIF 画 像 (16 色 ) 155