●画像の作成
*webで使用する画像の解像度は72dpiが基本。
*画像ひとつのファイルサイズは20KB以下が望ましい。
*画像を拡大する場合はアプリケーションで処理するのではなく、スキャン時に拡大して取り込むのがベスト。
*JPEGで加工するより、BMPで保存して加工するのがベスト。
| Web表示 | 印刷 |
Photoshop(解像度) | 72 pixel/inch | 300 pixel/inch |
Illustrator(カラーモード) | RGBカラー | CMYKカラー |
1. 影つき画像の作成(Photoshop Elements)
- もとの画像より大きい(幅+7、高さ+8)新規ファイルを用意する
影の部分をWebの背景色に馴染ませるには、「内容」を「透明」に設定
- 元の画像の[すべてを選択]し、「移動ツール」で新規ファイルへドラッグ
- [レイヤースタイル]→[ドロップシャドウ]→[低]
- [Web用に保存]→「マット」でWebの背景色を指定し、JPEGで保存する
2. 枠つき画像の作成(Photoshop Elements)
- [選択範囲]→[すべてを選択]
- [編集]→[境界線を描く]
境界線の幅(1px)、カラー(cccccc)、位置は内側か中央を指定
3. 写真風画像の作成(Photoshop Elements)
- 背景色に白を指定
- [イメージ]→[サイズ変更]→[カンバスサイズ]
もとの画像の幅と高さにそれぞれ+12する
- 2の操作で枠をつける
- さらに1の操作でドロップシャドウをつける(幅+4、高さ+4)不透明度50%、距離4px、サイズ4px
4. 周りをぼかした画像の作成(Photoshop Elements)
- 「選択」ツールを使って、周りをぼかしたい範囲を選択
- [選択範囲]→[境界をぼかす]
- [選択範囲]→[選択範囲を反転]→「Backspace」キーを押す
新規レイヤーに適用させたいときは、レイヤーの作成後「Alt」+「Delete」キーを押す
ぼかしの色には「背景色」が適用される
- 全体的に画像を白っぽくするには、[レベル補正]の出力レベル▲を右にスライドさせる
参考サイト - Air.+天使のはしご+
●フチ付き文字の作成(Illustrator)
- 「塗り」と「線」で色を違えた文字を作成(塗り:黒、線:白)
太目の文字を使うとよい
- 文字を選択して[文字]→[アウトラインの作成]すると、テキストがオブジェクトになる
- アピアランスの「線」をドラッグして「塗り」の下に移動する
状況に応じて「線幅」を変える
状況に応じて[オブジェクト]→[グループ解除]、文字間隔を調整する
●画像の切り抜き(Illustrator)
- 「楕円形」ツールや「長方形」ツールを使って、切り抜きたい部分の上に図形を描く
必要に応じて、「はさみ」ツールを使ってパスを切断し、「ペン」ツールを使ってパスを閉じる
- 描いた図形と画像を同時に選択した状態で、[オブジェクト]→[クリッピングマスク]→[作成]
●アンチエイリアスとハロー
- アンチエイリアス
- フチを自然な滑らかさに見せるための処理。アンチエイリアスをONにすると、背景との間に適度なボカシが入り、色数が増えるので画像の質は向上するが、ファイルサイズは重くなる。小さな文字などはアンチエイリアスを外したほうがすっきりと読みやすくなる場合もある。
- ハロー
- アンチエイリアスをかけた画像を透過処理して別の色の背景色の上に配置すると、背景色のボカシが残り、白い縁取りとなって表示される現象
*ハローを避けるためには、配置するページの背景色と同じ色を「マット」(Illustrator)で指定する。
●画像取り込み時のスキャナ設定
*書籍表紙のスキャン→jpg、カラースクリーン、75dpi、場合に応じて縮小。
*拡大して使用する場合を除いて、300dpi以上の取り込みは必要ない。
プリント(サービスサイズ) | フィルム(ネガ・ポジ) |
75dpi | 300dpi |
150dpi | 600dpi |
300dpi | 1200dpi |
* 75dpiで100%の取り込みは、150dpiで50%の縮小した場合と同等のサイズになる。
* 150dpiで100%の取り込みは、75dpiで200%の拡大した場合と同等のサイズになる。