【Photoshop】フォトショのシェイプツールの使い方・編集方法を徹底解説

Webデザイナー、UI/UXデザイナーの@sdesignlaboです。

Photoshop（フォトショップ）のシェイプツールの使い方について徹底解説します。

どのサイトよりも分かりやすく、フォトショ初心者の方にシェイプツールの使い方、編集方法について順を追って解説いたします。
シェイプツールの使い方が分かればフォトショがさらに便利になる事間違いなしですよ！

では早速始めていきましょう！

この記事の目次

シェイプツールとは

シェイプツールを使うと左図のような図形をドラッグで簡単に描けます。
シェイプツールで描くオブジェクトは基本的に「ベクターデータ」なので、拡大縮小を行っても劣化が発生しません。
ロゴやアイコン的なアートワークを作成する際に非常に便利！

※ベクターデータとビットマップの違いはコチラで解説。

シェイプツールの基本操作

Photoshop（フォトショップ）のシェイプツールの基本的な使い方を解説します。
ベースとなる長方形ツールを理解すれば、その他シェイプも同様の手順で使えるようになりますよ！

Photoshopを導入しましょう

当記事の内容を実践するにはPhotoshop（フォトショップ）が必須です。
未導入の方はフォトプラン公式サイトから入手可能。（月額は最安の1,180円、7日間の無料体験が可能）
なお、AdobeCCのプランはコチラの記事で徹底解説しています。

STEP.1

長方形ツールを選択する

ツールバーの [ 長方形ツール ] を選択します。

左クリックを押しっぱなしにすると [ 角丸長方形ツール ] や [ 楕円形ツール ] 等の他の形状が選べます。

今回は [ 長方形ツール ] を使ってみたいと思います。

STEP.2

モードをシェイプにする

画面左上の [ 長方形ツール ] のモードが [ シェイプ ] になっている事を確認します。

もし [ パス ] または [ ピクセル ] になっている場合は [ シェイプ ] に変更してください。

※シェイプ・パス・ピクセルの違いはコチラの記事で詳しく解説しています。

STEP.3

ドラッグで長方形を描く

画面をドラッグして長方形を描きます。

[ Shift ] を押しながらドラッグすると縦横比を均一にでき、正方形を描けます。
[ Alt ] (Mac：Option) を押しながらドラッグするとオブジェクトの中心から描画できます。
[ Shift + Alt ] (Mac：Shift + Option) でドラッグするとオブジェクトの中心から正方形を描けます。覚えておくと便利ですよ。

FINISH

塗りや線の設定

画面上部の [ 塗り ] と [ 線 ] を設定すると色を変えたり線の太さや線種を変更できます。

[ W ] で幅を、[ H ] で高さを設定できます。
鎖アイコンのチェックを外すと縦横比が変更可。

※ [ Ctrl + T ] (Mac：Command + T) でも変形可。

オプションの設定

上記はシェイプツールにした時のオプション設定です。
※オプションはPhotoshop画面上部の [ ウィンドウ ] → [ オプション ] で表示可。
ツールモードの選択、塗りと線、サイズ、パスの操作、パスの整列、パスの配置、パスオプション、角丸設定、エッジを整列などが調整できます。

シェイプの編集方法

描いたシェイプオブジェクトを編集する方法です。
アンカーポイントを個別に編集し、細かくオブジェクトを編集することができます。

なお単純に拡大縮小をしたい場合は [ Ctrl + T ] (Mac：Command + T) で変形してください。

STEP.1

シェイプレイヤーをアクティブにする

Photoshopの準備はできましたか？
まだの方はフォトプラン公式サイト（月額は最安の1,180円）で入手できます。

シェイプの入っているレイヤーをアクティブにしましょう。

STEP.2

パス選択ツールに切り替える

次に [ パス選択ツール ] に切り替えます。
※ショートカットは [ A ] です。

STEP.3

編集を実行する

編集したいアンカーポイントを編集します。

なお直線を曲線にしたりアンカーポイントやハンドル、セグメントの操作方法はイラストレーターでの操作と同様に [ ペンツール(P) ] で行えます。

※ [ ペンツール ] を使用中に [ Alt ] (Mac：Option) を押している間だけ [ アンカーポイント切り替えツール ] になります。

FINISH

編集完了

好みの形状に編集できたら完成です。

ベジエ曲線の編集方法に慣れておくと綺麗な線が描けます。フォトショ、イラレ共に基本的な操作は同じなので一度マスターすれば両アプリで使用可能。
数をこなせば必ず上手くなりますよ。

Photoshopのペンツールの使い方はコチラの記事で徹底解説しています。

各種シェイプツール

Photoshopのシェイプツールには様々な種類が存在ます。
それら全てについて詳しく解説します。

長方形ツール

[ 長方形ツール ] で長方形が描けます。

[ Shift ] を押しながらドラッグすると長方形。
[ Alt + Shift ] (Mac：Option + Shift) を押しながらドラッグで中心から正方形を作れます。

幅と高さを指定するには？

画面をクリックすると幅と高さを指定して長方形を作る事ができます。
正確なサイズの長方形や正方形を作成したい時に便利ですよ。

角丸長方形ツール

角丸長方形が作れます。
個人的にはほぼ使わないツールです。

角丸長方形ツールは不要

角丸長方形は [ 長方形ツール ] で作成した長方形に [ プロパティパネル ] から角丸の設定を付与した方が使い勝手が良いです。後から簡単に角丸の半径を調整したり個別に角丸の設定ができます。
※角丸作成の詳しい手順はコチラの記事で完全解説しています！

楕円形ツール

[ 楕円形ツール ] は楕円を作れます。

[ 長方形ツール ] と同様に [ Shift ] を押しながらドラッグすると正円が作成でき、画面をクリックすると幅と高さが指定できます。

多角形ツール

[ 三角形ツール ] は多角形を作れます。
画面上部のメニューから [ 角数 ] を設定できます。

ラインツール

[ ラインツール ] は直線が描けます。
[ Shift ] を押しながらドラッグすると水平・垂直・斜め15度ずつ固定して線画描けます。

カスタムシェイプツール

[ カスタムシェイプツール ] は、あらかじめ登録した様々なシェイプを描くことができます。
自分で作成したシェイプをはじめ、フリーで配布されているシェイプを読み込むこともできます。

汎用的なシェイプを登録しておくと制作が効率化できます。すごく便利！

無料で使える高品質なカスタムシェイプ

【無料・商用可】Photoshopの高品質なカスタムシェイプ【2024年度版】

左記記事で無料＆商用利用可能な汎用性の高いカスタムシェイプを紹介しております。日々のデザイン制作で間違いなく重宝しますよ！

ペンツールを使って好きに描く

いっそ [ ペンツール (P) ] を使って完全オリジナルで描くこともできます。
ちょっとした形状ならフォトショップのペンツールでサクッと作るのも良いですが、ガッツリロゴを作る場合はイラストレーターのペンツールを使って作成し、フォトショップにコピペすると便利です。

ペンツールの使い方

ペンツールの使い方を解説しています。
イラレが使える環境ならAI形式で元データを作成しておくと汎用性が高くなりますよ。

【Photoshop】ペンツールの基本操作と写真の切り抜きを徹底解説forフォトショ初心者

【Illustrator】ペンツールを使ったトレースのテクニックforイラレ初心者

シェイプ、パス、ピクセルの違い

シェイプ、パス、ピクセルの3種類の違いや特徴について解説します。

シェイプ

シェイプは先に解説した通り、レイヤー内に目に見える図形として描かれ、拡大縮小をしても劣化が起こらないベクターデータとして扱われます。

汎用性抜群！よく使います。（…と言うか、シェイプを使えば他のモードはぶっちゃけ不要です）

パス

パスの設定で図形を描いても画面上に分かる形で描画がされません。
[ パス ] のパネルを表示させ、対象レイヤーをアクティブにすると [ 作業用パス ] が表示されます。

選択範囲を作成する際に [ パス ] を使う事が多いです。
[ シェイプ ] でも [ パス ] と同様に選択範囲は作れるのでお好みで。

ピクセル

最後に、[ ピクセル ] で図形を描くとピクセルデータとして描画されます。
シェイプと違って拡大縮小をすると画像が劣化します。

[ ピクセル ] をいきなり使うよりも、[ シェイプ ] で描いた後にレイヤーをコピーし、レイヤーパネルの右クリックメニューから [ レイヤーをラスタライズ ] でピクセルデータにする方法がオススメです。

元データを [ シェイプ ] で作成しておくと汎用性抜群です。

IllustratorのパスオブジェクトがPhotoshopで使える

コチラの記事で詳しく解説してますが、Illustrator（イラストレーター）で作成したアイコンをPhotoshop（フォトショップ）へ簡単にインポートする事ができます。
イラレでロゴやアイコンを作成し、その後フォトショにコピペで持っていく事は頻繁にあるので覚えておくと便利ですよ。Illustratorが無い方はAdobe公式サイトから入手できます。

高品質なロゴテンプレート

Photoshopで使える高品質なロゴテンプレートです。
全て商用利用可能！
制作時間の短縮と作品のクオリティアップを重視したい方に超オススメのテンプレートです。

#01 Realistic Press and Gold Foil Logo and Text Effect Mockup

Photoshop形式のロゴテンプレートです。
なお、Photoshopは公式サイトのフォトプランがどの販路よりもお得に導入できる方法です。

ダウンロード

#02 3D Wooden Wall Sign Logo Mockup

木目調のロゴテンプレートです。
こちらもPhotoshop形式、文字ツールを使ってテキストを変えるだけでオリジナルロゴの完成！

ダウンロード

#03 Wooden Sign on Brick Wall Mockup

丸形の板に焼き印のようなイメージのロゴテンプレートです。
喫茶店等に合いそうです。

ダウンロード

#04 Paper Cut Out Logo and Text Effect Mockup

紙を切り抜いたような質感が表現できるテンプレートです。

ダウンロード

#05 Embossed Logo Mockup

エンボス加工がされたロゴテンプレートです。
サークル型のロゴがキレイです。

ダウンロード

Photoshop用とIllustrator用のロゴテンプレート

【商用可】高品質なロゴのテンプレート50選【Illustrator・Photoshop】

フォトショップとイラストレーター用の高品質なロゴテンプレート50選です。
全て商用利用可能！

ワンランク上のテンプレート素材

Photoshopを学習する上で、プロが作成した生データを研究する事は重要です。

下記記事でプロが作成した高品質で汎用性の高いテンプレート素材を紹介しています。
全て商用利用可能、テキストや画像を変えるだけでプロの品質が出せます。

制作の手間を劇的に軽減してくれるだけでなく、スキルアップの為の教材としても最適ですよ。

例えばクリエイターの就職や転職に必須のポートフォリオ。
プロのテンプレートで美しいレイアウトや余白、文字サイズが一瞬で作成可能。内定獲得の可能性が格段にアップします！
厳選！ポートフォリオ用テンプレート40選

デザイン制作を学ぶ導入としてオススメの名刺デザイン。
想像だけで作るとイマイチになりがちですが、良質なテンプレートを元に作るだけで吸収できる情報の質が段違い！
相手に舐められない名刺テンプレート50選

バナーはフォトショップを練習する上で良質な教材です。
中途半端な素材を参考にせず、高品質なテンプレートを参考にするだけで学習効率が大幅に向上しますよ。
ハイクオリティなバナーテンプレート50選

紙素材のポートフォリオだけでなく、デジタル媒体に特化したポートフォリオも作成しておくと就職や仕事を獲得する上で有利です。他者と差を付けてより高みを目指しましょう！
デジタル媒体向けポートフォリオテンプレ素材35選

制作物の説得力を高められる高品質なモックアップ素材を厳選しました。ゼロからモックを準備するには膨大な労力が必要ですが、素材を使えば一瞬！
様々なモックアップテンプレート57選

良質な素材をもっと見る

上記で紹介しているテンプレートはごく一部。
下記記事で良質な素材を紹介しております。併せてチェックしてください！

クリエイティブ業務で使える優良素材まとめ

【最強素材サイト】Adobe Stockのテンプレートがチート級に便利な件について

まとめ

以上、Photoshop（フォトショップ）のシェイプツールの使い方と編集方法についてでした。

シェイプはベクターデータなので拡大縮小による画像の劣化が起こらないので、使い勝手が非常に良いデータ形式です。
汎用的な素材をシェイプで作成し、登録しておくと制作の効率化に繋がります。

イラスト制作よりもWEBデザインやレイアウト作業でよく使う機能ですが、便利すぎる機能なので覚えておいて損はありません。
文字ツールと併せて基本機能を理解しておくとこのようなWEB用のバナーがサクッと作れますよ！

ではまた！