くすPlayer - 歌詞表示主体型MP3プレイヤー

[ メイン ] [ 特徴紹介 ] [ スキン ]

投稿スキン−ダウンロード

スキンの作成手順例

スキンの仕様


スキンの作り方

この方法は、あくまで一例です。詳しい仕様は、こちらをご覧ください。



1. まずは作成したいスキンの全体像を作ります。このとき、ウィンドウサイズが最小になった時を想像して描きましょう。

(これは2倍に拡大してあります。)



2. この絵の高さと幅を、それぞれ+4ドット分、大きくします。余白の部分は、目立つ色で塗りつぶしておきましょう。また、歌詞表示部分となるところ(長方形)も同じ色で塗りつぶしておきましょう。



3. これを下の表のように、分割してズラしていきます。


最終目標は↓な感じなので、

topleft top1 top2 top3 topright
left1 歌詞表示部分 right1
left2 right2
left3 right3
bottomleft bottom1 bottom2 bottom3 bottomright

まずは、bottomの列全体を選択して、一番下までズラします。

 

上の部分

 

余白
          
bottom

同様に、left(right)3、left(right)2、left(right)1、top部分の順で、下にズラして行きます。

top

余白
  
left1            right1
          
left2            right2
          
left3            right3
          
bottom

次にtopやbottomを右の方へズラして、切り分けていきます。

こんな感じになります。

(注:この例では、top1の幅と、bottom1の幅などが同じになりますが、これらは同じでなくてもかまいません。同様に、left1の高さと、right1の高さも異なっていてかまいません。ただし、縦に並んでいる topleft, left1, left2, left3, bottomleft の幅は同じでなくてはいけません。また、横に並んでいる、topleft, top1, top2, top3, topright の高さは同じでなくてはいけません。right, bottomに関しても同様です。)

また、これらの切断で一番重要なのは、top, bottom, left, right のそれぞれで、1〜3のどれかを拡大可能とすることです。上の例では、bottom1には、プレイコントロールが配置されています。これを拡大可能としてしまうと、ウィンドウを大きくしたときに、プレイリストコントロールも拡大してしまい、となってしまいます。(実際にはこんな風にはなりませんが^^; )ボタンなどに関してもそうです。したがって、これらのボタン等を配置するパーツは、サイズ固定にしなくていけません。

そうすると、この場合、bottom1はサイズ固定、bottom3もサイズ固定となります。もし、bottom2にも何かボタン等を配置しサイズ固定にしてしまうと、bottomの全てがサイズ固定となってしまい、ウィンドウサイズが変更できなくなってしまいます。りりくすPlayerは必ずサイズ変更可能にする必要があるので、1〜3のすべてをサイズ固定にはできません。

したがって、1〜3のどれか1つは、ボタンなどを配置せず、拡大可能にしてください。



4. あとは、各ボタン等を作ります。

この例では、左から、playcontrol, active1, active2, exit1, exit2, about, playlist2, playlist1 になってます。



5. 最後に各部分をそれぞれbmpファイルとして保存します。

それぞれの部分を選択コピーして、新しいファイルを作ってそこに張り付けて保存してください。フォトショップなら、「コピー」→「新規」→「ペースト」→「(レイヤー)画像の統合」をして、保存してください。



6. skin.txt を作成します。

各パーツができたら、skin.txtを作成してください。

これの作り方は、「スキンの仕様」と、付属サンプルをよくご覧になってください。

一応、上の例では、

[framefix]
top="101"   ;こうすると、top1が固定、top2が拡大可能、top3が固定になります。
left="010"  ;こうすると、left1が拡大可能、left2が固定、left3が拡大可能になります。この場合、left2が上下方向でセンタリングされることになります。
right="010"
bottom="101"

[playcontrol]
base=bottom1 ;playcontrolはbottom1に描かれているので
x=0
y=3 ;bottom1の(0,3)にplaycontrolがあるので。

とこんな感じです。


というわけで、みなさま、自信作ができましたら、dagashiya@office.toまでお送りくださいませ^^;