WEB業界で働く人や興味がある人に役立つ情報サイト“qam(カム)”

もの

2014/06/17

photoshopのシェイプの切り貼りで簡単お絵かき

投稿者: もの
カテゴリー: デザイン >Photoshop

今回はphotoshopのシェイプでイラストを描くにあたって、欠かせないかもしれない
小ワザをご紹介します。
といっても(これ毎回書いているような気がしますが)知ってる人にとっては基本的な作業です。
「何がワザだよ」と思う方は、温かく見守っていてください。

1. シェイプとシェイプをくっつける

シェイプは基本的に(デフォルトで入っている形以外は)四角とか丸とかしかありません。
なので、複雑な形を作ろうと思ったら、四角と丸を組み合わせたりする必要が出てきます。
別に四角いシェイプと丸いシェイプを並べたっていいのですが、1つのシェイプになっていないと、

nantoshadowfueru

・レイヤーが増える
・シャドウなどの効果がばらばらについてしまう
・なんとなく気持ち悪い

などのデメリットがあります。
なので、最終的に1つの図形として扱いたいものは、1つのシェイプにしてしまいましょう。
やり方は簡単です。

まず、普通にシェイプで四角(例)を作ります。
次に、これまた普通に丸いシェイプを作ります。

altoshinagara

そうしたら、丸いシェイプのレイヤーを選んでいる状態で、
パス選択ツール(ショートカット:A)で
シェイプのパスを全部選択しましょう。
Altキーを押しながらシェイプを触ると、全てのパスが黒くなり、
選択された状態になります。

この状態でコピー(Ctrl+C)します。そして、先に作った四角シェイプのレイヤーを、
パス選択ツールで触って選択し、貼り付けます(Ctrl+V)。

kuttsuiteiru

丸いシェイプを削除または非表示にしてみてください。
どうでしょう。
四角に丸がくっついているでしょう!

これで、四角と丸が1つのシェイプになりました。

ちなみに、くっつきはしましたがちゃんと「四角」と「丸」は残っていますので、
四角だけ移動とか、丸だけリサイズすることはいくらでも可能です。
移動ツール(V)ではなくパス選択ツール(A)でシェイプを触れば、姿が見えます。

2. シェイプをシェイプで切り抜く

足し算の次は、引き算です。
元のシェイプを、後から作ったシェイプの形で穴を空けてしまう方法です。
これは、さっきの方法にもう1ステップ加えるだけ。

さっき、四角と丸のシェイプをくっつけましたよね。
このシェイプをパス選択ツールで触ると境界線が出てくるので、丸の上でAltを押しながら
クリックしてみてください。
丸の周りのパスだけが選択されたと思います。
ここで、ツールをパス選択ツールからペンツール(P)に切り替えます。

kasanarushikaku

そのまま目線を上に持っていってください。
四角の重なったアイコンが5つ並んでいるのがお分かりでしょうか。

この中の、真ん中のアイコンをクリックしてください。
そうして、シェイプを確認すると、

kirinukarete

四角が丸で切り抜かれています!
この、四角が重なったアイコンは、
1つのシェイプの中でそれぞれの形がどういう役割を持って重なるかを
決めるものなのです。

いろいろ切り替えてみてください。

kirikaete

一番左は置いておいて、2番目を触ると、最初のように「丸がプラスされた」状態、
3番目が「丸がマイナスされた状態」になります。
さらに、4番目は「四角と丸が重なった部分のみ表示」、
5番目は逆に、「四角と丸が重なった部分だけ切り抜かれる」といった状態になります。

なんだか、いろいろできそうな気がしませんか?

シェイプって楽しいよ

このように、シェイプをペタペタ貼ったりブチブチ切り抜いたりして、いろいろな絵が描けるんです。
サイトのデザインでは、ちょっとしたアイコンを作る機会がよくありますが、そうしたときに便利ですよ。

嫌な気候が続きますが、楽しく作業しましょう。

また、使えそうなワザ?があったらご紹介しますね~。

最後までお読みいただき、ありがとうございました。

よろしければシェアしていただければ幸いです。

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

関連記事

よろしければこちらの記事もお読みください。

WEB業界ならqam!qam(カム)はWEB業界で働く人や興味がある人に役立つ情報サイトです。
マーケティングやデザイン、マークアップ(コーディング)、プログラム、トレンドなどの情報をqamライター陣が執筆。噛めば噛むほど(読めば読むほど)制作・開発や運営・運用、業界知識やノウハウを学ぶことができます。

トップへ