選択範囲を使ってみよう

みなさまどうも。

続きまして『選択範囲』というものを使ってみましょう。

『選択範囲』は様々な使い方ができ非常に便利な機能なのですがちょっと用途の幅が広すぎるので今回の記事では選択範囲の基本的な操作や、選択範囲を使用した画像(レイヤー)のコピーと切り抜きの方法などを解説していきたいと思います。

というわけで適当に画像とかをPhotoshopで開いてみましょう。0から新規ファイルを作成する場合は分かりやすいように全体を何かしらの色で塗りつぶしてしまうようにしてください。続いて以下のツールを選択しましょう。

上記のツールは『長方形選択ツール』と呼びます。ではこれを選択した状態で適当に画像の上あたりをドラッグしてみましょう。以下は灰色で塗りつぶしたレイヤーです。

なんだか点線が現れましたね。これが『選択範囲』です。この選択範囲を使用してちょいと加工をしてみましょう。

『長方形選択ツール』を選択した状態で『選択範囲』の上で右クリックをし、出てきたメニューの中にある『選択範囲をコピーしたレイヤー』と選択してみます。

すると以下のようにレイヤーが増えます。

その増えたレイヤーを確認してみてください。元々のレイヤーのお目々のマークをクリックして非表示にしてみるとこうなっています。

先ほどの選択範囲の部分がコピーされた状態のレイヤーが作成されました。

続いてちょっとヒストリーを使って作業内容を選択範囲を作成した時点へ戻し、もういっちょ『選択範囲』の上で右クリックをし、出てきたメニューの中にある『選択範囲をカットしたレイヤー』と選択してみましょう。するとこのようなレイヤーの構成になります。

各レイヤーを確認してみるとこうなっています。

先程は選択部分がコピーされたレイヤーが作成されるだけで元のレイヤーに影響はありませんでしたが、今度は選択部分がコピーされたレイヤーが作成されると同時に元のレイヤーの選択部分がくり抜かれていますね。

こんな感じで選択範囲を使用すると画像(レイヤー)の一部をコピーしたりくりぬいたりすることができます。選択範囲は色々な使い方ができる機能ですが、このコピーと繰り抜きの方法は知っておくと非常に便利ですので覚えておくと良いです。ウェブ素材を作成する際は画像を繰り抜いたりする場面が結構多かったりします。

続きまして選択範囲そのものについての操作を色々と覚えていきましょう。

まず紹介したいのが『楕円形選択ツール』というツールです。先程は長方形の選択範囲を作成しましたが、『楕円形選択ツール』を使用すれば楕円形の選択範囲を作成することが可能です。

先ほどのツールパネルの『長方形選択ツール』を長めにクリックしてみてください。すると以下のように他のツールが展開されますのでその中の『楕円形選択ツール』を選択してください。

そのまま画像とかレイヤーの上でドラッグをしてみましょう。以下のように楕円形の選択範囲が作成できたかと思います。楕円形の選択範囲も長方形の選択範囲も使い方はほぼ同じです。

大きさを指定した状態で選択範囲を作成したい場合は上のオプションバーに注目しましょう。『長方形選択ツール』もしくは『楕円形選択ツール』を選択した状態だと以下のような状態になっているかと思います。

この中の『スタイル』と『幅』と『高さ』の項目で選択範囲の大きさなどを調整できます。

デフォルトの状態の『スタイル』の項目は『標準』が選択されていると思いますが、この状態は先程の選択範囲の作成時のようにドラッグした範囲がそのまま選択範囲として生成されるモードになります。

この『スタイル』の項目を『固定』に変更してみましょう。すると以下のように『幅』と『高さ』が選択できるようになります。試しに幅と高さを『100px』に指定してみましょう。

この状態で適当にドラッグをしてみてください。すると以下のように横100px、高さ100pxで選択範囲が作成できます。

上記は『長方形選択ツール』で作成しましたが『楕円形選択ツール』で幅と高さを『100px』に指定すると直径100pxの正円形の選択範囲が生成できます。

続いて『スタイル』の項目を『縦横比を固定』と選択してみます。この状態の『幅』と『高さ』には『0.001』から『999.999』の値が入力できます(Photoshop CCの場合)。単位はいりません。値を入力するとその比率の選択範囲が生成できます。例えば『16:9』で選択範囲を作成したい場合は以下のように入力します。

注意すべき点として縦横が固定というわけではなくあくまでも縦横比が固定、となりますのでドラッグした分だけ大きさが変動します。大きさを完全に指定したい場合は『縦横比を固定』ではなく『固定』を使用するようにしましょう。

続いてオプションバーの左端の部分の項目を使用してみたいと思います。以下の部分ですね。4つのアイコンが並んでいます。

ここでは生成した選択範囲をどのように扱うかを選択できます。選択範囲を新たに作成したり追加したり一部分を削除したりといった感じですね。

では早速使ってみましょう。多分デフォルトの状態だと以下のアイコンが選択状態になっているかと思います。

これは選択範囲を新規で作成するモードに切り替えるアイコンです。例えば以下のように適当に選択範囲を作成した状態で

新たに選択範囲を作成しようとすると元々存在していた選択範囲が消えて新しい選択範囲のみが残ります。

ではここでアイコンを左から二番目のやつに変更してみましょう。以下の画像のやつですね。このアイコンを選択すると選択範囲を追加で生成するというモードに切り替わります。

ちょっと試してみましょう。選択範囲がすでに生成されている以下の画像の状態で

さらに右上辺りに適当にドラッグしてみると

こんな感じになります。いかがでしょうか。選択範囲が追加されたのが確認できたと思います。

ちなみに元々存在している選択範囲にかぶさる形でドラッグをすると以下のような感じで追加した部分がくっついた形の選択範囲が生成されます。

続いてその隣のアイコンを選んでみましょう。以下の画像のやつですね。

これは現在の選択範囲から一部を削除するモードに切り替えるアイコンになります。軽く試してみましょう。適当に選択範囲を生成した以下の画像の状態で

先ほどのアイコンを選択して生成された選択範囲の中を適当にドラッグしてみると

こんな感じになります。少々分かりづらいのでそのまま選択範囲を右クリックして『選択範囲をコピーしたレイヤー』と選択してみます。生成された新規レイヤーを確認してみましょう。

いかがでしょうか。ちゃんと選択範囲が繰り抜かれているのが確認できたと思います。

注意点として先ほどの選択範囲をくり抜くアイコンを選択した時点で選択範囲がひとつも存在していない場合、選択範囲をくり抜くアイコンを選択した状態であるにも関わらず『選択範囲を新規作成するモード』になってます。その後、適当に選択範囲を生成すると『選択範囲をくり抜くモード』に切り替わります。この挙動が少々ややこしいので注意しましょう。

続いて最後のアイコンです。以下の画像ですね。これは重なった部分の選択範囲だけを残すモード切り替えるアイコンになります。

では早速つかってみましょう。適当に選択範囲を作って

作成した選択範囲に重なるように適当にドラッグすると

こんな感じになります。

重なった部分だけが残っていますね。これがこのアイコンを選択したときの挙動になります。イメージ通りの動きになるので大方問題ないかと思います。

ちなみにこちらもアイコンを選択した状態で選択範囲がひとつも存在しないときは『選択範囲を新規作成するモード』になってます。こちらも注意するようにしてください。

選択範囲を削除したい場合は上のメニューバーの『選択範囲』の中の『選択を解除』という項目を選択すればOKです。

ショートカットキーで行う場合、『Ctrl』もしくは『command』を押しながら『D』を押せば選択範囲を消すことができます。

選択範囲の作成履歴も『ヒストリー』に記憶されますので作業を戻したい場合は『ヒストリー』を使用するようにしましょう。
※ヒストリーについてはこちらを参照

というわけで長くなりましたが以上となります。少し慣れないと使いドコロが難しいかもしれませんが頑張っていきましょう。

続いての記事では文字の打ち込みをやっていきたいと思います。ではまたお会いしましょう。