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

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

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

今回はPhotoshopの基本技術編第二弾。ビギナーがマニュアル・テキストなしでPhotoshopを使って作業できるようになるための最低限の基本を、実際に触りながら追っていきます。

 

   

 

■この記事を読むと

・クリッピングマスク

・レイヤーの重ね方(乗算とスクリーン)

・定規・グリッドとガイド

・選択ツール

・塗りつぶしツール

・スマートオブジェクト

・上記ツールの参考ウェブサイト についてわかります!

 

  ■今回の課題

ハウツーを調べて実際にPhotoshopを使いながら、基本操作を学ぼう!  

 

こんにちは。今回もPhotoshopビギナー向けの基本技術を紹介します。前回は文字ツール、シェイプツール、レイヤー効果について勉強しました。今回は、クリッピングマスク、レイヤーの重ね方(乗算、スクリーン)、ガイド、選択ツール、塗りつぶしツールについて書いていきます。前回までの内容と少しかぶる部分もあるので、照らし合わせながら見ていきましょう。 今回は使ったのはこの画像です。  

 

 

毎日デジタル2005,10  フィナーレ 入選

毎日デジタル2005,10  フィナーレ 入選

 

 

  summer        

 

 

・クリッピングマスク

 

クリッピングマスクは、2枚のレイヤーを重ねて、下にあるレイヤーを切り取ったかのように見せる技術のこと。下のレイヤーを上のレイヤーが隠す(mask)するので、クリッピングマスクと呼びます。クリッピングマスクの長所は、文字や星型などの複雑な形でも綺麗に切り抜けることと、切り抜いたあとでも移動や拡大をして微調整できるので、切り抜き直す必要がないこと。切り抜きよりも編集後のやり直しがしやすいのがクリッピングマスクの特徴です。切り抜きはワンクリックなので初心者的にはそっちに走りたくなる(わたしだけ?)ものですが、後で調整出来るのはやっぱり大きい。

実際にやってみました。今回は花火の画像を文字で切り抜きます(文字レイヤーの上に画像レイヤーを重ねます)。レイヤーパネルの状態はこれ。

スクリーンショット 2016-02-16 14.04.57

画像レイヤーを右クリックして、クリッピングマスクを作成を選びます。

 

スクリーンショット 2016-02-16 14.02.05

すると、

スクリーンショット 2016-02-16 14.06.14

こんな感じに。

 

https://helpx.adobe.com/jp/photoshop/kb/4995.html          

 

 

・レイヤーの重ね方(乗算・スクリーン)

乗算とスクリーンはレイヤー効果の種類の一部で、簡単に言えば、複数枚のレイヤーを重ねて明るさや彩度を調整したり、レイヤー同士を合成したりできる機能です。乗算とスクリーンを、それぞれ説明していきます。

 

①乗算

乗算を使うと、二枚違う画像をレイヤーとして使った場合は上のレイヤーの白い部分を取り除いて合成したり、あるいは同じ画像を重ねていくことで白さ(明るさ)を取り除いて、彩度を上げたり画像を暗くしたり出来ます。

下の画像は2枚の異なる画像を重ねた時。花火の画像の上にsummerの画像を重ねて、レイヤーパネルでレイヤーの重ね方を「通常」から「乗算」に設定しました。

 

  スクリーンショット 2015-08-17 11.55.57

レイヤーパネルの表示はこんな感じ。二枚の画像を重ねて切り替えるだけ。

 

 

 

 

 

スクリーンショット 2016-02-16 13.23.58

 

下の画像は二枚同じ画像を重ねた時。これも上の合成と同様、画像を重ねて切り替えるだけ。合成の仕方を切り替えるだけ。

 

スクリーンショット 2015-08-17 11.56.09

 

スクリーンショット 2016-02-16 13.31.33

 

  http://www.wave-inc.co.jp/weblog/?p=1585 http://aska-sg.net/pstips/manual/030-palette/030-0011-08_screen.html      

 

 

②スクリーン

対してスクリーンは、二枚違う画像をレイヤーとして使った場合は周りのピクセルに比べて白い部分を残して合成したり、同じ画像を重ねていくことで画像の明るさを上げることが出来ます。  

こちらもやり方は乗算と同じ。重ね方を切り替えます。

 

スクリーンショット 2016-02-16 13.34.53

 

スクリーンショット 2015-08-17 11.55.23

スクリーンショット 2015-08-17 11.55.40

  http://aska-sg.net/pstips/tips/pages/layer-byougamode-screen-tips01.html      

 

 

・定規・ガイド・グリッド

ガイドの表示をオンにすることで、画像や文字の配置を正確に行うことが出来ます。加えて、グリッドや定規も同じようにオンにすると、一層正確さが増して均整なイメージを作ることが出来ます。ガイドがピクセルに沿って自動で設定されているのに対し、グリッドは自分で編集することが出来ます。  

赤で囲まれている部分が定規です。定規は上のバーの表示から選択して表示非表示が切り替えられます。

ガイド②

 

スクリーンショット 2016-02-16 13.50.13

 

水色の線がガイドです。ガイドは定規の部分にカーソルを合わせてドラッグすることで何本でも引くことができます。画像を切り取ったり、イメージや文字を等間隔で配置する際に役立ちます。

スクリーンショット 2016-02-16 13.45.29

 

最後に、グリッドです。花火の画像上に表示されている漢字練習帳のマス目みたいなやつ。これも文字やイメージ配置のメドになります。同じく表示から切り替え可能。

スクリーンショット 2016-02-16 13.54.48

  https://helpx.adobe.com/jp/photoshop/using/grid-guides.html       

 

 

・選択ツール

選択ツールとは、範囲を指定してその部分だけ編集・補正をすることができる機能のことです。選択ツールには、長方形選択ツール/楕円形選択ツール、なげなわツール/マグネット選択ツール/多角形選択ツール、自動選択ツール、クイック選択ツール/選択ブラシツールがあります(/で区切ったものは同じ場所に収納されています)。 例えば、楕円形選択ツールを使えば、選択範囲外を塗りにしてフレームのようにすることが出来たり、投げなわツールを使えば、特定のものを切り抜いたりすることが出来ます。自動選択ツールは、選択範囲と色が近い部分を自動的に選択してくれます。  

 

 

 

スクリーンショット 2015-08-17 11.56.53  

 

https://helpx.adobe.com/jp/photoshop-elements/kb/235129.html        

 

 

・塗りつぶしツール

選択範囲とその周辺に任意の色を塗ることが出来るツールです。色が近い部分ほど塗り色が濃くなります。グラデーションツールと同じ場所に収納されています。  

スクリーンショット 2015-08-17 11.56.41

  http://techacademy.jp/magazine/4538        

 

 

・スマートオブジェクト

スマートオブジェクトとは、Photoshopでの画像操作(特に拡大縮小)過程において、副作用的に発生し得る画像そのものの劣化を防ぐための機能です。レイヤーパネルでレイヤーを右クリックすると選択できます。

スクリーンショット 2016-02-16 13.57.21

画像は小さなドットが集まってできています。なので、画像を一度縮小すると、縮小した際に画像を構成するドット数が元画像よりも減ってしまっているので、再度拡大した時に画像が荒くなってしまうんです。ですが、スマートオブジェクトにあらかじめ変換してから操作することで、元画像を保持したまま画像の拡大縮小が行えます。

また、スマートオブジェクトに変換したものは、複数のレイヤーから構成されたものでも、一つのデータとして処理されるので、ウェブページ上のボタンなどを作成する際も、まるごとスマートオブジェクトに変換すると扱いやすくなります。

以上のメリットから、Photoshop上に画像等を配置するときは、「とりあえずスマートオブジェクトに変換する!」と覚えておくのがいいそうです。

 

 

注意点としては、

①あくまでも元データの保持をしているだけなので、元画像よりも拡大してしまうと画像は当然劣化します。

②元データのファイルサイズが大きいと、そのスマートオブジェクトを複数含んだ場合にPSDファイル自体も大きく(=重く)なるので、ほどほどの大きさに直してから配置しましょう。

スマートオブジェクトの状態ではPhotoshop上で色調等の編集を行えないので、最初にサイズ以外の変更を済ませた状態で変換するか、レイヤーパネルのメニューアイコンから「コンテンツを編集」を選択するか、レイヤーパネル上のサムネイルをクリックすると、別のPhotoshopデータとしてファイルが立ち上がり、編集可能になります。

スマートオブジェクトへの変換は、レイヤーパネルからレイヤーを選択した状態で右クリックで可能です。 http://www.designmap.info/homepage/application/photoshop/photoshop_1/ https://blogs.adobe.com/creativestation/web-photoshop-smartobject-benefits-and-manipulation

 

 

 

デジタルマーケティングで最近気になることはありますか?調査して記事にします!

2017-02-09T14:44:40+09:00