読者です 読者をやめる 読者になる 読者になる

徒然畑

徒然なるままに。

【バナー模写1週目】バナーを作って学んだことメモ

Webデザイン 製作日記 覚書

先週からちょっくらはじめてみました、バナー模写。
Photoshopレベルアップを目的に、実際にあるバナーを模写してそれっぽい奴を作ってみようという試みです。
今回はこちらの二枚を作成しました。

IT系Q&Aサイト風バナー

f:id:mio_U_M:20170207010047j:plain

□参考元
retrobanner.net

一眼レフカメラ広告風バナー

f:id:mio_U_M:20170207010049j:plain

□参考元
retrobanner.net


参考元があると言えども、イチから自分で作ったのは初めてなので
やってみて学んだこと、気づいたこと、課題などを備忘録的にまとめとこうと思います。


今回の作成チップス

Photoshopでの集中線の作り方

ググって何個かサイト見てみましたが、どこも基本は「ノイズを加える→ スクロール→極座標」でフィルターかけた後
任意の範囲を選択範囲でぼかし切り取り、ということをしていますね。
これは私が説明するよりもちゃんと説明しているところがいろいろありますので
リンクだけ載せておきます。

Photoshopで漫画のような集中線を描く方法|フォトショップの参考書 [sitebook]

Photoshopで集中線を描く方法 | UX MILK

これ作るときに注意点なのは、レイヤーモードが乗算じゃなければうまく機能しないということです。通常レイヤーでやろうとしてコケたアホは私です。

選択範囲指定の方法色々

今回バナーを作りながら一番吸収しようと思ったところです。
デフォルト設定ならツールバーの所にあらかじめ3種類アイコンが出ているはずです。
それぞれの説明は、他の詳しく説明されている参考書籍やブログ等を見てもらうとして、ひとまず私がこれらのツールに対してどう解釈しているかをまとめます。

f:id:mio_U_M:20170208220848j:plain
□定形選択ツール系
これらを使うときは模様から丸く/四角く切り取りをしたい、というケースがメインじゃないかなあと思います。
例えば、上記で紹介した記事でも、集中線を配置させたい対象の周りは円形選択ツールで選択しボカシで領域削除しながら作ってます。ボカシ効果+規定系選択は結構使えます。

□不定形選択ツール系
なげなわ、多角形は他のペイント系ソフトでも見られる選択ツールですが、フォトショ独自とも言えるのはマグネット選択ツール。こいつは後述する自動選択系と並んで便利な選択ツールだと痛感しています。車や電化製品など、形が複雑でないものを選択する際は便利です。
次回のバナーで制作にてこの選択ツールを使って作りたいと思います。

□自動選択ツール系
選択ツールで圧倒的に使用頻度が高いのはクイック選択ツール一択じゃないかなと思います。画像のように二、三度選択したい領域あたりをうねらせるだけでまるっと対象を選択できる上に、選択ツールの大きさも調整できるので(ショートカットキーなら]と[でささっと調整できますしね)細い領域も狙って掴みやすいです。
対して自動選択ツールですが、自動で判断して領域つかんでくれるとはいっても、なるべく色味が近い領域や形が単純なものの方がこちらの意図した通りにとってくれるのではないかと思います。今回あまりいじってないので、もしかすると調整すれば細かな領域でも掴み取ってくれるのかもしれないので、今後要検証です。

▽マスクモードとの合わせ技
私はデジタルで絵を描いているので、存在自体は聞いたことあったのですが、今回まともにフォトショでマスクモードを使った選択範囲指定をやって見ました。ちょこちょこ細かいところを色塗る作業のようで、なんだか楽しいですね。

f:id:mio_U_M:20170208220938j:plain

f:id:mio_U_M:20170208221002j:plain
先に何かしらの選択ツールで(画像ではクイックマスクで選択範囲をとりました)対象を選択したのち、カラー指定の下にあるマスクモード切り替えを押します。

f:id:mio_U_M:20170208221008j:plain

ここでツールをブラシに持ち替えて、細かい範囲を拡張したり縮小したりします。描画色(画像では黒)を選択している時に色を塗ると選択範囲を小さくすることができ、逆に背景色(画像では白)を選択している時に色を塗ると選択範囲を大きくすることができます。

ウェブサイト制作の場合だと、画像から対象のものだけを切り取る、ということを頻繁に行うので、「クイック選択ツール+クイックマスクモードでの領域塗り」の合わせ技が基本スタイルですね。


Photoshopでの文字の扱い:アンチエイリアス

ロゴやフォントを画像で使いたい場合はイラレからもってきてフォトショファイルにコピペするのが一番なんですけど
それ以外の場合だったら普通にフォトショの文字ツールでバナーの中に文字入れると思います。
そんな時、アンチエイリアスの設定は文字の見栄えに結構重要なカギとなってきます。

f:id:mio_U_M:20170208221124j:plain

画像の文字パネルの四角でくくったところがそうなんですが
そもそもアンチエイリアスとは、というと、ラスタ画像の文字や図形などで見られるようなドットっぽさをなめらかな見た目になるように処理を施すCGの表現手法の一つのことです。
特に小さい文字や長い文章ほどアンチエイリアス設定で「鮮明に」を選ばないとドットっぽくなって文字が潰れてしまいます。

※逆にウェブサイトのカンプなどで「ここはコーディング中に普通に文字打つよ」ってところはあえてアンチエイリアス設定かけずに置いておくのもありです。自分ルールやチームでの共有ルールとして保っておけば忘れない。。。

今後への課題

クオリティが高く見える画像の仕上げ方

IT技術系の質問サイトのバナーを作るときにちょっと苦戦したんですよね。
もともと取ってきたフリー素材の写真のライティングが今回のレイアウトからすると方向が違うものだったのと
もともとテーブルの色が黄色だったので全体的に黄色味がかかった感じの写真だったんです。
最終的に、テーブルの色変え、レベル補正かけて、仕上げにグレーで集中線に沿ったグラデ入れた乗算レイヤーで整えたんですが
お手本にした写真のように自然な色合いではなくなったかなーと個人的に反省しています。

バナーにしろウェブイメージにしろ、もとの写真素材のクオリティがよければそれに越したことはないが、
クオリティがソコソコのものだったり、
またクオリティはいいんだけどサイトやバナーの雰囲気に合わせるような色味、階調に変えたい、と言うときに対応できるようになりたいなと思ったのが
今後の課題であります。
(この先ますますデザイナーやらレタッチャーやらウェブ担当やらの境目がなくなってきそうな気がしますので、できることを増やしたいと思う次第です…)

レイヤースタイルをそれぞれ適用させた時の文字の見え方

まだ慣れてないと言うのが一番大きいんですけども、
どのレイヤースタイルを適用したらどんな見え方の効果が期待できるのかということは一度まとめておこうと思いました。
特に2枚目に関しては、参考元と比べて貰えばわかりますが180度雰囲気を逆にしたものを作りました。
元の画像が太陽光の強い屋外で撮影したもののため、うまい加工方法を知らない私は
合わせれば違和感出まくりの黒地ベースで作ることを断念して、素材の良さを活かす方向に舵きりしたのです…
そのときに、「黒地だと明度を高くすれば細い文字は映えたけど、地が水色だと細い文字のままで明度を落とすとなると文字周りに効果が欲しいな」と思った結果
うまーく選んだそれぞれの色味が馴染む効果を探すのに時間かかってしまったのです。
これは今後の記事で検証結果をアップしようと思います。



というわけで、Webの勉強の一環でやってみましたバナー模写。
今回は1枚目が1時間半、2枚目が2時間半もかかってしまったので
時間かかったわからなかったところと慣れてなかったところは、今後潰していけるようにしていこうと思います。


★写真素材お借りしました。ありがとうございました!
www.ashinari.com

www.pakutaso.com