Skin Templates

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.

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

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!)

Yay, you beat me to it...guess that saves me time...
Definately will use it...next skin coming up...

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.

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...

Thanks for making these! they will really come in handy

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!

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..

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!

Fantastic Job!
Time to get testing and fix my skins to fit properly!
You're a Champ!

No problem! Make sure to read the text about each template... gives some useful info that I've found while testing, in particular, the way the selection bar gets cut off on the side and bottom, so it's not centered in the browser screen.

I've found out some other info about how the images are used, too. There's 3 images for the battery icon in the USB screen for both the large and small battery icons: one for empty, one for red "low battery" display at 1/3 charge, and one for green "full charge" display. Meizu messed up the small icon, and put 2 full charge images instead of making one red. The red one should be #458 (T1.010)... I think.

I have also learned that the light gray scroll bar isn't stretched or anything, it's actually divided into a bunch of tiny sections about 4-5 pixels high, and displays whatever section corresponds to the scroll bar position. For example, when you have a long list, the scroll bar is small, and only 4-5 pixels high. When it's at the top of the dark gray bar, it's displaying the top piece of the light gray bar. When you scroll the bar to the middle, it's actually displaying some piece of the middle of the light gray bar.

Kinda complicated... ^_^;

I'll help to add to your list of image numbers and what they do and how they work so people can try to skin things like the scroll bar, too, and make it work correctly. I wish Meizu would release the source code, or that someone could reverse engineer the miniplayer and dump the Meizu software to put their own on it. Someone could make a miniAmp winamp player! It's a small enough program to fit on the M6, and people could write plugins for it for things like playing PSF Playstation 1&2 format files!

I've updated the templates here to include the lock icon that many probably forgot even existed. I've never even used it save for making these templates. ^_^;

I still need a select few screens to have every single screen made up as a template. I also need to find a few things with the time and time remaining for the music and record screens to account for one more digit, so it can fit 999:59:59 and -999:59:59. Last thing I need is to account for song numbers, since I'm sure it has 4 digits, so it can be 9999/9999.

Updated 1-24-07

good job!
thank you

hello!

i just ordered meizu m6 and i want to create a lot of skins for it. is there any software to create skins? i've got the one to preview them, but is there anything like for mobile phones, theme creators? if not i'm just gonna do it all manually

after i figure it out i'm gonna post some of them here