Distinct Icon and Meter-bar Colors

Development of artwork, requests, suggestions, samples, or if you have artwork to offer. Primarily for the artists.
Message
Author
User avatar
eleazar
Design & Graphics Lead Emeritus
Posts: 3858
Joined: Sat Sep 23, 2006 7:09 pm
Location: USA — midwest

Distinct Icon and Meter-bar Colors

#1 Post by eleazar »

It is not especially useful to have a bunch of meter bars together that are all white.
For the bar color to be helpful it needs to match the main color of the icon.
meters.png
meters.png (13.12 KiB) Viewed 3863 times
So i lazily recolored some of the planetary meter icons. It will work better like this:
meters2.jpg
meters2.jpg (33.91 KiB) Viewed 3863 times
RGB values for meter bars:

Shield: 00ffba
Defense: ff0000
Troops: a86b00
Detection: bfff00
Stealth: ae00ff
Supply: ffffff

EDIT: revised icons in revision 5225.

The colors don't match up in the other planetary panel-- i'm working on that...

User avatar
Geoff the Medio
Programming, Design, Admin
Posts: 13587
Joined: Wed Oct 08, 2003 1:33 am
Location: Munich

Re: Distinct Icon and Meter-bar Colors

#2 Post by Geoff the Medio »

eleazar wrote:RGB values for meter bars:

Shield: 00ffba
Defense: ff0000
Troops: a86b00
Detection: bfff00
Stealth: ae00ff
Supply: ffffff
Decimal triplets are a bit easier for me to work with, but I can convert the hex, possibly without a lot of errors...
Attachments
in-game meter colours
in-game meter colours
meter_colours.png (10.32 KiB) Viewed 3858 times

yandonman
Creative Contributor
Posts: 699
Joined: Thu Aug 30, 2012 12:32 am

Re: Distinct Icon and Meter-bar Colors

#3 Post by yandonman »

oh... that's what those bars were for. :oops:


(wouldn't it be more intuitive if the bar graphs were vertical, and lined up underneath the relevant icon? )
Code released under GPL 2.0. Content released under GPL 2.0 and Creative Commons Attribution-ShareAlike 3.0.

User avatar
eleazar
Design & Graphics Lead Emeritus
Posts: 3858
Joined: Sat Sep 23, 2006 7:09 pm
Location: USA — midwest

Re: Distinct Icon and Meter-bar Colors

#4 Post by eleazar »

Geoff the Medio wrote:Decimal triplets are a bit easier for me to work with, but I can convert the hex, possibly without a lot of errors...
It looks right.
Decimal triplets-- You mean 255,255,255 for white? I'll remember for next time.
yandonman wrote:(wouldn't it be more intuitive if the bar graphs were vertical, and lined up underneath the relevant icon? )
More intuitive, but less useful, since the bars would be much shorter, and small changes in length would become inperceptible.

User avatar
OllyG
Space Kraken
Posts: 151
Joined: Wed Jul 20, 2011 12:03 pm

Re: Distinct Icon and Meter-bar Colors

#5 Post by OllyG »

eleazar wrote:
yandonman wrote:(wouldn't it be more intuitive if the bar graphs were vertical, and lined up underneath the relevant icon? )
More intuitive, but less useful, since the bars would be much shorter, and small changes in length would become inperceptible.
The icons could be to the left of the bars, rather than above.

Zireael
Space Dragon
Posts: 429
Joined: Mon Aug 15, 2011 5:33 pm

Re: Distinct Icon and Meter-bar Colors

#6 Post by Zireael »

Love the recolor.

User avatar
eleazar
Design & Graphics Lead Emeritus
Posts: 3858
Joined: Sat Sep 23, 2006 7:09 pm
Location: USA — midwest

Re: Distinct Icon and Meter-bar Colors

#7 Post by eleazar »

OllyG wrote:
eleazar wrote:
yandonman wrote:(wouldn't it be more intuitive if the bar graphs were vertical, and lined up underneath the relevant icon? )
More intuitive, but less useful, since the bars would be much shorter, and small changes in length would become inperceptible.
The icons could be to the left of the bars, rather than above.
That would require the panel to be much taller, or the icons to be illegibly small.

User avatar
Bigjoe5
Designer and Programmer
Posts: 2058
Joined: Tue Aug 14, 2007 6:33 pm
Location: Orion

Re: Distinct Icon and Meter-bar Colors

#8 Post by Bigjoe5 »

I agree that making the meter bars different colours is an improvement, but I personally think that all the icons looked better before (though that may just be the shock of change talking).
Warning: Antarans in dimensional portal are closer than they appear.

User avatar
eleazar
Design & Graphics Lead Emeritus
Posts: 3858
Joined: Sat Sep 23, 2006 7:09 pm
Location: USA — midwest

Re: Distinct Icon and Meter-bar Colors

#9 Post by eleazar »

Bigjoe5 wrote:I agree that making the meter bars different colours is an improvement, but I personally think that all the icons looked better before (though that may just be the shock of change talking).
The stealth purple may be too dark, and as i said it was a lazy recoloring

The colors were chosen in part to be different from the colors of the other meters, including ones we don't have yet, but likely will. It will probably be possible to choose a distinct color for everything, but we can do a lot better at making colors provide info.

User avatar
eleazar
Design & Graphics Lead Emeritus
Posts: 3858
Joined: Sat Sep 23, 2006 7:09 pm
Location: USA — midwest

Re: Distinct Icon and Meter-bar Colors

#10 Post by eleazar »

revision 5268
A few new colors for the focus icons, and new icons.
new focus.jpg
new focus.jpg (45.14 KiB) Viewed 3771 times
Meter colors (some for meters not yet implemented)
  • Happiness 255,255,0
    Influence 255,0,255
    Research 0,255,255
    Industry 240,90,0
    Trade 255,200,0
You may note the icon style is a bit different. This is where i want to take the rest of the meter/focus icons:
A strong primary color, distinctive silhouette, and no details that turns to pixel mush at small sizes.

User avatar
em3
Vacuum Dragon
Posts: 630
Joined: Sun Sep 25, 2011 2:51 pm

Re: Distinct Icon and Meter-bar Colors

#11 Post by em3 »

What is the cogwheel with the hammer (gray one) as opposed to the cogwheel without it (the reddish one)? Is the arrow influence? The crossing arrows are trade, right?
https://github.com/mmoderau
[...] for Man has earned his right to hold this planet against all comers, by virtue of occasionally producing someone totally batshit insane. - Randall Munroe, title text to xkcd #556

Zireael
Space Dragon
Posts: 429
Joined: Mon Aug 15, 2011 5:33 pm

Re: Distinct Icon and Meter-bar Colors

#12 Post by Zireael »

The gray cogwheel is construction, the orange one is production. I guess it really should be changed so that people don't scratch their heads. The arrow is growth.

Where's the happiness in this pic? When will trade and happiness be implemented?

User avatar
eleazar
Design & Graphics Lead Emeritus
Posts: 3858
Joined: Sat Sep 23, 2006 7:09 pm
Location: USA — midwest

Re: Distinct Icon and Meter-bar Colors

#13 Post by eleazar »

The grey gear&hammer is the old infrastructure icon. Yes two gear icons is one too many, but i haven't figured out what to replace it with yet.

unimplemented icons:
happiness.png
happiness.png (4.3 KiB) Viewed 3757 times
influence.png
influence.png (3.79 KiB) Viewed 3757 times
Zireael wrote:When will trade and happiness be implemented?
There is no secret FO development calendar. When will you realize we have no satisfactory answers to give to those kind of questions?

yandonman
Creative Contributor
Posts: 699
Joined: Thu Aug 30, 2012 12:32 am

Re: Distinct Icon and Meter-bar Colors

#14 Post by yandonman »

I've always felt that the drop down combo box should have text to explain what each of the options was. (that is if we're keeping the drop down combo box)

Otherwise, the new graphics and colors are an improvement.
Code released under GPL 2.0. Content released under GPL 2.0 and Creative Commons Attribution-ShareAlike 3.0.

User avatar
eleazar
Design & Graphics Lead Emeritus
Posts: 3858
Joined: Sat Sep 23, 2006 7:09 pm
Location: USA — midwest

Re: Distinct Icon and Meter-bar Colors

#15 Post by eleazar »

yandonman wrote:I've always felt that the drop down combo box should have text to explain what each of the options was.
There is a tooltip, it shouldn't be too hard to add some text.

Post Reply