連載
» 2009年06月02日 10時00分 公開

D89 デザインTips - デザインのハウツーテクニック集(2):Photoshopで図形を描いて色を塗るには (3/3)

[山崎基央, 福田寅成,@IT]
前のページへ 1|2|3       

Photoshopで図形や写真を動かすには

移動は、基本的にレイヤ単位

 Photoshopで描いた矩形や円、または写真の移動は、ツールボックスの一番上にある[移動ツール]を使います。

図1 [移動ツール] 図1 [移動ツール]

 移動は基本的にレイヤ単位で行われます。例えば、同じレイヤ上に円と矩形を書いた場合、“何もしなければ”別々に動かすことはできません。新規にレイヤ(「レイヤー1」)を作成し、円と矩形を下記のように描画してください。

 描画したら[Ctrl]+[D]キーかメニューの[選択範囲]→[選択解除]、もしくはキャンバスの何もない部分をクリックして、図形の選択を解除しておいてください。

図2 同じレイヤへの図形の描画 図2 同じレイヤへの図形の描画

 [移動ツール]で円だけを動かしてみようとしてみてください。一緒に矩形も動きましたでしょうか。

レイヤを分けた描画

 円と矩形を別々に動かしたい場合は、図3のように新しいレイヤを作って図形を描いていきます。再度、新規にファイルを作成しレイヤを2つにして、Tips「[写真加工]Photoshopで図形を描いて色を塗るには」「[写真加工]Photoshopでさまざまな図形を描くには」を参考に、それぞれに円と矩形を描画してみましょう。

図3 レイヤを分けた描画 図3 レイヤを分けた描画

 [レイヤー]パレットで移動したいレイヤを選択します(今回は、矩形のレイヤを選択しましょう)。どうでしょうか? 意図したところに矩形が動きましたか?

 円上でクリックしても矩形が動きますね? 矩形が動かなくて円が動いてしまった人は、画面上部にある[オプションバー]を見てみてください。

図4 [移動ツール]の[オプションバー] 図4 [移動ツール]の[オプションバー]

 [自動選択]に、チェックが入っていないでしょうか? 入っていれば、チェックを外してください。このオプションは、クリックしたところにある一番上のレイヤを自動で選択して、移動対象にしてくれる機能です。グループまたはレイヤに対して自動選択されるようになっています。

 人によっては使い方次第で、とても便利な機能だと思います。

2つの図形(または、写真)を別々に動かすには?

 同じレイヤの図形は別々に移動できないと前述しました。しかし、[選択範囲ツール]を使うことで円と矩形を別々に動かせます。まず、ツールパレットから[選択範囲]を選びます。

図5 [選択範囲ツール] 図5 [選択範囲ツール]

 図2で作ったような円と矩形が同居しているレイヤを用意して、矩形だけが選択範囲内に入るようにドラッグ&ドロップします。

図6 矩形の選択 図6 矩形の選択

 この状態で[移動ツール]を選択して、キャンバス上で動かしてみましょう。どうでしょうか。矩形だけが動きますね?

 同一レイヤ上の場合、矩形と円が重なると図形が一体化してしまうので、同一レイヤ上での移動は慎重に行いましょう(※今回のTIPSでファイルを新規作成した際にできる「背景」レイヤは使いませんでした。このレイヤはそのままだと使い辛く、無視されたり、削除されたり、普通のレイヤに変換されたりするレイヤです)。

Profile

山崎 基央

福田 寅成

クラスメソッド株式会社


前のページへ 1|2|3       

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。