Lopan.jp

Photoshopのシェイプでできること。

Shape of Photoshop CS4 / CS6

PhotoshopをWebデザイン制作として使ってると、画像を編集する事よりも、シェイプを使って図形を描く事の方が多い気がします。Illustratorで描くのと違って、ピクセル具合も気にしながら描けるので、小さいアイコンなんかはPhotoshop上で作った方がきれいに描けたりします。
それでいてパスなので、拡大しても劣化しないし、ダブルクリックでカンタンに色を変えられるし、もちろんIllustratorでも使い回せるし、いろいろ重宝ポイントがあるんです。
そんな万能シェイプの機能や特長について、個人的なまとめです。
※この記事では、主にPhotoshop CS4を使っていますが、Photoshop CS6との違いも、分かる範囲で注釈入れてます。
※OSはMac OS X 10.6 Snow Leopardを使ってますが、Mac OS X 10.8 Mountain Lionとの違いも、分かる範囲で入れてます。

シェイプの基本。

まずは前置き。記事中で、言ってる意味が分からなかったらこの章を参照のこと。
Photoshopの画面に見る、シェイプを扱うためのパネルやツール、この記事内での呼称についてまとめます:)。

シェイプを扱うパネル

ツールパネル
Photoshopで画像処理や編集をするためのツールを収めたパネルです。
中でもシェイプを扱うツールは、ペンツール選択ツールシェイプツールの3つ(かな?)
ツールオプションバー
選択しているツールのオプション機能がここに表示されます。
依って、選択しているツールによって表示内容が変わります。
レイヤーパネル
カンバス上にあるレイヤーの一覧がここに表示されます。シェイプにはシェイプ専用のレイヤーがあります。
パスパネル
カンバス中にあるパスの一覧がここに表示されます。


※上図のパネルのレイアウトは初期設定のものと異なります。

シェイプについて

シェイプは以下の3つの要素で構成されています。

アンカーポイント
パスを描画するためののこと。
パス
アンカーポイントを繋いだのこと(=シェイプの輪郭のこと)
※パスは、アンカーポイントの両脇から出ている方向線(ハンドル)の方向に進みながら、次のアンカーポイントに繋がる。
シェイプ
パスを使って描かれた図形のこと。

シェイプの選択状態

シェイプを動かしたり変形したりするには、シェイプを選択しないといけません。
シェイプを選択すること、パスコンポーネントを選択すること、アンカーポイントを選択することは微妙に違うので、その辺りをまとめます。
シェイプはカンバス上に表示された図形のことを指し、シェイプの骨格(図形の骨組み)の部分はパスコンポーネントと呼ぶみたいです。

シェイプレイヤーの選択
レイヤーパネルのレイヤーをクリックすると、そのレイヤーが選択された状態になり、背景が青くなります。
シェイプを移動できますが、変形はできません。
シェイプの選択
シェイプレイヤーのパスのサムネールをクリックすると、そのレイヤー上のシェイプが選択された状態になって、カンバスにはパス(シェイプの輪郭)が黒い実線で表示されます。
パスの選択
パスコンポーネント選択ツールでカンバスのシェイプをクリックすると、そのシェイプのパスコンポーネントが選択され、アンカーポイントも表示されます。
パスの重なり方などが変更できるようになります。
アンカーポイントの選択
パス選択ツールでパス(シェイプの輪郭)をクリックすると、アンカーポイントが白い四角で表示されます。アンカーポイントをクリックすると黒くなって選択された状態になります。
バウンディングボックス
シェイプを選択、もしくわもしくはパスを選択した状態で+Tを同時に押すと、バウンディングボックスが表示され、シェイプを変形できるようになります。returnを押すと、バウンディングボックスが解除されます。
オプションパネルで変形
バウンディングボックスをドラッグしながら手動で変形することもできますが、オプションパネルに数値を入力すれば、より正確に変形することができます。
アンカーポイントの追加・削除、パスの変形
ペンツールでパス上をクリックすると、そこにアンカーポイントが追加され、アンカーポイント上をクリックするとそのアンカーポイントが削除されます。
パス選択ツールでアンカーポイントを移動したり、方向線(ハンドル)を動かすことでシェイプを変形することができます。

シェイプを扱うツール

ペンツール
アンカーポイントを追加・削除しながら、パスで自由な図形を描く(シェイプを作る)ことができます。
フリーフォームペンツール、アンカーポイントの追加ツール、アンカーポイントの削除ツール、アンカーポイントの切り替えツールに四変化します。
パスコンポーネント選択ツール
ひとかたまりのパスコンポーネントを選択します。
パス選択ツール
パスやアンカーポイントだけを選択することができます。
長方形ツール
四角形を描くためのツール。shiftを押しながらドラッグすると正方形が描けます。
角丸長方形ツール
角が丸い四角形を描くためのツール。shiftを押しながらドラッグすると角が丸い正方形が描けます。角の丸みは「丸み」というところで設定できます(※描画後に丸みを変更する事はできない)←プラグインを入れればできるみたい
丸みの数値は角の半径のこと
楕円形ツール
楕円形を描くためのツール。shiftを押しながらドラッグすると正円が描けます。
多角形ツール
多角形を描くためのツール。角数を指定してお好きな多角形が描けます。多角形オプションで「星形」にチェックを入れると、ギザギザの多角形になります(※スタンダードな星形になるのは角数が「5」の時)
ザギザが多いとバクダンみたいに
ラインツール
線状のシェイプを描くためのツール。ただし描画後は普通の矩形シェイプとして扱われます。
先端と終端を矢印にする事もできます。
矢印の大きさは線の太さに対しての比率で指定
カスタムシェイプツール
登録してあるシェイプを描くためのツール。オリジナルのシェイプをカスタムシェイプとして定義する事もできます。

目次に戻る

パスと、シェイプと、ピクセル。

ペンツールとシェイプツールを使ってできることをまとめます。

ツールモード

ペンツールとシェイプツールを使っている時、オプションバーに下図のようなアイコン(CS6ではプルダウンボタン)が出現します。ここを切り替える事で、「パスを描くモード」と「シェイプを描くモード」と「ピクセルで描くモード(シェイプツールのみ)」を切り替えることができます。

ここでツールモードを選択する

シェイプレイヤー(シェイプ)
カンバスに図形を描くと、レイヤーパネルに「シェイプ 1」というシェイプ専用のレイヤーが作られます。
このレイヤーは普通のレイヤーと違って、レイヤー自体に色情報(?)を持っていて、レイヤーをダブルクリックすると、図形の色を変えることができます。
パス
カンバスに図形を描くと、レイヤーパネルには表示されず、パスパネルに「作業用パス」というのが作られます。作業用パスはこのままだと、新たにパスを描くと消えちゃいますが、ダブルクリックして「パス名」を付ければ保存しておけます。
塗りつぶした領域を作成(ピクセル)
カンバスに図形を描くと、選択中のレイヤーに、塗りつぶした図形が描かれます(※シェイプツール使用時のみ)
シェイプは残らないし、新規レイヤーも作られず、ただその場をその図形で塗りつぶすだけです。

目次に戻る

パスパネルでできること

パスパネルに作成したパスは、その輪郭を利用して選択範囲を作成したり、その形に塗りつぶした図形を作ったり、その輪郭をなぞった線画を描いたりできます。

パスをのサムネールを選択した状態で右クリックするとメニューが表示される

選択範囲を作成...
パスと同じ形の選択範囲を作成します。
画像のある部分を、何度も選択し直したい時などに、「選択範囲予備軍」みたいな感じで使ってます。
パスの塗りつぶし...
パスの中身を、べた塗りやパターンで塗りつぶします。
前述した「塗りつぶした領域を作成(ピクセル)」と同じ感じく、選択中のレイヤーに、指定した色で塗りつぶした図形が描かれます。
パスの境界線を描く...
指定したツールで、パスをなぞります。
同じストロークをいろんなブラシで描き分けたい時なんかに使えます。

目次に戻る

パスとシェイプの関係

シェイプは、塗りつぶしレイヤーをパスでマスクしたものです(たぶん)
そんなわけで、パスはシェイプにできるし、シェイプはパスにできます。パスとシェイプの関係についてのまとめ。

パスをシェイプに

パスパネルのパスを選択した状態で、「レイヤー」→「塗りつぶしレイヤー」→「ベタ塗り...」を選択すると、そのパスの形でシェイプが作られます。

CS6では、ツールモードをパスにしてる時にオプションバーに出現する「シェイプ」ボタンをクリックするだけで、パスがそのままシェイプになります。

シェイプのパスだけ複製

パスパネルのベクトルマスクをダブルクリックすると、パスだけが複製されます。

シェイプレイヤーを塗りつぶしレイヤーに

シェイプレイヤーのパスの上で右クリックして「ベクトルマスクを削除」を選択すると、シェイプレイヤーからパスが削除され、塗りつぶしレイヤーになります。※塗りつぶしレイヤーについては後述

※CS6ではできません。
CS6では、普通のレイヤーをマスクした時のパスは「ベクトルマスク」、シェイプレイヤーをマスクした時のパスは「シェイプパス」になります。
ベクトルマスクはレイヤーパネルにもサムネールが表示されますが、シェイプパスはレイヤーパネルにサムネール表示がなく、シェイプパスを削除すると、シェイプレイヤーごと削除されます。

目次に戻る

シェイプの重ね方と重ねる順番

ペンツールやシェイプツールを使っている時にオプションバーに登場する下記アイコンで、シェイプの重なり方(塗りつぶす面)を変更することができます。

パスの重なり順はここで操作

以下は、重なり方アイコンのそれぞれの特徴です。※カッコの中はCS6での表記。

新規シェイプレイヤーを作成(新規レイヤー)
シェイプレイヤーを新たに作成します。※シェイプを選択していない状態だと、このアイコンしか選ぶことができません。
パス範囲に合体(+)(シェイプを結合)
シェイプが重なって、同化したようになります。
パス領域から一部型抜(-)(前面シェイプを削除)
今あるシェイプを、これから作るシェイプで型抜きします。先にあったシェイプを削除すると、このシェイプのまわりが塗りつぶされます(下図いちばん右)
パス範囲を交差(シェイプ範囲を交差)
シェイプが重なったところだけを表示します。
パスが重なる領域を中マド(シェイプが重なる領域を中マド)
シェイプが重なったところを非表示にします。(※読みは「なかまど」。)
組み合わせ(シェイプコンポーネントを結合)
シェイプレイヤー上の複数のシェイプをひとつに結合します(重なった部分はひとつに繋がり、閉じてないパスは閉じられる)
同じシェイプレイヤー上のパスコンポーネントを複数選択している場合に、利用できるようになります。

パスコンポーネントにも、レイヤーと同じように前面背面があり、重なり順は、シェイプを描いた順となります(CS6ではこのシェイプの重なり順を操作する事ができます。)
シェイプの重なり方は、あとから作ったシェイプ(手前にあるシェイプ)のほうが優先されます。下図はそのテストで、手順は以下の通りです。

  1. 長方形ツールで「新規シェイプレイヤーを作成」する

  2. 重なり方を「パス範囲に合体(+)」にして、角丸長方形ツールでシェイプを作成

  3. さらに、重なり方を「パス領域から一部型抜(-)」にして、楕円形ツールでシェイプを作成

  4. 長方形シェイプを切り取って+X同じ位置にペースト+V

  5. 角丸長方形シェイプも同じく、切り取って同じ位置にペースト

  6. 角丸長方形シェイプの重なり方を「パスが重なる領域を中マド」に変更

目次に戻る

塗りつぶしレイヤー

「レイヤー」→「塗りつぶしレイヤー」を選択すると、カンバスサイズを変えても途切れることなく塗りつぶされたレイヤーを作成できます。
塗りつぶしレイヤーとは、ベクトルマスクされていない(シェイプパスがない)シェイプレイヤーのことで、以下の3タイプから選んで作成できます。

べた塗り
ベクトルマスクされていないシェイプレイヤーが作られる。
グラデーション
塗りつぶし方がグラデーションな、特別なシェイプレイヤーが作られる。カンバスサイズを変えると、カンバスサイズに合わせてグラデーションの比率が変わる(べた塗りレイヤーにレイヤースタイルで「グラデーションオーバーレイ」を適用した時と同じ)
パターン
塗りつぶし方がパターンな、特別なシェイプレイヤーが作られる。カンバスサイズを変えても、パターンの比率は変わらない(べた塗りレイヤーにレイヤースタイルで「パターンオーバーレイ」を適用した時と同じ)

パターンの塗りつぶしレイヤーにレイヤースタイルを適用すれば、下図みたく、1レイヤーでパターンを二重に適用できて便利:)。

ノイズのパターンレイヤーに、斜線のパターンオーバーレイを重ねた

目次に戻る

シェイプのルール。

画像をすごーく拡大していくと、四角がたくさん並んでるのが分かると思います。この四角ひとつひとつがピクセルで、この四角の境界線の事を、(格子状に走ってるので)ピクセルグリッドと言います。
※ピクセルグリッドの表示/非表示は、「ビュー」→「表示」→「ピクセルグリッド」で切り替えられます。
CS6では「表示」→「表示・非表示」→「ピクセルグリッド」

ボケちゃう理由

シェイプのパスがこのグリッドに沿って引かれてないと、シェイプの輪郭がボケちゃいます:(。
けどパスがちゃんとグリッドに沿っていれば、輪郭はボケずにクッキリします:)。

ボケちゃう例とボケない例

ボケないシェイプの描き方

パスをグリッドにちゃんと沿わせるには、描き始めが肝心で、ちょっとしたコツがあります。
それは、表示倍率を100%にしてから描くこと。+1を同時にプッシュすればいつでもどこでも100%表示になります:)。
表示倍率を100%にして描けば、グリッドの線上にアンカーポイントが作られる(=グリッドに沿ったパスが描ける)ので輪郭がボケない図形が描けます。←※Mac OS X 10.8 Mountain Lionでは違うみたいなので後述します:(。
これは、表示倍率によって、アンカーポイントの描画可能位置が変わるためです。たぶん。

表示倍率はファイル名の後と、カンバス左下に表示される

表示倍率100%の時は1pxは1pxですが、表示倍率200%の時は1pxが2等分、300%の時は1pxが3等分、400%の時は4等分、500%の時は5等分…されます。つまり、表示倍率が500%の状態でも、グリッドに沿ったパスは描けますが、確率は1/52(25分の1)って事です。

矢印キーを押した時の移動量も同じように変わります。なので例えば下図みたいに、パスが、グリッドとグリッドのちょうど真ん中ら辺を通ってるなーっていう時は、表示倍率を200%にして矢印キーを1回プッシュすれば、クッキリになります。

ボケたシェイプは表示倍率を変えて微調整

補足:ピクセルにスナップ

長方形ツール(角丸長方形ツール)の「長方形オプション(角丸長方形オプション)」というところで「ピクセルにスナップ」にチェックしておけば、ズームした状態でもグリッドに沿ったシェイプを描くことができます。ここにチェックを入れていても前述の移動量の件は有効なので、チェックを入れておいた方が便利です。

他のシェイプツールにはない

CS6では、グリッドにスナップ

※CS6では、同じような機能を「Photoshop」→「環境設定」→「一般...」の「ベクトルツールと変形をピクセルグリッドにスナップ」という項目で設定できます。
初期設定ではチェックが入った状態なので、前述の表示倍率とかの話はここのチェックを外してからでないとできないのでご注意。

※CS6の場合は、ここにチェックが入っていると、どんな時もグリッドにスナップする(矢印を押した時も1pxずつ移動する)ようになるので、前述の移動量の件は無効になります。
チェックを外すと、どんな時もグリッドにスナップしなくなりますが、前述の移動量の件は有効なので、チェックは外しておいた方が便利かもしれません。

チェックしておくと小数点以下は表示されない

※ただし、Mountain Lionの場合は、チェックを外すと、表示倍率100%の時もグリッドに沿わなくなります。

Snow Leopardは大丈夫

※CS6では他にも「エッジを整列」というのがあって、チェックしておくと、パスがグリッドに沿ってなくても、輪郭がボケずに描画されます(四捨五入してる感じなのかな?)

パス自体はグリッドに沿っていない

目次に戻る

シェイプを使った小ワザ。

シェイプを使った些細なチュートリアルを紹介します:)。

シェイプで矢印

前述までのシェイプの特徴をふまえて、シェイプできれいな矢印を作ってみます(ここでは右向き矢印を作ります)

  1. 表示倍率100%の状態で、長方形ツールを使って正方形を描き、45度回転する(最初の正方形は奇数pxがおすすめ)

  2. パス選択ツールで左側のアンカーポイントだけを選択しdeleteしたら、shiftoptionを同時プッシュ(同じパスが10px右に複製される)

  3. ペンツールを使ってふたつのアンカーポイントを繋ぐ

  4. 左上の尖った部分のアンカーポイントを選択し、を5回ずつプッシュ(左下も同じように)

  5. 最後にshiftoptionを同時プッシュ+(今度はoptionなしで)shiftを同時プッシュ(同じパスコンポーネントが20px右に複製される)、で完成!(※最初の正方形を偶数pxにすると、下図いちばん右のように、先っぽが2pxの矢印になる)

目次に戻る

シェイプでマスク

画像から、人物だけをくり抜いたりするのに便利なマスク。シェイプでやれば、微調整がカンタンになります。
シェイプでマスクするには2つの方法があります。

クリッピングマスク

クリッピングマスクとは、上のレイヤーの図形や描画を、下のレイヤーの図形や描画の形で型抜きすること。

型抜きしたいレイヤーの下に、図形が描かれたレイヤーを用意して、+option+Gを同時にプッシュすると、上のレイヤーが下のレイヤーの形にくり抜かれます(下図参照)
下図は、お地蔵さんの画像を、シェイプで描いた吹き出しの形でクリッピングマスクしたところ。

レイヤースタイルを適用したり、マスクの中身だけ移動できたり、編集もラクチンです:)。

ベクトルマスク

シェイプレイヤー以外の画像でも、輪郭がクッキリしたものをマスクするときには、シェイプでマスクすると便利な気がします。

  1. ツールモードを「パス」にして、切り抜くものの輪郭に沿ってパスを描く

  2. パスを描き終えたらパスに名前を付けて保存

  3. 「レイヤー」→「ベクトルマスク」→「現在のパス」を選択

ベクトルマスクしたレイヤーをさらにクリッピングマスクする事もできます;)。
さらにレイヤーマスクもかけちゃえば、最大四重のマスクがかけられるって事ですね!

クリッピングマスク+レイヤーマスク、ベクトルマスク+レイヤーマスク

目次に戻る

テキストボックスもシェイプ

Photoshopでテキストを入力する時、ドラッグしてテキストボックスを作れば、文字組みとか表現するのに便利ですよね。

けど、このテキストボックスをシェイプにするともっと便利です:)。

パスを選択した状態で、テキストツールをそのパスの上に持って行くと、ツールの形が変わります。
その状態でクリックすると、その図形がテキストボックスになって、その図形の中にテキストが書けるようになります。

普通のシェイプと同じように変形できるので、画像に回り込むテキストを表現する時とかに便利です:)。
また、テキストボックスのシェイプは他のシェイプと違って、新たにパスを描くと勝手にくっつきます。

目次に戻る

めくれたような影もシェイプ

  1. 写真用のシェイプ(色は適当、ここでは#cdcdcd)と、影用のシェイプ(色は#000000)を用意

  2. レイヤースタイル「境界線」で、写真のフチドリをつける

  3. 影用のシェイプレイヤーの不透明度を20%にする

  4. 影用のシェイプの形を下図のように変形

  5. レイヤースタイル「光彩(外側)」を適用すればできあがり。
    シェイプの形を変えれば、影の感じも変えられます:)。

目次に戻る

あとがき

シェイプについて、知ってる事から知らなかった事までまとめてみました。
CS4とCS6(CS5は持っていないのですみません)との違いについておさらいできてよかったかなと思います。他にも見つけたらこっそり追記するかもです:)。
個人的に、「グリッドにスナップ」にチェックを入れておかなくても表示倍率が100%ならボケずに描けると思っていたのに、Mountain Lionではできなくなっちゃってたのが一番ショックでした…X(。あれはOSの仕様だったんですね。もしかしたら他にもOS間の違いはあるかもしれませんね…。こちらも気づいたらこっそり追記します:)。

以上、Photoshopのシェイプでできることでした。

  • このエントリーをはてなブックマークに追加
  • ツイート

Comment & Pingback

13 Comments! for Photoshopのシェイプでできること。

  1. たびびと

    短い説明がわかりやすくて、とても参考になりました!
    わかりやすいって、素晴らしい!!
    ありがとうございます☆

    Reply

    • _watercolor

      > たびびとさん
      コメントありがとうございますー!
      やっぱり説明は短いほうがいいですよね…。。
      なるだけ簡潔にまとめれるように頑張りますーX)!
      今後ともLopan.jpをよろしくです!

      Reply

  2. Pingback: Photoshopのシェイプ機能を使いこなそう。漫画を描く目的で。

  3. 通りすがり

    シェイプレイヤーはCS6で結構変わったから、別記事にでも内容追加してみるといいかもですねー。

    ・illustratorのように塗りだけでなく線(ストローク)の指定もできるようになった(点線が簡単に作れるようになった)
    ・属性パネルでぼかし具合や濃度の指定ができるようになった(ベクトルマスクが更に便利に!編集可能なぼかしマスクが楽に作れる)
    ・シェイプレイヤー同士のレイヤー結合(Command + E)をしてもラスタライズされなくなった(複数のシェイプレイヤーをまとめるのが楽になった)

    などなど

    Reply

    • _watercolor

      > 通りすがりさん、コメントありがとうございます!
      たしかにそうですねー。PhotoshopのシェイプはもうほとんどIllustratorと同じように扱えますもんね…!
      属性パネルは初めて知りました!これは便利だーXD。
      新しい機能も、使いこなせるようになったら記事にしてみますね;)!
      アドバイス感謝です!

      Reply

  4. sample

    「もしくわ」はないわーーー

    Reply

    • _watercolor

      > sampleさん
      コメントありがとうございます!
      ですねー「もしくは」ですねーX)。
      おそれいります、直しておきますー!

      Reply

  5. Pingback: 2013年の人気記事と、今年ブックマークして心に残ってる記事総まとめ! *Ateitexe

  6. Pingback: Twitter 人気のつぶやき 3/16~3/22 2013 | Webクリエイターボックス

  7. aqua

    はじめまして。
    最近転職をしましてWeb知識を勉強中のものです:)
    現役デザイナさんのブログを色々と見させていただいているのですが、
    Lopanさんの記事内容の充実さ、読みやすさは素晴らしいと思います。

    私は、周りがなかなか詳しく教えてくれる環境ではないので…本当に助かっています。
    黙々と初めから読ませていただいています!
    これからもずっと応援しています。

    Reply

    • _watercolor

      > aquaさん
      コメントありがとうございます。
      少しでもお役に立てたのならうれしいです!
      すっごく励みになりましたーXD!がんばりますッ!

      Reply

  8. Pingback: Photoshopのシェイプでできること。 < ブログ < Webデザインなひと | webデザインに関するページをカテゴライズしてブックマークするよ

  9. Pingback: シェイプの事が綺麗にまとまってて良い記事( ´ ω ` ) このブログ、iPhoneから見たときも綺麗で見やすいなー>Photoshopのシェイプでできること。 | shunword BLOG

コメントを残す

*がついている欄は必須項目です。