Category Archives: WEBあれこれ

事務員が気になったWEBや制作にかかわるお話などなど

Photoshopを使ってみよう!その⑫~画像の保存~

こんにちは。クリエイターズアカデミーの事務員です。
前回はまでパス機能についてお話してきましたが、一部説明し損ねた部分があるのでの今回はその補足の説明をしていきたいと思います。

複数のパスを同時に扱う時の注意

昨日パスを実際のラインや選択範囲に置き換えるやり方についてご説明しましたが、同じパスレ
イヤーに複数のパスを設定している時や、パスが重なっている部分がある時にどのような処理に
なるのかについて補足で説明いたします。

①複数のパスから一つのパスだけを選択して使いたい

パスレイヤーに複数のパスを設定している場合、パスを境界線として描画するときや選択範囲と
して使う時には特定のパスを選択していない限りパスレイヤーに設定されている全てのパスに影
響します。複数あるうちのパスから個別にパスを選択すればいいのか、これについて解説いたし
ます。

まずおさらいですが、パスはカンバス上に黒い線として表示されます。表示されるだけでカンバ
ス上には影響しないので、パスレイヤーの選択を解除すると表示されなくなります。(青くなって
いるパスレイヤーは選択されているパスレイヤーです)パスレイヤーを選択している時には、そ
のパスレイヤーに設定されている全てのパスが表示されます。

sample96

パスレイヤーの上に表示されている複数のパスの中から個別のパスを選択する場合はペンツールを選択したまま「Ctrl」+パスをクリックで選択する事が出来ます。もしくはパス選択ツール、パスコンポーネント選択ツール(白または黒の矢印ツール)でパスをクリックすると選択されます。
どのパスが選択されているかはパスの上にアンカーポイントを示す四角い点が表示されているか
で判別出来ます。アンカーポイントが表示されているパスが選択されているパス、さらに黒いア
ンカーポイントが選択されているアンカーポイントです。

sample97

パスレイヤーの選択のみであれば複数のパス全てに効果がおよび、パスレイヤーの中の個別のパスを選択すればパス一つ一つに違った効果をつけることも可能ですので、使い分けていけるとパスはさらに便利なものになっていくと思います。

②パスが重なっている部分の処理

パスは重ねて作ることも出来ます。このとき重なっている部分の処理をどうするかをある程度決めることが出来ます。

どうやって決めるかというと、パスツールのコントロールパネルにある4つのアイコンから設定する事が出来ます。

sample102

左から順に内容を説明すると以下のようになります。

1.パス範囲に合体
これは基本的な設定です。パスの境界線を引く時にはパスの全てのラインを、塗りつぶす時や選択範囲を作る時にも重なっている部分は特に考慮されません。なので塗りつぶすと重なり合っているパスは同様に塗りつぶされ、選択範囲も重なり合っている部分ごと選択します。(つまり重なり合っているパスをまとめて塗りつぶす、選択する事が出来ます)

sample98

2.パス領域から一部型抜き
これは合体と逆といった感じの動作をします。境界線を引く時には変化はありませんが、塗りつぶしや選択範囲は「パス範囲に合体」とは逆転したような動作をします。つまりここでは塗りつぶさない、選択しない部分をパスで設定しているようなイメージです。

sample99

3.パス範囲を交差
今度はパスが重なっている範囲を抽出して認識します。こちらも境界線には影響しませんが、塗りつぶしではパスが重なり合っている部分のみ、選択範囲もパスが重なり合っている部分のみが選択されます。
ちなみに重なり合っているパスがない場合には通常の動作をします。(パスの範囲を塗りつぶし、パスの範囲を選択)

sample100

4.パスが重なる領域を中マド
最後は「パス範囲を交差」の逆、パスが重なっている部分を除外して認識します。境界線には影響しませんがパスが重なり合っている部分は除外して塗りつぶし、選択範囲もパスが重なっている部分は選択されません。

sample101

いかがでしょうか。細かい内容ですが、少しずつ動作が異なる事がお分かりいただけたでしょうか。この4つの設定はパスレイヤー上にパスを設定する前に設定しておくこともできますし、パスを作った後で設定したい場合には上記の効果を設定したいパスをパス選択ツール、もしくはパスコンポーネント選択ツールで選択して変更してください。(白または黒の矢印ツールでドラッグして選択が可能です。ShiftキーやCtrlキーではまとめて選択できないので注意して下さい)

これでパスのお話は終了です。後は練習あるのみ!で使いこなしていってほしいと思います。
パスの練習には写真の切り抜きが良い題材になると思います。実戦で使う事も多いかと思いますし、曲線や直線が入り混じっているのでとても練習になります。是非チャレンジして見てほしいなと思います。

Photoshopを使ってみよう!その⑪~パスを使ってみよう!応用編~

こんにちは。クリエイターズアカデミーの事務員です。
前回は実際にパス機能の使い方についてご説明いたしました。しかしパスをかけるようになっても活かし方が分からなければ意味がないですよね。今回はその活かし方の部分をご説明いたします。

パスを使ってできること

パスはブラシツールと違い、それだけではカンバスに何の影響も与えません。そんな機能がどうやったら役立つのか、これを知らなければ宝の持ち腐れです。illustratorではペンツールでそのまま線がかけたりもしますが、ではphotoshopではどうやって使われるのか。それをこれからご説明したいと思います。

①パスの形にラインを引く

まず、パスではフリーハンドで描くよりも美しい直線、曲線を作ることが出来ます。そのパスを利用してラインを引くことが出来ればより美しく正確な図形、イラストを作ることが可能です。ここではその「パスを利用してラインを引く」方法をご説明いたします。

1.最初に適当なパスを用意します。直線でも曲線でも丸でも四角でもなんでも大丈夫です。
2.パスが用意出来たらパスボックスの下にある実線の丸を押してみましょう。これだけでパスのラインをブラシでなぞることが出来ます。

sample92

また、この時パスのラインを描くブラシは、その時点で選択されているブラシの種類、サイズが適応されます。通常の丸ブラシを使えば実線として、その他の特殊な形状のブラシはブラシの形状によったライン、サイズになるので確認が必要です。
ブラシの確認をする際には一度ブラシツールを選択し、コントロールパネル、もしくは右クリックで確認できます。確認出来たら再度パスを選択してボタンを押せば境界線を引くことが出来ます。

sample93

②パスの形に塗りつぶす

パスで作った形を塗りつぶす事も可能です。選択範囲で塗りつぶしたい範囲を設定する事も出来ますが、一回で特殊な形を選択するのはほぼ不可能です。また、塗りつぶした範囲を調整しなおしたい時にもう一度選択しなおすのはかなりの手間です。
そこで活躍するのがパスによる塗りつぶしです。

1.こちらも最初にパスを用意します。
2.パスが用意出来たらパスボックスの下にあるグレーの丸を選択します。するとパスの中が塗りつぶされます。

sample94

こちらも塗りつぶす時の色は、その時点で選択されている描画色です。描画色の確認はツールボックス一番下の部分、四角が重なっている部分で確認できます。(上になっている四角が描画色、下の色が背景色です)

③パスから選択範囲を作る

パスで作った形を塗りつぶす説明にもありますが、複雑な形の選択範囲を一から作るのは難しいです。選択範囲は1回で選択できないとやり直しとなってしまいがちです。そして微妙な形の修正も難しいですが、パスを使えば綺麗な形の選択範囲を作ることが可能です。

1.選択したい範囲のパスを作ります。
2.パスが用意出来たらパスボックスの下の点線の丸を選択します。するとパスのラインが選択範囲に設定されます。

sample95

パスで選択範囲を作っておくことのメリットは、何度でも選択が可能であるということと、形の微調整が可能なことです。より自由な制作の為には是非使いこなしていきたいですね。

このようにパスを使うと何かと便利に画像を作ることが出来たりします。実際の仕事の中でいえば、ファッション雑誌などでモデルさんだけが切り抜かれた、背景のないピンナップ写真が良くありますね。また化粧品や雑貨についても良く見られると思います。そういった写真は、最初から背景がなかったわけではありません。photoshop等で背景部分を削除してレイアウトされています。
雑誌によってかなりの量になる写真から1枚1枚綺麗に背景を削除していくのはなかなか手間です。消しすぎてしまったり、背景が残っていたりという細かな部分を修正するのは大変ですし、削除した輪郭がガタガタになってしまっては見栄えもよくありません。
そんな時にパスが大活躍します。パスを修正すれば一から選択範囲を設定する必要もありませんし、削除した輪郭もきれいに仕上がります。

Webで使われている画像もそうです。昨今カメラの性能も上がり、画像は綺麗で当たり前です。その当たり前を加工するデザイナーが活かせなければ意味がありません。
制作する全ての画像、全ての商品を綺麗に見せる!デザイナーの重要なお仕事なので是非是非パスをマスターしてプロのデザイナーへ近づいていってほしいなと思います。

Photoshopを使ってみよう!その⑩~パスを使ってみよう!~

こんにちは。クリエイターズアカデミーの事務員です。
前回はパス機能の簡単な概要と各部の名称についてご説明いたしました。今回は実際にパス機能の使い方についてご説明していきたいと思います。
パス機能は使い方が分かっても練習が必要です。一回でうまくいかなくても何度でも挑戦してほしいと思います。

パス機能を使ってみよう

各部の名称や簡単な機能については前回の記事をご覧いただくことにして、ここからは実際にパス機能を使っていきたいと思います。illustratorにも共通する機能が多いので、是非photoshopと一緒にillustratorも触ってみてほしいと思います。

①パスとアンカーポイント

まずはパス機能である「ペンツール」を選択します。ショートカットキーは「P」です。ペンの頭文字のPと覚えれば分かりやすいと思います。

sample83

ペンツールが選択出来たらメニューバーの下のコントロールパネルからペンツールのどんな機能を自分で選択しているのかを確認しておきましょう。今回選択しているのはペンツールのパスのみを作成する機能です。

パスを作りながら範囲を塗りつぶす機能を選択しても構いませんが、「塗りつぶす」という機能の為に色々なことをしているのでパス以外の機能がややこしくなっています。また改めてご紹介しようと思いますので今回はパスのみを作る機能をオススメします。
※今回はパスについての説明なのでパスを作らずに範囲を塗りつぶす機能については紹介しません。

ちなみに自動追加・削除のチェックボックスはアンカーポイントの追加ツール・削除ツールと同じことが出来ます。わざわざツールを変える必要がなくなるのでチェックが入っていると便利なことも多いです。(作業内容によっては邪魔になる時があるのでその時はチェックを外しましょう)

ペンツールを選択したらカンバスにパスを描いていきます。カンバスのどこかをクリックすると黒い四角い点が出来ます。これが「アンカーポイント」です。そのまま適当にぽちぽちとクリックを続けるとアンカーポイントが増えていきます。
黒いアンカーポイントはアンカーポイントを増やすたびに古いものは白、最新のものが黒くなりますが、これは「選択されているアンカーポント」と「選択されていないアンカーポイント」の違いなのでここでは気にしなくて大丈夫です。

sample84

アンカーポイントの数に制限はありません。いくらでも増やしていくことが可能です。
いくつかアンカーポイントを打った後は最初のアンカーポイントにカーソルを合わせてみましょう。するとカーソルの横に小さく「○」が表示されると思います。その状態で最初のアンカーポイントをクリックするとそれまでにつないできたアンカーポイントが一つの輪になって繋がります。
アンカーポイントが繋がれて輪になるとアンカーポイントの表示が消えてパスを示すラインだけが残ります。これがパスによって作られた図形になります。

sample85

パス機能はこのアンカーポイントを追加しながら形を作るという作業が基本です。この単純な作業からどうやって思い通りの形を作るかが重要です。

②曲線のパスを作る

前回の記事で方向点や方向線のお話をしたように、パスでは曲線を作ることも出来ます。作り方はいたって簡単なので試してみてください。
曲線はドラッグで作成する事が出来ます。まず適当な位置にアンカーポイントを作ります(クリックするだけです)。次のアンカーポイントを作る時、クリックしたまま少しマウスをドラッグします(クリックしたままマウスを動かせばOK)すると一つ目のアンカーポイントと二つ目のアンカーポイントをつなぐ線が曲線になります。

sample86

曲線はマウスを動かす方向とは逆側に向かって山なりになります。また、マウスはどこに向かって動かしても大丈夫です。いったん曲線が出来てしまえば、アンカーポイントから突き出た「方向点」を使って曲線を修正する事が出来ます。

方向点を使って曲線の形を修正する場合には、ペンツールのまま「Ctrl」を押します。するとマウスのカーソルがペンの形をしたアイコンから白い矢印のアイコンに変化するのがお分かり頂けるでしょうか。カーソルが白い矢印になっている状態で方向点をドラッグすれば曲線の山の方向や深さ(大きさ?)が変わります。

sample87

アンカーポイントの間には一つの山しか作ることができません。波線を作りたい場合にはもう一つアンカーポイントを増やして作りましょう。

③アンカーポイントの追加

曲線を作りたい・増やしたい時や、形を複雑にしたい時、既に作成したパスに後からアンカーポイントを追加する事も出来ます。追加の方法はいたって簡単です。

まずペンツールに「自動追加・削除」のチェックボックスにチェックが入っている事を確認します。(このボックスにチェックを入れたくない場合にはペンツールのアイコンを長押ししてアンカーポイントの追加ツールを選択)
次にアンカーポイントを追加したいパスレイヤーが選択されていることを確認してから「Ctrl」を押しながらパスを選択、パスの上に既存のアンカーポイントが表示されているのを確認してから、アンカーポイントを追加したい位置にカーソルを合わせます。ペンマーク(カーソル)の横に「+」が付いたことを確認してパスをクリック、アンカーポイントが追加されます。

sample88

アンカーポイントの追加ツールの場合は①の手順を飛ばしてもアンカーポイントの追加がかのうです。

④アンカーポイントの削除

アンカーポイントを増やすことと合わせて、いらないアンカーポイントを削除する場面も中には発生します。そんな時も操作は簡単です。
基本的にはアンカーポイントの追加と変わりません。アンカーポイントを削除したいパスを選択し、アンカーポイントが表示されたら必要無いアンカーポイントの上にカーソルを合わせます。ペンマーク(カーソル)の横に「-」が表示された状態で削除したいアンカーポイントをクリックすれば削除が出来ます。

sample89

崩れてしまったパスのラインは方向点を使って修正しましょう。

⑤直線で作ってしまったパスを曲線にする

何かの拍子にせっかく作った曲線が消えて直線になってしまった!なんて時や、直線で作ってしまったパスを後から曲線に変えたい時には「Alt」を押しながらアンカーポイントから好きな方向へドラッグすると直線を曲線にすることが出来ます。
逆に曲線の真ん中、両端のアンカーポイントのどれかを「Alt」を押したままクリックすると曲線が直線に変更されます。

sample90

これは「Alt」を使わず、ツールボックスのペンツールを長押しして「アンカーポイントの切り替えツール」を選択しても同じ動作が可能です。

⑥アンカーポイントの位置を動かす

アンカーポイントの位置を変えることで、パスの形を変更する事も可能です。
アンカーポイントの位置を変えたい時には動かしたいアンカーポイントを「Ctrl」を押しながらドラッグします。

sample91

アンカーポイントだけでなくパス全体が動いてしまう時には、一度「Ctrl」とマウスから手を離し、再度「Ctrl」を押しながらアンカーポイントをドラッグしてみてください。
「Ctrl」を押した時に出現する矢印が白であれば一部のアンカーポイントだけが選択できます。黒い矢印だった場合はパス全体が選択されてしまうので、適当なアンカーポイントを「Ctrl」+クリックしてからもう一度選択してみましょう。

どうしても切り替えがうまくいかない場合にはツールボックスからペンツール、テキストツール(Tのマーク)の下、矢印のアイコンから白い矢印を選択すれば、動かしたいアンカーポイントをドラッグするだけでアンカーポイントの移動が可能です。

毎回ツールボックスからツールを選択するのは時間がかかるので、可能であれば「Ctrl」による切り替えが出来るようになると便利ですが、調子が悪くてうまくいかないときにはツールボックスからの選択も覚えておくと便利ですね。

ちなみにアンカーポイントとアンカーポイントの間のラインをドラッグするとドラッグしているラインごと移動する事が出来ます。ラインを維持したまま移動させたい時には直接ラインをドラッグする方法も覚えておきましょう。

大まかなパス機能、ペンツールの操作法は以上です。これの組み合わせでパスを作っていきます。「Ctrl」や「Alt」の使い分けをしていくと作業スピードが断然速くなるので、ショートカットキーに慣れていくのと合わせてマスターしていきたいところです。
次回はさらに作ったパスをどうやって活用するのか、パスの活用術についてもご説明していきたいなと思います。次回もどうぞよろしくお願いします!

Photoshopを使ってみよう!その⑨~パスって何?~

こんにちは。クリエイターズアカデミーの事務員です。
前回までブラシについて色々な説明をしてきました。今回からはパスについてご説明していきたいと思います。
パス機能はphotoshopだけでなくillustratorにおいても重要な機能です。しかし今までのレイヤーやブラシよりもややこしい(慣れるまでに時間のかかる)機能ですから苦手意識を持つ方もいるかもしれません。しかし使いこなせば心強い機能の一つなので是非チャレンジして下さい。

パスって何?

①「パス」というもの

初めに、少しphotoshopから離れ、そもそもパスとは何かというお話をさせて頂きます。

パスとはphotoshop、illustratorとも共通して「アウトラインデータ」とよばれるものです。これは以前お話したphotoshopとillustratorの違いの中でご説明したベクター形式とラスター形式の違いに大きく関係しています。

詳しくは以前の記事の「Photoshopを使ってみよう!」を参考にしていただければと思いますが、ベクター形式の画像は描かれている要素を座標で管理しています。特徴としてはどこまで拡大してもライン(輪郭)がシャープ(綺麗)という特徴があるのがベクター形式です。この座標を作っているのが「パス」です。
対してラスター形式の画像は解像度に合わせたドットの集合で描かれています。つまり拡大するとドットの一つ一つが見えてしまいます。これがラスター形式であり、ドットを描く機能がいわゆるブラシです。

※下記のサイトの「パスとは?」の説明部分も分かりやすいので参考にしてみてください。
http://daaa.jp/illustrator-gaiyo/

illustratorはベクター形式で画像を作成するので描く要素は全てパスで管理されています。そしてphotoshopはラスター形式で画像を作成するので基本的にブラシで描くことになります。しかしラスター形式のphotoshopでもこのパス機能を使う事は可能なのです。

②photoshopにおける「パス」

photoshopの中でもパスによって「アウトラインデータ」を作成する事はできます。この「アウトラインデータ」を作成する事のメリットは、美しいラインが引けることです。

通常ブラシツールやブラシツールと同様にphotoshop内の描画ツールはフリーハンドで使用されます。そのため描かれるラインには大小様々なブレが生じます。イラストを描く場合などはこのブレも制作者独自のタッチとして容認されますが、図形などの極力フリーハンドによる「ブレ」を起こしたくない画像の場合はこの「パス機能」が活躍します。

ちなみにillusutratorにもブラシツールはありますが、photoshopのようなフリーハンドによるブレを補正する機能があるのでillustratorでブラシツールを使ってもphotoshopほど自由なラインを引くのはなかなか難しいです。(出来ないことはないですが若干面倒です)

パス機能を使ってみよう

①画面説明

それではパス機能の使い方を徐々にご説明したいと思います。
まずパス機能で使う部分ですが、ツールボックスのペンツール、パス選択ツール、シェイプツールとパスボックスです。
それぞれショートカットキーはペンツール=「P」、パス選択ツール=「A」、シェイプツール=「U」です。
パスボックスが表示されない場合には「メニューバー」→「ウィンドウ」→「パス」を選択すると表示されます。

sample80

各機能の簡単な説明は画像のような内容になっています。アンカーポイントの追加ツール、削除ツールは選択しなくてもペンツールを選択していれば使えることが多いのであまり選択する機会はないかなと思います。アンカーポイントの切り替えツールは別途機能を説明いたします。

また、パスボックスは通常のレイヤーボックスと似たような見かけをしています。
パスは自分でレイヤー分けをしないと全て初期設定の「作業用パス」に全て記録されます。一つの図形、一つのラインしか作らないということであればレイヤー分けをする必要はありませんが、いくつもパスを作成する際には分けておくと良いでしょう。また何度も繰り返し使うパスもレイヤー分けしておくと良いです。
なぜなら、「作業用パス」は前のパスを削除して新しいパスを記録する特徴があります。油断するとせっかく作ったパスが消えてしまっているという事にもなりかねないので気をつけましょう。

②カンバス上のパス

①ではパス機能の画面の見方や内容について簡単にご説明しましたが、今度は実際にカンバス上にパスを作成した時の見方をご説明します。

sample81

カンバス上にパスを作成すると黒いラインで表示されます。しかしこの黒いラインはあくまで「アウトラインデータ」であって、カンバス上に描画されるピクセルデータではありません。なのでパスレイヤーの選択を解除すると消えてしまいます。再度表示させるには表示させたいパスレイヤーを選択すれば表示されます。

黒いライン上にある四角い点はアンカーポイントというものです。黒い四角ではなく白い四角の場合もありますが、どちらも同じアンカーポイントです。黒と白のアンカーポイントの違いは選択されているアンカーポイントか、選択されていないアンカーポイントかの違いです。これについてはまた詳しく説明いたします。

sample82

曲線のパスを作成するときにはアンカーポイントからパスではない黒いラインが2本表れることがあります。これは方向点と方向線と言って、アンカーポイントとアンカーポイントの間に挟まれたラインの曲線を形作るためのハンドルになっています。
このハンドルの使い方もなかなか慣れるまでは難しいところですが、またご説明したいと思います。

以上がパス機能の大まかな説明です。これだけではなんだかよくわからないと思いますが、こんな名前の物がある、この名前の機能はどれのこと、というところをぼんやりとイメージしていただいてから、次回は実際の作り方をを解説していきたいと思います。
頑張って分かりやすくを目指しますのでどうぞよろしくお願いします!

Photoshopを使ってみよう!その⑧~ブラシを作る~

こんにちは。クリエイターズアカデミーの事務員です。
前回までブラシパネルについて説明をしてきました。今回はブラシ編の最後として自分でブラシを作るにはどうすればいいのかをご紹介します。
仕事内容によってはブラシを作っておくと作業が楽になることもあります。しっかり覚えておきたいところですね。

新規ブラシを作ろう

photoshopには初期設定から色々なブラシが入っています。また書店で売っている素材集等にはブラシ素材もあり、インストールすれば使えるようになります。
しかし、なかなか使いたいブラシが見つからない、インストールしたブラシをアレンジして使いやすくしたい、と思う事もあるかもしれません。そんな時は自分でブラシを作ってしまうのが手っ取り早いです。

①ブラシにしたい形を作る

まずブラシを登録する前にブラシにしたい形を作ります。
ブラシにしたい形を作る時に注意したいのが、この時作る画像のサイズがブラシの初期設定サイズになります。ブラシの形が複雑になればなるほど、ブラシを大きく(拡大)するとブラシの輪郭は荒く、逆にブラシを小さく(縮小)すればブラシの輪郭がつぶれます。作ったブラシをどのぐらいのサイズで使用するか、イメージしながら作ると良いでしょう。

例では適当にハートを用意してみました。

sample77

!要注意!

ブラシは基本的に黒で作ると良いでしょう。黒でなくてもブラシに登録する事は可能ですが、ブラシとして登録すると色の情報は消えてしまうので注意して下さい。
また、色を使った場合、ブラシにするとグレーになってしまう事もあります。これはブラシには色情報を持てない代わりに明度(色の明るい、暗い)の情報は持つことが出来るからです。

sample74

使った色がブラシになった時にどんな感じになるかを事前に確認する方法としては、ブラシにしたい画像を「グレースケール」に変換すると良いでしょう。

新規作成からグレースケールの画像を作る場合には「新規作成」のカラーモードをグレースケールに変更してカンバスを作成。

既に作ってしまった画像をグレースケールにする場合には「メニューバー」→「イメージ」→「モード」→「グレースケール」で変換可能です。この時レイヤーを統合しますかというようなメッセージウィンドウが出ることがありますが、統合しなくても変換する事は可能なので、グレースケールに変換後、まだ編集作業をする場合は統合しないを選択すると編集しやすいでしょう。

sample75

sample76

②ブラシにする部分を選択する

形が出来たらブラシにする部分を選択します。
長方形選択ツールや自動選択ツールでブラシにしたい部分を選択します。選択範囲内にブラシにしたい部分が全ておさまっていれば余白は気にしなくて大丈夫です。
逆にブラシにしたくない余分なものまで選択すると、余分なものがついたままブラシになってしまうので注意して下さい。
いらないものは消したり、自動選択ツール等で必要な部分だけ選択するようにしましょう。
ブラシにしたい範囲を選択せずにこの後の手順、ブラシに登録に進む事も可能ですが、その場合はカンバスに描かれている全ての要素がブラシになります。

sample73
sample78

③ブラシを定義

いよいよ選択した形をブラシに登録します。「メニューバー」→「編集」→「ブラシを定義」で登録できます。ブラシ名をつけてOKを押せば登録は完了です。

sample79

念の為ブラシツールを選択してブラシのリストを確認してみましょう。リストの一番下に今登録したブラシが表示されていれば登録成功です。
実際にカンバスで使う事が出来るので、大きさや形を確認して見ましょう。

●登録したブラシが思った形にならなかった!

ブラシを登録した後、実際に使ってみると思った使い勝手にならなかった場合、ブラシを削除する事も出来ます。
ブラシリストから削除したいブラシを選択して右クリックすると「ブラシ名の変更」と「ブラシの削除」を行う事が出来ます。いらなくなったブラシは削除してしまうとブラシリストがスッキリするのでブラシが探しやすくなりますね。

●新しいブラシの活用法ってどんなものがあるの?

ブラシは初期設定にあるブラシリストを見てもわかる通り、ラインを引くだけではなくスタンプを押すようなイメージで使う事もあります。
例えばイラストを描かれる方や、写真家の方でも、画像に自分のサインを入れる場合に自分独自のサイン、マークをブラシに登録しておけばブラシツールからクリック一つで画像にサインを追加する事が可能です。
また、今回使用したハートは、実は「パスツール」の中の「カスタムシェイプツール」に登録されているものです。しかし毎回パスツールから使うのは面倒!という時にはブラシとして登録しておくと便利かもしれません。
(パスについてはまた別にご説明します)

ブラシの登録はphotoshopでの作業時間の短縮の為に活用されることが多いです。
常用しないとしても、一つの画像の中で何度も同じ形が登場するのであれば、一時的にブラシにその形を登録してしまうと便利です。
是非自分なりの活用術を探してみてください。

そうは言ってもやはりブラシを自分で作るのは難しい!イメージ出来ない!という方はブラシ素材を配布しているところ、販売しているところがありますので、そんなところもチェックして見てください。

Photoshopをパワーアップ!デザインが捗る無料PSブラシ素材24個まとめ
(http://photoshopvip.net/archives/67973)
こちらではかっこいいブラシが紹介されています。リンク先は海外のサイトですからダウンロードは不安…ということであれば日本語の配布サイトを探してみるのも手です。

BrushKing -lots of free Photoshop brushes-
http://www.brushking.eu/
こちらも英語ですがブラシ素材を集めた検索サイトです。こんなサイトを見ながらこんなブラシがあったら便利!このブラシを使ってみたい!等、見ているだけでもひらめきがいっぱいです。自分でブラシを作る時にも参考にして見るとよりクオリティの高いものが出来るかも?!

デザインの現場で使える Photoshop ブラシ・パターン素材集
http://books.shoeisha.co.jp/book/b88797.html
これは書籍の紹介ですが、英語もダウンロードも苦手!という方にはオススメです。書店でどんなブラシがあるのか確認してもよし、このサイトのようにちょっと立ち読み感覚でチェックして見るのもよし。欲しいブラシが見つかったら購入してCD-ROMからインストールしましょう。
※CD-ROMからのインストールについては本にしっかりとインストールの仕方が紹介されているので安心して下さいね!

いかがでしょうか。ひとまずこれでブラシについての紹介は終わりたいと思います。
次はいよいよ「パス」についてご説明していきます。photoshopだけでなくillustratorでも大活躍、且つ、つまづく人も多い「パス」です。使いこなせれば怖いものなしなので是非次回もチェックして見てください。

Photoshopを使ってみよう!その⑦~ブラシツール②~

こんにちは。クリエイターズアカデミーの事務員です。
前回ブラシについて説明してきましたが、ブラシパネルについて説明が一部残ってしまったので、今回はその続きをご説明いたします。
前回の内容でも「ブラシでこんなことが出来るのか!」と思われた方もいると思いますが、今回も楽しい発見があるのではないでしょうか!

それでは早速、ブラシパネルの右側の設定についてご説明します。

ブラシパネルの右側 -ブラシの設定-

sample66

こちらは選択して見ればどんな感じになるのかすぐわかるので説明を読むよりは触ってみてくださいという感じもするのですが、ブラシによって変化が分かりづらいものもあるのでご説明します。
変化が分かりやすいように画像では初期設定にあるキラキラしたブラシを選択しています。直径58px、間隔は42%です。数値は適当です。

1.シェイプ

ではまずシェイプから説明していきます。

sample67

「シェイプ」は、「ブラシ先端のシェイプ」では均一なサイズや角度、真円率しか設定出来なかったのに対してより動きのある設定が出来ます。

「サイズのジッター」では均一なサイズで並んでいたブラシの先端を大小様々な大きさに変えることが出来ます。
その下の「コントロール」ではサイズの大小を何を基準に調整するかを設定する項目です。こちらもペン型タブレット等の筆圧感知機能のあるマウスがあれば筆圧やペンの傾きといったもので制御出来ますが、ただのマウスで行う場合にはフェード(ストロークが長くなるとフェードアウトする/消えるような設定)が使えるのではないかなと思います。
※コントロールでペンの傾きを指定した時のみ、傾きの大きさを設定する項目がアクティブ(操作可能)になります。

「最小の直径」ではサイズのジッターで出てくる大小のサイズの中でも最小値を決めるものです。ちなみに最大値はブラシのサイズになるので、一番大きなブラシの先端をさらに大きくしたい場合には、「ブラシ先端のシェイプ」の項目に戻ってサイズを指定してください。

「角度のジッター」は同じ角度で並んでいるブラシの先端の角度をランダムにすることが出来ます。

「真円率のジッター」「最小の真円率」も角度と同様に、同じ幅で並んでいるブラシの先端の幅をランダムにすることが出来ます。(ある部分はつぶれたブラシになり、あるところは綺麗な形のブラシになったり、という事ができます)
この項目についているコントロールの内容はサイズのジッターの時と同一です。筆圧感知機能がないとあまり意味をなしません。

どうでしょうか。図ではサイズのジッターのみいじっていますがブラシのプレビューを見るとサイズがランダムに変化するブラシになったのかがお分かり頂けると思います。

2.散布

次に散布です。

sample68

散布ではブラシのプレビューを見ても分かる通り、通常は一本のラインで描画されるブラシの範囲をランダムに広げて描画出来るように設定します。

「散布」はブラシの描画範囲をどこまで広げるかの設定です。セットになっている「両軸」のチェックボックスは、はずすと上下方向にのみ描画範囲を広げますが、両軸にチェックを入れると上下左右方向に描画範囲を広げるのでよりランダムに広がったように見えます。

「数」はブラシの描画範囲を広げる際にブラシの先端をどのぐらい増やすかを設定します。
そもそも散布という機能は元のストローク上にあるブラシの先端からコピーを作り、それをまわりに散らせています。ですからそのコピーする数がこの「数」のことです。

「数のジッター」は先端をコピーする数もランダムにしてくれます。つまりブラシの先端が多いところ、少ないところの差が生まれることになります。

女性ファッション雑誌など、きらきらした効果がモデルさんを飾っているものがありますが、そういったきらきら効果が簡単に作れるようになります。

3.テクスチャ

つづいてテクスチャ。

sample69

テクスチャは初期設定の内容では分かりづらいかもしれませんが、ブラシの上にさらにテクスチャの効果を乗っけているものです。

「拡大・縮小」ではテクスチャの大きさを指定。

「描点ごとにテクスチャを適用」のチェックボックスにチェックを入れるとストロークの中にあるブラシの先端それぞれがテクスチャを描くので、最終的にはテクスチャがあまり目立たなくなります。チェックを外すと1ストロークで一つのテクスチャを描くので、描いたテクスチャが画面上にはっきり表れます。

「描画モード」はテクスチャをのどんなモードで描くかを決めます。内容は乗算やスクリーン
など、レイヤーやブラシのモードで設定するものとほぼ同じです。

「深さ」はテクスチャを描く時の濃さを設定するものです。

「深さのジッター」は「描点ごとにテクスチャを適用」にチェックを入れるとアクティブ(操作可能)になりますが、これはその名の通り「深さ」をランダムにします。ですからテクスチャを描く濃さに差が生まれます。

4.デュアルブラシ

4つ目はデュアルブラシです。

sample70

デュアルブラシは最初に「ブラシ先端のシェイプ」で設定したブラシの上に、もう一つ別のブラシを重ねるものです。

①一番上の「描画モード」でブラシを重ね合わせる方法を選択します。内容はこちらもレイヤーやブラシのモードで設定できるものとほぼ同一です。

「ブラシのリスト」から重ね合わせるブラシを選択します。リストの下の「直径」と「間隔」、「散布」、「数」は重ね合わせる二つ目のブラシの直径と間隔、散布、数を設定するものです。これは「ブラシ先端のシェイプ」で説明した内容や散布で説明した内容と同一なので省略します。

5.カラー

5つ目はカラーです。

sample71

ブラシパネルでは描画色が反映されず、全て黒で表示されます。なのでなかなかカラーの設定は
分かりづらいのですが、これについては設定する度にカンバスに少し描いてみて効果を確認する
など、。皆さんで「こういうものか」と掴んでもらうのが分かりやすいと思います。

「描画色・背景色のジッター」は描画色と背景色をどのぐらいの割合で混ぜ合わせるかという
ような設定です。
描画色とはブラシの色の事です。背景色とは、基本的にはカンバスの色になっているともいます
が、ツールパネルの一番下に表示されているカラー選択部分で変更する事が出来ます。

sample73

コントロールの横にある数字はいくつのステップに分けて混合するかを表しています。1を入れると一色しか出ないので色は変化しません。

「色相のジッター」「彩度のジッター」「明るさのジッター」はそれぞれ色相、彩度、明るさの振れ幅を設定します。

「HSB」は色の変化の傾向を決めるものですが、実際のカラーバーが表示されているわけではないので正直分かりづらいです。いじりながら実際に描いてみて感覚をつかんでみるほかないです。
ちなみにHSBは色を定義する一つの方法の事です。

6.その他

最後にその他です。

sample72

これはブラシの不透明度やインクの流量のジッターを設定していきます。つまり不透明度もイン
ク流量もランダムにしていくようなイメージです。
にじむ度合いのジッターやミックスのジッターはブラシによって使えたり使えなかったりなので
使えるブラシに出会った時には設定してみましょう。

さらに下にある「ノイズ」や「ウェットエッジ」、「エアブラシ」、「滑らかさ」、「テクスチャの保護」には特に設定できる項目はありません。チェックを入れれば効果がつくので確認して見てください。

鍵マーク

ブラシの設定の右側についている鍵マークは、設定した内容を保存しておくものです。同じ設定
をブラシの先端だけ変えて適応したい場合には鍵マークをクリックすると鍵がかかり、ブラシの
先端を変えても設定が変わらなくなりますので便利です。

設定したブラシの保存

ちなみに気に入ったブラシと設定が出来上がったらブラシパネルの一番下(ブラシのプレビュー
の下)に新規ブラシを作成のボタンがあります。(レイヤーの新規作成ボタンと形は一緒です)こ
ちらをクリックして名前をつけて保存すれば作ったブラシがいつでも使えるようになります。

以上です。ブラシの奥深さがお分かりいただけたでしょうか?レイヤーと並んでフォトショップ
の使いこなしていきたい機能の一つなので是非いろんなブラシを設定して見てください!

Photoshopを使ってみよう!その⑥~ブラシツール~

こんにちは。クリエイターズアカデミーの事務員です。
前回までレイヤーについてご説明してきました。長々と続いたレイヤーのお話ですがいかがでしたか?なかなか知らないと使えない機能ばかりだと思いますので、是非触って「こんな機能なのか!」と知ってほしいと思います。
さて今回はいよいよブラシについて説明していきたいと思います。画像の加工だけでなく、WEBページのデザインイメージを作ったりちょっとしたUIパーツを作る時にも知っておくと何かと便利な機能だと思いますのでチェックしてみてください。
もちろんイラストを描くのにも使えますよ!

ブラシってどんな機能?

ブラシとはショートカットキー「B」で使う事が出来る描画ツールの事です。ツールパネルから選択するときには絵具の筆のようなアイコンを選択してください。

ちなみにブラシアイコンにはいくつかの種類があるのでご紹介します。

sample62

ツールボックスの中のブラシアイコンを長押しすると(クリックしっぱなしでしばらく待つと)上図のようにブラシツールに似た他のツールが表示されます。見て頂いて分かる通りこれらはすべてショートカットキー「B」で呼び出すことが出来るツールです。
「B」を押したときにどの機能が呼び出されるかはツールボックスに表示されているアイコンで判断する事が出来ますので、もしもブラシツール(絵具のような筆のアイコン)ではない鉛筆ツールや混合ブラシなどが表示されている場合は、ショートカットキー「B」でよびだされるのも鉛筆ツールや混合ブラシツールになります。

それではそれぞれのブラシの機能を紹介します。

①ブラシツール

一般的なブラシツール(絵具の筆のアイコン)これは文字通りカンバス上でブラシのように線やマーク等を描画する事が可能なツールです。
ブラシツールを選択するとメニューバーの下のコントロールパネルがブラシの内容に変わります。
ブラシツールで設定可能な内容は下図のような内容です。

sample63

「選択中のブラシツール」の部分はツールボックスからどのツールを選んできているのかが表示されます。現在はブラシツールのお話なのでブラシが選択されていますが、消しゴムツールを選択すれば消しゴムのアイコンになりますし、塗りつぶしツールを選択すればバケツのアイコンになります。

「ブラシの種類とサイズ」現在選択されているブラシとサイズが表示されます。数字部分がサイズです。単位はpx(ピクセル)です。右横にあるボタンをクリックすると図下のブラシの設定ボックスが開きます。直径がブラシの大きさ、硬さはその名の通りブラシの硬さを設定するものですが。ペン型タブレット等の筆圧感知機能のあるマウスでないとあまり意味がないので説明は省略いたします。
硬さの下に表示されているのがブラシの種類です。ブラシの先端の形の違いだと思って下さい。描画した時にどんな違いが出るのかは使ってみてほしいと思います。先端の形の下に表示されている数字は初期設定のブラシの大きさです。選択した後ブラシの大きさを変えることも出来ます。

「ブラシパネルの起動」は文字通りブラシパネルという機能を起動させます。このブラシパネルの使い方はまた別にご説明します。

「描画モード」はレイヤーモードの内容と一緒で乗算やスクリーン、覆い焼きや焼き込みなどの種類があります。レイヤーモードとの違いをご説明すると、レイヤーモードはレイヤー上の全ての要素に対して効果をかけますが、ブラシツールの描画モードはブラシのストローク(線の1本1本)ごとに効果を設定できます。同じレイヤー上に別々の効果をつけた線をかけるという事です。

「ブラシの不透明度」はその名の通りブラシの透明度を設定できます。ブラシツールで描画中、1回のドラッグで塗れるインクの透明度が設定出来ます。
(1回のドラッグ=1ストロークです。ストロークを重ねるとインクも濃くなります。例えば不透明度50%のブラシで2ストロークで塗ると50%+50%のインクを塗り重ねることになります。透明度を50%で維持したい、それ以上濃度をあげたくない場合は1ストロークで描き切るか、ブラシの不透明度ではなくレイヤーの不透明度を調整しましょう。)

「流量」はブラシから出るインクの量です。こちらは1ストロークの中でも重ねると色の濃淡がつきます。ストロークの最初は設定されたインクの量になりますが、同じストロークでぐるぐると同じところをなぞりすぎると徐々にインクが濃くなっていきます。ブラシの不透明度とうまく使い分けて下さい。

ちなみに、ブラシツールに限らず描画に関わるツールはテキストレイヤー上では使う事が出来ません。またグループ化したレイヤー(レイヤーのフォルダ部分)を選択しても使う事が出来ません。テキストレイヤーはテキストという特殊な処理をしているレイヤーなのでラスタライズという機能でテキストレイヤーを解除しなければなりません。またグループ化されたレイヤー(レイヤーのフォルダ部分)はグループに含まれている全てのレイヤーを選択していると認識されるので、photoshopがどのレイヤーに描画していいのか分からず使えない、という事になります。

②ブラシパネルの使い方

さて、ブラシツールは色々なブラシを使い分けることも楽しいですが、ブラシパネルでブラシの設定をさらに細かく指定する事でより多彩な表現が可能になります。
使い方を詳しく見ていきたいと思います。

sample64

このブラシパネルの一番基本的な設定がブラシの先端のシェイプ(ブラシパネル左側のリスト上)から可能です。何を設定できるのかといえば下記の内容になります。

ブラシパネルの右側が主に設定する項目です。上のブラシのリストと直径(サイズ)はブラシのコントロールパネルで設定できるものと同一なので説明は省略します。

「ブラシの角度と真円率の設定」ではブラシの角度と幅を設定する事が出来ます。
初期設定の丸いブラシのままだと角度を変えても変化が分かりづらいですが、真円率を変えてから角度を変えてみるとブラシの形が変わるのが分かるかと思います。
初期設定の丸いブラシの他にもブラシの先端の形状を変えて設定して見ると違いがより分かりやすいと思います。

「硬さ」については初期設定の丸ブラシしか使えない機能なのかもしれませんが、ブラシの輪郭をはっきりさせるか、ぼかすかの設定が出来ます。
「間隔」はブラシパネルで設定できる中でも面白い機能です。ブラシは基本的にブラシのリストに並んでいるブラシの先端を連打していくことによってラインを形成します。(私たちが自分で連打をすることはありませんが、マウスがドラッグ中は連打されていると思えば分かりやすいと思います)その連打の間隔を設定するのがこの部分です。分かりやすいようにブラシサイズを大きくした丸ブラシで間隔の設定を変更してみます。

sample65

通常の間隔だと一本のラインに見えますが間隔を広げていくと連続していた丸ブラシが離れ、点線のような効果になりました。この設定をしたままカンバスにブラシで描写すればこの点線のようなラインで描写する事が出来ます。
どうでしょうか?なかなか面白い機能ですよね。

ブラシによっては硬さや間隔の設定が出来ないものもあります。使いたいブラシを選択して色々設定してみてください。

いかがでしょうか。ブラシにも色々な機能が付いていますが、ブラシに限らずphotoshop(さらにはAdobe製品は)知らないとどう使っていいのか分からないものばかりです。

機能の多さにうんざりしている方も、この記事をきっかけにいろんな機能に触れてみていろんな発見をしてもらえればと思います。

次回は今回説明しきれなかったブラシパネルの右側の設定について説明していきたいと思います。

Photoshopを使ってみよう!その⑤~レイヤーの並び~

こんにちは。クリエイターズアカデミーの事務員です。
前回はレイヤースタイルについてご説明いたしました。なかなかやり始めると楽しい機能なので是非遊んでみてくださいね。
今回はレイヤーについて補足説明をいたします。慣れないうちで一番苦労するのがレイヤーの重なりです。どのレイヤーを編集していたのか、編集していたレイヤーが迷子になった等など起こりそうな問題を取り上げていますので思ったようにいかない!という方はチェックしてみてください。

1.レイヤーの重なりってどういうこと?

sample56

以前にレイヤーの機能についてご説明した時にレイヤーは透明なシートだとたとえさせていただきました。このシートをどんな順番で並べるかによって画像の表現が変わるというのは何度かさらってみた方にはお分かりいただけるかと思います。
下記に例として花の画像を用意してみました。それぞれ空、茎、花、花の中心をレイヤーで分けていると想定しています。

sample57

これは普通の花の画像に見えると思います。ではレイヤーの順番が入れ替わってしまったらどうでしょうか?

sample58

花の画像としてはおかしなものになってしまっています。このようにレイヤーの重なり、並べる順番は非常に重要です。制作の時にはレイヤーの順番にも気をつけてほしいと思います。

2.レイヤーの上下はレイヤーボックスの上下と同じ

ではレイヤーの重なりの順番はどこで確認すればいいのか。これはレイヤーボックスを見て頂ければ分かります。レイヤーボックスは制作されたレイヤーが縦に並んでいますが、これはレイヤーを重ねる順番と一致しています。
表示の順番がおかしい時にはレイヤーをドラッグして移動したいレイヤー位置まで動かしましょう。レイヤーの位置を変えてあげれば表示内容が変わるので確認してみてください。

sample59

 

 

レイヤーをグループ分け&レイヤーのクリッピングマスク

レイヤーの重なりで惑わされないでほしいのがグループ化されたレイヤーとクリッピングマスクしたレイヤーです。

レイヤーのグループ化とは複数のレイヤーをフォルダにまとめたような状態の事です。複雑な画像、手の込んだ画像を作成する場合、大抵レイヤーの数が増えます。2~10枚程度のレイヤーであればそのままでも困らないかもしれません。しかし20枚や30枚に増えたレイヤーを見ただけで把握するのは難しいです。そんな時はレイヤーボックス下のフォルダのアイコンを利用してレイヤーのグループ化を行いましょう。
まとめたいレイヤーをShiftキーやCtrlキーで選択してフォルダのアイコンまでドラッグ、もしくは先にフォルダのアイコンをクリックするとレイヤーボックスの中にフォルダが作られるのでその中に入れたいレイヤーをドラッグしていきます。するとグループ化されたレイヤーは通常のレイヤーよりは1段下がった位置に表示されるようになります。表示位置の違いでどこまでがグループ化されているレイヤーか変わりやすくなります。

sample60

次にレイヤーのクリッピングマスクですが、これはベースにするレイヤー上にある要素の範囲にだけ上に重ねたレイヤーの要素を適応するというものです。言葉だけだとイメージがつかないので図で説明いたします。

sample61

まず①のような図があったとします。かっこいい絵ではないのはご了承ください。この「ピクトグラム」というレイヤーに単純にレイヤーを重ねて絵を描くと②のようになります。かなり赤がはみ出ています。この重ねたレイヤーを下のピクトグラムのレイヤーに「クリッピングマスク」します。すると③のようにピクトグラムの画像の範囲のみ重ねたレイヤーが適応されます。これがクリッピングマスクというものです。このクリッピングマスクは何枚でも重ねられます。クリッピングマスクしたレイヤーを重ねる順番は表示順と一致するので表示の順番を変えたい時にはレイヤーの位置を変えましょう。
なお、クリッピングマスクは必ず選択したレイヤーの下のベースレイヤーの描画範囲に適応されます。ベースレイヤーの下にあるレイヤーをクリッピングマスクすることはできません(下にある別のレイヤーにクリッピングマスクされます)。
また、ベースレイヤーからさらに描画範囲を限定したい時には描画したい範囲のみを選択ツールで選択、レイヤーボックス下のマスクの作成でレイヤーマスクを活用して下さい。
クリッピングマスクはクリッピングしたいレイヤーを選択、ショートカットキー「Ctrl」+「Alt」+「G」で設定できます。解除する場合も同じショートカットキーで解除出来ます。

グループ化したレイヤー、クリッピングマスクしたレイヤーにも当然レイヤーの上下と表示順は一致します。グループ化したレイヤーの表示順を変える場合にはフォルダごと並び順を変えることは出来ますが、フォルダに入っている全てのレイヤーが同時に動きます。
また、新たにフォルダの中に別のレイヤーをドラッグしてグループ化させると、後からグループの中に追加されたレイヤーはグループの一番下に配置されます。ドラッグしてグループに追加した場合には必ず表示位置を正しい位置にフォルダの中で直しましょう。

クリッピングマスクしたレイヤーも同様です。クリッピングマスクは一つのベースレイヤーに対していくつでも作ることが出来ます。しかし複数出来たクリッピングマスクされたレイヤーの表示順はレイヤーボックスの並びと一致します。順番が間違っていないかは常に確認しましょう。

3.どのレイヤーに何が描かれているか分からなくなった!

グループ化やクリッピングマスクでレイヤーが整理されても、レイヤー数が増えればどうしてもどのレイヤーに何が描かれているのか分からなくなります。レイヤー名を丁寧に変更しておくのも一つの手ではありますが、毎回名前を編集するのも大変です。そんな時はどうやって目的のレイヤーを探せばいいのか。

それはレイヤーの左側にある目玉マークをクリックすると確認する事が出来ます。

目玉マークをつけたり消したりすると、選択しているレイヤー上の要素がカンバス上でもついたり消えたりします。目的の要素がついたり消えたりするまで全てのレイヤーの目玉マークを操作し続ける!少々時間はかかりますが確実なレイヤー捜索のやり方なのでどこに行ったか分からなくなったらいじってみましょう。

ちなみにグループ化したレイヤーはフォルダについている目玉をつけたり消したりするとグループに含まれている全てのレイヤーがついたり消えたりします。つまりフォルダごと表示するか、消すかというものになります。フォルダ内の一部のレイヤーのみオン/オフしたい時にはフォルダの中のレイヤーを選択して、そのレイヤーについてる目玉マークを操作しましょう。
クリッピングマスクしたレイヤーはベースレイヤーが非表示になるとクリッピングマスクしていた全てのレイヤーが消えます。クリッピングマスクしたレイヤーの一部を消したいだけであればクリッピングマスクしたレイヤーの目玉マークを操作しましょう。

いかがだったでしょうか?これだけ分かってくるとレイヤーも使いこなせてくるのではないでしょうか。レイヤーを使いこなせば自由な描画が可能になるのでぜひ色々試してみてほしいと思います。

Photoshopを使ってみよう!その④~レイヤースタイル~

こんにちは。クリエイターズアカデミーの事務員です。
前回はレイヤーについてご説明していきました。今回は前回最後にお話したレイヤースタイルについてご説明いたします。

レイヤースタイルって何?

sample54

レイヤースタイルはレイヤーに直接特殊効果をかけるもので、図形や文字のレイヤーに装飾を加えたいとき、描画するより簡単に効果をつけられる場合があります。
具体的にどんなことが出来るのか想像がつきづらいと思いますので下記のサイトなどを参考にしてもらえたらと思います。
ただのべた塗りフォントを金属質な質感に加工したり、ただ角の丸い図形をWEBサイトで良く見るぷっくりとしたボタンの質感にすることが出来ます。他にも光彩を入れて輝いているように見せることも可能です。
このブログで使っている画像の中でも、画像内で注意書きしてある部分、白いふちがついていることがほとんどだと思います。あれもレイヤースタイルでつけることが出来るんです。

metal_pack_22
こんな効果をつけることが可能です。かっこいいですよね?
(引用:「ワンクリックでデザイン、Photoshop用無料レイヤースタイル60個まとめ保存版」 http://photoshopvip.net/archives/29080

レイヤースタイルを設定してみよう

とにかく百聞は一見にしかずなので実際にレイヤースタイルを設定して見てほしいと思います。
レイヤースタイルを設定する場合には、レイヤースタイルを設定したいレイヤーをダブルクリック→レイヤースタイルを設定する窓が開くのでそこから設定します。
※レイヤースタイルにはショートカットがないのでよく使う場合には自分でショートカットを設定しましょう。ショートカットの設定は「Shift」+「Ctrl」+「Alt」+「K」から出来ます。

sample55

窓を開くと色々な効果が表示されます。順番に説明していきます。

①レイヤー効果:初期設定

ここで表示されている内容はレイヤーパネルの上部でも同じ内容が設定できます。(レイヤーの不透明度や塗りの不透明度等)わざわざここで設定するという事は少ないですが、レイヤースタイルによっては一緒にいじることもあります。

②ドロップシャドウ

dorpshadow

文字通り影を落とす機能です。ここで表示されている構造とはレイヤー上の文字や図形その他の要素から落ちる影の構造を編集するものです。描画モードと不透明度は通常のレイヤーでも編集できる項目なのでここでの詳しい説明はしません。

「角度」は影が落ちる方向を設定。

「距離」はレイヤー上の要素からどのくらい離れた位置に影を落とすかを設定。

「スプレッド」はその下のサイズと合わせて使う事が多いですが、輪郭をどの程度シャープに見せるかを設定。

「サイズ」は落ちる影の大きさを設定します。サイズが大きくなると輪郭がぼけていくので、輪郭がシャープなまま大きくしたい場合にはスプレッドも同時に調整します。

次に画質部分です。

「輪郭」は影の形成の仕方を設定しています。説明が難しいのでこれについては色々と触ってみるのが一番だと思います。

「アンチエイリアス」は輪郭を滑らかに見せるぼかし効果

「ノイズ」はその名の通りノイズを加えます。

「レイヤーがドロップシャドウをノックアウト」、はレイヤー上の要素と重なっているドロップシャドウ部分を削除する(ノックアウト)というものです。主にレイヤーの塗りが100%未満の時に効果が確認できます。

③シャドウ(内側)

shadow

こちらはドロップシャドウがレイヤー上の要素の外側に影を落とすものに対してレイヤー上の要素の内側に影を落とす効果です。
設定可能な内容はドロップシャドウと同じなので説明は省略いたします。

④光彩(外側)

光彩外

光彩はその名の通りレイヤー上の要素に光彩をつけるものです。しっかり調整すればネオンのような効果をつけることが可能です。

描画モードや不透明度は通常のレイヤーと同様の内容なので詳しい説明は省きますが、背景が白のまま光彩をつけても初期設定のスクリーンでは見えない事がほとんどです。通常や乗算等に設定を変えれば白背景でも見えるようになります。
逆に黒背景でネオンのような効果を狙っている場合にはスクリーンや比較(明)、などの設定に変更すると良く見えるようになります。
どちらも選択している色が(白背景であれば)白すぎないように、(黒背景であれば)黒くなりすぎないようんい注意が必要です。

エレメントの「テクニック」にはさらにソフトにと精細の二種類がありますが、これに関しては光彩のサイズを変更して見ると分かりやすいです。「さらにソフトに」がより光彩らしくふわっとした光を表現します。「精細」はレイヤー上の要素の形の変わり目に合わせて光の出方が変わるものなので、独特の表現になります。

スプレッドとサイズ、画質の輪郭はドロップシャドウと同様です。

「適用度」は光彩のカラーでグラデーションを使用している場合、グラデーションの開始位置をランダムに変化させるものですが、私にはいまいち効果が分かりません…

⑤光彩(内側)

光彩内

これは光彩をレイヤー上の要素の内側に適応するものです。設定内容は光彩(外側)と同一です。

⑥べベルとエンボス

bebel

これはレイヤー上の要素を立体的に見せる効果を設定するものです。慣れないうちは使いづらい機能ですが分かってくると面白いところなので是非挑戦してみてほしいと思います。

べベルとエンボスについては分かりやすい説明サイトがあったのでご紹介します。

「Photoshopの上級者でさえなぜか曖昧な5つの基本機能」http://www.mdn.co.jp/di/articles/2673/?page=2

記事になるほどなのでなかなか分かりづらい部分かもしれません。しかし色々試しているうちに気に入ったデザインが出来上がるかも!是非挑戦してみてください。

⑦サテン

saten

これはいわゆる布のサテン生地のようにレイヤー上の要素に滑らかな光沢を与えるものです。レイヤースタイルの描画色を変えれば光沢以外にも意図的な色ムラを作り出すこともでき、ただ塗りつぶしただけの文字や図形に簡単に深みを与えることが出来ます。

サテンの構造は基本的に今までの内容と同様です。
「サイズ」は光沢の輪郭をどのぐらいの範囲でぼかすかという意味です。0pxに設定するとぼかしがなくなり、シャープな形が浮かび上がるので、これはこれで面白い効果になります。

⑧カラーオーバーレイ

color

カラーオーバーレイはレイヤー上の要素に塗りつぶしを行うような機能です。レイヤースタイルで色を変えなくてもその他のツールで色を変えることは可能ですが、レイヤースタイルを設定しながらレイヤー上の要素の色も変えるとなると機能を行ったり来たりしなければならないので、同じ設定画面で全て設定できるというのがこの機能のメリットです。

⑨グラデーションオーバーレイ

gurade

これはカラーオーバーレイと同様にレイヤー上の要素をグラデーションで塗りつぶしを行うような機能です。
WEBや広告等で良く見られる金属質な表現も出来ますし、色によっては透明感のある要素に見せることも出来ます。

描画モードや不透明度は今までと一緒です。

「グラデーション」部分では実際にグラデーションを作っていきます。選択されているグラデーションが表示されているバーをクリックするとグラデーションエディターが表示されます。プリセットとよばれる初期設定のグラデーションから選んでも構いませんし、自分でグラデーションを作ることも可能です。作る場合にはグラデーションタイプで編集できます。バーの上部の付箋マークはその位置での不透明度(その部分だけ元の要素や背景が写り込むようになる)、バーの下部の付箋マークでは色を編集する事が出来ます。
気に入ったグラデーションが出来たら新規グラデーションをクリックすればその時作っていたグラデーションが保存され、今後も使えるようになります。

「スタイル」では線形・円形・角度・反射・菱形など様々な形でグラデーションを適応する事が出来ます(タテヨコ一方ではないグラデーションになる)

「角度」は文字通りグラデーションの向きを設定します。

「比率」は適応するグラデーションをどのぐらいの大きさ、範囲で適応するかを設定します。

細かく設定していけば、以前CSSでご紹介下ボタンジェネレーターで作成したようなデザインをphotoshopで作ることが出来ます。

⑩パターンオーバーレイ

patern

もう予想がつく方もいるかもしれませんが、これはパターンと呼ばれる質感素材をレイヤー上の要素に塗りつぶしていくものです。初期設定では2種しかなく、使用用途が難しいものばかりですが、このパターンの作り方については今後ブラシの作り方と合わせてご紹介したいと思います。
また、パターンの配布サイトもありますのでそこからダウンロードして使用するのも一つの方法です。

「パターン」で表示されている画像が適応されるパターンです。クリックすると選択可能な他の候補が表示されるので、そこから使いたいパターンを選択します。

「比率」はグラデーションと同様、どのぐらいの大きさでパターンを適応するかを設定するものです。

⑪境界線

kyoukai

最後に境界線です。境界線はレイヤー上の要素の淵に均一な範囲で境界線を引いてくれる機能です。このブログでも大変お世話になっている機能です。大変使いやすい!

境界線の構造、「サイズ」では境界線のサイズ、範囲を設定します。

「位置」は外側、内側、中央の三種類ありますが、レイヤー上の要素の外側に輪郭を引きたい場合には外側、レイヤー上の要素の内側に境界線を引きたい場合には内側(レイヤー上の要素から大きさが変わりません)、レイヤー上の要素の輪郭を中心として内側と外側に均等に境界線を引く場合には中央を選択します。

描画モードと不透明度については今までと同様です。

「塗りつぶしタイプ」にはカラー、グラデーション、パターンの三種類があります。これは輪郭線のみに適応されるカラーオーバーレイ、グラデーションオーバーレイ、パターンオーバーレイだと思って下さい。設定の仕方も今までの内容と同様です。

いかがでしょうか。レイヤースタイルの機能を駆け足ですがご説明してきました。このレイヤースタイルのいいところは複雑そうに見える効果を絵を描くスキルがなくても作ることが出来るという点です。簡単な設定をしただけで随分と作り込まれたような画像になるのは魅力的ですよね。
今回は文字を例にしてレイヤースタイルをご説明しましたが、図形やイラストにも使えるものなので色々な画像を見て「この効果レイヤースタイルで出来るかも!」と探してみるのもいいと思います。さらに自分で作れるようになれば言う事なし!photoshopをちょっと使いこなせた気分になりますよ。

皆さんも色々試してみてください。

Photoshopを使ってみよう!その③~レイヤーとは?~

こんにちは。クリエイターズアカデミーの事務員です。
前回画像作成に欠かせない解像度とカラーモードについてご説明をしました。今回はレイヤーについてご説明していきます。

レイヤーって何?

sample50

Photoshopに限らず画像制作ソフトには大抵レイヤーという機能があります。画像制作ソフトを何かしら触ったことのある方はなんとなくイメージがつくかもしれませんが、これは画像の制作で非常に重要な機能ですからしっかり理解して使いこなしていきたいところです。

レイヤーはPhotoshopのパネルグループに表示されます。もしもパネルグループに表示がない場合には「メニューバー」→「ウィンドウ」→「レイヤー」(ショートカットキー「F7」)をクリックすると表示されるので確認してみてください。

まず、レイヤーとは何か。これは透明なシートとイメージしてもらえれば分かりやすいと思います。画像制作ソフトではこの透明なシート「レイヤー」にイラストや文字や画像を配置し、重ね合わせることで合成、加工を行っていきます。
言葉で説明しても伝わりづらいかと思いますので細かく解説していきます。

 

最初にレイヤーパネルの中身についてご説明しておきます。
sample51
順番に説明していきますと、レイヤーパネル左側の目玉のマークでレイヤーの表示非表示を変更します。表示状態になっている時には目が開いていて、非表示になっている場合は空欄になります。これは色々なレイヤーが重なり合って作業しにくくなった時に、とりあえず使わないレイヤーを非表示にしておくなど、意外と活躍します。また、どのレイヤーにどんな要素が描かれているか分からなくなった時など、表示非表示を繰り返してどの要素がどのレイヤーに描かれているかを確認するときにも使えます。

レイヤーのサムネイルに「T」の文字があるレイヤーはテキストレイヤーです。このようなレイヤーは文字しか書けません。ブラシで描画するには違うレイヤーを用意しなければならないので注意して下さい。今後説明しますが、「ラスタライズ」を行うと通常レイヤーにすることができ、ブラシツール等を使う事も可能になります。その場合文字の編集は出来なくなるのでこちらも注意して下さい。

レイヤー名はその名の通りレイヤーの名前です。新規作成だけでは「レイヤー○(数字)」という名前になりますが、これだと何のレイヤーか分からなくなるのでこまめに名前をつけておくといいと思います。名前の部分をダブルクリックすると変更できます。

レイヤースタイルも今後改めて説明しますが、レイヤーには色々な効果をつけることが出来ます。その効果がついているレイヤーには右側に「fx」という文字がつきます。レイヤースタイルも使えると便利な効果がたくさんあるのでいじってみてほしいと思います。効果をつけたいレイヤーの空欄部分(サムネイル、レイヤー名がない余白部分)をダブルクリック、もしくは効果をつけたいレイヤーを選択してレイヤーパネルの下部にある「fx」をクリックしてもレイヤースタイルの編集画面を開くことが出来ます。

レイヤー位置のロックはカンバスを新規作成した時に背景色を透明以外の色を選択するとついてきます。これはカンバスの色を新規作成時に選択した色にするためについている機能です。もし編集途中で背景色が必要無くなった場合は背景のレイヤーを好きな色に塗りつぶす、もしくは背景レイヤーをダブルクリックすると新規レイヤーをつくる小窓が開くので、そのままOKを押すと通常のレイヤーに変更され、位置ロックも外れます。

sample52
こちらはレイヤーパネル上部の部分の説明です。編集したいレイヤーを選択しないとこれらの機能は変更する事が出来ませんので、グレーになってしまっている時はどれかレイヤーを選択してみてください。

レイヤーモードは通常のほかに乗算やスクリーン、焼き込み、覆い焼きなど色々な種類があります。それら一つ一つを説明するのは大変なのでAdobeのヘルプも参考にしてみてください。

Photoshop / 描画モード:http://helpx.adobe.com/jp/photoshop/using/blending-modes.html

分かりづらい場合には背景、もしくは新規レイヤーにブラシツールで何か描いてみましょう。その上にもう一つ新規レイヤーを作り、こちらにも最初とは異なる色で何か描いてみてください。そして最後に2番目に作ったレイヤーのレイヤーモードを変更してみましょう。変化のないレイヤーモードもあれば劇的に変化するレイヤーモードもあるはずです。使用する色や下に置いてある画像によって見え方ががらりと変わるので、慣れないうちは全てのレイヤーモードを確認してみてから自分の好きなモードを選んでみると良いと思います。

レイヤーの不透明度と塗りの不透明度は似ているようで少し異なります。レイヤーの不透明度はレイヤーそのものの不透明度を変更します。存在が薄くなるという感じです。塗りの不透明度はレイヤーに描いてある図柄や文字の不透明度のみ変更する事が出来ます。ですからレイヤーの不透明度を0%にしてしまうとレイヤーに描かれている図柄や文字やレイヤースタイルの全てが見えなくなりますが、塗りの不透明度を0%にしたレイヤーでは図柄や文字は見えなくなりますが、レイヤースタイル等は消えずに残ります。意外と使える機能なので使い分けたいところです。

レイヤーのロックはレイヤーに描いた図柄や文字を間違って消してしまわないように、変更してしまわないようにするために使います。①の透明部分のロックはロックをかける直前までに描かれていた図柄や文字部分のみ編集が可能になる機能です。ロックをかける直前まで何も描かれていなかった部分は編集する事が出来なくなります。②の描画のロックはブラシツールや消しゴム、塗りつぶし等の描画ツールが使えなくなります。間違って編集してほしくないレイヤーに設定しましょう。③の移動のロックは文字通りレイヤーに描かれた図柄や文字の移動が出来なくなります。配置を変えずに変更したい場合はこのロックを使いましょう。
④レイヤーのロックは①~③までの全てのロックがかかる状態です。何が何でも変更したくないレイヤーにはこれを使います。

sample53
最後にレイヤーパネル下部の部分の説明です。順番に説明していきます。

鎖のようなアイコンはレイヤーリンクを作成します。複数のレイヤーを選択してからレイヤーのリンクを行うとリンクしたレイヤー同士は編集不可能=ロックされた状態になり、移動の際も同時に動くようになります。重ね合わせたレイヤーを、そのままの状態で置いておきたい、移動させたい時などに使用します。

fxは先程説明しましたレイヤースタイルを設定するものです。レイヤースタイルを設定したいレイヤーを選択し、この「fx」を押せばレイヤースタイルを編集する事が出来ます。

グレーの上に白丸がのっている、カメラのようにも見えるアイコンはレイヤーマスクを作成するものです。マスクとはレイヤーの上に任意の編集可能領域を作るものです。編集したい範囲を選択してから、その選択範囲を適応させたいレイヤーを選択してマスクボタンをクリックします。するとレイヤーのサムネイルの横にマスク範囲のサムネイルが表示されます。マスク範囲に表示されている白い部分が編集可能領域です。一部の範囲を編集せずに残しておきたい時などに使います。

レイヤーの調整はレイヤーの色調補正や明るさコントラストを設定するものです。「メニューバー」→「イメージ」→「色調補正」からもほぼ同じような事を行う事が可能ですが、レイヤーによる色調補正は色調補正レイヤーの下に配置されている全てのレイヤーに同時に適応する事が出来ます。複数のレイヤーを統合せずに(一つのレイヤーに合成せずに)色調補正を行いたい場合にはとても便利です。

フォルダのアイコンではレイヤーのグループ化を行う事が出来ます。まとめたい複数のレイヤーを選択してフォルダアイコンまでドラッグ、もしくはフォルダアイコンをクリックするとレイヤーを一つのフォルダにまとめる事が出来ます。
例えばWEBページのデザインを行っているときに、ヘッダー部分のレイヤーを全てまとめる、ボタンの画像だけ全てまとめる、イラストでたとえれば頭のパーツをまとめる、腕のパーツをまとめる等、増えたレイヤーを整理する事が出来ます。

紙をめくるようなアイコンはレイヤーの新規作成ボタン。現在選択しているレイヤーの上に新しいレイヤーを作ってくれます。また、特定のレイヤーを新規作成ボタンへドラッグするとドラッグしたレイヤーをコピーして同じレイヤーを作ることが出来ます。

ゴミ箱のアイコンはレイヤーの削除ボタンです。増える過ぎて必要のないレイヤーはまめに捨てていきましょう。

レイヤーパネルの説明だけで随分かかってしまいましたがいかがでしょうか?それぞれどんな使い方をするのか分かりづらいとは思いますが、このレイヤー機能は画像制作ソフトの中でもかなり重要な機能なのでまずは使って慣れていってください。

次回はレイヤースタイルについて解説していきたいと思います。この機能、私は大好きなので是非使ってほしいと思います!