|
P-Cat Ver.2.04 ・・・ |
さて、前回の講座で画像は完成しました。完成したら沢山の人に見てもらいたいですよね♪
だったらホームページで公開しましょう!その為には画像を圧縮して保存する必要があります。
(
前の講座で説明してある内容は詳しく説明いたしません。分らなくなった時は
下線のある文字をクリックしてください。以前の講座内容が別ウィンドウで開きます。)
|
|
|---|
・まず画像を圧縮して保存する前に画像解像度を変更 しましょう。解像度の変更は 「イメージ」→「画像解像度」 (1-3 図1 参照)を選択して 下さい。開いたダイアログ ボックス(図1)で変更したい 解像度を入力する理由ですが、 ではいくつにすれば 良いかと言うとWeb上では 「72pixels/inch」で十分だと 言われていますので そのように設定して下さい。 この時ついでに、HPで表示 したいサイズにも、変更して しまいます。 ・まず「縦横比を固定」の チェックボックスをオンにし、 「ピクセル寸法」で数値を 変更します。きっと最初は ピクセルと言われてもピンと 来ないかもしれませんね(^-^; 一番最後に圧縮保存した参考 画像を載せますがその画像の 横幅は「300pixels」になっています。それを参考にして下さい。 ・以上の設定を入力し終えたら、OKをクリックして下さい。これで画像解像度は変更されます。 |
では次に、圧縮ファイルの形式についてです。
|
|
|||||||||
|---|---|---|---|---|---|---|---|---|---|
|
・現在ポピュラーなHP用の画像形式は「GIF(ジフ)」「JPEG(ジェイペグ)」の2種類です。 この他「PNG(ピング)」と言う画像形式もありますが、ブラウザのバージョンによっては対応してなかったり 多少ファイルのサイズが大きいと言う点から今回は省きます。 | |||||||||
| |||||||||
|
・以上特徴を挙げましたが、実際に圧縮してみるまではどの画像はどの形式が良いかは解らないものです。 まず、両形式で保存して比べてみて下さい。これを数多く行えば、いずれどちらの形式が良いかの判断が つくようになると思います。それではそれぞれの形式での保存方法を解説してみましょう。 |
|
|
|
|---|---|
・まずGIF形式で保存するためには画像モードを「インデックスカラー」に 変更する必要があります。 「イメージ」→「モード」→「インデックスカラー」 (1-3 図1 参照)を選択して下さい。すると 警告のダイアログボックス(図2)がまず 出ますが、迷わずOKをクリックして下さい。 するとインデックスカラーのダイアログボックス (図3)が表示されます。 ・まずプレビューのチェックボックスがオンに |
|
なってるか確認して下さい。これで変更 する前に、画像を 確認出来るように なります。 確認しながら作業を 進めて下さい。 ・あきらかに 256色より色数が 多い場合は、 ディザの種類を 「誤差拡散法」に 変更し、「同一色の 保護」のチェック ボックスをオンに すると綺麗に表示 されると思います。 ・プレビューで確認 しながら色々試して、これでいいと思ったらOKをクリックします。 ・次に「ファイル」→「データーの書き出し」→「GIF89a 書き出し」(図4)を選択します。 開いたオプションの |
|
ダイアログボックス(図5)で注目する点は、「インターレース」のチェックボックスです。 ・「インターレース」とはダウンロードの途中 モザイク状の荒い画像で表示し、徐々に ハッキリと表示させるものです。 インターレースGIFにすると早い段階で画像の 内容がわかるという利点があります。 ただしファイルサイズが多少大きくなる事が あります。インターレースGIFにしたい場合は オンにして下さい。 ・オフにして、通常のGIFにした場合は 上から順に表示されます。 ・それともう1つは、「透過GIF」という文字を |
|
複数の色、又は保存した選択範囲を 透過させる事が 出来ます。 ・透過させる色を選ぶ 場合はダイアログ ボックス内の 「スポイトツール」を 選択し、画像上又は 下に表示されている 使用されているカラー のボックスで透過 させたい色を選択 していきます。 この場合透過させ たい色はあらかじめ、 表示させたい画像で 使用してない色で 塗りつぶして置くのが 良いでしょう。 ・また透過させたい 部分をあらかじめ 選択範囲で保存して 置けば「透明度」で 選択出来ます。 |
|
|
|
|||||||||
|---|---|---|---|---|---|---|---|---|---|
・JPEG形式で保存する場合はまず余分なチャンネルを捨てて下さい。 余分なチャンネルとは「赤」「緑」「青」の3つのカラー チャンネル と「RGB」の合成チャンネル以外の「アルファチャンネル (選択範囲を保存したモノ)」です。この「アルファチャンネル」を チャンネルパレット上でゴミ箱へドラッグ&ドロップして削除 (図6)して下さい。 ・それから「レイヤー」→「画像を統合」(1-3 図7参照)で画像を ![]() 統合して下さい。 この2つの作業をして 置かないとJPEG形式での 保存が出来ません。 ・次に「ファイル」→ 「別名で保存」(図7)を 選択し、表示された ダイアログボックス(図8) でファイルの保存場所を 選択し、ファイル名を 入力し、「別名で保存」の ドロップダウンリストで JPEG形式を選択後・・・・・・ |
|||||||||
![]() |
|||||||||
保存ボタンをクリックします。 すると次に表示されるのが 「JPEG オプション」の ダイアログボックスです。 ・ここではまず、「画像オプション」で 画質の選択を行います。数値が 低いほど圧縮率が高くなり ファイルサイズが小さくなります。 実際に試し、画質の劣化具合と ファイルサイズを見て画質の数値を 決定して下さい。 ・もう1つ形式オプションでは 「ベースライン(最適化)」 「プログレッシブ」のどちらかを 選択します。「ベースライン (最適化)」は通常の形式で、 「プログレッシブ」は「インターレース」と同じように表示されるモノです。通常の形式で保存するよりも 「プログレッシブ」で保存する方が多少ファイルサイズが小さいようですが、現在IEは対応していないようで、 通常の形式と同じように表示されます。NNは対応しています。 |
|||||||||
![]() |
![]() |
||||||||
|
|||||||||
| こうして見比べてみるとこの画像の場合、画質の点ファイルサイズの両方で「JPEG形式」の方がいいようですね。 | |||||||||
以上で第1講座 フォトショップ編は終了です。如何でしたでしょうか?
この講座の内容をすべて理解すれば、フォトショップの機能はだいたい使えるようになると思います。
もし以前に解説書を購入していて、その時点では何が何やらという感じだった方は
もう1度その解説書を開いてみて下さい。以前より理解できるのではないでしょうか?
又、解説書を買っていらっしゃらない方でも、フォトショップを使用していてわからない機能でも
躊躇せずに試してみればなんとなく理解出来るようになったのではないでしょうか?
そのように、この講座を作ったつもりではありますが
何か解りづらい点などありましたら、遠慮無しにどんどん申し出て下さい。
今後も皆様からのリクエストや追加したい項目があった場合は随時追加していくつもりです。