Topic: Metro White - Now with download link (Read 13037 times)

InflatableMouse · « **on:** April 21, 2012, 02:41:50 pm »

It's anti-3d & highly minimalistic. Buttons alternate in metro-style colors on mouse over/mouse down.

All buttons have had an overhaul and their default color has been changed to black, changing color based on their state (basically, mouse over is green, normal state is black, the on-state is blue and special is orange).

By request I've been working on a version with panel hide/show handles and using Marko's skin as an example, I was somewhat succesful. Personally I don't like it, I find it intrusive especially the vertical one but its here nonetheless. Enjoy if you like handles!

A dark version is on the way but don't hold your breath (the negative effect works reasonably but white text on black is too harsh).

Thanks Marko for your help on the scrollbars.

I appreciate all the feedback you guys have been giving, keep it coming

.
_________________________________________________________________
Download links

:
Metro White | rar | zip | Standard View Skin
Metro White with Handles | rar | zip |Standard View Skin

brossmac · « **Reply #1 on:** April 21, 2012, 03:57:46 pm »

Love it!

I'm not a fan of the overly techy 3D interfaces that are generally popular. I prefer simple 2D looks (hence I dig Metro).

Any chance you could also do a dark/black version?

Great work!

InflatableMouse · « **Reply #2 on:** April 22, 2012, 04:49:15 am »

Thanks!

Not sure if I'll do a black/dark skin. I typically don't like black as it's too hard on the eyes.

Still a lot to do, in the preview below I still want to redo the shuffle, repeat and DSP icons.
Also, I have no clue how to change the menu font. I want to remove the drop shadow and give it a nice dark grey color. Status bar font color needs changing too obviously. Other than that, the main view is pretty much done.

Appreciate the feedback, let me know what you think!

Progress preview:

StFeder · « **Reply #3 on:** April 22, 2012, 10:46:36 am »

I like this one! Looks very clean. I'd also like a dark version

Two small suggestion/questions:
I'd change the shuffle/repeat/DSP buttons and the min-/maximize/close buttons to same color. The colorful look doesn't fit the clean look of the skin.
For me the contrast between two lines of the file list maybe to small. I personally like a slightly greater contrast there to be able to easy differ (and follow) a line on a big monitor.

InflatableMouse · « **Reply #4 on:** April 22, 2012, 11:01:54 am »

Thanks for your feedback.

I was already working on the shuffle/repeat/DSP buttons to give them a color based on their state. I'm thinking OFF would all give them the same color, shuffle/repeat ON would be orange and the other makes them blue. But these buttons give me a headache. I'm not a graphic designer (far from it, before yesterday all I ever done was resize an occasional photo) and I can't get them to look right. But i'll get it eventually

.

I'll probably make the min/max buttons grey and let them light up on mouse over. The close will stay orange.

The contrast between two lines, I assume you mean songs, the even/uneven lines? I haven't changed that, it's the Noire default. If you can't see that then you probably have your brightness too high and/or contrast too high/low (depends on the monitor and clipping).

StFeder · « **Reply #5 on:** April 22, 2012, 11:19:02 am »

hm, just thinking...

Your skin is very clean without any (big) gradient or 3D effects. It should be possible to get a nice to use dark skin using the negative effect build into MC...

I just noticed: the scrollbar has a very big... how is it called? Scroll indicator?! I'm talking about the blue dot at the right side of your screenshot, which indicates the Perhaps this should (or could) be a bit smaller.

Quote from: InflatableMouse on April 22, 2012, 11:01:54 am

I'll probably make the min/max buttons grey and let them light up on mouse over. The close will stay orange.

Sounds good!

Quote from: InflatableMouse on April 22, 2012, 11:01:54 am

The contrast between two lines, I assume you mean songs, the even/uneven lines? I haven't changed that, it's the Noire default. If you can't see that then you probably have your brightness too high and/or contrast too high/low (depends on the monitor and clipping).

You get what I mean

And yes: you may be right, that the contrast already is big enough. I'll take a look at your released skin

ElQuia · « **Reply #6 on:** April 23, 2012, 11:09:40 am »

NICE. I just love it.

Idea. Maybe NO scrollbars like in marko's artic skin? that would be really minimalistic and COOL.
I guess you also are working on the mini skin? I like minimalistic minis also :-)

FOR WHEN

InflatableMouse · « **Reply #7 on:** April 23, 2012, 11:13:37 am »

Thanks!

You know I've never used the mini version $:-\$

I'll see where it goes, right now I'm struggling getting the shuffle/repeat icons to look good, wasted most of time working on the skin yesterday on just that and didn't make any progress.

I'm in no rush to get it finished though so bare with me please

ElQuia · « **Reply #8 on:** April 24, 2012, 01:57:25 pm »

I will wait, off course

It looks cool, take a look at this mini skin: "NoFrills" attached 2 screens, one with playlist collapsed and second with playlist open and transparent when non active window.
Your skin would go great with something like this.....

Maybe finish firts the mega (pleassse) then do the mini?

Just keep going!

Maverick07 · « **Reply #9 on:** April 25, 2012, 10:43:44 am »

also tried a transparent metro skin, but i failed ^^

anyway,
i have to say that for me, nearly all buttons look very unsharp - expept the MuteButton =/

InflatableMouse · « **Reply #10 on:** April 25, 2012, 12:45:29 pm »

The screenshot does look a bit soft.

Anyway, I *think* its pretty much done. I may not have gotten all the text and there may still be items I've missed.

Please give it a go and do let me know what you think of it. If you notice anything weird, let me know and I'll try and fix it.

Really hope you folks enjoy. I've actually made a start with a black version as well

.

Link is in the opening post.

ElQuia · « **Reply #11 on:** April 25, 2012, 01:08:40 pm »

OK downloaded, installed, I LIKE it, but it needs, (for my taste) a change in scrollbars (see attaches, they are 2 screen captures on my mon @ a res of 1600x900):

1- Scrollbars are WAY too intrusive and BIG, I would like them a LOT thinner, say a 1/5 of what they are.
2- The scrollbars color... mmmm, ¿why not make them a dark gray or black? maybe if its feasible with a color change on mouseover, like the buttons???
3- Any chance of making the main play controls (stop, play fwd, etc) a tad smaller? (about 1/3 smaller?)
4- uhh forgot, skin manager shows a preview of noire I beleive

Nice work, keep going!

InflatableMouse · « **Reply #12 on:** April 25, 2012, 01:29:21 pm »

I agree on the scrollbars but I'm sorry I have no idea how to change them. I have tried cutting their size in half (can't do 1/5th the controls will be invisible). Anything I change in the main.xml screws things up. Just making the skin items smaller doesn't work either.

The color is dark blue because the progress bar, volume control knob and the progress bar are blue too. The color fits with the rest of the skin. I did notice the color tint of these items are slightly off compared to each other so I did update them to all be the same shade of blue. Skin is updated and uploaded.

I'm afraid I won't change the controls, the size is the same as in every other skin and I like them this way

.

InflatableMouse · « **Reply #13 on:** April 25, 2012, 01:33:48 pm »

Quote from: ElQuia on April 25, 2012, 01:08:40 pm

4- uhh forgot, skin manager shows a preview of noire I beleive

Thanks for spotting that, updated and uploaded.

Also the last change for tonight

.

ElQuia · « **Reply #14 on:** April 25, 2012, 01:37:15 pm »

Quote from: InflatableMouse on April 25, 2012, 01:29:21 pm

I agree on the scrollbars but I'm sorry I have no idea how to change them.

uuuuhhh I'm afraid I cant help, i have no clue about programming

SkGe · « **Reply #15 on:** April 25, 2012, 02:37:36 pm »

This is the section where you can change the scrollbars:
<SCROLLBAR>
<Entry Name="HorizontalLeftArrow" Bitmap="Scrollbar_HorizontalLeftArrow.png" NumberImages="3" Margins="2,2,2,2" />
<Entry Name="HorizontalRightArrow" Bitmap="Scrollbar_HorizontalRightArrow.png" NumberImages="3" Margins="2,2,2,2" />
<Entry Name="HorizontalHandle" Bitmap="Scrollbar_HorizontalHandle.png" NumberImages="4" Margins="10,0,10,0" />
<Entry Name="HorizontalBackground" Bitmap="Scrollbar_HorizontalBackground.png" NumberImages="4" Margins="10,0,10,0" />
<Entry Name="VerticalUpArrow" Bitmap="Scrollbar_VerticalUpArrow.png" NumberImages="1" Margins="2,2,2,2" />
<Entry Name="VerticalDownArrow" Bitmap="Scrollbar_VerticalDownArrow.png" NumberImages="1" Margins="2,2,2,2" />
<Entry Name="VerticalHandle" Bitmap="Scrollbar_VerticalHandle.png" NumberImages="1" Margins="0,0,0,0" />
<Entry Name="VerticalBackground" Bitmap="Scrollbar_VerticalBackground.png" NumberImages="1" Margins="0,0,0,0" />
<Entry Name="Stump" Bitmap="Scrollbar_Stump.png" Margins="1,1,1,1" />
</SCROLLBAR>
For each scrollbar you can add max from 1 to 4 images, and for margins is to adjust the size of scrollbar on the skin, like croping image to fit your screen, there you need to be carefull with the size of the image and how far you want to strech it.
Hope this will help you there, to fix.

InflatableMouse · « **Reply #16 on:** April 26, 2012, 01:00:38 am »

Hey Sirgeo,

Thanks buddy, I already played with those of course but the thing is when I change the margin numbers things change in such a way that I can't figure out what those numbers do exactly.

when I edit my bitmaps to half the size, they dissapear from the skin.

marko · « **Reply #17 on:** April 26, 2012, 01:27:45 am »

If the image disappears, it's usually because the margins specified in the xml are greater than the image itself.
When using the "Margin" system, the four values work in pixels, like so: Margins="[left margin],[top margin],[right margin],[bottom margin]"
So, if the image is, say, 10 pixels wide, and your 1st and 3rd values combined are greater than ten, the image disappears from the skin.
If you imagine the four values place a line the specified number of pixels in from each edge of the image, then an area inside the image is 'framed' by these lines, the centre of nine areas. If no "DrawMode" is specified, then the areas around the edge, the margins, are drawn exactly as they are in the skin image file, while the centre is stretched to fill the space required by that skin part.

For the scroll bar handles, let's say vertical ones, I would create the handle image exactly as wide as I wanted it to be and set the left and right margin values to zero. If the handle had rounded ends, I would not want them stretched, so the top and bottom margins must be bigger than the rounded ends; only needs to be by a pixel or two, and then the bit in the middle can stretch and contract with the required size of the bar.

Let me know if you need any more assistance, the weekend is near and I should have some time then.

Have a look at my Arctic Winter HC skin (http://yabb.jriver.com/interact/index.php?topic=70136.0)

It has scroll bars 1 pixel wide. Perhaps you might fair better working from there upwards...

-marko

ElQuia · « **Reply #18 on:** April 26, 2012, 07:34:04 am »

Also check out:
1- Display View, some of the buttons are "garbeled" son grey back ground but they sort of look like the have a white border all bitten on ;-)
2- In skin manager preview is still noire

Keep going!!!

InflatableMouse · « **Reply #19 on:** April 26, 2012, 09:38:20 am »

Quote from: ElQuia on April 26, 2012, 07:34:04 am

Also check out:
1- Display View, some of the buttons are "garbeled" son grey back ground but they sort of look like the have a white border all bitten on ;-)
2- In skin manager preview is still noire

Keep going!!!

1. Found it, in full screen view the player that pops up when you move your mouse to the side. One part wasn't edited or it didn't save, I'll fix that.

2. That's weird. I updated it, checked it was correct and reposted the zipfile. Must have been too late

. I'll fix it with the next update.

Thanks.

InflatableMouse · « **Reply #20 on:** April 26, 2012, 10:40:27 am »

New version uploaded.

Fixed: Skin Manager preview and info/website link.
Fixed: Corrupt buttons in fullscreen mode.
Removed: Vertical scrollbars.
Adjusted: Horizontal scrollbars.

Please report any other issues you run into.

Thanks!

ElQuia · « **Reply #21 on:** April 26, 2012, 10:45:10 am »

This is what I was seeing
Will check new version now

ElQuia · « **Reply #22 on:** April 26, 2012, 10:54:15 am »

Please check your uploads. I just downloaded and see attach I am still getting old version I believe.

InflatableMouse · « **Reply #23 on:** April 26, 2012, 11:55:30 am »

Yes, apologies. I had uploaded to the wrong folder. Corrected.

InflatableMouse · « **Reply #24 on:** April 26, 2012, 12:06:09 pm »

Quote from: marko on April 26, 2012, 01:27:45 am

If the image disappears, it's usually because the margins specified in the xml are greater than the image itself.
When using the "Margin" system, the four values work in pixels, like so: Margins="[left margin],[top margin],[right margin],[bottom margin]"
So, if the image is, say, 10 pixels wide, and your 1st and 3rd values combined are greater than ten, the image disappears from the skin.
If you imagine the four values place a line the specified number of pixels in from each edge of the image, then an area inside the image is 'framed' by these lines, the centre of nine areas. If no "DrawMode" is specified, then the areas around the edge, the margins, are drawn exactly as they are in the skin image file, while the centre is stretched to fill the space required by that skin part.

For the scroll bar handles, let's say vertical ones, I would create the handle image exactly as wide as I wanted it to be and set the left and right margin values to zero. If the handle had rounded ends, I would not want them stretched, so the top and bottom margins must be bigger than the rounded ends; only needs to be by a pixel or two, and then the bit in the middle can stretch and contract with the required size of the bar.

Let me know if you need any more assistance, the weekend is near and I should have some time then.

Have a look at my Arctic Winter HC skin (http://yabb.jriver.com/interact/index.php?topic=70136.0)

It has scroll bars 1 pixel wide. Perhaps you might fair better working from there upwards...

-marko

Thanks Marko, appreciate you've taken the time to explain that. Although I must admit I still don't really get it but I guess I'll have to make me a bitmap that will show the changes when I make them in the XML.

I actually really like the fact that your skin has no vertical scrollbars. So ... I've shamelessly copied that from you and edited my PNG's to fit with it

. Hey you know what they say, better properly stolen than badly invented

. Hope you don't mind

.

There's actually still 1 pixel scrollbar and with an accurate mouse you can still click and drag it. Accidently with the colors I chose I can still see a 1 pixel wide bar moving too. Pretty neat.

InflatableMouse · « **Reply #25 on:** April 26, 2012, 12:57:34 pm »

Caution!

I found a mistake with the tickboxes. They are reversed

.

Fixing it now ...

Edit: New version uploaded.

ElQuia · « **Reply #26 on:** April 26, 2012, 01:13:54 pm »

mmm, what tikboxes?

Well.. NOW WE ARE DOING SOME SERIOUS TALKING HERE

Much better, but....... why not take away the horizontal scrollbar also?? it would be MUCH cooler

BTW, I cant find the small arrows that are so useful for hiding the tree pane....... didn't you include them?

ElQuia · « **Reply #27 on:** April 26, 2012, 01:24:12 pm »

Scrollbars.

Look at the 3 attachements, each one represents a different view in my MC that I have in different tabs.
Please look at the different screens at the scrollbars.

audio: no vertical either in tree or pane, horizontal present
images: no vertical in tree, no horizontal in pane, SMALL SQUARE button in vertical scroll in pane
movies: no vertical in tree, no horizontal in pane,. FULL SIZE vertical scrollbar in pane.

marko · « **Reply #28 on:** April 26, 2012, 02:07:12 pm »

Quote

images: no vertical in tree, no horizontal in pane, SMALL SQUARE button in vertical scroll in pane
movies: no vertical in tree, no horizontal in pane,. FULL SIZE vertical scrollbar in pane.

Thumbnail lists do not have horizontal scroll bars, so that is correct.

Now, as for the vertical bars, when you see them like that, if you press F5, do they refresh back to their proper 1 pixel width? They should do. It's a skinning bug, and for me at least, manifests only very occasionally, and when it does, it's extremely random. I cannot get it to draw incorrectly at will.

Quote from: ElQuia on April 26, 2012, 01:13:54 pm

Much better, but....... why not take away the horizontal scrollbar also?? it would be MUCH cooler

You can't do that. No verticals 'just works' because we all have scrolly wheels on our mice. Side ways scrolling rockers (that actually work) are not so common, so you need to provide something that is easily clickable in order to scroll the list from left to right and back again.

-marko

marko · « **Reply #29 on:** April 26, 2012, 02:09:44 pm »

Quote from: InflatableMouse on April 26, 2012, 12:06:09 pm

Thanks Marko, appreciate you've taken the time to explain that. Although I must admit I still don't really get it but I guess I'll have to make me a bitmap that will show the changes when I make them in the XML.

I actually really like the fact that your skin has no vertical scrollbars. So ... I've shamelessly copied that from you and edited my PNG's to fit with it . Hey you know what they say, better properly stolen than badly invented . Hope you don't mind .

There's actually still 1 pixel scrollbar and with an accurate mouse you can still click and drag it. Accidently with the colors I chose I can still see a 1 pixel wide bar moving too. Pretty neat.

You're welcome. Thanks for the nod.

-marko

ElQuia · « **Reply #30 on:** April 26, 2012, 02:47:24 pm »

Quote from: marko on April 26, 2012, 02:07:12 pm

if you press F5, do they refresh back to their proper 1 pixel width?

You ARE right. F5 does the job, should have thought of that before.

Quote

You can't do that. No verticals 'just works' because we all have scrolly wheels on our mice. Side ways scrolling rockers (that actually work) are not so common, so you need to provide something that is easily clickable in order to scroll the list from left to right and back again.

Ok, then in the case of this skin it would (for my taste at least :-) ) be nicer leaving a very THIN horizontal scrollbar (maybe 1 or 2 pixel max)

What about the small arrows that other skins use to hide the tree pane?

InflatableMouse · « **Reply #31 on:** April 26, 2012, 03:11:57 pm »

Quote from: ElQuia on April 26, 2012, 02:47:24 pm

You ARE right. F5 does the job, should have thought of that before.

Ok, then in the case of this skin it would (for my taste at least :-) ) be nicer leaving a very THIN horizontal scrollbar (maybe 1 or 2 pixel max)

What about the small arrows that other skins use to hide the tree pane?

Same is happening for me, first time I opened Images it showed that bigger scrollbar. F5 did indeed fix it for me too.

I can't put a triangle or arrow on a 1 pixel line

. But I didn't deliberately leave it out so it may still be there just not visible? I'll have to look into it, but I like I said I can't put something visibly there. If it's going to work it will be invisible.

The easiest thing though would be to drag it. Not a lot more trouble if you ask me.

ElQuia · « **Reply #32 on:** April 26, 2012, 03:36:16 pm »

Quote from: InflatableMouse on April 26, 2012, 03:11:57 pm

I can't put a triangle or arrow on a 1 pixel line . But I didn't deliberately leave it out so it may still be there just not visible? I'll have to look into it, but I like I said I can't put something visibly there. If it's going to work it will be invisible.

Look at marko's artic skin, it has NO vertical scrobars on the tree pane but it does have the two small arrows (see attach) on the PANE side of the vertical divider.

Dragging only changes the tree pane size it does not hide it.

Some other skins miss them to, the FusionX series (wich I lik a lot) are missing these dividers....

InflatableMouse · « **Reply #33 on:** April 27, 2012, 12:31:40 am »

I'll look into it, don't have much time this weekend but monday probably.

brossmac · « **Reply #34 on:** April 27, 2012, 12:11:31 pm »

I downloaded it and am using the Negative options in the Skin Effects.

So you did make a dark version, without any extra effort....

InflatableMouse · « **Reply #35 on:** April 27, 2012, 04:07:17 pm »

Quote from: brossmac on April 27, 2012, 12:11:31 pm

I downloaded it and am using the Negative options in the Skin Effects.

So you did make a dark version, without any extra effort....

I'm pleased to see people are actually using my skin, pretty cool.

InflatableMouse · « **Reply #36 on:** April 30, 2012, 08:23:50 am »

The OP has been updated and a second download link provided for a version with handles for hiding/showing panes. Also downloads are now provided in both zip and rar.

ElQuia · « **Reply #37 on:** April 30, 2012, 09:59:53 am »

:-)
Thanks for the handles version. It´s practical for me, sometimes I use ctrl+5 but there are situations in which it´s ptractical having all the "headers" always visible.

danrien · « **Reply #38 on:** June 12, 2012, 01:04:34 am »

This is a great skin, very well done dude. Any thoughts on adapting it to fit all the new Win8 Metro colors?!

. I know it would be quite a bit of work but that would be awesome....

InflatableMouse · « **Reply #39 on:** June 12, 2012, 05:47:05 am »

Thanks.

The orange, blue and green should already match the win8 Metro colors. I have no plans making a version in blue or green if that's what you mean.

minhquanguyen · « **Reply #40 on:** July 29, 2012, 12:55:33 am »

Quote from: brossmac on April 27, 2012, 12:11:31 pm

I downloaded it and am using the Negative options in the Skin Effects.

So you did make a dark version, without any extra effort....

I really love the clean, metro look of the skin, but like others, would've liked a dark/black version. The Negative Skin Effect works well to emulate what I want, but obviously, there are flaws--the colors and white text don't pop as much, and if you try to brighten them up, then the black becomes too gray. I know InflatableMouse doesn't like the dark palette, but I hope he changes his mind sometime; this skin would look even better with one, in my opinion.

ElQuia · « **Reply #41 on:** July 29, 2012, 11:22:11 am »

I use metro white by day and by night I use a dark skin, I like specially the FuxionX series... metrowhite is cool as it is... I only miss a mini metro white :-)

I was really happy when MW came along, there ARE out there a LOT of dark skins....

InflatableMouse · « **Reply #42 on:** August 05, 2012, 02:49:29 pm »

Late reply I know but I have a valid excuse: I'm on holiday for 2 more weeks

I won't be doing a dark version - ever. So many dark/black versions to choose from. I may work on a mini version after the summer though.

ElQuia · « **Reply #43 on:** August 05, 2012, 03:22:08 pm »

Quote

I may work on a mini version after the summer though.

Yesss please

remixedcat · « **Reply #44 on:** September 14, 2012, 12:27:42 am »

I like it but it needs a proper Dark version Inverting does not look right.

INTERACT FORUM

Author Topic: Metro White - Now with download link (Read 13037 times)