みなさんこんにちは、sakiです。
今日のバナトレ＃６です。
今回はphotoshopの機能である、パペットワープというものをいじってみました。
サンプル
今回のバナーサンプルはこちらです。↓↓
シンプルなバナーです。
これだけじゃ何の広告なのかあまりピンと来ませんね・・
個人的にはこれくらいさっぱりしているものが好みです。
人の影の作り方を勉強したくて選んでみました。
目的はあくまで影の付け方なので、
フォント選びに時間はかけない、と決めて取り組むことにしました。
トレースしてみて
トレースしたものがこちらです。↓↓
tool : photoshop
time : 60min
そういえば枠線つけてなかったです。
白い背景のバナーは特に、ページ背景と同化してしまって広告枠がわからなくなってしまうので
視認性をあげると言う意味でも枠線必須です。
すっかり頭から抜けておりました・・・
背景白でなくても、例えば白とピンクのボーダー背景とか
白に近いクリーム色などの淡い色とかのときは必須だと思います。
まあつけたりつけなかったりすると今回みたいに忘れてしまいそうなので
毎回枠線をつけるようにしてもいいかもしれません。
私も次回から気を付けます。
さて本題です。
パペットワープとは
今回のタイトルにもあるパペットワープ。
みなさまご存知でしょうか？
私は知りませんでした。
影の付け方を検索しているときに出てきたのですが
要は自由自在に変形させられるツールです。
煙突を曲げてみたり、人の手の向きを変えてみたり・・・応用すると色々できます。
私が実際に踏んだ手順をご紹介します。
- 「サンプルバナー」をコピー＆ペースト
- 「女の人」をクリッピングマスクで切り抜き
- 切り抜いた「女の人」レイヤーをコピー＆ペースト（影になる部分なので名前を「shadow」とします）
- 「shadow」を右クリックでスマートオブジェクトに変換（失敗しても元に戻せるように）
- 「shadow」にレイヤー効果の「カラーオーバーレイ」で塗りつぶす
ここまでできると画像のようなものができると思います。
- 「shadow」を選択した状態で「編集」＞「パペットワープ」を選択
するとこんな網が出てきます。
- あとは変形したいところをクリック＆ドラッグ！
実際にやってみてもらえると動きがわかるかと思います。
または「パペットワープ」で検索してみてください。
実際に動かすと感動するので（私だけかも）おすすめ！
トレースして思ったこと
ここまで書いといてあれですが、
恐らく他の方法のほうがもっと綺麗で自然な影を作れたかもしれません。
パペットワープ、動かしてる分には面白く楽しくできたのですが
なんか不自然に影が歪んでしまいました・・・
ぼかしをかけれればサンプルみたいに自然になるのかな？
それとも撮影時点でついているものなのでしょうか・・
どこまでphotoshopでやるのか・できるのかが今の私には判断がつきません。
逆引き辞典みたいなやつ買おうかな？
このバナー、シンプルですが余白が十分にとってあって、
モデルさんも一人でまっすぐ立っているし、白と黒を基調にまとめられていて
とても洗練された印象を受けます。
ここまでシンプルだとやはりフォントもデザインの一員というか、
大事な要素になると思うのですが
サンプルは手書き風のフォントがメインになっているので、
洗練されている中にも硬くなりすぎず、
親しみやすさを残すことができていると思います。
やはりフォントって大事、ですね。
私ももっと自分の中の「引き出し」を増やさないといけないなあ。
がんばります！
今日も最後までお読みいただきありがとうございました〜〜！
