Webに関して言えば、Adobe Photoshopは常に矛盾に満ちたプログラムでした。Webデザインやグラフィック業界の人々がWeb用に画像を整えたり、HTMLコードに実装する前にWebサイトのデザインをスケッチしたりするために、Photoshopはおそらく最もよく使われるツールです。それにもかかわらず、Adobe Systems（800/492-3623、https://www.adobe.com）の主力製品は、インターネットに特化しているとは言えませんでした。この状況が、Photoshopでは到底できない重要な作業を代行するプラグインやプログラムをベースにした業界全体が生まれるきっかけとなりました。
しかし、バージョン5.5でPhotoshopはついにWebに対応しました。Photoshop 5.0またはImageReady 1.0の購入者向けの129ドル（新規購入者は610ドル）のアップグレード（この記事の執筆時点では利用可能）には、Photoshopの従来の印刷ユーザーにとって魅力的な機能がいくつか追加されています（補足記事「Webだけじゃない」参照）。しかし、この由緒ある画像エディタへの変更点の大部分は、長年Webグラフィックに不満を抱いてきたユーザーを満足させることを意図しています。
一体どうやって実現したのか？Adobeは、昨年リリースしたWebグラフィック製品「Adobe ImageReady」の機能をほぼすべて組み込んだ。Webデザインの進化の軌跡と、PhotoshopからWeb機能を省いたことがいかに大きな誤りであったかを示す動きとして、Adobeは今後ImageReadyをPhotoshop 5.5パッケージの一部としてのみ提供する。
このプログラムの新バージョンであるImageReady 2.0は、Photoshopにバンドルされます。Webアニメーションなどの高度なタスクや、JavaScriptロールオーバーや画像スライスといった高度なテクニックにも対応します。
ウェブへの窓
Webグラフィックでは、高画質の画像と低速モデム回線でも高速にダウンロードできる画像の間で、常に綱渡りをしなければなりません。Webデザイナーは主にJPEGファイル（写真用）とGIFファイル（テキスト、ロゴ、その他の大きな単色ブロックを含むグラフィック用）を扱います。どちらの形式で保存した画像でも、綿密な調整が大きな違いを生み出します。美しさと速度のトレードオフにおいて、デザイナーがより多くのコントロールを持てば持つほど、より良い結果が得られます。
この最新バージョンまで、Photoshop にはそのような制御がなかったため、ほとんどのデザイナーは代わりに BoxTop Software (662/263-5410、https://www.boxtopsoft.com ) の 50 ドルの ProJPEG や 70 ドルの PhotoGIF などの Photoshop プラグイン、または Macromedia (800/457-1774、https://www.macromedia.com ) の ImageReady や 199 ドルの Fireworks 2.0 などのプログラムを使用していました。これらのツールを使用すると、デザイナーは JPEG および GIF 画像のファイルサイズと品質を操作でき、視覚的なフィードバックが即座に得られます。ただし、それらのどれも Photoshop の強力な画像編集機能に匹敵することはできません。その結果、Web 用のグラフィックを準備するには、多くの場合、Photoshop と Web 対応アプリケーションを頻繁に切り替える必要があります。
Photoshop 5.5の最大の追加機能は、「ファイル」メニューにある「Web用に保存」メニュー項目です。「Web用に保存」を選択すると、通常の保存ダイアログボックスは表示されず、代わりに大きなウィンドウが表示され、画像に様々な重要な変更を加えることができます。これは、ほぼ同じインターフェースを持つMacromediaのFireworks（スクリーンショット「Separated at Birth」を参照）を使用したことがある人にとっては、特に珍しい機能ではないでしょう。ImageReady 2.0にもこの機能は搭載されています。
JPEG モジョ
「Web用に保存」ウィンドウでは、JPEG形式のファイルの品質レベル（0～100）を調整できます。品質スライダーを0に近づけるほど、画像の品質が低下します（JPEGの圧縮率が高くなるにつれて、ブロック状のノイズが多くなります）。また、ウィンドウの左下隅にはファイルサイズも小さくなっているのが確認できます。ウィンドウの「2アップ」または「4アップ」タブをクリックすると、同じウィンドウ内で2つまたは4つのバージョンの画像（異なるJPEGまたはGIFオプションを選択）を比較でき、異なる設定を素早く比較できます。
GIFコントロール
Photoshopの優れた新機能の一つは、GIF画像を完璧に仕上げることです。数百万色もの色数を持つJPEGファイルとは異なり、GIF画像はわずか256色しかパレットに収まりません。そのため、GIF画像を美しく仕上げるには、適切な色を選ぶ必要があります。Photoshop 5.5では、GIF画像の特性を驚くほど細かく制御できます。
ImageReady 1.0と同様に、Photoshopの「Web用に保存」ウィンドウでは、GIF画像のパレット内のすべての色を確認・調整できます。GIFファイルのパレットを巧みに制御することで、ファイルサイズを大幅に削減できます。Photoshopがまず行うのは、ソース画像から256色以外の色をすべて削除することです。これを簡単にするために、Photoshopでは様々なプリセットパレットから選択できます。「Webセーフ」パレットだけでなく、画像で最も頻繁に出現する色に最適化した「アダプティブパレット」や、画像の中で目に見える色に重点を置いた「知覚パレット」も用意されています。
これらのパレットのいずれかを選択することは、比較的小さく見栄えの良いGIFファイルを作成するための近道ですが、完璧主義者はさらに多くの変更を加えたいと考えるでしょう。結局のところ、 256色まで使えるからといって 、必ずしも良いアイデアとは限りません。色数が少ないほど、画像のファイルサイズは小さくなり、ダウンロード時間も短くなります。
「Web用に保存」ウィンドウにあるオプションの一つを使うと、GIF画像の色数を直接制御して色数を減らすことができます。204色のサンプル画像を64色に減らしてみました。その結果、画像サイズは15.3KBから9.3KBにまで減少しました。
パレットパワー
カラーパレットを限定すると、画像ファイルのダウンロード速度は速くなるかもしれませんが、同時に非常に退屈な画像になってしまうこともあります。より多様な色を表現する方法の一つに、ディザリングがあります。ディザリングとは、2色のドットを近接させて配置することで、遠くから見ると3つ目の色に見えるようにすることで、ある色をシミュレートする手法です。
Photoshop 5.5では、3種類のディザリング効果が用意されています。また、ディザリングのパーセンテージも設定できるので、画像のディザリング量を調整し、画質とファイルサイズにどのような影響を与えるかを確認できます。これらのオプションは便利ですが、ディザリングはファイルサイズを大きくするため、できる限り使用を避けてください。
Photoshopでは、GIFカラーパレットを編集することで、究極のカラーコントロールを実現できます。これは強力で非常に便利な機能で、いかなる状況でも変更したくない色（例えば、会社のロゴの色）をロックできます 。 また、個々の色を選択して、最も近いWebセーフカラーにシフトすることもできます（そのため、256色しか表示できないモニターでもディザリングが発生しません）。さらに、パレットから色を1つずつ削除することで、画像を簡素化し、ファイルサイズを縮小することもできます。
一つのイノベーション
「Web用に保存」ウィンドウの機能はPhotoshopの新機能ですが、全く新しいわけではないことを指摘しておくのは当然です。ImageReadyやFireworksのユーザーには、ほとんどの機能がお馴染みでしょう。Photoshop 5.5で初めて提供されるユニークな機能が1つあります。それは、 非可逆GIFです 。
Adobeの非可逆GIFアルゴリズムは、GIF画像の圧縮方法を巧みに利用しています。単色の大きな領域をピクセル単位ではなく、簡潔に記述することで、低品質の画像を生成します。これにより、ファイルサイズは小さくなりますが、非可逆圧縮率を上げると、画像に1ピクセルの高さの横縞が現れるなど、歪みが目立ち始めますが、緊急時にはそれほど気にならないかもしれません。
Photoshopの新しい仲間
GIFやJPEG形式でファイルを巧みにエクスポートするだけでは、Webグラフィック制作の全てとは言えません。Webグラフィックのプロにとって極めて重要なWeb特有の機能がいくつか存在しますが、Photoshop 5.5には搭載されていません。これらの機能は、大幅に改良されたImageReady 2.0に含まれています。
緊密な統合
PhotoshopとImageReadyは連携して動作することを前提としていますが、別々に動作するようにも開発されています。以前は多くのユーザーが、競合ソフトのFireworksには搭載されていたスタンプやエアブラシといった画像編集ツールがImageReadyには不足していると不満を漏らしていました。もしあなたがそうだったなら、ImageReadyのより充実した画像編集ツール群にきっと満足するでしょう。ImageReady 2.0をお持ちの方はPhotoshopも自動的にインストールされますが、これらのツールがあれば、ちょっとした修正のために2つのプログラムを行き来する必要がなくなります。
切り替える必要がある場合でも、2 つのアプリケーション間の切り替えがはるかに簡単になりました。どちらも Photoshop ファイル形式を完全に認識し、各プログラムのツール パレットの下部にあるボタンをクリックすると、現在アクティブなドキュメントが他のプログラムで開きます。
スライスとダイス
Photoshopユーザーの多くは、せっかく丁寧に作成した画像を細かく切り分けることに多くの時間を費やすことはありません。しかし、 Webでは画像をスライスする手法 はごく一般的です。これは、表ベースのHTMLレイアウトやJavaScriptを多用したインタラクティブデザインにおいて、巨大な画像を1枚だけ切り取るよりも、同じ画像を複数のセクションに分割する方が効率が悪いためです。
バージョン2.0では、ImageReadyはFireworks 2.0のスライス機能に匹敵する柔軟性を備えています。定規からガイドをドラッグするか、スライスツールを選択して特定の領域を四角形で囲むことで、スライスする領域を選択できます。スライスごとにGIFとJPEGの異なる設定を選択できます。これは、Webページをグラフィックとしてデザインし、その特定の部分（例えば、片隅に写真、もう片隅にテキストなど）に異なる圧縮方法が必要な場合に特に便利です。
シンプルなJavaScript
グラフィックの作成とHTMLコーディングの世界への進出は別々の作業だと思うかもしれません。しかし、Webページの多くの装飾はJavaScriptの ロールオーバー（ マウスオーバーで画像が切り替わる）によって実現されているため、ImageReadyにHTML関連の機能が含まれているのは当然のことです。
ジョブを分割することも可能です。Photoshopユーザーは、大きな画像や複数の画像をスライスして作成し、HTMLエディタに送って、華やかな効果を生み出すために必要なJavaScriptコードを追加してもらうことができます。ImageReady 2.0は、必要なHTMLマジックをすべて自動生成することもできます。ImageReady内でロールオーバー（マウスを 別の 場所に移動すると画像が変化するような画像も含む）を設定すると、プログラムがHTMLファイルを生成します。
これはFireworks 2.0にも搭載されている機能ですが、当然ながら互換性の問題があります。ImageReadyで生成されたロールオーバーはAdobe GoLiveでは問題なく動作しますが、Macromedia Dreamweaverでは動作しない可能性があります。一方、Fireworksで生成されたロールオーバーは、 MacromediaのWebサイトからFireworksでGoLiveスタイルのHTMLをエクスポートできるテンプレートをダウンロードすれば、 Macromedia DreamweaverとGoLiveの両方で動作します。
ジャンプするGIF
これまでPhotoshopユーザーは、GIFアニメーションを作成するには、Yves Piguet氏の無料GIFBuilderなどのシェアウェアプログラムに頼らざるを得ませんでした。通常は、Photoshop内で各フレームを苦労して生成した後でした。ImageReadyとFireworksの登場により、強力なアニメーションツールが追加され、状況は一変しました。ImageReady 2.0はその伝統を受け継ぎ、Fireworks 2.0とあらゆる点で同等の機能を備えています。
ImageReadyのアニメーションパレットを使えば、レイヤーを移動（またはオン/オフ）することでアニメーションGIFを作成できます。最終的なアニメーション効果を得るためにアイテムを一連の手順で動かすのが面倒な人のために、ImageReadyのTweenコマンドがあります。このコマンドは、「前」と「後」のフレームの情報（例えば、画面下部と上部の赤いボール）に基づいて、その間に何が表示されるかを計算し、作成します。
最後の言葉
Adobe Photoshop 5.5の登場は、Webグラフィックの世界にとって大きな節目となるかもしれないし、あるいは単なる道のりの障害に過ぎないかもしれない。長年Webを無視してきたPhotoshopが、ついにインターネット対応を果たした。しかし、もう手遅れなのだろうか？
Macromediaの競合製品であるFireworks 2.0は、高機能で人気を博しています。描画ソフトとPhotoshopのような機能を融合しているため、多くの人にとって習得が難しいものの、それがFireworks独自の強みにもなっています（1999年7月号のレビューを参照）。また、少なくとも今のところは大きな勢いを見せるHTMLエディタDreamweaverとの緊密な連携も特徴です。一方、PhotoshopとImageReadyがFireworksのほとんどの機能を1つのパッケージで、しかも同じ価格で提供できれば、Adobeは大きな優位性を持つことになるかもしれません。
この戦いの勝敗に関わらず、一つだけ否定できない事実があります。Photoshopを使うWebプロフェッショナルは、必要な基本ツールを手に入れるために追加料金を支払う必要がなくなるということです。長らく待たされましたが、ついにPhotoshopがWebに対応しました。
サイドバー「素早く簡単なマスキング」をご覧ください
上級編集者の JASON SNELL 氏は、Web パブリッシングの仕事を始めた 1993 年以来、Web パブリッシングについて執筆を続けています。
1999年10月 号 74ページ
素早く簡単なマスキング
Web 用または印刷用の画像を扱う場合、必要なものを正確に選択するのは決して簡単ではありません。幸いなことに、Photoshop 5.5 には、少なくともそれを 簡単にするツールが用意されています 。その 1 つが、新しい抽出機能です。抽出の真に特別な点は、 選択範囲のエッジに沿って色の除去 (奇妙なハローの除去) を実行することです。これは重要な点です。なぜなら、選択の成功は、選択されている部分と選択されていない部分の間の遷移に完全に依存するからです。遷移がお粗末だと、実際に必要なオブジェクトと一緒に元の背景の一部も取得されてしまいます。オブジェクトのエッジに沿ったこの線は、そのオブジェクトがどこか別の場所から来たものであるという決定的な証拠となります。
抽出機能はマスクを作成するわけではないことに注意してください。エッジピクセルから背景色を除去する必要があるため、実際には背景が削除されます。これは残念なことです。抽出機能を使用しても完璧な選択範囲が得られることは稀で、微調整が必要になります。そのため、抽出を使用する前にレイヤーを複製することをお勧めします。繰り返しますが、簡単だと言った人はいません。ただ、簡単になるだけです。–DAVID BLATNER
1. [画像] メニューから [抽出] を選択すると、[抽出] ダイアログ ボックスが表示され、作業可能な画像のプロキシが表示されます。
2. ブラシツールを使って、選択しようとしているオブジェクトの端に沿って塗りつぶします。この「塗りつぶし」のデフォルトの色は緑ですが、画像に緑が多く含まれている場合は、赤や青に変更できます。塗り間違えた場合は、消しゴムツールを使って「塗りつぶし」の一部を消すことができます。
3. 選択範囲の端を指定したら、塗りつぶしツールでオブジェクトをクリックします。これにより、Photoshopは緑の線のどちら側が内側、つまりオブジェクト自体であるかを認識します。
4. 「プレビュー」をクリックすると、抽出されたオブジェクトが透明な背景の上に表示されます。気に入った場合は「OK」をクリックします。気に入らない場合は、ブラシツールでエッジをさらに調整するか、ダイアログボックスで他の設定を調整して、抽出結果を再度プレビューできます。
ほら、できました！ 最終的には、少ない労力で目に見えて良い結果が得られます。マジックワンドなどの従来の選択方法では、エッジのスピル（はみ出し）が拾われてしまい、シャープでリアルさに欠けるエッジになってしまうことがよくあります（右の例を参照）。抽出機能は、エッジのピクセルから背景色を削除し、半透明のエッジを残します。これにより、前景オブジェクトが選択した新しい背景にスムーズに溶け込みます。
ウェブだけじゃない
世界中の Web 出版者にとって Photoshop 5.5 のリリースは喜ぶべき理由がある一方で、私たちのような残りの人々、つまり依然として印刷出版で生計を立てている凡人にとっても、私たちの日々を楽にしてくれるかもしれないこのアップグレードのいくつかの機能に静かに歓声を上げることができるでしょう。
気楽な合成
フォトコンポジット （画像を切り抜いて別の画像に重ね合わせること） をする場合 、おそらく最も悩まされるのがエッジスピルです 。これは、元画像の背景が合成された画像の周囲にざらざらとしたハローとして現れる現象です。そこで、新機能の「抽出」機能と「背景消しゴム」ツールが役立ちます。どちらも比較的インテリジェントにピクセルを消去しますが、さらに重要なのは、どちらもエッジカラーの除去機能を備えていることです。つまり、切り抜いたオブジェクトのエッジにあるピクセルから背景色を丁寧に除去します。
抽出機能は背景色を一度に削除しますが（サイドバー「より速く簡単なマスキング」を参照）、背景消しゴムツールでは、背景を滑らかに、そしてインテリジェントに、透明になるまで塗りつぶして（または消去して）いきます。残念ながら、どちらのツールも、例えば太陽が輝く黄金色のビーチを背景に、さわやかなブロンドの髪が映っているような、非常に扱いにくい画像には特に効果がありません。
もう一つの合成ツールであるマジック消しゴムは、塗りつぶしツールで色の代わりに「クリア」の塗りつぶしを使用した場合と基本的に同じ結果になります。ただし、非常に粗い最初の下書き作業以外には、あまり役に立たないツールです。
結局のところ、これらの新機能は強力ですが、Ultimatte、Extensis、Human Softwareなどの企業が提供している追加のマスクプラグインが不要になるわけではありません。これらのプラグインは、クリッピングパスの作成支援など、Photoshopを超える機能を提供します。
より良いテキスト
AdobeはPhotoshop 5.0で文字制御に失敗をしました。特に小さな文字のラスタライズ（見栄えが悪かった）において問題がありました。バージョン5.5では、これらの問題を改善するいくつかの機能が追加されました。3段階のアンチエイリアスと分数幅オプション（ほとんどの文字はピクセル幅が偶数ではありません）により、あらゆるサイズで見栄えの良い文字を設定できます。それほど魅力的ではありませんが、それでも便利なのが、太字、下線、斜体のテキストを擬似的に表示する機能です。ただし、アップグレードしない場合、Photoshop 5.0はバージョン5.5で作成された文字レイヤーを読み取ることはできますが、新機能はすべて無視されることに注意してください。
シンプルな喜び
シンプルなものこそが、「おおー！」という反応を得られることが多いものです。「ファイル」メニューの「自動化」サブメニューを開いて、そこに含まれる新しいマクロを見れば、きっとあなたもそう思うはずです。Picture Packageは、同じ写真を1枚のフィルムに収めるために、写真を複製、回転、拡大縮小するのにうんざりしている写真家にとって、まさに天の恵みです（例えば、学校の写真を作成するときに、財布サイズに収まるように特定の枚数の写真を撮りたい場合など）。
同様に、ページ上のサムネイル画像をまとめるコンタクトシート機能には、サムネイルの下にファイル名を追加したり、ネストされたフォルダー内のすべての画像を含めたりする機能などの新しいオプションが含まれています。
HTMLコードを扱うのが苦手で、写真をすぐにWebに公開したいという方には、Webギャラリー機能も便利です。写真のフォルダを選択すると、Photoshopが自動的にJPEGファイル形式に変換し、画像間のリンクと小さなサムネイル画像を含むHTMLページを生成します。
1分間のモネ
Adobeは、ファインアーティストへの敬意を表して、アートヒストリーブラシを搭載しました。画像にブラシをかけるだけで、様々な印象派風の効果を作成できます。残念ながら、「タイトショート」「ダブ」「ルーズカール」といった名前の付いたアート系のオプションは、MetaCreationsのPainterで作成できるものとは大きく異なります。幸運にも、Photoshopの将来のバージョンではこのツールが拡張されるでしょう。
今回のアップグレードに含まれる機能の大部分は、Webプロフェッショナル向けであることは明らかです。しかし、私たち以外のユーザーもアップグレードしたくなるような、魅力的な機能もいくつかあります。–DAVID BLATNER
