Web 用の素材を作成する方法 (Photoshop Elements 11)

内容 (What's Covered)

この文書では、Adobe Photoshop Elements で Web 用のツールを作る方法について一例を紹介します。

Photoshop で Web 用の素材を作成する

Photoshop Elements では、ボタンやナビゲーションバーといった Web ページで使用する素材を簡単に作成することができます。 Web ページ用の画像を作成、編集するためのツールには、以下の様なものがあります。

A. シェイプツール

「シェイプツール」を使用すると、ベクトルベースの図形やイラストを簡単に描くことができます。各シェイプツールでは、オプションを設定してカスタマイズが可能なので、Web ページ用のボタン、バナー、アイコンなどを作成する場合に便利です。また、カスタムシェイプツールを使用すると、動物や矢印、花などのイラストを簡単に描画することができます。

  1. Photoshop Elements を起動し、「写真の編集」を選択します。

  2. ファイル/新規/白紙ファイル を選択し、新規 ダイアログボックスで作成する素材のサイズに応じたキャンパスを設定し、「OK」をクリックします。

  3. ウィンドウ上部から「エキスパート」をクリックし、エキスパートモードを選択します。

  4. ツールバーから、シェイプツールをクリックして選択します。

  5. 作成したい画像に合わせて、シェイプツールを選択します。

  6. 選択したシェイプツールに応じて、オプションを設定します。

    たとえば、カスタムシェイプツールならシェイプ画像をリストから選択したり、多角形ツールなら辺の数を指定します。

  7. 必要に応じて、スタイルを設定します。スタイルを適用するには、スタイルメニューを開き、スタイルのカテゴリを選択し、スタイル画像をクリックします。

  8. キャンパスをドラッグして画像を描きます。設定したシェイプが描画されます。

    カスタムシェイプとスタイルを使用して、効果的なアイコンやボタンなどの Web 用の素材を作成することができます。

B. レイヤー効果

効果パネルには、何種類ものレイヤー効果が適用されたプリセットスタイルが多数用意されているので、マウスをクリックするだけで複雑な効果を素早く適用することが可能です。また、1 つのオブジェクトに複数のレイヤースタイルを重ねて使用することで、複雑な画像を簡単に作成できます。レイヤースタイルの設定は編集することができるので、使用目的に合わせた最適な効果が得られます。 

  1. Photoshop Elements を起動し、あらかじめ用意しておいた画像や写真を開くか、新規ファイルを作成して画像を描画します。

  2. ガイドモード、またはエキスパートモードを選択します。

  3. 次のいずれかの操作を行います。

    • ガイドモード選択時
      ウィンドウ右側の「写真効果」の中から、適用する効果をクリックし、ガイド内容に沿って操作を進めます。

    • エキスパートモード選択時
      ウィンドウ右下から「効果」をクリックして、効果パネルを表示します。
      効果パネルで、「フィルター」「スタイル」「効果」のいずれかを選択し、カテゴリを選択、表示された効果の中から適用するものを画像にドラッグします。

  4. 画像や写真に効果が適用されます。

    シェイプツールでは作成できないベクトル画像や文字にスタイルを適用したり、写真に効果を適用することができます。

 

C. Web 用に保存

ファイル/Web 用に保存 を選択すると、作成した画像を Web 用の素材として書き出す事が可能です。書き出すファイル形式は、元画像のカラー、色調およびグラフィック特性によって適した形式を選択します。

 

書き出し可能なファイル形式

ファイル形式

適している画像

JPEG

連続階調の画像に適していて、ほとんどの写真の保存に最適な形式です。

PNG-24

JPEG と同様に、写真に適した形式です。画像に透明部分が含まれている場合のみ、JPEG ではなく PNG-24 を選択します(JPEG は透明ピクセルをサポートしません。透明部分はマットカラーで塗りつぶす必要があります)。PNG-24 ファイルは、同じ画像の JPEG ファイルよりサイズが大きくなります。

GIF

大部分が単一色で塗られたイラストや、ディテールが鮮明なテキストに適しています。画像をアニメーション化する場合も GIF で保存しす。 (GIF アニメーション)

PNG-8

GIF と同等の形式で、GIF と同じ用途で使用します(アニメーションを除く)。

 

 Adobe

ヘルプをすばやく簡単に入手

新規ユーザーの場合

Adobe MAX 2024

Adobe MAX
クリエイティブカンファレンス

10 月 14 日~ 16 日 マイアミビーチおよびオンライン

Adobe MAX

クリエイティブカンファレンス

10 月 14 日~ 16 日 マイアミビーチおよびオンライン

Adobe MAX 2024

Adobe MAX
クリエイティブカンファレンス

10 月 14 日~ 16 日 マイアミビーチおよびオンライン

Adobe MAX

クリエイティブカンファレンス

10 月 14 日~ 16 日 マイアミビーチおよびオンライン