スタッフBLOG

おはようございます！
本日のブログ当番　CGデザイナーのJ.KUMAです。

最近急激に寒くなりましたね(・_・;)
暖かくして体調を崩さないようにお気をつけくださいね！

さてさて！
今日はPhotoshopの「シェイプ機能」についてお話したいと思います（*＾▽＾*）

2Dデザインのお仕事ではインターフェイスやボタン、ロゴ等の素材を作成する事が良くあるのですが、そこで大変お世話になるのが「シェイプ機能」です。

特にバリエーションを量産しないといけない素材においては、手描きで作成する事はほとんどなくシェイプレイヤーにレイヤースタイルをかけて完成させる事が多いかと思います。

シェイプはベクタデータなので編集を繰り返しても劣化せず、後からの調整も容易でデータサイズも軽量と開発にとって良い事ずくめなのです。

シェイプ機能の基礎的な使い方をロゴ作成を例に簡単に説明しますので少しでも興味をもってもらえれば良いなと思います(ゝ∀・*)ノ♪

￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣
①まずはテキストを打ちこみます。


￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣
②作成したテキストレイヤーを【右クリック】＞【シェイプに変換】でテキストをシェイプに変換ができます。

※後でフォントの変更が入る事が多々あるのでテキストレイヤーはコピーして残しておくのが吉！

￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣
③ツールバーのパスコンポーネント選択ツールを選択すると画面上部にシェイプの属性を設定出来るメニューが出てきます。



このメニューでシェイプを塗りつぶしたりアウトラインをつけたりの設定が出来ます。
このパーツは単色塗りつぶし、線なしのままにしておきます。

￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣
④次に外縁部分を作成してボリュームを出したいので、③のシェイプレイヤーをコピーし今度は属性を塗りつぶしなし、線ありにします。



￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣
⑤書体のイメージ的にエッジを出したいと思ったので線の設定を変えます。

赤線で囲った項目から線オプションで線の設定する事ができます。
「整列」はシェイプに対して内側中央外側のどこに線を引くか、「線端」はシェイプの先っちょの形状、「角」はシェイプの曲がり角の形状をそれぞれを設定できます。
ここでは角を出す設定にしたいと思います。※上記画像参照

綺麗なエッジが出てくれました。

￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣
⑤作成した各シェイプレイヤーにベベルエンボスやカラーグラデーション等のレイヤースタイルをつけて仕上げます。



レイヤースタイルの詳細を一つ一つ説明すると大変なので省略しますが以前に書いたブログの内容と同様の事をしています。

Photoshopのレイヤースタイルを重ねて綺麗な金文字を作る

￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣
⑥イメージが完成したらスマートオブジェクト化する。


まとめたいレイヤーを選択して





でまとまります。
レイヤーをまとめてスマートオブジェクトに変換しておくと一つのオブジェクトとして編集しやすくなるのでオススメです！
※レイヤー右下のアイコンをダブルクリックする事でいつでも編集可能です。

￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣
長くなりましたがなんとなくでもシェイプがどんなものか伝わっていれば幸いです。

今回は簡易的にテキストからのシェイプ機能を紹介しましたが、ペンツールを使用して好きな形のシェイプを作成したり、色んなレイヤースタイルをかけたシェイプを複数重ねる事でとても幅の広い表現が可能になります。

理解すると実践でとても役に立つので是非挑戦してみてください！