超現場ブログ

BLOG

PhotoshopでIllustratorのパスファインダーみたいな中マドを作る

こんにちは、Akros Web & Business Design Academy 札幌校の三本です。

WEBのデザインでは、Phooshopを使うことが多いのですが、パスを使った図形やイラスト等は、Illustratorの方が便利ですよね?
Photoshopでも同じように出来たらいいのに・・・と思うこともしばしば。

今回は、Photoshopの機能を使って、Illustratorのパスファインダー機能のように、シェイプ図形で「中マド」を作ってみたいと思います。

下準備

まずは、適当な大きさのカンバスを用意して、分かりやすくするために、全面を塗りつぶしたレイヤーを背景として作成します。
その上に、長方形ツール、楕円形ツールを使ってシェイプを2つ作成します。
この時、中マドにしたい部分を重ね合わせておきます。
img_20171205-1

レイヤーは、このような状態になっています。
img_20171205-2

シェイプレイヤーの結合

次に、2つ用意したシェイプを1つのレイヤーに結合します。
手順としては、レイヤーパネルでShiftキーを押しながらそれぞれのレイヤーを選択して、右クリックしたコンテキストメニューから「シェイプの結合」を選択します。

シェイプを結合すると塗りの部分が前面にあるシェイプの色に変わります。
img_20171205-3

レイヤーはこのような状態になります。
img_20171205-4

パスコンポーネント選択ツール

ツールバーにて、パスコンポーネント選択ツール(黒い矢印カーソルみたいなアイコン)を選択します。
カンバス上で、ドラッグしてシェイプ全体を囲むようにして選択します。
下図はシェイプ全体が選択された状態です。
img_20171205-5

パスコンポーネント選択ツールが、選ばれた状態で、オプションバーを確認してみると、いくつかアイコンが並んでいます。
赤丸で囲んだアイコンをクリックすると下図のようなコンテキストメニューが表示されるので、「シェイプが重なる領域を中マド」を選択します。
img_20171205-6

これでIllustratorのような中マドのシェイプが完成です。
img_20171205-7

まとめ

今回は、Photoshopの機能を使って、Illustratorのパスファインダーのような中マド図形を作成してみました。
知っていれば難しくない作業ですが、知らないままですとIllustratorで作成した中マド図形をPhotoshopに読み込んで・・・みたいな遠回りをしてしまうこともあるかもしれません。
Photoshopはバージョンアップに伴って機能が追加されたり使い勝手が良くなったりしていますので、この機会にゼヒ勉強してみてはいかがでしょうか?

資料請求はこちら
体験レッスンはこちら

・2019/2/25追記
Akros東京校ではマンツーマンのPRO講座以外にも短期で学べる「短期講座」も開催しています。
初心者・独学で不安な方は抑えておきたい!Webサイト制作を知る講座
魅せるWebデザインの基礎講座 -1.デザインってなに?-
基礎理論から考える!LP(ランディングページ)の作り方・最適化講座
AIに負けない!未来のUI/UXデザイナー講座(基礎理論編)
Photoshopバナー制作実践講座
これから使い始める人のための 「Git」使い方講座
独立・起業を応援する『Founders Academy』

上記以外にも限定講座なども開校しておりますので気になる方はぜひご確認・ご受講ください。
短期講座

是非ご参加ください。


CONTACT

お問合せ

体験お申込み・資料請求・ご質問・
ご相談はこちらから

受付専用フリーダイヤル

フリーダイヤル 0120-941-071

受付時間:10:00〜18:00 (土日祝定休)

Akrosでは、受講生と一緒に成長したい仲間を募集しています