Skin Templates

DChronos · 01-02-2007

I'm creating some templates for every background to make creating a custom skin even easier. It'll help a lot in making a background that's made to fit with foreground objects. I'm going to make two for each background and any future backgrounds, one with the foreground elements to use as a guide, and one with only guidelines. To use them, keep in mind that the boxes are exactly as big as the object they signify. The text in the music screen can wrap off the ends of the screen, so the box extends all the way over.

I have uploaded an RAR file with PNG conversions for all the images in the Resource file, for skinners that don't currently have a miniplayer, but wish to try their hand at skinning it. It's labeled as T1.010 in case the numbering is different. Check the bottom of this post for the file.

I've also incuded a Photoshop document with the 4 main templates (Music, Radio, Record, eBook/Menu) with nothing but black outlines on a transparent background for photoshop users who only need that. I could inculde all the templates if anyone asks me to. Download at the bottom.

Anyway, now for the templates... here you go! For version 1.010, in case they rearrange anything. I created templates for screens that don't have a seperate background as well in case they DO add that in, or if you just want to make something that fits all the screens or a specific screen. Enjoy! (Right click the images, and select and save as OR download all at the bottom.)

Music Screen Templates (NOTE: The status bar is off center to the left by 1 pixel until Meizu changes it.)

..

Radio Tuner Templates
(The position of the volume icon and text is different in this screen, and for some reason, the volume bar is actually centered in this screen, too. The text on this screen just goes off the edge of the screen without scrolling, but when it does that, it tends to mess up the other text in the same text field, so limit names so they don't go off the edge of the screen. On a final note, the "Manual Tuning..." text tends to mess up and go off center, way to the right on mine after hitting it a second time.)

..

Recording Templates (The volume bar is ALSO correctly centered on this screen. I created a dashed-line after the top 2 text fields because I'm not sure how far over these text fields can go yet. The solid lines represent how long they are in English only.)

..

Blank eBook and Menu Templates (Scroll bar is optional for menu, only shown when needed.)

..

Full Menu Templates
(The blue bars [and white between the blue] represent the Selection Bar position. Scroll bar only shown when needed.)

..

Full Browser Templates
(The selection bar [blue bars] gets cut by 4 pixels height and 27 pixels in length in the Browser screen. Don't know why. Scroll bar optional again. I still need to make the other version when it shows the file icons on the right side.)

..

Photo Templates (Scroll bar is ALWAYS shown in this menu.)

..

Music Browser Templates (Coming soon.)
This is for the screen when looking at your music files through the Music menu. The icons are on the right side instead of the left, so I need to find out their positions.

Thanks to Imageshack for hosting these for free.

PoUëT · 01-02-2007

That's a really good idea !
I had to load the skin in my meizu to verify that it fit good, but i am going to use your image, easier way ! ^^

Thank you :D

DChronos · 01-03-2007

No problem! If you load these images onto the player and take a look, especially with the plain one, it looks kinda neat, like the background is under construction. ^_^

I'm gonna make them for every screen, even ones that don't have an actual background, just in case they decide to add it in (which I hope they do!)

ajmetoo · 01-03-2007

Yay, you beat me to it...guess that saves me time...

Definately will use it...next skin coming up...

DChronos · 01-04-2007

Cool! I plan on putting up the others this weekend once I finish them up.

Ajmetoo, I'd love to know how you create those cool skins, like the orange one. VERY stylish! I'm working on some of my own style, too, but nothing truly created from scratch... though it'll be apparent why.

ajmetoo · 01-04-2007

Quote:

Originally Posted by DChronos

Ajmetoo, I'd love to know how you create those cool skins, like the orange one. VERY stylish! I'm working on some of my own style, too, but nothing truly created from scratch... though it'll be apparent why.

I use a combination of a fair few programs...AutoCAD, Illustrator, Fireworks...
I tend to use these programs a lot at work and Uni so I know my way around them...and then all it comes down to is an idea and the time...If you need any help I'm more than happy to answer any queries...

Oh..And check out the Resource Image Help I made and still in the process of refining...

Austin · 01-04-2007

Thanks for making these! they will really come in handy

DChronos · 01-05-2007

To Ajmetoo:

Awesome... and I have to say, I can tell you really know your way around them! As for your resource image page, I already figured out most just by looks alone, though I couldn't figure out the multiple duplicates, or "unused" images, including ones you have marked as unknown. My image numbers are different, though. Mine kinda skip around and end at #502. I hope to add to that guide with this marked and numbered skin I created specifically for the purpose of studying placement and usage, and new ways the images can be used.

Also, I have one note about my top bar text marking: I really don't know how far over that text can go on each side, so I just made an estimate. I might figure it out soon by editing the text code with something that's bigger than the bar to see how the miniplayer displays it. For now, I think it'll work fine, but it depends on languges how far the text will extend.

Anyway, I'll be working on finishing up those other backgrounds this weekend, and get them up ASAP. Have fun skinning!

ajmetoo · 01-05-2007

Quote:

Originally Posted by DChronos

To Ajmetoo:
Also, I have one note about my top bar text marking: I really don't know how far over that text can go on each side, so I just made an estimate. I might figure it out soon by editing the text code with something that's bigger than the bar to see how the miniplayer displays it. For now, I think it'll work fine, but it depends on languges how far the text will extend.

If you get a text file with a really long name the top bar text scrolls from side to side...If you look at my topbar on the 'Orange Music' skin I think the scrolling to the left finishes just where my Orange bar finishes and then it bounces back...
If that is any help to you..

DChronos · 01-06-2007

Ah, ok. I'll check it out, though, and use my custom background to find out the exact width and change my templates to match. Thanks for the info! Now I know, at least, that the player won't have an error and freeze because of it. ^_^;

EDIT: OK, I fixed the size of the text box for the top bar. I was amazed that I was only 1 pixel off on the left side. Awesome! Anyway, the music templates are complete now. Time to get the rest done!

EDIT 2: I have all the main templates completed! There's a few alternate ones I wish to create as well, but those will be out later on. Enjoy skinning!