StarCraft II Skin - I provide the graphics, you provide the programming?

[DumbPoet]

Lately I've been really digging this whole CAD thing and I stumbled across an idea for a skin while surfing the Starcraft2.com website. I can't say it was a complete accident as I am trying to create an entire starcraft2 theme for my desktop, learning bits of stuff here and there.

Any who, School just started and I'm not sure if I have the time to completely learn how to 'program' or 'code' the skin, but I'm fairly certain that I can make all the little bits for it after reading through the "how to make a skin" thread.

So I was wondering if anyone would be up to collaberating on a skin with me? I've already got a head start on the main body of the skin, but that file is on my home computer and I'm at work so in my boredom I made a mock up of what I'm hopeing to do with it.

http://i11.tinypic.com/6465ge9.png

For those of you familiar with the game this is for a protoss theme, if there is interest and a successful collaberation a Terran theme could also be made with the available resources. But, let me explain a little bit more about my idea here:

Rating Stars: The 5 blue rectangles, will glow when moused over.

Album Art: In my actual version at home the area is square.

Volume: The blue hiding behind the yellow, could be made to be semi transparent. Expands/Shrinks to display Volume (don't know if this is possbible)

Lyrics: Press the blue semi-circle to bring up the lyrics panel.

Play, ect.. : Will glow on mouse over, maybe have a 'pressed' state, not exactly sure what they should all be.. could possible create new icons/use others available on the StarCraft website.

Artist, ect : Maybe do something cool with the overlapping text like a lot of Otis's stuff.

Progress Bar: The slider button looking thing to the left of the lable would be the slider button thing.

Hopefully I will be able to change the colors to a Green & Black, or Green & Purple scheme as it would go with the Starcraft2 wallpaper I'm using right now.

[OtisBee]

you know that providing the images would be the hard part, right?
;)

it's not really a big deal to (in your words) 'program' or 'code' the skin, because you don't have to 'program' or 'code' anything. :)

you see, it's CAD providing the rules, structure, possibilities, limitations or whatever you may call it.
i think the term environment fits it pretty well.

via CAD's Skin Editor you can adjust or configure a whole lot of values like:


position of elements (toolbar, volumebar, ratings, progressbar, textlines, cover, panel...)
size of elements
visibility of elements
font type and appearance
textscroll speed and behaviour
text content and area
cover transition speed
panel animation speed


anything else is up to the designer.

so, if you want the ratings to glow on mouseover for example, CAD will only take care that a different image would be displayed whether the cursor is above the far right, the middle, anywhere else or even away from that image area.
it's up to the designer what these images would look like. anything is possible here (e.g. zoom, glow, inset, distort, mirror, shadow, whatever :) )
...but, and that's CAD's limitation, you can only use 6 images (no rating + ratings 1 to 5).

Volume: The blue hiding behind the yellow, could be made to be semi transparent. Expands/Shrinks to display Volume (don't know if this is possbible)

could be done if...
...a sequence of images (the amount is optional) would be part of a skin's subfolder named 'Panel'.
the sequence would start with an image called "anim0.png" for -let's say- the shrinked state.
then the sequence would go on with "anim1.png", "anim2.png", "anim3.png", .................................."animX.png" (as i said the amount is optional. the 'X' is just a placeholder!!)
no matter how many images you use in a panel animation, the end of such sequence will always be an image called "panel.png". in your skin it would be the extended state of your volume panel.

the "panel.png" would be the image where CAD would draw the volumebar on.
note that CAD is only capable to fade in an element above that "panel.png". the element won't be displayed during the animation sequence.

Lyrics: Press the blue semi-circle to bring up the lyrics panel.

a hotspot to trigger the lyrics is not possible. you can configure CAD to show the lyrics by doubleclicking the case.
but the blue semi-circle could be the trigger (hotspot) for the volume-panel.
unfortunately it will only be a hotspot and no dual-state-buttons can be used. :(

Play, ect.. : Will glow on mouse over, maybe have a 'pressed' state, not exactly sure what they should all be.. could possible create new icons/use others available on the StarCraft website.

indeed a design matter.
toolbar images act the same like ratings, i mentioned above.
except there are additional images possible for pressed buttons (not only mouse-over and -away).
that goes with repeat & shuffle as well. ;)

Artist, ect : Maybe do something cool with the overlapping text like a lot of Otis's stuff.

most important are the fonts! perhaps you can get them somewhere. :)

Progress Bar: The slider button looking thing to the left of the lable would be the slider button thing.

here's what Carlos wrote when he explained "How to make a skin":
A skin may have a “<Skinned>”, “<Mixed>” or normal progress bar.

See "Default" and "SinKin" as skinned progress bar samples: every step in the progress bar is a png ("Default" skin has 21 images) but it's up to the skinner to decide how many pngs will be used. The "Skinned" progress bar works this way so even a circled or curved progress bar can be made.

See “JewelCase” and “ThaPanel” as mixed progress bar samples: this skin has a progback.png (the progress bar background); the bar drawn by CAD (you can set its dimension and color in “Control Panel>Progress bar/Rating”); optionally a progknob.png (see Jewel Case as a sample) and also optionally a progoverlay.png (that’ll be draw over the bar so you can add a light effect or something). See the samples to see how the margin was set. Margin is usually the extra area needed e.g. to add a shadow effect in the progress bar background (see Volume image sample below).

The progress bar images are stored in a subfolder named "Progressbar".

it is very useful to take a close look inside the according folders of those skins Carlos is talking about.
do not just apply the skin and watch!

also it might help to better understand a skin structure or CAD itself, if you duplicate/rename a skin and apply it in order to play around with the configuration via Skin Editor.


in resume:

providing the images is definitely the hard part.
the rest IMHO is childsplay.
i can help you with that anytime. np. ;)
or perhaps others too.

so, if you're experiencing any trouble, just post it (or leave a message) and you'll get some help. ;)

i guess this wouldn't be a skin collab, but a nice procedure to create your first skin. :D

keep it up!!



....OtisBee