fbpx

Photoshop、これだけ出来ればOK!①

///Photoshop、これだけ出来ればOK!①

Photoshop、これだけ出来ればOK!①

今回は基礎的なPhotoshopの使い方を勉強していきます。入門書は膨大な冊数の中からどれを選べばいいかわからないし、一冊が恐ろしいほど分厚い!でも、本当は覚えなきゃいけない機能は少ししかないんです。      

 

■この記事を読むと

①文字位置(字間隔と行間隔)の微調整 ・カーニング ・トラッキング ・行間調整

②図形ツール

③カラー/パターンオーバーレイ

④上記ツールの参考ウェブサイト がわかります!  

 

■今回の課題

ハウツーを調べて実際にPhotoshopで操作しながら、どんなツールがあるかを学んでいこう!

 
私もN2Pに入ってからPhを始めた超ビギナー。でも、入門書やテキストを使わずに実践と先輩からのご指導だけで勉強を進めてきました。レイヤーの概念すらイマイチ分からないゼロからのスタートで、ツールバーの機能もあらゆるバーも全部覚えなきゃ仕事が出来ないと思っていたので、果てしない、、と感じたのを覚えています。もちろん全ての機能を使えるに越したことはないけれど、最低限これだけ出来ればほぼ安心!というラインが存在するんだとか。他のことは必要になったときに学べばいい、そんな気持ちでゆっくり勉強していけば大丈夫。一緒に頑張りましょう。
というわけで、「これは押さえておこう!」という機能を二つの記事に分けて紹介していきます。私も記事を書きながら実際に触ってみました。
 
 
 

1.文字ツールに関すること

 

1−1.カーニングとトラッキング(文字詰め)

混同されがちなカーニングとトラッキングには、実は明白な違いがあります。カーニングは文字単位のまとまりの間隔を調整するために利用するのに対し、トラッキングはテキスト(文章)のまとまり同士の間隔を調整するために使用します。なので短文や単語にそれぞれカーニングとトラッキングを使用しても、微妙に間隔幅が違うということしかわかりませんが、文章に適用してみると違いがわかるのです。 http://webmemo.biz/kerning_tracking/

ちなみに、カーニングショートカットキーはalt+←→。

 

1−2.オプティカルとメトリクス

文字ツールで表示されるオプティカルとメトリクスとは、自動でカーニングをしてくれる機能のことです。 http://fifteen.exblog.jp/13780046/     両者の違いは、オプティカルがphotoshopが​自動​的に​カーニングしてくれるのに対し、メトリクスは​フォント自体に既に​設定されている「ペアカーニング」をカーニングします。フォント制作者の意向に近いのはメトリクスを使用した場合ですし、カーニング情報を持っていないフォントではオプティカルを適用したほうが綺麗に見えます​。
 
 
 
スクリーンショット 2015-08-07 14.17.08
 
 
 

スクリーンショット 2015-08-07 14.17.26  

 1−3.間隔の調節方法

カーニングとトラッキングはグラフィックデザインの専門用語ですが、一般的に使われるワードやエクセルと同じように、文字の間隔を調整することもできます。文字ツールからボックスを開いて、調整したい部分全体を洗濯した状態で間隔調整をクリックすると、入力した数値通りに間隔をとってくれます。 https://helpx.adobe.com/jp/indesign/kb/224548.html#main_2___________

 

 

 

1−4.行間の調節方法

文字同士の間隔だけではなく、行同士の間隔を調整する機能もあります。これも間隔調整と同じ要領です。 http://tech.kihon.jp/photoshop/3816

スクリーンショット 2015-08-07 14.19.39
 
 
 
 
 

2.図形に関するツールについて

図形を描写するツールを使う場合に気をつけたいのが、「エッジの整列」。
 
 

2−1.シェイプツール 

Photoshopでは、多角形ツールを使って図形を描くことができます。 スクリーンショット 2015-08-07 14.17.56
 
レイヤーパネルで塗りを調整することで、内側の色を消して外側の色のみ残すことが可能です。  
 
 
 
 
 
 
★不透明度と塗りの違い
http://www.webdesignlibrary.jp/2012/09/between_opacity_and_fill.php 不透明度は適用されている効果(境界線やドロップシャドウ等)にも影響しますが、塗りつぶしはその画像のみに影響します。
 
 

スクリーンショット 2015-08-07 14.19.13

 

2−2.レイヤー効果

一つ前の2−1で紹介したレイヤーパネルに表示される、レイヤー単位で加えた効果を、レイヤー効果といいます(そのまま)。全てのレイヤー効果はコピー、ペーストで複製することができるので、ボタンなどの共通パーツでも効率よく効果を適用できます。​
https://helpx.adobe.com/jp/photoshop/using/layer-effects-styles.html

 
 
 
以下がよく使う基本的なレイヤー効果です。

 

 

①カラーオーバーレイ
 
カラーオーバーレイは、図形や背景に色をつける効果です。色をつけるなら塗りつぶしでもいいじゃないかと思う方もいると思います。わたしもそう思いました。ですが、実は両者には違いがあるのです。イメージで言うと、カラーオーバーレイが「色の置き換え」で、塗りつぶしが「上塗り」。カラーオーバーレイを使うと、元々のデザインを正確に残したまま色を変えることができます。つまりそちらの方がより繊細に色をつけることができるということです。では塗りつぶしはいつ使うのかというと、背景の色を変えるときなど、細かい配慮があまり必要ないとき。もちろん、オーバーレイだけで全ての色づけを済ませてしまうことも出来ます。
 
 

スクリーンショット 2015-08-07 14.19.13    

 

 

②グラデーションオーバーレイ
 
グラデーションオーバーレイは、着色した図形のカラーをグラデーションに出来る機能です。一口にグラデーションオーバーレイといっても色々な効果があるのですが、代表的なものを三つ紹介します。 透明度を下げて適用すると質感が出るので、初めて実践する方はお試しあれ。
 
 
★​乗算=もともとの色を保ちつつ黒を乗せてグラデーションを作ります。全体が暗めの印象になります。  
 
★スクリーン=白を使ってグラデーションを作ります。元々の色より全体がぐっと明るくなります。  
 
★オーバーレイ=元々の色を鮮やかにしながらグラデーションをつくります。 これらの効果に加えて、透明度を下げていくとマイルドなイメージになります。
 
 

スクリーンショット 2015-08-07 14.17.41      

 

 

③パターンオーバーレイ
 
Photoshopに保存されているパターンを図形の中に柄として挿入できる機能です。自分で作ることもできますし、フリー素材をダウンロードして使うこともできます。
 
 
 
スクリーンショット 2015-08-07 14.18.50    
 
​④境界線
 
図形の内側か外側に色をつけることができる機能です。注意したいのが、図形の形を細部まで維持したい場合は、境界線は内側に設定すること。それには二つ理由があって、境界線を外側にすることで、図形のサイズが変わってしまうということと、外側に境界線をつけるとPhotoshopの仕様で角が1ピクセル丸くなってしまうということです。後者はとくに、固いイメージのデザインを作るときに困るポイントなので、境界線は基本内側にするようにしましょう。
 

スクリーンショット 2015-08-07 14.19.05    

 

④ドロップシャドウ

ドロップシャドウは影をつける機能です。距離と透明度の標準は5ですが、サイズを2、距離を2に設定して透明度を下げると、自然で落ち着きのある印象になります。ちなみにスプレッドは影の濃さです。 ここでちょっとしたテクニックを紹介します。 ★サイズを下げるとポップな印象になります。 ★反対色やエッジの効いた色(ex.オレンジ対水色)をシャドウとして入れるのが流行っています。 ★陰の向きは画像の中で統一すること。

 

 

 

スクリーンショット 2015-08-07 14.18.31    

 

 

⑤​シャドウ(内側)
 

★シャドウを内側に入れると図形内の情報度を下げることができます。

スクリーンショット 2015-08-07 14.18.15  

 

次回も引き続き、残りの基本的なPhotoshopの機能について書いていこうと思います!
2017-02-09T14:44:40+09:00