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 サーバーにアップロードできる状態になります。

  1. ファイル/書き出し/Zoomify を選択して、書き出しオプションを設定します。

    テンプレート

    ブラウザーで表示される画像の背景とナビゲーションを設定します。

    保存先

    ファイルの保存先とベース名を指定します。.

    画像タイルオプション

    画質を指定します。.

    ブラウザーオプション

    ユーザーのブラウザーで基本画像を表示する際の画像の幅と高さをピクセル単位で設定します。

  2. HTML ファイルと画像ファイルを Web サーバーにアップロードします。

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

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

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

  1. ウィンドウ/情報を選択するか、「情報」タブをクリックして、情報パネルを表示します。
  2. パネルメニューから「パネルオプション」を選択します。「第 1 色情報」または「第 2 色情報」のセクションで、モードポップアップメニューから「Web カラー」を選択し、「OK」をクリックします。
  3. 16 進数で表示するカラーの上にポインターを置きます。

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

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

  1. 次のいずれかの操作を行います。
    • スポイトツールを使用して、ポインターをコピーするカラーに移動します。右クリック(Windows)またはControl + クリック(Mac OS)して、「カラーを HTML コードとしてコピー」あるいは「カラーの 16 進コードをコピー」を選択します。

    • カラーパネル、スウォッチパネルまたは Adobe カラーピッカーを使用して、描画色を設定します。カラーパネルメニューから、「カラーを HTML コードとしてコピー」あるいは「カラーの 16 進コードをコピー」を選択します。

    • Web 用に保存ダイアログボックスで、カラースウォッチをクリックするか、マット/その他を選択します。Adobe カラーピッカーで、16 進数値を右クリックし、「コピー」を選択します。

  2. HTML 編集アプリケーションで必要なファイルを開き、編集/ペーストを選択します。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

リーガルノーティス   |   プライバシーポリシー