2 posts tagged “banner”

どうしても自分のサイトの過去のエントリーが埋もれてしまう！悩んだ末に、バナーつけたら面白いかも、と思って作ったのが始まりです。今サイトがピンクなのですが、ちょっと前がグリーンでそれにあわせたのでふちがグリーンになってますけど、作り変えるのも面倒だしと思ってそのまんまです。Firefox＝2.0的モダンブラウザ？＝web2.0的デザイン？ってことで、所謂2.0と言われているデザインテクニックを使って作成しました。

やっぱりね～もっとバナー作りを頑張らなきゃ！と思っています。どういう写真や素材を使ってよいのかいつも悩んでしまいます。まあ素材が手元に少ないというのもありますけどね。

バナー作りで、参考にしているサイトはANAです。トップページに特割とか早割のPRバナーがあるのですが、よくもまあ同じテーマでいろいろ作れるなぁと感心します。どのくらいのサイクルかわかりませんが比較的早くバナーが入れ替わるので楽しいです。

=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=
作成環境
OS：WindowsXP
Tool：Photoshop6.0


PhoshoptopCS3（フォトショップCS3）は
2.0っぽいバナーも作れるデザインソフトです。
=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=

古紙というか時間がたっていい感じの和紙の雰囲気が出ているバナーを作ってみました。イメージはそんなんだけど、ちゃんと再現されているかなぁ？
このテクニックを、とあるwebデザイナーさんがやっていて、やり方までは教えてもらわなかったのですが、データをもらって自分で研究したりしました。

以下のサイトがすごく参考になります。
Part One: The Indispensable Tool Trio ~ Authentic Boredom

英語なのでちょっとわかりにくいかもしれませんが、英語が読めない方は翻訳ツール使って頑張って解読してください。すごく丁寧に書いてあるので、理解はしやすいかと思います。あと、サンプル用のpsdファイルがダウンロードできるのも素敵。

簡単に説明すると、「焼き込みツール」と「ブラシ」と「消しゴム」をつかってふちをぼかしていきます。消しゴムもモードを「エアブラシ」にすると結構自然な感じで紙のやぶれ感を出すことができます。
私は「焼き込みツール」は使わず、ブラシの描写モードを「焼き込みカラー」にして、背景とは別レイヤーでふちを塗っております。あと似た色を3～4色程度使うというのもポイントかも。
このテクは、Photoshopがただ使えるという技術的要素に加え、「センス」も必要になってきます。私は全然センスないですが、数をこなしていけば、なんとなくはうまくなってきているような気がします。（しません？）
ううう、そのあたりはまだまだなので、頑張ります。


=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=
作成環境
OS：WindowsXP
Tool：Photoshop6.0


PhoshoptopCS3（フォトショップCS3）は
「焼き込み」系が楽しいデザインソフトです。
=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=