初級者のSleipnirスキン作成(完全攻略編・controlsの章・其之1)
さて、ようやっと画像を作っていく段階です。
最初は堀江氏も言っているようにControls部分からやっていきましょう。
ここを確定していけばスキン全体の5割くらいは完成したようなものです！
（私がスキンを作る場合もこの「controls」フォルダから作り始めます）
【Sleipnir スキン制作講座-5-】「見た目のベースを決める"controls フォルダ"」より引用
ここは見た目がわかりやすく変わるのでスキン作成の醍醐味って感じの部分ですね。
大まかな部分で幾つかのエントリに小分けして解説していこうかと思います。
Controlsの解説予定
- ツールバー(当ページ)
- ステータスバー
- タブ、エクスプローラバー
ツールバーDock、Panel- メニュー項目、マネージャ、情報バー
- タイトルバー、フレームスキン
- アドレスバー、検索バー、分類不明、書き漏らし
ツールバー部
最初は一番目に付くところツールバー部*1です。
ここを最低限作ればスキンと言い張っても問題ないでしょう。多分ｗ
リバーの背景(RebarSkin) ― rebar.xxx*2 *3
ツールバー部の背景です。
サイズの制限はありません。ツールバー部よりサイズが小さい場合には並べて埋められます。
オンラインDBにはある程度のサイズが無いと読み込みが長くなると書いてあります。
一枚絵として使いたい場合は横幅は1280〜1920ピクセル程度は必要かと思われます。
最低値の理由は2009年09月時点でのシェア上位3種(1024x768, 1280x800, 1280x1024)で75%以上を占めているため、最低1280ピクセルあれば大半をカバーできるから。
参考：Ascii.jpの記事
最大値の理由は(Wikipedia情報ですが)画面解像度の主流画面モードの値より。
参考：wikipedia:画面解像度
なお、高さは150〜250(最大でも300)ピクセルあればいいでしょう。
リバー用スキンの使用方法(RebarSkinType)
"リバーの背景"の画像を並べるときにどのような方法で並べるかを指定します。
- stretch：画像を引き延ばして使用
- tile：画像をタイル状に並べて使用
- right-tile：画像を右側からタイル状に並べて使用
- bar：画像をバーの中でのみ引き延ばして使用
stretch :標準ツールバー、メニューバー、検索バー、、、全てを合わせた範囲内でrebarを引き伸ばしたもの。
bar :標準ツールバー、メニューバー、検索バー、、、各々のバー内でrebarを引き伸ばしたもの。
tile :そのまんま。並べるだけ。
引き伸ばすとは、バーの縁から４ピクセルはrebar９ピクセル四方から上下左右４ピクセルずつを抜き出し、内側はrebarの中心１ピクセルで埋めるということ。やれば分かる。
だから、グラデーションする時にstretchとbarは使えない。
例えば縦方向のただのグラデーションなら縦長の画像（横数ピクセル、縦は必要なだけ、150くらい？）をtile指定する。
横方向の場合、画面内にグラデーションを１ローテーション（？用語が分からん）しかさせたくない場合、rebarの横サイズ=画面サイズ分必要になる。
ま、あんまり融通は利かない。
http://www.sleipnir-wiki.jp/index.php?%A5%B9%A5%AD%A5%F3%A4%CE%BA%EE%C0%AE#b6ebe89d より引用
リバーのグリップ(RebarGripSkin) ― gripper.xxx
メニューバー、ウィンドウバーなどの各バーを移動させる際に掴む部分のスキンです。
サイズは2x2または3x4ピクセルが多いようです。
この項目を設定して無いと"リバーの背景"が適用されないようです。
リバーのグリップ用スキンの使用方法(RebarGripSkinType)
"リバーのグリップ"の並べ方を指定します。
※skin_ini_editorではtileとstretchが選択候補に出ますが実際にはtileのみ選択可能なようです。
リバーのロゴ(LogoSkin) ― logo.xxx
ツールバー部の右側に描画される画像です。*4
サイズは特に決まってないようです。
Fenrir製ではAnemoneを参考にできます。
ユーザ作成ならGnGniRさんのVOCALOID2シリーズなんかが参考になるかと思います。
※フレームの部分と組み合わせて利用されているみたいです。
追記(2010 Jan. 29th)
skin.iniの[Controls]セクションに"LogoSkinPosition=left"と記述すると画像が左側に表示されるようになるみたいです。
リバーのシェブロン(ReBarChevronSkin) ― chevron.xxx
バーの幅が足りずアイテムが省略される時に表示される「>>」のような画像です。
サイズは15x13ピクセルみたいです。
メニュー(MenuSkin) ― menu.xxx
メニューバーのメニューにマウスオーバーしたときに表示される画像です。
45x15(15x15*3)ピクセルみたいです。skin_ini_editorの説明と矛盾してる気がしますがスルーします。
リバーで水平境界線を描画するか / リバーで垂直境界線を描画するか
各バーの境界線の表示を指定します。
なお、境界線の色は"skin.ini"の"リバーの境界線(明るい ReBarBorderLight/暗い RebarBorderShadow)"で設定してください。
追記 2010 Feb. 15th
うっかり書き漏らしていた部分です。
ツールバー(ToolBarSkin) ― toolbar.xxx
標準ツールバーのボタンなどに関する部分です。
サイズは75x15(15x15*5)ピクセルで、左からそれぞれ選択状態、プッシュ時、ホバー時、ホバー時ドロップダウン、プッシュ時ドロップダウンです。
※skin_ini_editorとオンラインデータベースの解説が微妙に違うんで注意が必要です。
一応画像を用意してみました。
赤が選択状態で、ページ検索バーやお気に入りパネルなどを表示している時などの状態です。
紺がホバー時で、紫がホバー時ドロップダウンです。
黄がプッシュ時で、水色がプッシュ時ドロップダウンです。
ツールバーでホバー時イメージをずらすか(ToolBarShiftHovered)
そのままツールバーでホバー時イメージをずらすかどうかです。
true/falseの2値です。デフォルトはfalseです。
