この記事の目次
ウェブデザインB 第7回
Sponsored Link
前回はワイヤーフレームを提出してもらいましたね。
今回は先週に続いてレイヤーパネルの解説を行い、実際のデザインに入っていこうと思います。
Photoshopでのデザイン起こし① 使い方編：レイヤーパネル応用編
今回もそれぞれの使い方に関してはAdobe公式、また非常に丁寧に解説されているページがありますので、そちらを見ながら説明していきます。
Photoshopの基本設定
今回は実際に手を動かしながら説明をしようと思います。まず基本設定から行いましょう。
Adobe Photoshop CC 2015を起動してください。
レイヤーパネルの使い方
前回は基本的な使い方の部分を抑えました。
今回は少し応用的な使い方を説明していきます。
不透明度・描画モード
不透明度とは、レイヤーがどれくらい透けて見えるかの指標で、パーセンテージで指定します。
描画モードは簡単に言うと、選択したレイヤーと下にあるレイヤーとの見た目上どうやって合成するか？ということになります。
詳しくは以下のページを見てみましょう。
レイヤーの不透明度によって、1 つ下のレイヤーが透けて見える度合いが決まります。不透明度が 1 ％のレイヤーはほとんど透明になり、不透明度が 100 ％のレイヤーは不透明になります。透明部分は、不透明度の設定に関係なく透明のままとなります。
レイヤーの描画モードは、レイヤーをその下のレイヤーのピクセルとどのように合成するかを決定します。描画モードを適用することにより、様々な特殊効果を作成できます。
レイヤーの不透明度と描画モードは、ペイントツールの不透明度や描画モードと連動します。例えば、不透明度が 50 ％のディザ合成モードを使用したレイヤーを、通常モードで不透明度 100 ％に設定されたブラシツールでペイントすると、ペイントした部分は不透明度 50 ％のディザ合成モードで表示されます。同様に、不透明度が 100 ％の通常モードを使用したレイヤーに対して、不透明度が 50 ％の消しゴムツールを使用すると、ペイントの 50 ％だけが消去されます。
描画モードの詳細に関しては、以下のページも参考になると思います。
レイヤーマスク
レイヤーマスクはその名の通り「マスク=目隠し」です。
以前から講義で紹介している切り抜き方法などで作った画像もレイヤーマスクをかけて表示部分と非表示の部分を分ける作業をしているわけです。
レイヤーにマスクを追加し、マスクを使用してレイヤーの一部を非表示にしたり、下にあるレイヤーを表示したりすることができます。レイヤーのマスクは、複数の写真を組み合わせて単一の画像にしたり、写真から人物やオブジェクトを削除する場合に便利な合成の手法です。
調整レイヤー・塗りつぶしレイヤー
調整レイヤーと塗りつぶしレイヤーは、非破壊編集にて真価を発揮します。
非破壊編集とはレイヤーに加える変更を元データに上書きすることなく反映させることができ、いつでも元データの状態に復元できるように編集することを意味します。
調整レイヤーは、ピクセル値を変えることなく、画像のカラーや色調を補正します。例えば、画像に対してレベル補正やトーンカーブの補正を直接行う代わりに、レベル補正またはトーンカーブの調整レイヤーを作成することができます。カラーと色調の調整は調整レイヤーに格納され、その下にあるすべてのレイヤーに適用されます。このため、1 つの調整で複数のレイヤーを修正でき、各レイヤーを個別に調整する必要はありません。変更内容を破棄することで、いつでも元の画像を復元することができます。
塗りつぶしレイヤーでは、レイヤーを単一色、グラデーションまたはパターンで塗りつぶすことができます。調整レイヤーとは異なり、塗りつぶしレイヤーは、その下のレイヤーには一切影響しません。
また、調整レイヤーが実際にどのように影響するかは以下を参考にしてください。
レイヤーパネルに関しては以上です。
内容によって必要な使い方をして効率よくデザインが組めるようにしてみましょう。
Photoshopでのデザイン起こし② 塗りつぶしレイヤーを使って、サイトの背景を作ってみよう
皆さんにも自分のサイトのデザインを組んでもらいますが、
今後はサイトデザインを組んでいく手順にならってそれぞれの技術を順次紹介していきます。
その技術を身につけながら、自分のデザインを完成させていってください。
塗りつぶしレイヤーの解説
今回は今解説したばかりのレイヤーパネルの中から、「調整レイヤー・塗りつぶしレイヤー」を使って、ウェブサイトの背景を作ってみたいと思います。
塗りつぶしレイヤーの「パターン」を選択
まず、レイヤーパネルの調整レイヤーボタンをクリックし、「パターン」を選択します。
ダイアログの中のサムネイルの右側の下矢印→ギアアイコン→好きなパターンファイルを選択
「パターンで塗りつぶし」ウィンドウが出てくるのでサムネイルの右側の矢印、ギアアイコン、好きなパターンファイルを選択する流れ。
好きなパターンを選択してOKをクリック
パターンファイルが変わるので、その中の好きな個別パターンを選択してOKボタンをクリック。
すると・・・
これでパターンが反映されます。
もしサイトの背景が単色の場合は、最初の段階で「パターン」ではなく「塗りつぶし」を使って背景色を指定しましょう。
なお、これらを応用した方法もあるので、時間があればそちらも紹介します。
塗りつぶしレイヤーで背景を作ろう
では実践です。
現在ワイヤーフレームの状態のものをどんどんデザインデータに作り変えていきましょう。
時間をとりますので、背景を作りながらその流れでどんどんデザインを完成させていってください。
Photoshop 実践 その5：初心者向けの画像の加工①
次に、前回の講義でできなかった作業を行いましょう。
今回は切り抜きではなく、写真の背景をぼかす方法、そして文字をクレヨンで描いたっぽく装飾する方法、さらに画像のノイズを除去する方法です。クレヨン文字の加工は色々と応用が効く方法だと思いますよ。
Photoshopで写真の背景をぼかす方法【初心者向け】 | TechAcademyマガジン
本日のまとめ
前回と今回でレイヤーパネルの使い方を解説してきました。レイヤーパネルはPhotoshopを使う上で外すことのできない基本中の基本のツールです。
今回紹介した「塗りつぶしレイヤー」はどの案件でもどこかに使う非常に使用頻度の高い方法です。
またサイトの背景パターンや背景色はモニターで占める割合も非常に高いので印象も強くなります。
応用すればとても有効な方法ですので、しっかり身につけて考え込まれたサイトデザインを完成させましょう。
