Web グラフィックの使用

Photoshop の Web ツールを使用すると、Web ページの構成要素を構築したり、プリセット形式またはカスタム形式で Web ページ全体を出力したりすることが簡単にできます。

• Web ページおよび Web ページのインターフェイス要素をデザインするには、レイヤーおよびスライスを使用します（詳しくは、レイヤーとWeb ページのスライスを参照してください）。

• ページの構成をいろいろ試したり、ページのバリエーションを書き出したりする場合は、レイヤーカンプを使用します。（詳しくは、レイヤーカンプを参照してください）。

• ロールオーバーテキストまたはボタングラフィックを作成し、Adobe Dreamweaver® または Flash で読み込むことができます。

• アニメーションパネルを使用して Web アニメーションを作成したら、アニメーション GIF 画像または QuickTime ファイルとして書き出すことができます。詳しくは、フレームアニメーションの作成を参照してください。

• Adobe Bridge では Web フォトギャラリーを作成し、見栄えのよい様々なテンプレートを使用して、一連の画像をインタラクティブな Web サイトにすばやく変換できます。

Photoshop と Dreamweaver を使った Web サイトのデザインに関するビデオについては、Dreamweaver から Photoshop へアクセスして Web 画像を向上を参照してください。

ロールオーバーとは、マウスを上に置いたときに変化する Web ページ上のボタンまたは画像のことです。ロールオーバーを作成するには、少なくとも、通常の状態を表す一次画像と変更後の状態を表す二次画像の 2 つの画像が必要となります。

Photoshop には、ロールオーバー画像を作成するための便利なツールが多数用意されています。

• 一次画像と二次画像を作成するには、レイヤーを使用します。あるレイヤー上にコンテンツを作成したら、そのレイヤーを複製して編集し、レイヤー間の位置関係を維持しながら類似したコンテンツを作成します。ロールオーバー効果を作成する際は、レイヤーのスタイル、表示 / 非表示または位置を変更したり、カラーまたは色調を調整したり、フィルター効果を適用したりすることができます。詳しくは、レイヤーの複製を参照してください。

• レイヤースタイルを使用して、カラーオーバーレイ、ドロップシャドウ、光彩、エンボスなどの効果をメインのレイヤーに適用することもできます。ロールオーバーのペアを作成するには、各画像のレイヤースタイルをオンとオフに設定し保存します。詳しくは、レイヤー効果とレイヤースタイルを参照してください。

• スタイルパネルでボタンスタイルのプリセットを使用すれば、通常の状態、マウスオーバー状態およびマウスダウン状態のロールオーバーボタンを簡単に作成できます。長方形ツールを使用して基本形状を描画し、ベベル（標準）などのスタイルを適用して、長方形をボタンに自動的に変換します。次に、レイヤーをコピーして、ベベルマウスオーバーなどの他のプリセットスタイルを適用し、追加のボタン状態を作成します。各レイヤーを個別の画像として保存し、ロールオーバーボタンのセットを完成させます。

• Web およびデバイス用に保存ダイアログボックスを使用して、ファイルサイズを最適化したロールオーバー画像を Web 互換形式で保存します。

Photoshop でロールオーバー画像のセットを作成したら、Dreamweaver を使用して画像を Web ページに配置します。これにより、ロールオーバーアクションの JavaScript コードが自動的に追加されます。

Zoomify への書き出し

ユーザーがパンやズームを使って詳細を表示できる高解像画像を Web に掲載することができます。書き出した画像は元の JPEG ファイルとサイズが変わらないため、ダウンロード時間が変わることはありません。Photoshop によって JPEG ファイルと HTML ファイルが書き出され、Web サーバーにアップロードできる状態になります。

16 進数によるカラー値の使用

Photoshop では、画像のカラーを表す 16 進数値を表示したり、カラーの 16 進数値を HTML ファイルで使用するためにコピーしたりすることができます。

情報パネルでの 16 進数によるカラー値の表示

16 進数値でのカラーのコピー

Photoshop は、16 進数値（color=#xxyyzz）を含む HTML カラー属性あるいは 16 進数値そのものとしてカラーをコピーします。