バナー修正

ナカガワ

バナー修正

こんにちは、ナカガワです。

本日は、先日提出したバナーを実習担当の小薮さんに添削していただいて、一日修正していました。
その数はわずか２つ。
いや、本当にPhotoshopを使い慣れていないというのも多分にあるのですが、このバナー修正というのがえらい時間かかるんです。

そもそもバナートレースの1回目の記事でも申し上げましたが、このトレースはひたすらに厳密さにこだわって1pxでもずれれば修正です。

私とヒガキさんの間に小薮さんが座られてそれぞれに添削をしていただいていましたが、もう自分の不出来さに恥ずかしかったです。
ただ、その後小薮さんの「はじめはみんなこうなので気にしないでください。」という、温かいフォローでだいぶ前向きになって、作業に取組みことが出来ました。

トレースチェックのポイント

ここで今回私が修正したバナーに話を移す前に、私達に小薮さんがおっしゃった共通のポイントの中で主なものを2つ挙げます。

1.きちんとフォルダを整理する。

これは制作の現場によるのですが、デザインを複数人でする場合、他の人が見ても分りやすいようにしなければあとの人が大変苦労します。
webサイトをページ一つ作ったとして、レイヤーの数はかなり増えていきます。
なので、例えば「header」や「footer」など、きちんとフォルダに名前をつけてグループにしてまとめておきましょう。
ただ、今回はバナーなのでそこまでこだわる必要はありませんでした。

また、デザイナーであれば打ち合わせの際画面を確認したりすると思うのでまだいいですが、コーダーさんは完全にスライスして切り取られたものを渡されるので、ますます混乱します。
なので、第3者が見てもきちんと分るよう、「長方形」とかのままにするのはやめておきましょう。

2.色はカラーピッカーで複数ポイントして調べる

Illustratorでもそうですが、Photoshopにも「スポイトツール」というのがあります。ショートカットは I(アイ)です。
これをつかってもとの画像でどうんな色を使っているのか調べることができます。
私もこれを使って随時調べていたのですが、ここで見落としがあったんです。
例えばこのボタン、薄いグラデーションを使っています。


トレースしているときは正直気づきませんでした。

これが上の方の色。

そしてこれが下のほうの色です。

いかがでしょう？　ほんのすこし色が違いますよね。多分これに違和感を感じなかったのは、このボタン自体がとてもよくできているため、「自然」に感じられてしまって違和感として認識できなかったんだと思います。
正直最初は、スクショを撮って貼り付けたときに色が劣化しただけだと思っていました。お恥ずかしい。
なので、もしなにか色を塗る際は、必ず複数のポイント、できれば離れたところをクリックしてみるとできるだけ漏れなく色を調べることが出来ると思います。

トレース1

では、ここからは一つ一つ見ていきます。まずは、最初にしたバナー。
小薮さんからの添削のポイントは主に5つです。

･ふちの色が違うのと、1pxずれている。
・ルーターの下の影は、パスではなく画像を複製して反転の上、グラデーションをする。
・ロゴを切り抜くときは、きちんとまっすぐの部分はまっすぐ抜く(「スマモバ」の「ス」の最初のところが斜めになっていました)
・写真の切り抜きで、元画像の背景（ピンク）が残っているのできちんと切り取る。
・女性の背景の水玉のドットの色と感覚をもっと合わせる

お手本

修正前と修正後

だいぶ近づけたのではないでしょうか。ただ、パターンの作り方などまだまだだなぁと、改めて感じさせられます。

トレース2

そして、こちらが2つ目のトレースです。
小薮さんからの添削ポイントは主に4つです。

・フォントがないのはしかたないとして、きちんと太さと感覚は似せるようにする。
・クリックボタンとロゴは切り抜きではなく、きちんと自分で作る。
・写真右のぼかした白い部分をもっと自然にする
・「新築分譲マンション特集」の文字にかけている袋文字は元の画像のようにもっとソフトにする。

お手本

修正前と修正後

今回学んだこと

今回こうしてトレースして修正して気づいたことを2つメモしておきます。

1.「これでいい」は極力避ける。
トレースをしていると、その厳密さゆえにどうしても「ここはこれぐらいでいいだろう」と心がブレーキをかけてきます。
しかし、今回添削を受けてみて、まだまだ、まだまだ詰めることができるとその奥の深さを痛感しました。
「これぐらいで」ではなく、「もっとできないか」という姿勢こそが上達の近道と言えます。

2.自分が作ったものは時間を置いて確認してみる
作業中もちろん、お手本を透明にしたりして逐一確認はしているものですが、それだけではまだダメです。
これは罠ともいえまして、随時確認して作業を進めていると「これで合っている」とどうしても思いがちです。
ですが、時間を置いて改めてみてみると、その粗に改めて気づきます。
実際、小薮さんがポイントを挙げる前に自分でも「マズい」と思えるポイントにいくつか気づきましたし、当然そこをご指摘されました。
時間があるなら、できるだけ見直す作業を入れてみると、一段と精度が増すと思います。

最後に

前回のトレースの記事で、トレースをすることでとても多くのことが学べると書きましたが、多分今回のように添削を受けなかったらあのままストップしていたと思います。
企業実習という現場に身を置くことで、よりいっそう深みを持って勉強することができていると切に感じています。
このような機会を少しでも活かせるよう、これからも一生懸命取組んでいきたいです。