Bazooka Skin
Home / documents / Vicuna CMS
- Download: style-bazooka.zip
2007.7-12にstyle-bazookaをアップデートしました。それ以前に配布していたものをお使いの方は、このカスタマイズはできません。最新のものをダウンロードしてください。
style-bazookaはカスタマイズが制限されたHardタイプのスキンです。Hardタイプは一部使用できるCSSモジュールが制限されており、背景色や画像になっている箇所の配色・形状はCSSでは変更できません。bazookaでは背景にグラデーション処理をした画像が使われており、角丸画像には背景色とのアンチエイリアス処理が施されているので、配色を変更するのは特に難しいです。
ここでは、style-bazookaに使われている画像の色を、Photoshopデータを直接編集して変更する方法を解説します。
Photoshopで元データの画像を編集してカスタマイズする
もしPhotoshopをお持ちでレイヤースタイルの使い方に慣れた人ならば、bazookaスキンの.PSDデータを直接編集して画像部分の配色を変更し、差し替えてカスタマイズすることができます。.PSDデータにはスキンで使われる画像はスライスとして登録されているので、保存時には必要な箇所が適切な名前で自動的に書き出されるようにしてあります。
レイヤーの確認
ダウンロードしたファイルをPhotoshopで開き、レイヤーパネルを確認してください。
eyeCatchフォルダにあるレイヤーは、eyeCatch mini使用時に表示される画像です。あらかじめマスク処理がしてあるので、「eyeCatch画像をここに置く」という名前のレイヤー上にお好みの画像をコピペすることで決められた形で表示されます。
interfaceフォルダの中にあるレイヤーがbazookaスキンの大枠の配色や形を決定しているものです。どのレイヤーがどの部分かは表示・非表示にして確認してください。
上記のパネルのうち、削除できるレイヤーはtextフォルダに入っているものだけです。
編集方法
interfaceフォルダ内のレイヤーを「レイヤースタイル」で編集します。カラーオーバーレイとドロップシャドウの値等を調整し、色を変更してください。形を変えたり、決められたサイズを超えるような編集はできません。
画像の書き出し
レイヤーの調整が終了したら画像を書き出します。大きさや名前はスライスデータとして設定してありますので、
- ファイル→Web用に保存
- 保存ボタンを押す
- 保存場所を聞かれる窓が開くので、「スライス」の設定を「すべてのユーザー定義スライス」に変更し適当な場所に保存する。
保存先で指定した場所にinterfaceフォルダができ、中にスキンに必要な画像がスライスデータを元に書き出されます。これらの画像をstyle-bazookaフォルダ内のimages/interfaceに入れて上書きします。このとき、mini.gif, long.gif, header.gif はeyeCatchフォルダの中にいれてください。
style-bazooka (またはimages/interface)をアップロードし、表示を確認します。残りの箇所はCSSファイルの編集で配色を調整してください。
注意事項
style-bazookaスキンはUpdateされました(2007.07-12)。このカスタマイズを試したい方は新しいスキンをお使いください。
bazookaの.PSD内には一見意味不明な画像がありますが消さないで下さい。bazookaスキンで正しく表示させるためにスライス時に必要な画像として置かれているものです。同じ理由により、表示画像の位置を変更しないでください。
このカスタマイズ方法について、Photoshopに関する質問はしないでください。このファイルはもともと自分用に作ったものです。ある程度Photoshopを操作することができて、この記事の説明で色々試して理解できる方だけお使いください。
- Download: bazooka.psd