Tuesday, January 29. 2008An explosion of color, or on the fly svg tinting
In my last entry, I introduced the new svg theme "Graywolf" which was, as the name implies, quite gray. I also stated that one of the ideas behind this theme was to allow the application to automatically tint the svgs to match the system color scheme and that to achieve this, we needed a base them that did not have any single dominant colors. As some people were expressing doubts about the feasibility of this approach, I did what I always do in those situations: I came up with a quick and dirty prof of concept.
So, before I overwhelm your sense with an explosion of color, please remember that this is the result of one night of prototyping and some of the svgs are not tinted yet as I am waiting for an updated version ( the sidebar buttons, play controls, ... ). Also, work needs to be done to ensure adequate contrast in very light color schemes. The only thing different between the following screenshots is that I have changed the users color settings. No configuration at all has changed in Amarok itself. Of course I also choose some of the more, uhm... colorful, color themes to really illustrate the concept:     I actually think the black one is pretty sweet, even if the other ones are a bit "over the top" for my taste! .-) It is still a work in progress and needs a lot of tweaking, but i hope this will put to rest some of the fears people have expressed that it is impossible to make svg graphics match the system color scheme. Trackbacks
Trackback specific URI for this entry
No Trackbacks
Comments
Display comments as
(Linear | Threaded)
Ok, I have a question that may be stupid for you, but not for me.
These themes are sweet but... there's something I don't understand with this new Amarok : the center "plasma" part is always unused or for info really not useful at all. I have a fealing of a huge space lost for nothing. Can you tell me : "No Temet, you're wrong because this space will be used for the great xxxsomethingxxx" ??? Thanks.
No Temet, you're wrong because this space will be used for the great context plasma applets!
 If you follow the link to my previous blog entry, you will see one of these applets, the current track one, in action. It is also the only one that really woks now, but we have great plans for this central area. Basically, all the info ( and much more ) that was in the context browser in Amarok 1.4.x will be displayed here. Unfortunately, we need some features from Qt 4.4 to really make is shine.
Ok, I will wait a bit to be surprised to what kind of plasmoid can be really useful in Amarok.
And I already saw the "current track" plasmoid on you blog  Keep up the good work. Thanks.
I'm worried about middle space too. I have ever used context on amarok because i like to play music so i keep library always shown and drag from there what i want. And i have used Amarok2 but i feel it just so much cluttered in my use, what is that i have few songs from one artist and Amarok (1) window is always having 20-30 different artists or albums. So when i do this on Amarok2, i get so big list of albums to right side when i got them nicely to fit in Amarok (1). And why playlist is far side of library? So much more mouse movements to drag files :-/
But when i play whole albums and only a few of them (5-7) Amarok2 GUI Rocks. Mayby someone do something what would "swap" those functions so amarok plasmoids would stay on desktop and playlist could get more space to middle like Amarok (1) . Altought i like how song information has got "compressed" to smaller size. But i really liked these new color "styles". Especially black and blue. Green was good too but brown is just... not good by my taste  But great job from Amarok team. Amarok just is (*best*).
I like it, still no color contrast yet but it's getting there. I feel the center and top should be tinted a different color to provide that much needed contrast. But the fact that this can be done is great.
As for the ubuntuish brown color: I hope this is the last time i ever have to see that color in my life lol.
I suppose you could tint the toolbar and background with a different color from the palette, perhaps the highlight color. Right now I am using whatever window color is set in the color theme.
i tried yesterday, amarok eh but under windows, i'll skip the feeling here cause my little english skills can't describe the emotion
just one complain, the setting dialogue is too huge to be used in 800*600 resolution ( i have a small screen) thanks really for your work
The settings-dialog is even to big to use it under 1024x768 (in KDE 1.4). Maximum-size for KDE-apps is 800x600 for configwindows. I know Amarok is not a part of KDE but since it is always packed with it and the users will see it as KDE-part....
I have huge issues with this dialog on my own 1280x800 laptop, so don't worry, if all else fails, I will fix it myself when I get annoyed enough.
Yeah we know that and we're always trying hard to stay within this limit.. but.. it's hard
We'll try to make it more compact before the 2.0 release, promised.
I like how the SVG colors can be changed, but can the graphics themselves be changed? That'll be interesting to hear about.
The only thing I'm concerned about is how the top bar is going to be utilized. Right now it looks quite empty, what with the basic controls and sliders. Are there plans to add anything more to it? Keep up the great work! The context view Plasma is a great idea and something that will benefit both projects.
No no no, you won't be able to change the graphics. It's called "skinning" and it's totally 90s and Winamp.
The answer to this is yes, Amarok is using plasma for its work, this means one could create a svg for each applet and replace the ones we ship.
I'm not sure how well this will be supported within the gui, but it will always be possible to do so.
eee! green!
hey, I wonder if plasma could have the option to do this too... how'd you do it? I think it'd be useful for people who don't like the default colours but are too lazy to make a whole plasma theme themeselves (eg. me)
Yes, it is a very striking color, isn't it!
I did it by making a little helper class that loads an svg file and replaces all instances of a certain color with a color that is constructed by blending the original color with a color from the current color theme ( the window color ) before passing it to the svg renderer. The catch is that it requires svgs that are made with this in mind. So while this could be done for all of plasma, it would be easy to forget to make sure that the svgs used will work with this approach.
i don't want to sound too negative, but i don't like that style.
the "glass" effect you put on most of the elements is by far too much and makes the look feel cluttered. readability also suffers alot from this. then, the buttons on the left side look weird to me, especially the selected one, mainly because it holds 2 complete different colors. same goes for the borders arround the frames. they give an unstable expression to me somehow. if you want i can try to create a mockup . maybe you like it, maybe not.
Sure, we'd love to see a mockup! Bring it on
PS: You can send it to our mailing list, amarok@kde.org
I have a suggestion - maybe you can try making various multicolor schemes and allow base colors to be selectable:
http://www.allwebdesignresources.com/colorusageinwebdesign.html This would be cool for KDE itself as well. So you would be able to: - select a scheme (e.g. triad) - click on a base color or two - poof! you have a matching color scheme
Hah! I did something very similar in a recent project. This was in a map, where there are a few similar icons but in many different colors. We created a set of SVG icons, where the dominant color was "magenta". You have to edit by hand, because SVG editors will save that as #ff00ff. Then when we load the SVG into the program, we change the "magenta" to the color we want. Voila! Unlike coloring a PNG, this method doesn't affect any of the other colors in the icon.
Looks nice so far. Instead of or as an additional option I would like to see a more patterned texture in the background than the verticle lines, something more reminiscent of the Aurora Borealis would be nice.
http://www.mdsci.org/images/sub/shows/imax/alaska06/arora_image2.jpg http://icons-pe.wunderground.com/data/wximagenew/n/NorthernLights/0.jpg http://www.ratemyeverything.net/image/809/0/aurora_borealis_explained.ashx Later, Seeker
That might look nice. I will pass this suggestion on to our artists.
Great music choice Amarok devs! Porcupine Tree ftw! And keep up the good work!
okay, as promised, here is a mockup... it's not completely finished yet (scrollbars and time-jumper are missing), but i think it looks way less uncluttered and unique... tell me what you think:
http://mofux.moches.de/amarok2.png
I like the carbon look, the brushed metal look of the current amarok2 is somewhat 90s in styling.
Still the plasmoids waste a lot of space this way, which may not be bad, depending on how efficiently the various components are designed.
Also the toolbar controls graphics are very pretty. Much prefer your mockup to the current graphics in Amarok2.
Yours also have the benefit of fitting in with probably any widget style and colour scheme. That the current control graphics do not. Amarok2 should offer an option to use the standard widget set for the toolbar IMO. Otherwise they will annoy some people unnecessarily, get a lot of requests for this feature. And be lumbered with the requirement to ship a default toolbar SVG which fits in with as many styles and schemes as possible. Support burden should be minimised. For sanity's sake. |
Amarok LinksCalendarQuicksearchCategoriesSyndicate This BlogBlog AdministrationWe Listen To... Powered by
|
