getmusicbee.com

MusicBee & Add-Ons => Customizations => Skins => Topic started by: Blinghound on January 11, 2011, 02:13:00 PM

Title: 'iBee' Skin
Post by: Blinghound on January 11, 2011, 02:13:00 PM
(http://i56.tinypic.com/2rdyqvm.png) (http://img821.imageshack.us/img821/9404/ibeedark2.png) (http://img821.imageshack.us/i/ibeedark2.png/)



                                     iBee Light                                                                                    iBee Dark

                                    (http://img16.imageshack.us/img16/6595/ibeelightartwork.th.png) (http://img16.imageshack.us/i/ibeelightartwork.png/)  (http://img232.imageshack.us/img232/8287/ibeelighttracks.th.png) (http://img232.imageshack.us/i/ibeelighttracks.png/)  (http://img687.imageshack.us/img687/5517/ibeedarkartwork.th.png) (http://img687.imageshack.us/i/ibeedarkartwork.png/)


Skin File Light Artwork background: http://www.mediafire.com/?sca9qq8btjzjup7

Skin File Dark Artwork background: http://www.mediafire.com/?c865odr1hp25t8e

Version 1.2.4054 is required: Post Link (http://getmusicbee.com/forum/index.php?topic=551.msg13431#msg13431)

Since this was my first skin, I tried to create a simple design using a familiar colour scheme.

I hope you all like it.

Many, many thanks to Rotem K and Steven for their help.

Updates Please click 'notify' in order to receive updates!
Title: Re: 'iBee' Skin
Post by: Rotem K. on January 11, 2011, 02:33:33 PM
Congrats man, great skin!
love the buttons at the top.

Looking forward for your next one  ;)
Title: Re: 'iBee' Skin
Post by: Rotem K. on January 11, 2011, 02:42:16 PM
Just a suggestion and really don't know how it is in iTunes, but I would have changed Menu.ParentItem.Pressed FG and Menu.ParentItem.Highlighted FG to a brighter color for text readability.
Title: Re: 'iBee' Skin
Post by: Blinghound on January 11, 2011, 05:09:10 PM
Thanks Rotem :D,

I've just updated the link, I did try to change the elements before, to no avail, but I popped them at the bottom and it seemed to work :)
Title: Re: 'iBee' Skin
Post by: Vino on January 11, 2011, 08:39:56 PM
Wow, nice work Blinghound. Looking forward to your next piece of work.
Title: Re: 'iBee' Skin
Post by: VX on January 12, 2011, 09:36:53 AM
Really great! Thanks :-)

The only skin I miss in MB is sth similar to one of the Chrome Theme, which is available at the Chrome extension page:
It can be found here: https://chrome.google.com/extensions/detail/opilcmfbjbkdhlhegdmihngmaapoeaab?hl=pl

And the lighter version (updated 2 days ago):

Skarv Aero Skin : https://chrome.google.com/extensions/detail/oekemfmehiakocmomemagciajlikigkl?hl=pl
Title: Re: 'iBee' Skin
Post by: Blinghound on January 12, 2011, 01:30:27 PM
Hey VX,

I will try to create something similar for you, although, due to the limitations of the way skins are produced in musicbee, the gradients and colours will not be spot on. The other issue is the lack of transparency (which I hope will be available one day ;)).

It should take 2-3 days to complete, so stay tuned.
Title: Re: 'iBee' Skin
Post by: Blinghound on January 12, 2011, 08:50:36 PM
Update

I have updated the links in the first post to fix the colours when the player is in the right sidebar
Title: Re: 'iBee' Skin
Post by: andrea.ippo on January 14, 2011, 03:51:52 PM
Mediafire says invalid or delete file for both links, could you provide valid links please?

Thank you :)
Title: Re: 'iBee' Skin
Post by: Blinghound on January 14, 2011, 05:00:28 PM
Update

I've reuploaded the files, and I also fixed the wait indicator background colour.
Title: Re: 'iBee' Skin
Post by: andrea.ippo on January 14, 2011, 05:25:26 PM
Update

I've reuploaded the files, and I also fixed the wait indicator background colour.

Thanks :)
Title: Re: 'iBee' Skin
Post by: Blinghound on January 24, 2011, 08:13:54 PM
Update

The links have been updated. Fix for the transparent square on the artwork view size slider, new improved Wait Indicator + In Progress images, and a misc colour fix
Title: Re: 'iBee' Skin
Post by: Blinghound on January 24, 2011, 09:31:08 PM
Update

Fixed the album rating colour in artwork view for both iBee skins - Thanks for pointing it out Steven. I have also changed the checktick border colour in the menus - This will become apparent after update 1.2.4040 is released.
Title: Re: 'iBee' Skin
Post by: aidanw on January 25, 2011, 09:42:03 PM
Great skin, really enjoy using it and it's now my default. Thanks for making this :-)

Feedback
- In the "Track Detail" view when you highlight an unrated song it looks like it's rated 5-stars, because the colour of the stars is the same as a rated song
- In the MiniPlayer view, the rw/play/stop/ff buttons have a dark border. iTunes has a softer grey border?

thanks again!
Title: Re: 'iBee' Skin
Post by: aidanw on January 25, 2011, 10:00:23 PM
I made my own modification for the rating colour to be the same (grey) for highlighted and unhighlighted songs in the Track Detail view:

\\ --- STAR RATING
<!-- 64-->  <element id="Panel.StarRating.Default" fg="137,140,145" fg2="255,255,255" />
<!-- 65-->  <element id="Panel.StarRating.Highlight" fg="137,140,145" fg2="76,149,230" />
<!-- 66-->  <element id="Panel.StarRating.Lowlight" fg="235,238,215" fg2="183,183,183" />
Title: Re: 'iBee' Skin
Post by: aidanw on January 25, 2011, 10:11:52 PM
I also modified the rw/play/stop/ff buttons to have softer grey borders. I'm not completely happy with it (they get "lost" among the grey background) but I like it better than the dark harsher borders. The 134,134,134 value is taken directly from a colour picking tool over iTunes in mini-player mode:

updated:
<!-- 86-->  <element id="Player.Control.Default" bg="242,243,245" bg2="182,183,185" fg="81,81,81" bdr="134,134,134"/>
<!-- 98-->  <element id="MiniPlayer.Background" bg="230,230,230" bg2="147,147,147" fg="95,95,95" bdr="198,198,198" />

Title: Re: 'iBee' Skin
Post by: Blinghound on January 25, 2011, 11:31:00 PM
You're very welcome fish.

I'll change the button borders to something softer.

As for the star rating colours, in itunes, when you have highlighted a track, the stars are white when rating (although they appear as dots when unrated), and dark when rated (unhighlighted). What does anyone else think? I could change it so the empty stars are lighter when unrated and highlighted.


*Update*

Fish, here is an altered version of the iBee skin for you to try out. What do you think of the star colour when highlighted (not rated)? and the button borders? lighter perhaps?

*altered skin link* http://www.mediafire.com/?0bm369zht43bwft
Title: Re: 'iBee' Skin
Post by: aidanw on January 26, 2011, 12:17:01 AM
The softer borders are really nice, they fit with the rest of the skin well.
They could almost go a little bit lighter..

You're right about the iTunes highlighting, I guess if Apple made it they've thought about it a lot and decided that was the best way to do it :-)

I found this image (http://www.snipe.net/wp-content/uploads/2009/01/itunes-half-stars.png) which is a good screenshot for how iTunes looks. I think the differences are:
- Blue is darker: 61,128,223 vs iBee 76,149,230
- Rating star gray (unselected row) is lighter: 127,127,127 vs iBee 100,100,100
- Unselected stars are a dot rather than star - would need code change from Steven maybe?
Title: Re: 'iBee' Skin
Post by: aidanw on January 26, 2011, 12:31:25 AM
Scroll bars - I found that the iTunes 8 blue is slightly different (see this screenshot for detail: http://www.askdavetaylor.com/2-blog-pics/apple-itunes-8-genius-sidebar-bobby-mcferrin.png)

iBee blue highlight: 76,149,230
iTunes blue highlight: 61,128,223

iBee blue shadow: 110,131,162
iTunes blue shadow: 113,133,161

I used "Replace All" to swap the blues to the iTunes colours.
After this change, it looks very similar the screenshot!
Title: Re: 'iBee' Skin
Post by: aidanw on January 26, 2011, 12:38:59 AM
Here's a screenshot after the scroll bar and blue changes: http://img135.imageshack.us/img135/2253/ibee.jpg
Title: Re: 'iBee' Skin
Post by: Blinghound on January 26, 2011, 12:19:25 PM
Hey Fish, thanks for the suggestions :)

about the blue colour, I did have a good look around for images of selected tracks, and all of them were different ;D.

for example, from the apple website http://images.apple.com/euro/itunes/what-is/images/player_mix20100901.jpg, shows 91,166,233. Would this be better than my original?

I'll make the changes to the scrollbars like you suggested :)

I'll also make the button borders slightly lighter.
Title: Re: 'iBee' Skin
Post by: Blinghound on January 26, 2011, 12:29:00 PM
Here is the altered skin fish, what do you think? I think I prefer the highlighted track colour darker like before.

http://www.mediafire.com/?pwn46k31zokhnbq
Title: Re: 'iBee' Skin
Post by: aidanw on January 26, 2011, 08:16:36 PM
for example, from the apple website http://images.apple.com/euro/itunes/what-is/images/player_mix20100901.jpg, shows 91,166,233. Would this be better than my original?

This looks (based on the cursor) like the version running on Mac OS - I only checked out screenshots of iTunes running on Windows. The Mac versions seemed "brighter" than the Windows screenshots. Like you say there was quite a bit of variety!
Title: Re: 'iBee' Skin
Post by: aidanw on January 26, 2011, 08:22:52 PM
Here is the altered skin fish, what do you think? I think I prefer the highlighted track colour darker like before.

http://www.mediafire.com/?pwn46k31zokhnbq

I like it, because the darker highlight can get almost lost at first glance... but it's very subjective and our screens could be quite different brightness too :-)
Title: Re: 'iBee' Skin
Post by: Blinghound on January 26, 2011, 08:56:55 PM
Yeah  ;D, I keep forgetting our screens will differ in brightness.. So shall I keep the new lighter version and update the main iBee link fish? What do you think of the new star colour? (picture below to remind everyone)

(http://i56.tinypic.com/102l5oy.png)
Title: Re: 'iBee' Skin
Post by: aidanw on January 26, 2011, 09:07:20 PM
Yeah  ;D, I keep forgetting our screens will differ in brightness.. So shall I keep the new lighter version and update the main iBee link fish? What do you think of the new star colour? (picture below to remind everyone)

(http://i56.tinypic.com/102l5oy.png)

Yeah, I think the lighter one is better - it's a close call though, I do like them both. The reason I like the lighter one is that it's "fresher" and it stands out easily when you're looking in a list.
I thought the darker one was easier to read, but I went back and compared, and it's not really that much different.

Title: Re: 'iBee' Skin
Post by: Blinghound on January 26, 2011, 10:47:25 PM
Update

I have updated both links to include fixes for:

-More contrast between text and background in locked input boxes (Thanks Steven)
-Improved star rating colours
-Improved track highlight colours
-Lighter button borders
-Misc colour fixes

note
If you are using the Dark artwork background version, the star colour is still off in the artwork view, making it seem all albums are 5 stars (Configure|change any line to 'Album rating' to see).
This is because changing this will cause the stars to be too bright in the 'album and track' view. I will play about with this some more, and I have asked Steven for a separate element for more control.

Edit
After a short mess around with the star colours, I came across a happy medium so the stars are visible on the 'artwork' and 'album and track' views, in both light and dark skins.

Links have been updated
Title: Re: 'iBee' Skin
Post by: OrB on January 27, 2011, 01:23:48 AM
Hello Blinghound - Good Work,


Maybe you like to color the searchfield. The elements are available  but the tags are missinig in your source.
Title: Re: 'iBee' Skin
Post by: Blinghound on February 05, 2011, 02:32:41 PM
Update

The links have been updated to include:

-Brand new minimise/maximise/close buttons with highlight colours! (available from version 1.2.4052 - available in Rotem K.'s 'Pop Pink' skin thread)

A special thanks to Rotem K for allowing me to use his 'indented' style buttons, and to Steven for making highlighted buttons available :D

-Changed the top corners - I didn't really like not having a border all the way around

-New Search box colours (for Orb)

-Fixed slider buttons (the default and disabled colours were mixed)

-Fixed text the same as the background in disabled input boxes

-Altered left panel highlighted colour - to match the track highlighting

-New delete button

-Fixed checkbox backgrounds in menus

-Slightly altered splashscreen (transparent corners)

-Fixed the Mini player's nowplaying list icons

-Taken off 100kb using image compression

-A few other misc fixes



Hope you all enjoy the new (itunes-ish) button colours - tell me what you think (I'm not too sure yet)

As always, if anyone notices any bugs or has a suggestion feel free to post

Blinghound
Title: Re: 'iBee' Skin
Post by: Steven on February 05, 2011, 03:16:34 PM
i really like this now
Title: Re: 'iBee' Skin
Post by: aidanw on February 05, 2011, 10:23:12 PM
Awesome work, this skin is really nice to use and look at. It feels very polished.
Title: Re: 'iBee' Skin
Post by: VX on February 08, 2011, 04:13:02 PM
Hope you all enjoy the new (itunes-ish) button colours - tell me what you think (I'm not too sure yet)

This skin is much better than the 'original' iTunes one!  I love the 3-colored buttons  ;)   
Title: Re: 'iBee' Skin
Post by: Blinghound on February 08, 2011, 06:30:53 PM
Cheers everyone :) I hope you enjoy it! I might have another look at the colours, to make them more similar in brightness.
Title: Re: 'iBee' Skin
Post by: Blinghound on February 08, 2011, 11:22:24 PM
Big Update

Both links have been updated to include:

-New splashscreens depending on which version is used

-Modified minimise/maximise/close button colours

-Changed colour of 'playing track/selected track' button on right side panel to blend in

-Modified bar and buttons in the playing artists (wiki/youtube/last.fm profile) view

-Changed library explorer header colours

-Changed the love icon/star colours in the track view to the same colour

-Changed dropdown menu border to make them stand out more from child menus

-Changed the star colours in the Mini Player

-Adjust the colour and placement of the Love icon in the Mini Player

-The tag editing screen:
              -Changed tab colours
              -Changed background colour

-Changed highlighted now playing list in Mini Player


I may produce a third iBee skin soon, so stay posted.

Hope you enjoy it

Blinghound
Title: Re: 'iBee' Skin
Post by: VX on March 18, 2011, 08:40:48 PM
Bling, could You release iBee Dark as dependent skin  ??? I like darker background for the Album View (covers look better IMHO), so I prefer iBee Dark over original iBee. I tried to create dependent iBee Dark by myself, but I must have messed up sth and removed too many lines   :-[

I may produce a third iBee skin soon, so stay posted.

The idea of dependent skins allows to create full set of different iBee variants. I hope you are still interested in producing it  :)

Title: Re: 'iBee' Skin
Post by: Blinghound on March 18, 2011, 10:51:41 PM
Hey VX, I am still very much interested in designing more skins, but uni work has been absolutely hectic - there is so much to learn! I really want to make some more alternate iBee Skins, based on dependencies, and I certainly will when I get the chance :). If Rotem or Steven would be kind enough to explain how I can produce the dependent skins, I would be very grateful (I still check the forum everyday but I havn't had time to read much).

Thanks for the interest, and you can expect more very soon :)
Title: Re: 'iBee' Skin
Post by: VX on March 19, 2011, 11:18:12 AM
Hey Bling  :)

I've gathered the most important and useful informations about dependent skins into one comment. (http://getmusicbee.com/forum/index.php?topic=2497.msg15213#msg15213).

Good luck at the uni  :)
Title: Re: 'iBee' Skin
Post by: Rotem K. on March 19, 2011, 01:32:22 PM
Skinning Guide - Part 5 - Dependent Skins (http://getmusicbee.com/forum/index.php?topic=3016.0)

I hope this settles the 'what-the-hell-are-dependet-skins' issue.