注意:

シェイプツールを使用すると、ボタンやナビゲーションバーなど、Web ページで使用するアイテムを簡単に作成できます。Photoshop の描画機能の概要については、描画の概要を参照してください。

Photoshop でのシェイプの描画

Photoshop でのシェイプの描画
Julieanne Kost

シェイプレイヤーでのシェイプの作成

  1. シェイプツールまたはペンツールを選択します。オプションバーのメニューからシェイプが選択されていることを確認します。

  2. シェイプレイヤーのカラーを選択するには、オプションバーのカラーボックスをクリックし、カラーピッカーからカラーを選択します。
  3. (オプション)オプションバーでツールオプションを設定します。シェイプボタンの横の下向き矢印をクリックして各ツールの追加オプションを表示します(詳しくは、シェイプツールオプションを参照してください)。

  4. (オプション)シェイプにスタイルを適用するには、オプションバーのスタイルポップアップパネルからプリセットスタイルを選択します(詳しくは、プリセットスタイルの適用を参照してください)。

  5. シェイプツールで画像内をドラッグ、またはペンツールでシェイプを描画します。
    • 長方形または角丸長方形を正方形に、楕円形を円形に、またはラインの角度を 45 度単位に固定するには、Shift キーを押しながらドラッグします。
    • 中心から描画するには、シェイプの中心にする位置にポインターを置き、Alt キー(Windows)または Option キー(Mac OS)を押して、シェイプが目的のサイズになるまで任意の角または辺に向かって斜めにドラッグします。
    Photoshop 角からの描画(左)と中心からの描画(右)
    角からの描画(左)と中心からの描画(右)

    注意:

    中心からの描画は、Illustrator のスターツールおよび Illustrator と Photoshop の多角形ツールの初期設定の動作です。

ビデオ | 作成、編集、作業

Photoshop チームメンバーの Jeanne Rubbo が、シェイプレイヤーによる作成、編集、作業の方法について情報ビデオのシリーズで説明します。以下の方法を学ぶことができます。

詳しくは、描画ツールおよび文字ツールギャラリーを参照してください。

レイヤー内の複数のシェイプの描画

レイヤー上に個別のシェイプを描画したり、「合体」、「一部型抜」、「交差」、「中マド」オプションを使用してレイヤーの現在のシェイプを変更したりできます。

  1. シェイプを追加するレイヤーを選択します。
  2. 描画ツールを選択し、ツール固有のオプションを設定します(シェイプツールオプションを参照してください)。

  3. オプションバーから、次のいずれかのオプションを選択します。

    シェイプを結合 

    新しい範囲が既存のシェイプに追加されます。

    前面シェイプを削除 

    重なる範囲が既存のシェイプから削除されます。

    シェイプ範囲を交差 

    新しい範囲と既存のシェイプとの交差部分に範囲が限定されます。

    シェイプが重なる領域を中マド 

    重なる範囲が統合後の新しい範囲および既存の範囲から除外されます。

  4. 画像内で描画します。オプションバーのツールボタンをクリックすることにより、描画ツールを簡単に切り替えることができます。

ホイールシェイプの描画

既存のシェイプを切り抜くと、下のレイヤーを表示させることができます。ここではドーナツシェイプの作成方法を説明しますが、この方法は、カスタムシェイプを含め、様々なシェイプの組み合わせで使用できます。

  1. ツールパネルで楕円形ツール を選択します。このツールは、他のシェイプツールやラインツール  に隠れている場合もあります。

  2. オプションバーのメニューからシェイプが選択されていることを確認します。

  3. ドキュメントウィンドウ内でドラッグしてシェイプを描きます。Shift キーを押しながらドラッグすると、正円を描くことができます。
  4. オプションバーで、シェイプから一部型抜ボタン  を選択します。

  5. 先ほど描いたシェイプの内側をドラッグして、切り抜く部分を指定します。マウスを放すと、切り抜いた部分から先ほど描いたシェイプの下の画像が見えます。
  6. いずれかのシェイプを再配置するには、ツールパネルのパスコンポーネント選択ツール (このツールは、パス選択ツール  に隠れている場合もあります)をクリックしてパスを選択します。シェイプを新しい位置にドラッグするか、キーボードの矢印キーを使用して 1 ピクセルずつ移動します。

    注意:

    複数のパスを選択するには、Shift キーを押しながらクリックします。

カスタムシェイプの描画

シェイプポップアップパネルのシェイプを使用してカスタムシェイプを描画したり、シェイプやパスを保存してカスタムシェイプとして使用したりすることができます。

  1. カスタムシェイプツール を選択します(このツールが表示されない場合は、ツールボックスでこのボタンの近くにある長方形ツールを押し続けます)。

  2. オプションバーのシェイプポップアップパネルからシェイプを選択します。

    パネル内に使用したいシェイプがない場合は、パネルの右上隅にある矢印をクリックして、シェイプの他のカテゴリを選択します。現在のシェイプを置き換えるかどうかを確認するメッセージが表示されたら、「OK」をクリックして新しいカテゴリ内のシェイプだけを表示するか、「追加」をクリックして既に表示されているシェイプに現在のシェイプを追加します。

  3. シェイプツールで画像内をドラッグ、またはペンツールでシェイプを描画します。

カスタムシェイプとしてのシェイプまたはパスの保存

  1. パスパネルで、パス(シェイプレイヤーのベクトルマスク、作業用パスまたは保存したパス)を選択します。
  2. 編集/カスタムシェイプを定義を選択し、シェイプの名前ダイアログボックスにカスタムシェイプの名前を入力します。新しいシェイプが、オプションバーのシェイプポップアップパネルに表示されます。
  3. 新しいカスタムシェイプを新規ライブラリに保存するには、シェイプポップアップパネルメニューから「シェイプを保存」を選択します。

詳しくは、プリセットマネージャーの使用を参照してください。

ラスタライズされたシェイプの作成

ラスタライズされたシェイプを作成する場合は、描画したシェイプは、描画色で塗りつぶされラスタライズされます。ラスタライズされたシェイプをベクトルオブジェクトとして編集することはできません。ラスターシェイプは現在の描画色を使用して作成されます。

  1. レイヤーを選択します。ベクトル形式のレイヤー(例えばテキストレイヤー)に、ラスタライズされたシェイプを作成することはできません。
  2. シェイプツールを選択して、オプションバーの塗りつぶした領域を作成ボタン  をクリックします。
  3. オプションバーから、次のいずれかのオプションを選択します。

    モード

    シェイプが画像の既存のピクセルにどのように影響するかを指定できます(詳しくは、描画モードを参照してください)。

    不透明度

    シェイプの下のピクセルがどの程度まで表示されるようにするかを指定できます。不透明度が 1 %のシェイプはほぼ透明に近くなり、不透明度が 100 %のシェイプは完全に不透明になります。

    アンチエイリアス

    シェイプの境界線のピクセルが滑らかに周辺のピクセルとブレンドされます。

  4. その他のツール固有のオプションを設定します。詳しくは、シェイプツールオプションを参照してください。

  5. シェイプを描画します。

シェイプツールオプション

各シェイプツールには、次のような独自のオプションが用意されています。これらのオプションにアクセスするには、オプションバーで、シェイプボタンの右にある矢印をクリックします。

Photosho オプションバーでのシェイプツールオプションへのアクセス
オプションバーでのシェイプツールオプションへのアクセス(表示されているのはラインツールオプション)

矢印の開始点と終了点

ラインに矢印を追加します。ラインツールを選択し、「開始点」を選択するとラインの開始点に矢印が追加され、「終了点」を選択するとラインの終了点に矢印が追加されます。両方のオプションを選択すると両方の端に矢印が追加されます。ポップアップダイアログボックスにシェイプオプションが表示されます。矢印の幅と長さをラインの太さに対するパーセント(幅は 10 ~ 1000 %、長さは 10 ~ 5000 %)で指定します。矢印のへこみ具合を –50 % ~ +50 %の値で指定します。この値は、矢印の最も広い部分(矢印がラインと交わる部分)の曲率を定義します。

注意:

パス選択ツールと描画ツールを使用して矢印を直接編集することもできます。

正円

楕円形を円形に固定します。

定義比率

シェイプが作成されたときの縦横比に基づいてカスタムシェイプを描画します。

定義サイズ

シェイプが作成されたときのサイズに基づいてカスタムシェイプを描画します。

固定

「W」と「H」のテキストボックスに入力された値に基づいて、長方形、角丸長方形、楕円形、またはカスタムシェイプをサイズが固定されたシェイプとして描画します。

中心から

長方形、角丸長方形、楕円形、またはカスタムシェイプを中心から描画します。

辺のくぼみ

多角形を星形として描画します。テキストボックスにパーセントを入力して、星形の頂点を決定する半径の比率を指定します。50 %と設定すると、星形全体の半径の半分の位置に頂点が作成されます。大きな値ほど鋭く細い頂点が作成され、小さな値ほど緩やかな頂点が作成されます。

縦横比

「W」と「H」のテキストボックスに入力された値に基づいて、長方形、角丸長方形、または楕円形を縦横比が固定されたシェイプとして描画します。

半径

角丸長方形の場合は、丸みで角の丸みの半径を指定します。多角形の場合は、多角形の中心から外部点までの距離を半径で指定します。

角数

多角形の辺の個数を指定します。

コーナーを滑らかにまたはくぼみを滑らかに

コーナーまたはインデントの滑らかな多角形を描画します。

ピクセルにスナップ

長方形または角丸長方形のエッジをピクセル境界線にスナップします。

四角

長方形または角丸長方形を正方形に固定します。

制約なし

長方形、角丸長方形、楕円形、またはカスタムシェイプの幅と高さを、ドラッグして設定できるようにします。

線の太さ

ラインツールの線の太さをピクセル数で設定します。

注意:

他のシェイプツールの境界線の幅を変更するには、レイヤー/レイヤースタイル/境界線を選択します(詳しくは、カスタムレイヤースタイルの適用または編集を参照してください)。

シェイプの編集

シェイプはベクトルマスクにリンクされている塗りつぶしレイヤーです。シェイプの塗りつぶしレイヤーを編集することにより、塗りつぶすカラー、グラデーションまたはパターンを簡単に変更できます。また、シェイプのベクトルマスクを編集してシェイプのアウトラインを変更したり、レイヤーにスタイルを適用したりできます。

  • シェイプのカラーを変更するには、レイヤーパネルでシェイプレイヤーのサムネールをダブルクリックし、カラーピッカーを使用して新しいカラーを選択します。
  • シェイプをパターンやグラデーションで塗りつぶすには、レイヤーパネルでシェイプレイヤーを選択してから、レイヤー/レイヤースタイル/グラデーションオーバーレイを選択します。
  • 境界線の幅を変更するには、レイヤーパネルでシェイプレイヤーを選択してから、レイヤー/レイヤースタイル/境界線を選択します。
  • シェイプのアウトラインを変更するには、レイヤーパネルまたはパスパネルでシェイプレイヤーのベクトルマスクのサムネールをクリックします。次に、パス選択ツールとペンツールを使用してシェイプを編集します。
  • サイズや縦横比を変更せずにシェイプを移動するには、移動ツールを使用します。

詳しくは、パスコンポーネントの調整自由変形を参照してください。

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

法律上の注意   |   プライバシーポリシー