More > JRiver Media Center 30 for Windows

Skin Icons Discussion

<< < (7/9) > >>

HPBEME:
So I finally got around to trying to make icons without a background, and it turned out to be way easier than I ever would've imagined. Below is the result when used with my Dream In Blue skin.  To my eyes, this looks way better than the default icons. If I ever get around to uploading the updated skin (which has numerous improvements) these icons will be what it uses.

MusicBringer:
Dream In Blue skin, umm yes it does look the part.
I am keen to get this and give it a butchers hook when uploaded.

markf2748:

--- Quote from: HPBEME on October 20, 2022, 09:08:37 pm ---So I finally got around to trying to make icons without a background, and it turned out to be way easier than I ever would've imagined.
--- End quote ---
Thanks for the inspiration.  Some thoughts on simplifying my own workflow for creating new icons (second round hindsight, untested):

* All work is done within Inkscape, both creating the icons and building the icon image strips as I go.  No requirement to export individual icon PNGs for import and assembly in Gimp, though it's nice to export the individual PNGs for viewing  thumbnails in Win Explorer.
* It can be helpful to import MC's strips at scale, as background templates.

* I build at least two parallel strips within the SVG file.  One with different color plates as before.  The other, with mostly identical artwork, have their color plates assigned the same Label.  Searching on the label allows all the second strip's plates to be selected at once for immediate common color and transparency control across the whole strip.
* Each strip is separately exported as a PNG for MC Custom Artwork.  All the strips within the same SVG file use the same Custom Resources images.xml file.I will pursue this to completion as interest and time allows, also depending on how JRiver responds to the icon issues raised, including the updated MC30 feature request:
https://yabb.jriver.com/interact/index.php/topic,133694.msg929729.html#msg929729

HPBEME:

--- Quote from: markf2748 on October 25, 2022, 12:10:17 am ---Thanks for the inspiration.  I have now greatly simplified my own workflow for creating new icons (second round hindsight):

--- End quote ---
In the event you're interested, here is some additional information regarding making all the existing MC icons "white" without no background. I did essentially what I mentioned in my previous post. That is:

* Copied MC's Smallicons image file from the installation Default Art folder to my Dream in Blue skin folder.
* Used paint.net to change all icons shown in the image "strip" to black and white
* Used the "magic wand" tool to automatically select the "background plate", and then hit delete, leaving transparency in its place.
* I could select for five or six icons at a time, apply the magic wand tool, and it generally did a very good job leaving behind exactly what I wanted.
* In some instances I had to adjust the tools tolerance value so it did not delete the image itself
* A smattering of partially transparent pixels were left behind throughout the strip, but I just manually deleted those where clumped together in larger patches
* All said and done, the whole process only took about 15-20 minutesNow creating new icons, or finding new ones online to modify... That would take a lot more time, and I did not do that.  That said, since my previous post, I am developing some new icons to replace a handful of MC's existing ones that are either duplicative for different functions, or the icon is not very representative (IMO) of the underlying function.  I do think the pure white icons look really good with my Dream in Blue skin, however, I don't think all white would look right with any of the other skins.

One other tip… The strip height is nominally 64 pixels. I increased that to 100 pixels keeping the aspect ratio locked. This results in having one icon every hundred pixels, making it infinitely easier to find a specific icon. For example, if I want to edit/replace the cloud play icon in the 83rd position (as specified in the images.XML file), I don't have to calculate 83 x 64 (=5312) and center a new icon exactly between pixels 5312 and 5376!  Instead, icon 83 is at pixel 8300 (83rd icon x 100) on the image editor ruler.  Every icon is simply a multiple of 100. You don't even need to change it back to 64 pixel height when you are done - MC automatically downsizes the icons as needed in the skin itself.

As for Inkscape, I tried that program out several years ago. It seems very powerful, so much so I wasn't up for expending the effort needed to become proficient. Same thing for Gimp. But as you noted, when time and interest allows, I may take another look.

markf2748:
Attached files contain 22 additional updated icons for SmallIcons.png / Images.xml (64 icons total),  as well as new icons for TheaterView and RemoteControl in Options.png.  ActionWindowNavigation.png and ViewHeaderXX.png are unchanged from previous posts.

When installed in the standard way described above, this color-plated icon set works, even at relatively small scale, for all skins listed in View>Skin>... except for the three Modern Cards and Twilight skins.

I do not see how to access some remaining icon resources as described in the MC 30 Feature Request
https://yabb.jriver.com/interact/index.php/topic,133694.msg929729.html#msg929729


10/30/2022 Revised the <QuickSearch> icon.
11/1/2022 <Smartlist> & <AddPlaylist>: simplify by removing unnecessary music note, use 3 list lines intead of 4; <TopHitsPlaylist>: hollow pointy star to distinguish from Favorites star; strengthen "+" signs, etc. for other playlist and smartlist icons.
Post the new SmallIcons.png (for easy compare) and the updated ViewHeaderPlaylist.png
11/3/2022 Replaced all icons in SmallIcons.png which contain a playlist graphic so they now use SFIF EA37 List (three unequal length lines instead of three equal length lines) in order to avoid confusion with the ubiquitous three-line icon for opening a menu.  Corresponding replacements applied to ViewHeaderPlaylist.png and ActionWindowNavigation.png.
11/7/2022 Corrected the <Smartlist> icon in the SmallIcons.png which posted on 11/3/2022.

MC 30.0.26  Win 11 22H2 64-bit




Navigation

[0] Message Index

[#] Next page

[*] Previous page

Go to full version