Author Topic: ForumB (Dark & Light)  (Read 15334 times)

Clarence

  • Full Member
  • ***
  • Posts: 145
This is my first attempt at a MusicBee skin, the inspiration for which came from the colour combinations used on this Forum's dark and light page versions...hence the name of the skin.

I looked at the code of quite a number of skins in an effort to come to terms with how this was done and inevitably I still hit problems, so a huge 'tip of the hat' in thanks must go out to hiccup who answered my questions and gave me food for thought when I hit a brick wall.

DARK:





LIGHT:





UPDATE: 17 Dec 2019

1. Compressed Image storage to reduce overall skin filesize by approx 50%

2. Modified main player layout to allow spectrum visualiser to be turned on. I appreciate that this may not be to everyone's taste so two versions of the player are now available. (Activatable spectrum visualiser has SV suffix)

(Original)



(Spectrum available)





DOWNLOADS:
ForumB Dark skin   (Original)
ForumB Light skin   (Original)

ForumB DarkSV skin   (Spectrum Available)
ForumB LightSV skin   (Spectrum Available)
Last Edit: December 17, 2019, 11:34:51 PM by Clarence



hiccup

  • Sr. Member
  • ****
  • Posts: 7781
Very nice, well done!

Some observations:
- When toolbar buttons are displayed in a separate bar, the colouring of icons and text is a bit inconsistent.
- Icons of inactive tabs are displayed as a square. (check the iconmask values)



Also I notice that the skin files are rather big.
That's not really a problem, but in case for example they are ever considered to be included in MusicBee (you never know...) it would be good if they were of a smaller file size.

The culprit here will be the image sizes. You might see if you can save them in smaller sizes (depending on the abilities of your image editor), and you might try compacting them further by using a specialized tool. (I am using PNGGauntlet myself for that)

edit:
And while you are in the flow of working on these skins, you may want to create icons for devices too.
( https://getmusicbee.com/forum/index.php?topic=29451.0 )

They will not show up in 3.3, but it would save you the trouble to work on these skins again when 3.4 comes out.
Last Edit: December 13, 2019, 03:09:43 PM by hiccup

Clarence

  • Full Member
  • ***
  • Posts: 145
Thanks hiccup for your observations and I've adjusted the colour inconsistencies with the separate toolbar and adjusted the iconmask values for the inactive tabs as per the screen snip below:


The download links shown in the first post of this topic have been updated to include these adjustments.

The file size is a little larger than I would have liked and it is due to the images. They are already at their lowest sizing (that Photoshop will produce) without compromising image quality. I must admit that I hadn't considered subsequent compression and I've grabbed a copy of PNGGauntlet and will have a play with that to see if I can get any improvements. Thanks for the tip.

Point taken on the forthcoming device icons and I've built these into these skins in preparation for 3.4



I'm not sure that they are the absolute solution as by all accounts from the posts you referred to, they are going to be a somewhat arbitrary/generic selection depending how the OS handles the Protocols and there will of course be multi-type USB connectivity.

hiccup

  • Sr. Member
  • ****
  • Posts: 7781
Very nice icons. (maybe nicer than mine, damn)
It's not easy to get such results with only having 16x16 pixels to work with.

Indeed in some situations some icons will be a compromise but I think this will be more than close enough.

About image sizes:
In Photoshop there are some 'tricks' I sometimes use. One is posterize. But that will not give very useful results with gradient images and subtle colours.
Another one is to use 'save for web'. That usually gives very good results for me.

Another quick and dirty way is to open and save a PS image in Paint.NET.
In some way that seems to leave out some unnecessary ballast and can result in substantially smaller file sizes.


P.S.
For what it's worth, this is what I will be using in my skins. (until protests and rebellion start to arise)
Last Edit: December 14, 2019, 02:07:55 PM by hiccup

hiccup

  • Sr. Member
  • ****
  • Posts: 7781
B.t.w.
Consider creating a landing page for your skins on the Addons > Skins pages?

Clarence

  • Full Member
  • ***
  • Posts: 145
Quote
Very nice icons. (maybe nicer than mine, damn)

'Back at you'

I'll have a try with all of the suggestions you've made about reducing the graphics file sizes and see what works for me.

Not sure a landing page is warranted...let's see if the skin is popular on here before that.

hiccup

  • Sr. Member
  • ****
  • Posts: 7781
Not sure a landing page is warranted...let's see if the skin is popular on here before that.

I wouldn't take that into any concern.
It's hard to measure 'popularity' from replies on the forum.
I have skins that hardly recieve any feedback or appreciation at all, which could be dis-encouraging, but they prove to have a large amount of downloads.

And even if they are not used, downloaded or appreciated by others, so what?
The main reason for creating a skin is doing it because you want to create something that your eyeballs like, and isn't out there yet.

All you can do is to make sure people are able to learn of it's existence, and the Addons pages are good for that.

boroda

  • Sr. Member
  • ****
  • Posts: 4595
Not sure a landing page is warranted...let's see if the skin is popular on here before that.
add-ons section of the site is *not* some official place. but your skin will be available to more users (beta testers) :)

Clarence

  • Full Member
  • ***
  • Posts: 145
Ok hiccup and boroda. Thanks both of you for the input...I'll look into setting one up.

Clarence

  • Full Member
  • ***
  • Posts: 145
I took hiccup's advice and managed to compress images used in the skin and the overall result was a filesize reduction of approx. 50% with no discernible loss of image quality.
'Top Tip', hiccup!, thanks.

I also had a request to activate the spectrum visualiser in the main player which was intentionaly turned off to allow for the layout I wanted. However, I decided to go with the flow and have redesigned the player to allow for the visualiser to be actived. As this may not be to everyone's taste I have made two styles available. The skin with the activatable visualiser now has a suffix of SV. An image of each has been included in the original post above.

The dowload links in the first post of this topic have been updated and include the reduction in filesize.

tdi2001

  • Newbie
  • *
  • Posts: 1
Hi,
I´m new to this forum. I run Musicbee with the beautiful FORUMB skin, and like the Light version even better than the dark one. For me it´s the best theme.
One question regarding the buttons: is it possible to show a STOP-button in the player controls area? I can only find a PAUSE-button.
Thanks & best regards!

stardepp

  • Sr. Member
  • ****
  • Posts: 371
Welcome to the MusicBee Forum.

If you right click on the Player Bar, you will see a Stop button.

Last Edit: January 24, 2020, 10:22:36 AM by stardepp

Clarence

  • Full Member
  • ***
  • Posts: 145
Hi, tdi2001 and, as stardepp said, welcome!

First off, thanks for your kind comments and I'm glad you like this skin. I actually did the light version first as it was what I was after, then felt I should provide a dark version as well.

The stop button can be actioned as stardepp stated and as you can see from the picture posted, Ctrl+S can also invoke an immediate stop.  However, a not so well publicised way of getting a stop button displayed also exists:

When a track is playing (with your cursor anwhere over the main player), press and hold the SHIFT key on your keyboard. The PAUSE button will change to display a STOP button which can then be clicked. It won't work , however, if you have album art displayed in the main player which I haven't worked out if that is a bug or a design feature.

It took me some time to realise this when I first started and I now make sure that I include an appropriately designed stop button with each skin e.g. highlighted in the skin's theme.

Hope this helps.