画像の作成 (1)

2002 年度情報処理演習Ｂ「マルチメディアウェブページ作成」
画像の作成 (1)
外国語学部千葉 ([email protected])
0. 内容
•
•
画像の保存：保存形式と圧縮率
画像加工の基本：表示サイズ，コントラスト，透過 GIF，色の指定
1. 適切な画像の保存形式を選ぶ −JPEG と GIF−
1.1. 画像の保存形式の基本
•
Web ページで利用する画像は，以下のような条件を備えていることが望ましい。
OS やアプリケーションを問わずに使えること
ファイルサイズがなるべく小さいこと (画像の精密さ (解像度) は，印刷物に比べ重要
ではない)。
•
画像のファイル形式は数多いが，多くは特定のアプリケーションソフトウエアで使うことが
想定されている。
「ペイント」で作成する画像の標準的な形式は BMP (ビットマップ) 形式で
あるが，これも Windows だけで使えるもので，汎用的ではない。
•
現在のところ，どのようなパソコンでも問題なく使える画像の形式は，GIF (拡張子 gif) と
JPEG (拡張子 jpg) だけである。GIF と JPEG は OS やアプリケーションを選ばず，また共
にデータが自動的に圧縮され，ファイルサイズが大幅に小さくなる。
•
GIF, JPEG のほかに，Web ページ上で使える PNG という新しいフォーマット形式もある
(Portable Network Graphics, 拡張子 png, 教科書 p.222 以降を参照)。現在のところ，ブラ
ウザの一部で利用できないなど，問題もあるので，この形式を使う場合には注意すること (授
業では扱わない)。たいへん高機能であるので，今後急速に広まっていく可能性はある。
•
GIF と JPEG の特徴を表にまとめると，以下のようになる。両者には，それぞれ得意，不得
意があり，特性を理解して用途に応じ，使い分けるとよい。
GIF
正式名称
Graphic Interchange Format
表示可能色
8 ビット，最大 256 色 (= 28)
拡張子
gif
圧縮方式の LZW 方式 (ユニシス社の特許。圧縮し
特徴
てもデータは失われない可逆
(lossless) 圧縮なので，何度でも修正・
保存ができる)
得意
文字や図形など，線のはっきりした画
像。色数が少ない，フラットな画像
不得意
色数が多い画像。グラデーションなど，
色の微妙な変化の表現
特殊効果
透過，アニメーション，ダウンロード時
の段階的な画像表示(インターレース)
イラストやロゴ，文字入りのボタン
1/6
JPEG
Joint Photographic Experts Group
24 ビット，1600 万色以上 (224)
jpg
非可逆 (lossy) 符号化方式 (保存する
と圧縮分のデータが失われる。従って，
画像を上書き保存するごとに，元のデー
タの情報が)
フルカラー画像。微妙な色の変化や濃淡
の表現
はっきりした線のある画像
ダウンロード時の段階的な画像表示(プ
ログレッシブ JPEG)
写真や，グラデーションなど微妙な色
の変化を伴うイラスト
授業 URL: http://www.fl.reitaku-u.ac.jp/~schiba/2002web/
2002/12/02
第 7 回資料
1.1. 画像処理用ソフトウエア
•
教室 PC
Photo Editor (フォトレタッチ・ソフト：写真などの加工，サイズや保存形式の変更)
ペイント (ペイント系グラフィック・ソフト：簡単なイラストの作成)
PowerPoint (ロゴや図表などの作成)
•
グループ学習室 A-C, F のノンリニア編集用 PC (図書館 3F, 学生 3 人以上での予約が必要)
Adobe Photoshop 5.0J (ペイント系グラフィック・ソフト：写真などの画像の本格的
な加工)
Adobe Illustrator 8.0J (ドロー系グラフィック・ソフト：滑らかな線画を使った本格
的なイラストの作成)
•
GIF と JPEG の特殊効果の一部 (前頁で網掛けされているもの) は，教室の PC に導入され
ている画像処理用ソフトウエアでは扱えない。図書館のグループ学習室の PC のソフト
(Photoshop など)を使うか，個人でソフトを用意する必要がある (授業では扱わない)。
1.2. 画像保存のポイント
•
GIF と JPEG の特性をよく理解しよう：
GIF ：256 色でしか保存できない。256 色で表現できない色がある場合は，保存時
に強制的に変更され， GIF で表示可能な色のブレンドに変換される ( ディザ
dithering) か，GIF で表示可能な単色に統一される。
JPEG：保存の結果，圧縮された分のデータが失われ，元に戻らなくなる。
•
デジカメやスキャナで作成した写真は，加工の必要がなければ JPEG で保存してよいが，編
集を何度もおこなうことがわかっている場合は，すぐには JPEG で保存せず，まずは圧縮の
まずは圧縮の
ない BMP 形式で保存し
書き出し」
形式で保存し，編集が終わった時点で画像を JPEG に保存しなおす (「書き出し
書き出し
export という)。注意点：
圧縮のない形式は，その分ファイルサイズが大きい。
BMP 形式の画像ファイルは，Web ページ中で直接利用できない。
•
PowerPoint で作った色数の少ないロゴや，
「ペイント」で作ったイラストなど，色数が少な
いものは，そのまま GIF で書き出してよい。
PowerPoint の場合は，「名前を付けて保
存」し，
「ファイルの種類」を「GIF グラフ
ィックス交換形式」にする (選択されたス
ライドだけを画像にするよう指示すると，
余計なフォルダが作成されない)。
PowerPoint 形式のデータは，微調整ができ
るので，編集しなおせるようオリジナルを
一旦「プレゼンテーション形式」で保存し
ておくとよい。
「ペイント」
の場合，保存は GIF 形式か BMP
形式で行う。GIF の場合はそのまま「GIF 形式」で
保存してよい (保存時に発色が変わることがあるの
で，早めに保存して様子をみるとよい)。最終的に
JPEG 形式で作成する場合には，ファイルの種類を
「24 ビットビットマップ」とし，BMP で編集後，改
めて JPEG で書き出すとうまくいく。
•
加工する前の画像は，上書き保存せず，バックアップをとっておく。加工に失敗したり，新
たに加工前の画像から別の画像を作成する必要が出たりすることがよくある。特にスキャナ
から読み取った直後の画像や PowerPoint ファイルなどは保存しておく価値がある。オリジ
ナル画像用に特別なフォルダを作って保存しておくと，ばらばらにならずにすむ。
2/6
2002 年度情報処理演習Ｂ「マルチメディアウェブページ作成」
1.3. JPEG 圧縮率の変更
•
JPEG の特徴の一つに，圧縮率を自由に設定できることがあげられる。自然を写した風景写
真など，色調のパターンが複雑な画像の場合は，圧縮率を高めにしても見え方はほとんど変
わらないので，ファイルサイズを大幅に小さくすることができる。Photo Editor で圧縮率を
設定して画像を保存する方法は以下のとおり。
1. [ファイル]メニューから[名前を付けて保存]を選択する
2. ファイル名を指定し，「ファイルの種類」を
「JPEG 形式」にする
3. 「オプション」ボタンを押す
4. 「JPEG 形式の圧縮の指定」で圧縮率を指定する
※ スナップ写真程度の画像であれば，圧縮率
を 30 程度に指定しても問題ない。
5. 作成した画像をブラウザで表示してみる。もし
圧縮しすぎで表示が許容範囲以上に崩れている
場合は，圧縮率を指定しなおし，再度保存して
チェックする
※ 一旦上書き保存すると元に戻らないので，
調整前のファイルは残し，ファイル名を変
えて保存すること。
2. 画像加工の基本
2.1. 画像の表示サイズ
•
パソコン上では，画像の表示サイズ (幅と高さ) はピクセル (pixel, px) 単位で表すのが普通
である (第 3 回配布資料§1.1.)。画像の表示サイズのピクセル長は，Photo Editor の [ファ
イル] → [プロパティ]，ペイントの [変形] → [キャンバスの色とサイズ] でチェックするこ
とができる。Web ページでも，img タグの width, height 属性で画像のピクセル長を指定す
ることができる (教科書 244—247 ページ)。
•
Web ページでは，画像のファイルサイズ (物理サイズ) は小さければ小さいほどよい。1 画
像の表示サイズと物理サイズは関連があるので，不必要な部分はトリミングをおこなって削
除したり，全体を縮小したりして，画像の表示サイズはなるべく小さくするとよい。
PhotoEditor で画像を開き，
「選択」ボタンを押してマウスで範囲を選択し，[イメージ]
→ [トリミング] をおこなう。
画像の表示サイズは， Photo Editor の [イメージ] → [サイズ変更] やペイントの [変
形] → [伸縮と傾き] からで変更することができる。
大きめの画像を公開する必要がある場合でも，画像をそのまま Web ページ中に表示するので
はなく，Web ページにはあらかじめ別のファイル名で作成した縮小版の画像を表示し，大き
な画像へはリンクを作成し，必要な場合だけ閲覧できるようにするとよい。このような，閲
覧目的に作成した画像の縮小コピーを「サムネール
サムネール」thumbnail
(親指の爪，の意) と呼び，
サムネール
余計なファイルのダウンロードを避けるテクニックとしてよく使われる。
•
反面，うっかり小さく作成してしまった画像を拡大すると，たいてい元の場合より汚くなっ
てしまう。img 要素で実際の画像とは異なる縦横のサイズを指定して，画像サイズを調整す
ることもできるが，この場合も画像の質はかなり悪化する。従って，画像を作成する際には，
完成した時の大きさを想定して作業にとりかかる
完成した時の大きさを想定して作業にとりかかるとよい。
作業にとりかかる
1
ネットワークを使っている大学の PC では想像もできないくらい，一般の回線からアクセスする Web ページの
アクセス速度は遅い。モデムの接続速度が 28.8Kbps (bite per second) の場合，画像 1KB(キロバイト)あたりの
ダウンロード時間は約１秒であるといわれている。この速度では，30KB の画像をダウンロードするだけで 30 秒
かかる計算になる！
3/6
授業 URL: http://www.fl.reitaku-u.ac.jp/~schiba/2002web/
2002/12/02
•
第 7 回資料
一般に，画像は幅
幅 640 ピクセル,
ピクセルの大きさに十分入る大きさで作成する
ピクセル縦 480 ピクセル
のが望ましい (この大きさは，現在使われている最も小さいモニタで表示できるぎりぎ
りの大きさである)。
PowerPoint で図表やロゴを作る場合，GIF 形式で書き出した画像はスライド全体が含まれ
るので，必ずトリミングをする必要がある。画像の大きさをあらかじめ指定するお勧めの方
法は，四角形の
四角形のオブジェクトを枠代わりに使う方法
四角形のオブジェクトを枠代わりに使う方法である。以下に紹介する：
オブジェクトを枠代わりに使う方法
1. PowerPoint を起動し，新規スライドで白紙のスライドをつくる
2. 「図形描画」ツールバーから「四角形」オブジェクトを選択し，
スライド中に配置する。
3. マウスで枠のハンドルを動かし，四角形オブジェクトを適切な
大きさに調整する。
4. 図形をダブルクリックして「オブジェクトの書式
設定」メニューを表示させ，
「サイズ」タブで四角
形の大きさを確認する (ただし，表示はセンチの
み)。
「色と線」タブでは，図形の背景や枠線の色や
パターンを調整できる。
5. 四角形の枠の中に収まるように図表やロゴを作成
する。
※ ロゴの編集中は，始めに配置した四角形オブジ
ェクトの大きさを変えないよう気をつけるこ
と。
6. 図表やロゴが完成したら GIF 形式の画像として書
き出す。
7. Photo Editor で画像を開き，四角形の枠に沿ってトリミングする (再編集できるよう，
オリジナルのスライドもプレゼンテーション形式で保存しておくとよい)。
※ PowerPoint は，画像作成のためのツールとしては簡易的な機能しかもたないので，表示
サイズを厳密に調整することはできない。GIF 画像として書き出した場合，長さが 2 割
ほど縮小されてしまうようだ。
2.2. 色の指定
•
イラストやロゴを作成する時，色を厳密に指定したい場合がある。特に，ロゴやイラストの
色を Web ページの背景やテキストの色と関連付けたい場合は，色の設定が重要になる。Web
ページをデザインする時に使用する色も決めておくと，作業がはかどり，再編集の手間も少
なくなる。
「ペイント」の場合は，[色] → [色の編集] からパレットを開き，色を追加する。RGB
値を 10 進数で入力し，
「色の追加」ボタンを押す。
進数で
RGB の 10 進数で値を
入力する
※ 複数の色を指定する場合は，
新しく色を指定する前に，「作成
した色」パレットの空いている部
分をクリックしておく。
4/6
2002 年度情報処理演習Ｂ「マルチメディアウェブページ作成」
PowerPoint の場合は，色を指定したい部品をダブルクリックし，
「オブジェクトの書式
設定」メニューの「色と線」タブを開くか，部品をマウスで選択した後，
「図形描画」ツールバーの「塗りつぶしの色」(右図左側) と「線の色」
(右図右側) のうち，変更したい箇所のプルダウンメニュー(▼ボタン)
をクリックし，メニューから「その他の色」を選択する。
「色の設定」ダイアログの「ユ
ーザー設定」で RGB の各値を 10 進数で
指定し，[OK] を押す。
•
16 進数
10 進数
HTML で色を設定する場合，指定は 16 進数でおこなうので注意。Web セーフカラーを表す
RGB 指定の場合，16 進数はそれぞれ 00, 33, 66, 99, CC, FF のいずれかになるが，対応する
10 進数は以下のようになる：
00
00
33
51
66
102
99
153
CC
204
FF
255
Web セーフカラー (214 色) を使ってロゴや図表，イラストを作成すると，ディザの発生や
色の不要な置き換えを最小限におさえることができ，常に美しい表示がおこなわれる。
2.3. 透過色の指定 (透過 GIF の作成)
•
GIF の特徴として，任意の色一色を「透過色」に指定することができる。
透過なし
透過あり
Photo Editor で透過色を指定する方法は以下のとおり (「ペイント」でも指定可能)。
1. ツールバーの「透過色に変更」ボタンを押す。
2. 透過色にしたい色のある箇所をマウスでクリックする (カーソルが
3. 「透過色に変更」ダイアログ (右図) がでるので，
RGB 値を確認し，[OK]ボタンを押す。
4. 画像を GIF として保存する。(透過部分がグレーと
白の縞模様で表示される。)
•
5/6
の形になる)。
透過色に指定した色のピクセルは全て透明になるの
で，思わぬ箇所が透明になってしまうことがある。こ
のようなトラブルを避けるには，画像中で絶対に使わ
画像中で絶対に使わ
ない色を背景色として指定し，画像が完成したらその色を透過色に指定するとよい。
ない色を背景色として指定し
授業 URL: http://www.fl.reitaku-u.ac.jp/~schiba/2002web/
2002/12/02
第 7 回資料
2.4. 画像ファイル編集のポイント (まとめ)
•
ファイル形式の選択：
Photo Editor
(スキャナ)
PowerPoint
24bit
BMP
プレゼ
ンテー
ション
形式
Photo
Editor
編集
トリミング
編集
GIF
表示サイズ・
圧縮率の変更
24bit
ペイント
JPEG
BMP
透過 GIF，
編集
GIF
etc.
GIF
編集
•
•
ロゴやイラストの配色を Web ページの配色と対応させることで，高度なデザインの Web ペ
ージを作成することができる。
画像のオリジナルはバックアップし，再び編集しなおせるようにしておく。
おまけ： PowerPoint におけるワードアートの編集
•
•
•
ロゴを作成する場合，PowerPoint のワードアートの機能を使
い，テキストの装飾性を高めることができる。しかし，標準
のワードアートのデザインは配色やパターンがけばけばし
く，Web ページ中に使った場合，逆に読みづらくなってしまうことも多い。
教師の経験では，ワードアートのスタイルのうち，右上図のような影がくっ
きり入ってしまうものは非常に読みにくい。
ワードアートの影は，
「図形描画」ツールバーの「影つきスタイル」メニ
ュー (右図) を使って調整できる。
調整例：
また，文字が明暗のはっきりした 2 色のグラデーションにな
っているものも，読みにくく，見栄えがよくない。
ワードアートの背景と線の色やパターンは，
「ワードアー
ト」ツールバー上にある「ワードアートの書式設定」ボ
タンで変更できる。「色と線」タブの色または線の「色」のプルダウン
メニュー(▼ボタン)をクリックし，
「塗りつぶし効果」でコントラストの
より弱い色を選択したり，単色を選んだ
りして調整できる。調整例 (影も削除)：
6/6

Download Report