テンプレートカスタマイズの過程

ご要望があったのでカイタマイズの過程を載せてみます。
ほぼ画像と色を変えただけの簡単なカスタマイズなので参考になるところは少ないかもしれません；

今回使用したツール
・IllustlatorCS3
・Photshop Elements5.0
・TeraPad
・FFFTP
・Firebug

今回はhttp://fos.uzusionet.com/wordpress/vicunaこちらのサイト様のwp.Vicuna Ext.に入っているstyle-vegaをカスタマイズしました。

・まず、作ったテンプレートをスキンとして簡単に適用できるようにします。
　wp.Vicuna Ext.内のstyle-vegaフォルダをコピーして、wp.Vicuna内に貼り付けて好きな名前を付けてください。
　名前をつけたらサーバーにアップロードしてください。私は今回style-swaという名前を付けました。
・アップロードしたら、ブログの管理画面”Vicuna Config”を見てください。
　Skinの項目に、さっき名前を付けたフォルダが表示されます。
　
　名前を付けたフォルダを選び、変更を保存してください。

・Vicuna Configの右に”Eye Catch Type”というのがあります。
　あらかじめいくつかの外観のパターンが用意されているので、好きな物を選んで左のプルダウンメニューから選択して変更を保存します。
　私は今回Header areを使いました。

・準備ができたので、さっき選んだ外観を元にどんなデザインにするか考えます。
　とりあえずイラレでサイトデザイン的な物を作りました。これをスライスして使います。
　
　くるくるした模様はフォトショ用のブラシを使ってます。簡単におしゃれな感じが出せていいですｗｗ
・後は、Firebugを使いながら、Terapadで変えたい所をいじるだけです。
　coreとlayoutsを書き変えるだけだったと思います。
　スキンを適用させているので、ブラウザで今の状態を確認できて楽だと思います。
　コメントのページとかも忘れないように編集してください。
・最初のデザインに戻したいときは、管理画面でstyle-vegaを適用させるだけです。
　ほとんど画像と色を変えただけですが、簡単にオリジナルのデザインを作ることができました。

・画像を作る際の注意
　今回おもにIllustlatorで画像を作りましたが、途中Photshopで作った画像を入れたら、firefox上では問題なくても、IEで見ると色が変わっていました。
　画像は同じソフト上で作った方がいいみたいです。

・今回暗い背景のデザインにしていますが、背景を暗くする際に文字の色にも注意した方がいいです。
　すでに知ってる人も多いかもしれませんが、背景が真っ黒の状態で真っ白の文字にすると非常に目が疲れます。確か、この現象をハレーションと呼びます。
　下の画像だと、右の方が読みやすいと感じるはずです。
　
　右は30%グレーを文字色に使っています。真っ白よりも少し明度を下げると読みやすくなるので、よかったら参考にしてみてください。

以上、簡単ではありますが私のカスタマイズ過程の話でした。少しでも参考になればうれしいです。