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