スポンサーサイト 

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
--:--  |  スポンサー広告  |  EDIT  |  Top↑
2009.04/28 (Tue)

バナー作成の裏話 

こんばんは

今回の記事は、「バナー作成の裏話」です。
内容的には、面白いんですかねぇ^^;
「読んでやってもいいぞ」と言う方のみ、どうぞです。

▼ 続き ▼

今月15日に、当サイトのバナーをUpしました。
『見た目をどんな感じにするか・・・。
サイト名が「陽の差す場所」だから、木漏れ日をイメージした
バナーがいいな』―漠然とした思いから、まずは無料で
提供して下さるサイト様の検索から。

『でも、やっぱり自分のサイトだから、自分で作ったのを
使いたい』と思い直し、その後は、バナーを提供して下さった
サイト様からバナーサイズの勉強をしました。
せっかく作っても、サイズがあっていなければ
無意味ですからね(^-')b
(88*31で作っていたサイト様もおられたので
その理由も調べてみたり)

その結果、国際標準と日本独自のサイズがある事が判明。
(88*31は国際標準のひとつだそうです)

88*31の方は、小さいので後回し。
仕上がったイメージの分かり易い 200*40の方から先に作成。

そして、木々を撮った写真の方から作成開始。
(TSのバナーは後回し)

過去にデジカメ(コンパクト型ですけど)で撮った写真から
イメージに近いものを多数ピックアップ。
もともと風景写真として撮影したので、アップで撮った
木々が少なくて、使えるのが少なかった><

その中でも、イメージに近いものを更に絞り、フィルターをかけ
「淡い木漏れ日感」を出してみました。
(だから実際の写真よりも、白く見えるんですよ?)

しかも、サイズが1024*768 や 2048*1536などなど
いろいろだったので

適当なサイズに縮小をし、切り取り。

切り取ってみても、何かイメージが違う。

縮小率を変えて、再度切り取り。

それでもイメージが違ったら、違う場所を切り取り。


・・・を繰り返し、仕上げました。

縮小率のちょっとした違い、切り取る場所をちょっと
変えるだけでも雰囲気って変わるんですねぇ。
しかも、200*40と限られたスペースなので、大きい写真では
『使える』と思っても、実際200*40に切り取ってみると
『う゛~~ん・・・』となったり。


続いて文字入れ(サイト名)ですが、これも悩んだ。
『文字の大きさは?』『位置や色は?』 etc 細かい事を上げたら
キリがありませんが^^;

仕上げていざ保存(拡張子jpg)したら・・・!!!

サイト名がにじんだしぃ・・・・・><
(劣化はTSのSSで経験済みですけどね)


banner02(仮)
※見たい方のみクリックお願いします。
また、分かり易いように、拡大してます。
左:jpg保存  右:PNG保存
右に比べ、左は文字の周りに転々のような
波をうっているような跡があるのが見えます。


なので、拡張子を急遽 PNGで保存。
(画像と文字は別々に、一旦保存してあったので
再度作成し、拡張子をPNGに変えて保存)


拡大をしなければ分からない事ですけど、バナーは
『サイトの顔』と思い始めたので、ちょっとだけ気合を入れ
細部にまでこだわり仕上げてみました。

200*40の方で苦労をしましたが、88*31の方は
比較的早く出来ました。
大きな画像を縮小するのを除いてはっ!

きっと「200*40のを88*31に縮小しただけだろ?」と
お思いでしょう。
横縦の比率が1:1の縮小なら、そのまま縮小すれば
問題はありません。ですが
200*40 → 88*31 の対比は、縮小率 44*78(%)です。

そのままの縮小率で作成すると、200*40に比べ、若干縦に細長い
イメージのバナーが出来上がるんです。


banner2(仮)
※左:200*40 → 88*31に縮小(縮小率 44*78(%))
右:200*40バナーの写真に合わせて縮小
少し見にくいですが、こんな感じに縮小されます。
ここのバナーは見本ですので、保存しないでくださいね。
無理に縮小したから、左のバナーサイト名が劣化してる><

よって、88*31用のバナーも

200*40と同じ位置で切り取り出来るようになるまで縮小。

文字は見にくいので、あえて真ん中に記載。


・・・と言う手順で作成。
これで写真の方は終了。

TSバナーの方は、Author用にSSは撮ってあったので
そのまま使用。手順は写真と一緒。
なので、こちらは比較的早く出来上がりました^^♪
(もちろん、拡張子はPNG)


物凄く大変でしたが、楽しかったですね♪
そして何よりも、皆さんのバナー、本当に個性的で素敵です♪
私ももう少し知恵を出さねば・・・。

・・・って、内容は全然面白くないですね・・・ f^^;;;(大汗


※バナー作りは、超初心者です^^;
よって、「こういう方法の方が、もっと簡単だよ?』と
言うのがあったら教えてくれると、嬉しいです^^
20:30  |  その他  |  CM(0)  |  EDIT  |  Top↑

Comment

コメントを投稿する

URL
COMMENT
PASS  編集・削除するのに必要
SECRET  管理者だけにコメントを表示
 (非公開コメント投稿可能)
 

▲PageTop

 | HOME | 
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。