We should probably switch em up.
narcolepticinsomniac
All 74 comments
I made some and switched them out in the master. I figured the best way to check them out would be to see how they look in the browser.
I'm no great artist, but I made them myself. If the general consensus is that they're good, then we're done. If you hate them, speak now or forever hold your peace. I'll leave this issue open for feedback.
narcolepticinsomniac
on 22 Jan 2017
Looks great! The curly brackets add a nice touch.
TayliaM
on 22 Jan 2017
It looks great. Well done!
schomery
on 23 Jan 2017
Did you design it to look good on a dark OS/browser theme? Because on the default theme the icon looks weird, both in active and inactive states. It's not subpixel-perfect as well - the edges are all blurred: compare it to the original Stylish icon at an extreme zoom without smoothing to see what I'm talking about:
Note, the old inactive icon is partly semi-transparent inside so it blends with the browser UI color inconspicuously.
tophf
on 16 Feb 2017
We all decided the icons needed to be changed. Pretty sure the only people here at that point were the few people in this thread. Nobody else was jumping at the opportunity, and it was yet another detail which was holding things up, so I did the best I could. You didn't bother chiming in at the time, and the other few all gave it a unanimous "good enough".
I like the concept and the color scheme, but the quality isn't great. If I had realized the Stylish Themes guys had a similar concept with a much higher quality image, I would've asked to use it as a template. I like the cyan/aqua as the active styles color because it stands out, and I like curly brackets worked into the border. I think red is a good choice for "globally disabled", but I'm open to any suggestions. As far as the "no active styles" icon, it should resemble a grayscaled version imo. If that's mimicked with transparency, great.
You are the second person to hate on my pixelated icons today. I'll reopen the issue, and tag it accordingly. Maybe now that there's a few more people here, someone with some actual graphic-design skills will step up. You're more than welcome to as well tophf.
narcolepticinsomniac
on 16 Feb 2017
Er, my point was to remind of the default light gray theme. Personally, I'm still fine with my personal mod of the old extension.
tophf
on 16 Feb 2017
Are you guys solid with this logo/icon? I do this kind of thing and wanted to possibly contribute without stepping on any toes.
incace
on 6 Mar 2017
It's labeled as "help wanted" for a reason. We're open to suggestions. Now that they're a little sharper, I actually really like them in my dark Chromium UI, but like tophf said, they're still not great for light UI's. Ultimately, I think it'd be cool to have multiple sets to choose from. I have an extension for VK which allows the user to choose their default icon, so the capability is there. Anyway, yeah, you should definitely come up with some if you feel like contributing.
Keep in mind that three versions are are necessary for the different states, "enabled", "no active styles", and "globally disabled". The defaults used in the browser are 16px, but if it's used as the main default, all sizes need to be accounted for, up to 128px. Tophf also mentioned that the "no active styles" icon might be better off using semi-transparency like it used to, which is probably accurate.
Since we haven't had alternative options to consider, I haven't brought up the user option for picking default icon sets, but that's what I'm hoping for.
narcolepticinsomniac
on 6 Mar 2017
@narcolepticinsomniac which font did you use for the S?
d3n1c1d3
on 18 Apr 2017
I have no definitive answer. I started with a random pic of an "S" because I like the shape of it. Kinda looks similar to "Ubuntu" font to me.
narcolepticinsomniac
on 19 Apr 2017
Myriad Pro Bold seems to have a [near-]perfect match.
tophf
on 19 Apr 2017
Tophf has an eye for detail, so I'm sure that's accurate.
narcolepticinsomniac
on 19 Apr 2017
It was the default font in Illustrator :-) but it indeed seems to fit.
tophf
on 19 Apr 2017
thanks for the information. I just used a vectorized version of S. so now we have clean edges.
if you want you can take a look into the source file - I posted the link here: https://github.com/schomery/stylish-chrome/issues/47#issuecomment-295388163
or should I just change the files and commit them? I think talking about the stuff first can't be a bad thing.
d3n1c1d3
on 19 Apr 2017
I think I'll post the fine tuned icons just here. I'll tried to sharpen the edges in every version for itself. cause a transformation in the size caused blurriness. anyway If I forgot or left some area out just drop a line about that.
the arrangement is based on the previous 128 x 128 (green) icon from @narcolepticinsomniac .
I'm realy interested what @incace has in mind for a new icon / logo.
actually I see in manifest.json the 19x19 and 38x38 pixel version is mentioned. so I will create that also. but it will take some days. if somebody else is familliar with working with vectors in photoshop the source files for the icons are included in the mediafire link on https://github.com/schomery/stylish-chrome/issues/47#issuecomment-295388163.
128 x 128
96 x 96
48 x 48
32 x 32
d3n1c1d3
on 20 Apr 2017
I have re-saved all icons to save some bytes. the files does not contain any meta data now.
all icon source files for this can be downloaded here:
http://www.mediafire.com/file/a3curcl8mpjc5ak/2017-05-18_stylus_icons.zip
the other updated source files can be found here #47 promotional tile images
16 x 16
19 x 19
32 x 32
38 x 38
48 x 48
128 x 128
d3n1c1d3
on 18 May 2017
@d3n1c1d3 Thanks again. Just to be sure, the best/smallest images are in the \png pixlr folder?
narcolepticinsomniac
on 18 May 2017
@narcolepticinsomniac yeah, exactly. You can take these images for the extension. They have the smallest filesize with the same quality. Apologies that I have not mentioned that in the post before.
d3n1c1d3
on 18 May 2017
Thanks! I swapped them all out except for the 16px. @TayliaM cleaned them up a while back, and I think the contrast was increased so they're a bit sharper.
narcolepticinsomniac
on 18 May 2017
Please change also the 16px version. The current one is not working well for light background colors. The corners are a bit to dark. Maybe there is no transparency set in them.
d3n1c1d3
on 18 May 2017
Please change also the 16px version. The current one is not working well for light background colors. The corners are a bit to dark. Maybe there is no transparency set in them.
It has been pretty well documented here that they don't look as good with light themes. I tested yours and I don't see much difference in that regard, but it's also pretty well documented that I may not have the best eye for detail.
I'm certainly not opposed to swapping them out, but as I mentioned, the current ones are a higher contrast than all other images, and they were edited by pixels because of their size. I can clearly see a difference in that aspect. Mainly, the background is darker and "S"/border are lighter/more saturated. Good for such a small size. Take a look at the current version. If you wanna make a similar version which is also improved in other aspects, please do.
Current:
Suggested:
narcolepticinsomniac
on 18 May 2017
thank you @narcolepticinsomniac for spotting the process out, that was made on the 16x16 px icon.
I tried some integrate some of these aspects, but actually it was simpler to just take the current icon and draw a half transparent corner pixel into it. so it will work better with light and dark browser themes. actually you can try this out if you have a dark userstyle for github installed (or like for me: by turning it off)...
you can just use the images here from github. it seams to me that github is leaving it original. (so they are not touched by scripts or any other from.)
beside this I also want to take the idea of increasing the contrast with the s and the background color. so I thought it would be a good idea to try this on the 128 px icon version... what do you think, should I continue with this on the other sizes as well? even if you have any suggestions don't hesitate to post them.
d3n1c1d3
on 19 May 2017
@d3n1c1d3 Thanks! 16px LGTM. If transparent corners are an improvement, then we damn well better have transparent corners.
As for the larger mock up, I like the idea of giving them some definition. I would suggest the shadow around the "S" have slightly less spread/blur, and maybe a very thin/faint inset shadow for the border.
narcolepticinsomniac
on 19 May 2017
I think you are right. it seams better to me with less shadow on the s. here are two versions. the last is with an middle amount of shadowiness around the s. both version have the same inner border shadow.
128x128_2017-05-19_23-38
128x128_2017-05-20_00-16
d3n1c1d3
on 20 May 2017
IMO keep it flat (no drop shadows). Just looks outdated with the shadows.
incace
on 20 May 2017
I really like the more subtle one. I don't know when we got to the point that anything with a little definition or texture is "outdated". I've only been "redesigning the web" for a few years, but in that relatively short time, Google sold everyone on "material design", which is fine. It has its place. If done well, material icons are nice because they take up less space, and don't require translations. The overall explanation of "material design" has always seemed like a competition for who can cram the most ambiguous, tech-sounding buzzwords into the same article. Doesn't matter. You know it when you see it.
Wikipedia:
Material Design (codenamed Quantum Paper) is a design language developed in 2014 by Google. Expanding upon the "card" motifs that debuted in Google Now, Material Design makes more liberal use of grid-based layouts, responsive animations and transitions, padding, _and_ depth effects such as lighting and shadows.
Somewhere along the way, "material" morphed into "flat", and "depth effects such as lighting and shadows" turned into "flat on top of flat". If I had decent graphic design skills, the larger icons would've had a little definition to begin with. I feel like this is the same reason "flat" is so popular. For developers, CSS is usually the least of their concerns, so they don't want to get caught up in details. It's more of an afterthought, and not something they want to waste a lot of time and effort on, particularly if they're responsible for the rest of the coding. Somehow in the process, they have successfully convinced the masses that bland design requiring the least amount of effort, is sleek and modern.
I realize that my opinion on design is not on par with the current trend. In a few years, somehow I have become old-fashioned, so I'm not gonna advise @d3n1c1d3 to waste his time on this unless @tophf and @schomery agree. I imagine their take on it will either be "This isn't that important, I don't care" or "I prefer flat".
To be clear, this isn't that important. I just felt like ranting about the "flat" fad. I've become pretty fond of the icons, but they're not ideal for light backgrounds, so if anyone has any new concepts, I still encourage them to come up with something different. If we decide to go in a different direction, I would really hope the current icons could still be an option.
As for giving the current larger icons a little definition, this is the comparison:
Current
Suggested
TL;DR: Rant about flat design. This is not that important. There are two pictures. Do you care? Do you always prefer flat?
narcolepticinsomniac
on 20 May 2017
@incace thanks for your opinion on this topic. in german their is a saying like: you can argue about taste. -
or - if you want some opinions about anything, you can ask 5 people and you will get 6 different answers. :)
@narcolepticinsomniac
the input from incace lead me to the following versions.
for better comparison I just added the latest version also in here. the # in the brackets describes the background color.
I prefer the following versions
flat shadow (#154643)
and
flat darker (without shadow) (#00322b)
light (current) (#285959)
dark shine (#285959)
flat shadow (#285959)
flat shadow (#154643)
flat shadow (#00322b)
flat darker (without shadow) (#00322b)
d3n1c1d3
on 23 May 2017
Good stuff. Always nice to have choices. I think I like flat shadow (#154643) the best, but I'd still prefer not to unilaterally make any decision here. It's tough to gauge why @schomery doesn't respond in most cases. I like to think he's busy shooting those "most interesting man in the world" commercials. @tophf tends to ignore things he doesn't care about, which is fine, but not particularly enlightening.
Another little detail that's become noticeable is that the "S" could probably be moved down a few pixels to be more vertically centered. Regardless, I'm still not gonna ask anyone to do a bunch of editing unless I'm sure it's not gonna be vetoed afterwards.
The fact that I find occasionally bitching about "flat" design to be somewhat therapeutic aside, I've tried to emphasize that this isn't exactly the biggest deal. If everyone's fine with the status quo, that's fine by me.
Anyone else involved in this thread (or not) have an opinion on the new options? @TayliaM @incace
narcolepticinsomniac
on 23 May 2017
My vote is going to be cast to flat shadow (154643). A big thank you to @d3n1c1d3 for contributing your obvious talents to the Stylus project. I've been highly impressed by all the gifted people who are contributing to this extension.
While I do like the current icon look and style, I would also like to add a +1 to an idea @narcolepticinsomniac has mentioned, which is a possible feature addition to Stylus that would allow the users a choice of icons. LastPass thankfully has this option, as well as some other extensions that I am aware of. It would be a really nice option for those users who don't care for the turquoise/dark look.
TayliaM
on 23 May 2017
@narcolepticinsomniac @TayliaM what do you have in mind by different icon-sets? I actually can image how this can work, but currently I just think about different colored icons. actually that might be a good idea to get some rainbow colors like the colors from the tile images into the logo. (violett, blue, cyan, green, yellow, orange, red). but then there have to be another method to symbolize the de-active selection for all userstyles (now it is _red_). and can you explain me for what the _gray_ icon-version is for?
a method for (all) inactive user-styles could be to lower the opacity. or if the grayish icon is not used that would be a good solution.
it might be helpfull to have some implementations proofs of other extension or apps about user-selectable-icons. so here is a screenshot-collage of next cloud under windows 10 for the tray-icon. they allow the user to choose between a colored and a monochrome icon-set. I would be really pleased to see some more examples of the implementation of user-selectable-icons...
d3n1c1d3
on 24 May 2017
what the gray icon-version is for
It's shown when no styles are applied to the tab's main page (iframes are ignored for this). Depending on their style database users may see it a lot or quite rarely. For example, those who have global styles will see it only on unreachable pages like chrome://foo, about:bar, etc. Conversely, those who have only per-site styles are likely to see it more often.
Current difference between the gray icon and the normal icon looks weird/awkward in the default browser theme, which is almost white. In Stylish the gray icon was just a semitransparent rendition of the main icon so it looked fine in bright/dark UI themes.
tophf
on 24 May 2017
Styles active for current site = cyan
Globally disabled (Turn off all styles) = red
No styles applicable for current site = gray
As tophf mentioned, it'd be better if a similar "grayscale" effect was achieved with opacity. The gray icon is also the default icon, meaning it is what's shown when the "state" has yet to be determined. Basically, the three states account for all possibilities, but the "default" icon will be shown briefly sometimes on page loads, or browser restarts, before a "state" is determined.
As for possible icon sets, the first priority would be a version that works well for light UIs. I'd think that an inverted/hue-rotated version of the current icon set would be a good start, and work better for light backgrounds. Dark borders would be key, I'd assume.
I've played around with switching icons a little. AFAICT, chrome.browserAction.setIcon would be pretty straightforward in most extensions, but the default icon it changes is barely shown in ours. It'd probably still need to be changed, but all "state" icons would need to also change accordingly.
Given that we'd need to change "sets" of three, because of the different icon states, somebody smarter than me would need to confirm that this is even doable. We have a decent amount of control over which icons are shown, so I'd like to think it's possible, but if so, it'd be more complicated than just changing a default icon as we see in other extensions like Lastpass.
User options for icons would be ideal because they can be tailored to look better for different themes. Light borders on an dark themes is a good look IMO, and cyan almost glows, which is nice for "active". If it turns out that multiple sets isn't a viable option, then to solve the issue of light themes, we'd need a compromise that looks decent in either. Everybody references the icons Jason used, which is accurate as far as utility, since they were pretty well defined in most themes, but I always thought the active icon was kinda fugly. Regardless, not bothering to change the branding when you fork a project tends to piss people off, so not changing them would't have been a good idea.
narcolepticinsomniac
on 24 May 2017
It's possible to use predefined icon sets 脿 la LastPass, the internal implementation in updateIcon() would be pretty straightforward. As for user-uploaded icons, that's also possible, but less trivial I guess.
tophf
on 24 May 2017
It's possible to use predefined icon sets a-la LastPass, the internal implementation in updateIcon() would be pretty straightforward.
Sounds good. If you say it's doable, I'm sure it is.
As for user-uploaded icons, that's also possible, but less trivial I guess.
While that sounds awesome in theory, and we all love customizability, I would imagine it'd be a lot less trivial, like you said. Any control over our own branding also pretty much goes out the window at that point, if that's a concern.
Our first priority should be mimicking something similar to the grayscale icon look with opacity, and coming up with the first alternative set of icons that look good in light themes. If it all works out well, we could certainly at least have optional colors for active icons.
@d3n1c1d3 You've really been coming through with all the graphic design improvements, so if you get the gist of what needs to be done, I'd like to see what you come up with, if you're up for it.
narcolepticinsomniac
on 24 May 2017
actually I don't see a real problem with the current icons in any browser theme. even the grayish icon seems to me better then the green one with less opacity.
I provide you a local test page for further checks on the logo. so you don't have to switch the browser themes and you don't have to visit other pages to check the different states for the logo. I think I'll include in that page also previews of the other logo sizes in there used area.
you can change the color of the badges
switch between gray and green icon on the icon for no styles (applied)
change the browser titles
I produced it in the current (stable) version of google chrome and therefore I tested It only in there.
http://www.mediafire.com/file/3fdgdjh8x5sm5aj/stylus_google_chrome_theme_test.zip
grayish icon (without any styles)
green icon (without any styles)
d3n1c1d3
on 26 May 2017
actually I don't see a real problem with the current icons in any browser theme. even the grayish icon seems to me better then the green one with less opacity.
The problem is that the current gray icon has a dark background so it looks natural only in dark browser theme whereas in light theme the gray icon is too dark and too different compared to the normal one.
tophf
on 26 May 2017
actually I don't see a real problem with the current icons in any browser theme. even the grayish icon seems to me better then the green one with less opacity.
I don't agree either. I think they look real nice in dark themes, but I don't think any of them look great in light themes.
I've been playing around with ours and the ones Jason used, and the "transparency" comparison isn't really applicable. First of all, we're not talking about the whole icon being transparent, only the background. The old icons differentiated "states" with the background only, so transparency worked. They always had thin black borders around the icon and the "S" itself, and the "S" was always white. Btw, looking at them now, they're not ideal for dark themes, because all the background/borders for inactive icons are pretty much indistinguishable, so you basically just see the white "S". I don't know how he managed such a decent, thin black outline for the "S" either. When you zoom in, it's pretty pixelated, and the outline doesn't look at all consistent.
Our "states" are differentiated mostly by border/"S" colors, which are bright, so not only will background transparency not differentiate, but it'd be light on light for the border/"S", which would't be any good. That's why I think the best solution would be an alternate set of icons, where the colors values are basically inverted, so then for light themes, "states" are differentiated by background colors, therefore we can also use transparency for inactive icons.
I'm not great with GIMP, but I made a set to at least show what I had in mind. Some of the shading around the "S" contours was screwed up in the process, but hopefully you guys get the gist. If it's a good concept, maybe someone can make similar versions, but better.
Make sure to check them in a light theme:
narcolepticinsomniac
on 26 May 2017
I think these are a big improvement. I did a quick comparison pic on a light theme for easy reference.
TayliaM
on 26 May 2017
The gray icon could be more transparent (including the letter). And "S" is too fat.
tophf
on 27 May 2017
The gray icon could be more transparent
Background is at 10%. Thought you wanted a less drastic transition, but it's a simple fix.
(including the letter)
Not how the old Stylish icons were. I didn't check them out with opacity on the foreground. Maybe a little would be fine.
And "S" is too fat.
Some of the shading around the "S" contours was screwed up in the process, but hopefully you guys get the gist. If it's a good concept, maybe someone can make similar versions, but better.
It wasn't as simple as a value invert. Colors needed further tweaking. If you're not good at that type of thing, details get lost.
They're rough around the edges (pun intended), but mostly I wanted to provide examples of the what I had in mind for icons that'd work better in light themes. They do look a hell of a lot better for light themes, no?
It takes me an absurd amount of time to even come close to what I'm trying to achieve, but these are pretty close. I'd definitely need confirmation that you like the concept before wasting any more time fixing up the details. Ideally, @d3n1c1d3 could do the same thing better, but as long as you're on board, I'll take another run at them otherwise.
We could also do something similar and a little less drastic for the other inactive icon.
narcolepticinsomniac
on 27 May 2017
thank you all for your thoughts. it is really helpful and i appreciate it a lot.
I agree with you that the Icon is not suitable for all themes and the user can decide which one fits better. I think most people will not even take a look into the settings and use just the default settings. (btw. a export / import for the settings would be nice [to have])
all following changes are based on flat shadow (#154643)
I took similar colors (for the different states) but hopefully different enough for color blind people. first intention to do so was to reduce the bright effect for the green / red colored icons.
at first I tried to find some suitable colors in the 128 x 128 icon version. after resizing these I picked some good median colors and transferred them into the 16 x 16 icon version. so there is no shadow effect in the 16 x 16 pixel version. that version is not pixel modified as the current icon. but I modified the vectors in there so they will fit as good as possible and to have the forms also. so in there should be sharp edges and also fine gradients.
for the adaption of the light version I nearly just swapped the colors. in the 128 x 128 icon version the flat shadow needed some extra adjustment. the bright background version do not need a shadow. the border just gets thicker on the top and the left side. and therefore the border is getting to much attention. I approved the vectors on the 128 x 128 version a bit. so the edged should be a bit sharper then in the previous versions.
the no-styles icon is 60% opaque.
so, long story short: here is my version
extended flat shadow (128 x 128)
optimized version
current version (1.0.9_0)
optimized version [magnified]
current version (1.0.9_0) [magnified]
Source Files : http://www.mediafire.com/file/d9dv99kqv0varrd/2017-05-31_icons_-_shadow_flat_based_on_154643_-_incl_theme_test.zip
colors from 128 x 128 version
4 dark
green #154643 (dark) #30eded (light) #00322b (shadow 75% opacity)
red #461515 (dark) #da2b2b (light) #2e0000 (shadow 75% opacity)
gray #454545 (dark) #c2c2c2 (light) with 60% opacity #2f2f2f (shadow 75% opacity)
4 light (swapped base colors) - dark shadow
green #001d19 (shadow 100% opacity)
red #130000 (shadow 100% opacity)
gray #000000 (shadow 100% opacity)
4 light - light shadow
same colors as dark shadow just with 30% opacity
colors from 16 x 16 version
gray #181818 (dark) #969696 (light)
red #190a0a (dark) #cc2929 (light)
green #051c19 (dark) #2bd0cf (light)
for light background I just used swapped colors.
d3n1c1d3
on 31 May 2017
As always, you've put a lot of effort into this, which is awesome. I'm not sure I'm fully understanding the functionality of the interactive demo you whipped up. It seems mostly to change the badge color, which is neat, but maybe I'm missing something more important. Either way, I threw the proper suggested icons in light and dark themes, which is probably the best test.
first intention to do so was to reduce the bright effect for the green / red colored icons.
Hmm. Why? This appears to be the basis of all the icon edits here, and I don't get why it was the assumed starting point. One of the best things about the current icons is their vibrance/contrast in dark themes. I like them less when they're duller.
When I did a color value invert of the bright icons, I still thought the result was too low in contrast, so I lightened backgrounds further. That's why shading on the "S" was off. For light themes, borders/"S" should be very dark (perhaps even black) and backgrounds light enough for good contrast. Using duller versions of the current icons a starting point results in even lower contrast value inverts. The result is too little contrast in icons all the way around IMO.
As I mentioned before, I like the transparency for inactive icons, but I think it should mostly (if not solely) be applied to the background. To me, even amounts of opacity on background/foreground starts to look less like intentional transparency, and more like unintentional blurriness. If borders/"S" have any transparency applied to them, it should be minimal, and far less than background opacity.
To summarize, the current high contrast cyan/red icons are ideal for dark themes IMO. Current gray/inactive icons should use opacity, but mostly on the background. They also don't have to be 100% grayscale. They could be like an 80% grayscale of the cyan.
The alternate set for light themes should be a value invert with even higher contrast. As I said, very dark borders/"S" (possibly even black), with lightened background shades of cyan/red/gray (or grayish cyan).
This is just my two-cents, and what I was more or less hoping for. Something real similar to the examples I made, but not so amateurishly done.
narcolepticinsomniac
on 31 May 2017
many thanks for your input @narcolepticinsomniac . (also to all others, even if I don't mention you in all posts your respond is really helpful and much appreciated)
I understand why the bright effect is so wonderful for you, like it is for me more a harm to my eyes (especially staring on these bright colored pixels for hours in magnified mode).
anyway I edited and combined the icon version into one picture. and came up with a new icon version called "all in one". I tried to pick up colors so the icons will work for light and dark browser themes. I also added a dark border around the icon. so it will fit better with the default google chrome grayish theme. another reason why I picked up slightly different colors (also in the versions before). I want the icons work also for color blind people. but with the latest icon-version I think I got it. [see theme test"all in one"]
I have a problem with the less opacity for the "no styles" mode icon. I actually liked the idea. But this would lead to the problem that the icon is working just in one theme (in these cases the light theme). [see theme test "narco original" and "all in one - fail"]
so while optimizing your icon I picked a fix background color. so it will work in both themes. even if it was not supposed to work in opposite themes. but this let me think about to create a suitable "all in one" version. where the frame is darker then the S. [see theme test "narco optimized" and "all in one"]
I really like the idea of having multiple icons to choose from and If custom icons will work that would also be great.
the interactive demo is actually for those people like me. it is just a short, quick and save way to test the icons in different themes. and after taking the screenshot from it, others could focus on other things instead of take the time for do test themself. [see theme tests screenshots below]
quick comparsion image - (latest version of all in one, because the fail version of it had no much effect in this step)
magnified quick comparsion image
slightly darker (theme test)
narco original (theme test)
narco optimized (theme test)
current optimized (theme test)
all in one (theme test) fail - due to 50% opacity of the background
all in one (theme test)
source files (incl theme test files) ~ 5.6 MB
http://www.mediafire.com/file/y44ex7g57udt68h/2017-06-01_icons_-_all_in_one.zip
update
color blind users. I first wanted to have three different brightness states for the icons.
- Active - highest
- All styles disabled - middle
- no styles - lowest
but while testing this I ended up that only the frame of "all in one" have this. I also tested a special dot to communicate that the icon is a different one. but i don't saw the benefit of it. so the brightness is the best solution. and therefore I think you will understand why I choose some different colors or brightness from the original one.
d3n1c1d3
on 1 Jun 2017
You fixed the shading around the "S" which was the biggest issue. I could've screwed with that forever and not got it right, so I very much appreciate that.
I edited and combined the icon version into one picture. and came up with a new icon version called "all in one". I tried to pick up colors so the icons will work for light and dark browser themes. I also added a dark border around the icon. so it will fit better with the default google chrome grayish theme.
I know it's not really documented in this thread, but me and @TayliaM already went down that road. It's a good idea in theory, but with an extra border around our already contoured border, plus another 1px for inner separation, that's 8px out of 16px horizontally. The icon becomes oddly small, and it doesn't look good.
I have a problem with the less opacity for the "no styles" mode icon. I actually liked the idea. But this would lead to the problem that the icon is working just in one theme.
I disagree. Transparency does make for a less drastic transition, which is important. Using your optimized versions of the light theme icons, I added opacity to inactive icons, and the whole set works very decently in light or dark themes IMO.
I also made a semitransparent version of the inactive icon for the other set. Both use very, very pale versions of the active icons, with 50% opacity. As I mentioned before, ideally I would have probably rather had more opacity on the background, and a little less on the borders/"S", but I was running into the same issue with the shading being off. "Fuzzy select" is only so accurate. I'm sure there's better ways to use it, or something else, but my skill-set is limited. Regardless, they look pretty damn good as-is.
I used all of your optimized versions, and made some slight adjustments. You're right that the light theme icons were a bit pale, but the alternate set of darker ones don't have enough contrast, especially the red ones. I made the optimized lighter icons at least a few shades darker/more saturated. I think they look better, and still have enough contrast.
I also tweaked your optimized version of the dark theme icons. I gave them a bit more contrast, so they pop even more. I really dig the fact that they stand out on dark backgrounds, especially the active icon. I imagine these will be the ones demoted to optional, because the new version does look decent in light or dark themes, although for dark themes, I prefer the bright borders/"S" 100%. I'll be kinda bummed if tab icons also change, but I doubt that's adjustable.
Anyway, I'll attach a zip of what I came up with based off @d3n1c1d3 's hard work. I think both sets are damn good now, so hopefully there's a general consensus. Test in different themes.
@tophf @schomery @TayliaM @incace
Icon-Sets.zip
narcolepticinsomniac
on 2 Jun 2017
Posting a pic of the LastPass icons mostly to clarify what I'm envisioning for implementing icon sets.
Re: The dark icon set.
I analyzed d3n1c1d3 demo pics carefully. Narcolepticinsomniac 's zip icons were pretty much in line with what I thought looked the best.
Re: the light icon set.
For the active turquoise icon I liked narco's zip file one. For the red one a background red similar to the 3rd option in the LastPass pic might look less pinkish. For the greyed out one I did a comparison pic with the old Stylish icon. My preference leans towards the 2nd LastPass icons's option look, which would be closest to d3n1c1d3's slightly darker version.
Whatever the final decision is, the new ones will be nicer and cleaner looking than the current ones. So kudos to d3n1c1d3 and narco for your dedicated efforts!
If the icons sets are incorporated into Stylus, I also like the idea d3n1c1d3 had further up this thread to have a optional set that pairs nicely with the promotional tile prism colors. After all, variety is the spice of life!
TayliaM
on 2 Jun 2017
so - I append your icons and suggestions here in some theme tests. If I did not really follow your instructions of the suggested changes, please describe it once more. especially on TayliaM's suggestions for the 3rd line I did not know if you wanted to have the gradient as well...
in this version I just added the icons like they are from @narcolepticinsomniac
and tried to figure out the suggestions from @TayliaM
in the suggested version of TayliaM I tried to put in @narcolepticinsomniac suggestions on the different opacity states. more opacity (50%) on the background and less (75%)
I also added another version for the icon. but maybe I am just a bit to far on this step. Maybe we should leave it in that state to figure out what the most akkurate color composition for the basic set. but I think it already got deeper for additional icon themes... and btw by doing these icons I also got two other ideads how that swirl logo can be...
actually I don't see it difficult to have a slight dark border around the whole icon. even if it is a bit smaller then before it looks even good to me. that is why I left two other Icons in the extension icon bar for the theme tests. even it it helps that the same icon is working for both themes. did I mention that we have a saying in german like "about design we can discussion"? in some cases it is said in the opposite "we can not". but the meaning is almost the same, and that is why we are already figuring out different icon sets.
I cant say it enough that I really like the idea of having multiple icon sets to choose from.
@TayliaM don't be afraid I will try out prism colored icons as well. I think may others will have there fun with that as well.
like I said before my intention to create the "all in one" icons was to have an default icon set that work for all kind of situations. for light and dark themes. and even If you are color blind. there for I added the black and white version in the quick comparison picture...
quick extended comparison picture
magnified quick extended comparison picture
theme test - narco 2017-06-02 - both (like narcolepticinsomniac said with 50% opacity) - IMO they work fine. even in the other tests bellow...
theme test - narco 2017-06-02 - only dark - same setting just no light theme icon - IMO works fine
theme test - narco 2017-06-02 - only light - same setting just no dark theme icon - IMO works fine
theme test - TayliaM 2017-06-02 - only dark - same settings as "both" - IMO the gray icon is working well for the dark theme but not good for the light theme.
theme test - TayliaM 2017-06-02 - only light - same settings as "both" - IMO the gray icon is working well for the light theme but not good for the dark theme.
theme test - TayliaM 2017-06-02 - both (different icons for light and dark) gray icon has 75% opacity on frame n S and 50% opacity on the background - IMO these sets work fine. I like the orange tune for the light red icon.
theme test - swirl (based on the icon set "all in one") - same icon for light and dark)
update - source files : http://www.mediafire.com/file/6n3bnynzoag7cor/2017-06-02_icons_-_all_in_one.zip ~ 12 MB
d3n1c1d3
on 2 Jun 2017
@d3n1c1d3 Lots of cool stuff, but these "all in ones" are getting massive. There's so many similar variations that it's making it difficult to know exactly what I'm looking for. The swirl "S" is a good concept, but again, I really dislike making icons smaller by sticking another dark border around them. Using 2px borders is bad enough, but it gives them a unique look, so it's a trade-off. 3px borders on 16px icons is a dumb look. Color blind sets of icons are also a nice idea, but for now, let's just focus on the one alternative set we've been working on.
The light theme icons work very decently in every light/dark theme I tested. They are basically inverted/higher contrast versions of the originals. For red, you can't go many shades lighter before it's pinkish. I hate pink, and they didn't bother me, but making them a little more peach colored also fits fine, although I brightened them slightly. The only other improvement I was looking for was different opacity on background/foreground for light theme inactive icons. I see you did them for the grayscale, but I'd prefer it on the very pale inactive icons you made.
I played around with different levels, and for the pale ones I like 50% on the background an 80% on borders/"S". I changed it to that, but like I said, the shading is off. Hopefully you can do it correctly.
Other than that, I'd like to think we're good. I'm getting sick of screwing around with icons, so I have to imagine you are too. I'd like to get this set done, and take a break from icons for a bit before we debate any other options.
narcolepticinsomniac
on 3 Jun 2017
@d3n1c1d3 In case I wasn't clear, I was asking if you could make a better 50%/80% - background/foreground for your last non-grayscaled inactive icon. It's pretty clearly labeled in the last zip.
If you don't feel like screwing around with them anymore, that's fine. I'd just like to know, one way or the other.
narcolepticinsomniac
on 9 Jun 2017
@narcolepticinsomniac I apologize. It was really a busy week. I will and want dig into this. Everything is still fine with this topic. I just hope you can understand. actually I was working on some changes on the icons and before I could save it photoshop just crashed. It is so awful if it this happens.
the only thing I can offer you for now is a separated version of the icons. in hope these images can help you or somebody else in some way.
but / and this don't mean that I am not interested anymore into the progress of the icons improvements anymore. I still want to change them into the better.
source files:
http://www.mediafire.com/file/9tekl2e3z3tm33d/2017-06-09_separated.zip
short preview:
d3n1c1d3
on 9 Jun 2017
No apology necessary. Just wanted to make sure you hadn't lost interest. Really, the only thing I'm looking for in the short-term is different levels of opacity for the inactive icon in the marked folder of the last zip I posted. The separated versions are interesting. Maybe even I could make it work with those. Haven't seen them zoomed yet though. Either way, no rush. If you get to it first, I'm sure they'd be better than what I come up with. Nothing urgent though.
narcolepticinsomniac
on 10 Jun 2017
Those separated icon layers were a lot easier to work with. Both inactive icons are now very pale, desaturated shades of active icons with 50% opacity on backgrounds and 80% opacity on borders/"S". To avoid the pinkness of the light red, it has a little orange hue mixed in.
Since the light theme icons differentiate by backgrounds, they work very decently in light or dark themes, so they'd make a better default. The dark theme icons still don't work very well in light themes, of course, but I really prefer them in dark themes.
@tophf PTAL. I'm really happy with these, so hopefully you agree. I think they'd be worthy of swapping the default, and demoting the current icons to an option. Let me know what you think.
narcolepticinsomniac
on 11 Jun 2017
@tophf I didn't wanna bug you about this, but I'm not sure if you missed a notification, forgot, or just haven't gotten around to it. Always possible you're ignoring it because you don't care, but I tried to make sure you were on board before wasting any more time screwing around with them. Hopefully you didn't change your mind, but if so, that'd also be good to know.
narcolepticinsomniac
on 28 Jun 2017
Yeah, I've missed my cue, sorry.
Yeah I like both variants. I'll start adding an option to switch the icon sets.
The "light theme" icons look better on default light browser theme, but supposedly Stylus users prefer dark browser themes so we'll keep the "dark theme" icon set as the default one, right?
tophf
on 28 Jun 2017
The "light theme" icons look better on default light browser theme, but supposedly Stylus users prefer dark browser themes so we'll keep the "dark theme" icon set as the default one, right?
It wouldn't take much to convince me. I hate the idea of having to switch them on every fresh install, and I like having them in the tabs as well. The fact that people actually use the default, or other light themes, is a foreign concept to me.
Theoretically, it might make sense to use the light theme as the default since they work decently in either, but I'm all for leaving the dark set as the default. I think the justification that most of our users use dark themes is likely accurate. Regardless, it bugged me that there was no good option for the light theme users, so now they'll have one. The inactive icon for the dark set is a huge improvement as well, IMO.
The tricky bit is implementing the switch in the first place. If we change our minds about the defaults down the road, it's as simple as renaming the icon files.
narcolepticinsomniac
on 28 Jun 2017
@narcolepticinsomniac, I've implemented the iconset option but Stylus also sets 32px, 19px, 38px icons which I don't see in the zip.
tophf
on 28 Jun 2017
Well... shit. For the icon option, I was totally focused on the 16px, but it would be better if they matched on the extension page and elsewhere, now that you mention it. Btw, is 19px/38px still a thing? I've used a bunch of forks and never seen it. I assumed they were used in older versions we don't support anyway.
A few problems with larger sizes though. The only reason I was able to make those was because d3n1c1d3 hooked up the separated layers for 16px. Also, larger icons have more details, so they'll be more difficult. On top of that, I just formatted my ssd and reinstalled the OS in my new laptop. Pictures wasn't something I backed up, so I couldn't even say the exact shades before opacity was added to inactive icons. Not positive I saved the stages anyway.
Not saying I won't attempt to come up with something decent, but we'll be better off if @d3n1c1d3 could help with larger versions of these. At the very least, separated layers of larger sizes would give me more of a prayer.
narcolepticinsomniac
on 28 Jun 2017
All retina displays use 32px instead of 16px.
Vivaldi uses 19/38 px. It's a very cool browser worth maintaining the additional size (not that it's soooo hard).
tophf
on 28 Jun 2017
Yeah, I knew 32px was important, and assume they scale those up slightly for the extensions page. It's 48px there, but there is no 48px inactive, so they're scaling something. If Vivaldi uses the odd sizes, we should support them as well.
Thinking we'd only need alternate 16px was just me being oblivious.
Soooo hard is all relative. Those took me forever. Like I said, @d3n1c1d3 would probably do a much better job with larger sizes of those, but if I at least had separated layers for those sizes, I could probably pull it off decently. It's all the shading that gets distorted in the process that I'm hopeless with.
narcolepticinsomniac
on 28 Jun 2017
@narcolepticinsomniac thank you for posting the png files.
can you mention what are the things you have done to produce these icons? for example I see many shades in the gray (16w) files. but to reproduce these it also will take a while. with what programm do you work? maybe it will help me to get the source files. I mainly work with photoshop. maybe that is why I do not like gimp so much. but hopefully these files aren't gone with re-setting your computer.
I also think I or somebody else will see it if the icons are just set up step by step and not in a whole. so we have to figure out a way to re-produce the icons the exact way the other once are done. for example now I know if you mean the frame is got 75% opacity. you exactly mean the outer frame and nothing else.
for the light / dark theme discussion: that is why I made the all in one icons. I mean we can just exchange them with these a bit smaller S icon set. but we will get covered up about this discussion the icon is not working for me on a the light default chrome (or what ever) theme. and later we can take our time to focus on producing icons especially for light or dark themes.
and I still have no problem with these small amount of pixels get lost for this all in one icon set.
but anyway I will come back soon and give you all separated layer files from all sizes I have created. I think this includes also the 19 x 19 pixel version?
to be clear: these are the wanted formats / dimensions...
16 x 16
19 x 19
32 x 32
38 x 38
48 x 48
96 x 96
128 x 128
all three versions :
active (green) - styles are applies to the current tab / window
inactive (gray [mostly]) - no styles are applied to the current tab / window
passive (red) - all styles are disabled
if some of theses versions are not necessary please correct me.
please give the files in the future a more objective name for me it was for example a fixed name or the producing date of the icons. In this case it will be easier to know on which state these icons are created. for me this does not mean that the icon filenames have to be in exact wording for the app. it will just allow all in the team easier to recognize on witch file site it is based upon.
for special you don't have to use this complicated filename convention but then please leave the original files in a sub folder. now I just have to guess witch one is the right one. for example I also did some corrections on the outer form (vector based) on the icons. but I do not know if it was only only on the 16 x 16 based version.
so if this makes thinks easier we can also talk about this on the phone or via skype. but just have in mind that I live in the German / European time zone.
d3n1c1d3
on 28 Jun 2017
16 x 16
19 x 19
32 x 32
38 x 38
Only these are needed for icon sets because we change only the toolbar icons.
tophf
on 28 Jun 2017
@topfh thanks for the quick response.
for the tile images I used a 96 or 128 image of the icon. that is why I firstly focused onto optimizing the large version. (in my opinion) everything is related to each other. so after we have edited the small icons. we possibly have to exchange the icon in the tile versions as well...
so It might be my fault. to be more clear about this:
I wanted to have the icon dimensions for mostly all cases.
all the dimensions I have written down (in my previous post) are all the dimension I was working on from the start. but maybe the one or the other can be pushed over the cliffs. and anyway this will not take so much time to to create separated image sets for each icon dimension. (frame, S, background)
so anyway first I will create this separated icon sets for all other sets beside 16 x 16 pixels.
d3n1c1d3
on 28 Jun 2017
so here are the missing separated icons from 19 x 19 till 128 x 128 pixels
http://www.mediafire.com/file/j32172atj3typ9l/2017-06-28_separated_icons.zip
for example here is just the 128 pixel version
@narcolepticinsomniac do you need the black version of these as well?
d3n1c1d3
on 28 Jun 2017
do you need the black version of these as well?
Well, white are used for colorization/manipulation. Black are used as-is for the light icons. Are the black separated layers any better quality than inverting the white? IDK.
@narcolepticinsomniac thank you for posting the png files.
can you mention what are the things you have done to produce these icons? for example I see many shades in the gray (16w) files. but to reproduce these it also will take a while. with what program do you work? maybe it will help me to get the source files.
I use GIMP, only because it's free and I'm vaguely familiar with a minimal amount of its functionality. I see now why you go overboard with the source files. If I was even smart enough to save the different stages in the first place, they'd be gone in the format. I didn't think I had any important pictures.
The only ones that will be tricky to recreate are the ones that were a PITA to create the first time, which is the inactive icons. They are extremely pale/bright shades of the active icons with 50% opacity on backgrounds and 80% on the border/"S". Btw, light icons all use straight up black border/"S" (with opacity on inactive). I don't know any way to pinpoint the exact shade before opacity was added. Maybe there's a way to reverse opacity. Maybe it'll need to be an approximation. The most time consuming part was eyeballing inactive icons and then checking how they look in the browser.
narcolepticinsomniac
on 29 Jun 2017
A lot more wasted time trying to come up with different sizes without much to show for it. I've got the pre-opacity shades pretty well worked out. I wanted to start with a 19px set of the defaults and check them out in Vivaldi, so that's what I did. More accurately, that's what I attempted to do. Seems like Vivaldi doesn't prefer 19px, and defaults to scaled 38px if specified and available. Even just to test, renaming 19 to 38 and vice-versa doesn't work, it seems to detect the actual sizes. I'm only guessing it prefers 38px really. 38px are the largest sets we have, so it may just prefer the largest. It's not like I have a super high res that would trigger a higher res icon, it just seems that it defaults to larger. @tophf Given that, can we lose 19px sets altogether?
@d3n1c1d3 Another issue, 38px separated layers are missing. They appear to be the most important for Vivaldi.
On a side-note, Vivaldi is a POS browser. It has the worst hardware acceleration of any browser on any OS I've ever seen, and that includes Linux where the majority of it doesn't work at all. I thought this when I tested a beta version way back on a weaker laptop, but testing their "stable" on a newer i7, the performance is horrendous. Like 4x+ the resources Chromium uses for the same videos, with an immediate 10+ degrees Celsius jump that would only get worse as you go. Hard to believe it's even based on Chromium with that performance. Not a huge fan of the UI changing colors per site either.
narcolepticinsomniac
on 1 Jul 2017
Vivaldi doesn't prefer 19px, and defaults to scaled 38px [...] Given that, can we lose 19px sets altogether?
Yes. Even if this is a bug in Vivaldi that gets fixed occasionally, the scaled 38 -> 19 px icon looks neat.
As for the issues you've encountered, I've used Vivaldi for a few months on a fast desktop and it seemed okay perf-wise. Its UI is written in javascript/CSS so it's fully customizable, especially via Vivaldi-hooks. The built-in History and Bookmarks are particularly cool. The auto-coloration can be disabled, which I did immediately, I also think it's lame.
tophf
on 1 Jul 2017
Glad we can lose the 19px.
"POS browser" may be a little extreme, but I was flabbergasted at the CPU it was using for streaming 1080p. I'm pretty fanatical about not over-stressing the CPU or creating excess heat unnecessarily, so I keep CoreTemp in the system tray. I didn't get the quad i7 specifically because they run hotter, and I don't need anything that powerful anyway.
Streaming hi-def in Chromium or FF, CPU averages ~10% and temp barely ever goes over 40 deg C. The same video in Vivaldi was bouncing between 30-50% and the temp was immediately over 50 deg C. I had the same experience when I tested the beta way back on a weaker laptop, but I was shocked that it's still that bad.
I checked chrome://gpu and it said everything was accelerated, like Chrome. Didn't check chrome://media-internals to see if that was actually so though. It's not like with a powerful computer you're gonna notice any performance issues, but it's likely taxing your hardware a ridiculous amount compared to other browsers for simple video decoding. Maybe it's just a coincidence that I've seen the same resource drain on two separate laptops, but I doubt it.
That alone is the deal-breaker. I didn't investigate much, but it looks like it has some cool bells and whistles.
narcolepticinsomniac
on 1 Jul 2017
@narcolepticinsomniac wich base colors do you use without reducing the opacity on the inactive icon? I tried to re produce it but I did not get it. I almost re produced it on a black background (total background) but with disabled total background my version was something complete different. so I just delete the file.
could you please share your (gimp) source files? so I can take a look. or save these parts in separated file versions with and without any opacity changes.
here are the separated files for 16 x 16 and 38 x 38 pixels
16 x 16 separated files - white
38 x 38 separated files - white
d3n1c1d3
on 5 Jul 2017
@d3n1c1d3 We figured out 19px aren't necessary anymore, and I already did the 32px.
https://github.com/openstyles/stylus/pull/105#issuecomment-312787460
https://github.com/openstyles/stylus/pull/105/commits/322d76038ee0b623d878d8822715ff00607457e4
Tophf and I both think they look good, but you're welcome to propose any optimizations. Like I said in both threads, 38px separated layers were missing from that zip, which is the only reason I haven't made them. If you could hook those up, I'd appreciate it.
could you please share your (gimp) source files?
I could tell you the right shades, but at this point it'll probably be easier for me to do because I've already done it. As with the others, you'd be more than welcome to suggest tweaks afterwards since you're much better with the finer details.
narcolepticinsomniac
on 5 Jul 2017
@d3n1c1d3 Thanks for the 38px. I wish you would've made a new comment so I would've gotten a notification. I didn't see that for a while. 16px were already done btw.
I mostly just matched the colors, doubled the borders, and shortened the "S" 1px so it was centered vertically. I didn't mess with any shading. There was a lot more, but none looked bad at 38px or scaled. If anyone wants to clean up these, or any of them really, go right ahead. I'm sure some shading could be better and colors could be more exact. I saved the pre-opacity layers in separate folders.
narcolepticinsomniac
on 5 Jul 2017
@narcolepticinsomniac thank you for seperated pre opecity layer files.
why did you double the border? does this has something todo with the automatically resized icon version in vivaldi (38px version is resized to 19px version https://github.com/openstyles/stylus/issues/7#issuecomment-312421498). or also just with the fact that the border has also a shade?
I will edit the vector of the S so there will be no shade on the top of the s. thanks for that hint.
d3n1c1d3
on 12 Jul 2017
optimized version of the 38 pixel icon sets. please check it and if it is fine I will create the other icon sets as well.
instead of absolute black I used dark variants of red and green (light theme icons)
d3n1c1d3
on 12 Jul 2017
Yeah, 38px and 32px have to be made to scale to 19px and 16px respectively. The goal is that once scaled, they're all as identical as possible. Doubling their borders scales correctly. While your optimized images might be better looking in general, they don't scale well. Since they're used as the main icon, they should be higher contrast like the 16px.
I was hoping you'd accomplish two things in optimization, mainly better shading, and more exact colorization. The shading will be good enough color-wise, but the main colors of border/"S"/background are off by a hair compared to 16px. When scaled, they're not quite as vibrant as the 16px. Very close, but not perfect.
GIMP scales a 16px in the titlebar, which is convenient for comparisons:
Our normal 16px
The last 38px I did, scaled to 16px. Very close, but the hexes are off a hair. Scaling 38px to 16px will not be quite as clean as scaling to 19px, but it gives you a general idea what could be improved. It's possible that we may need to start with slightly lighter borders/"S" than the 16px to wind up with the same vibrancy once scaled.
Your optimized 38px scaled. They're cleaner up close, but you've lost too much contrast to scale well. Not sure, but for 38's, that extra row of lighter shading inside the double border might be necessary to scale well. Also, the "S" positioning looks a little off to the left. When I scaled it, I left the width alone and just took 1px off the height.
narcolepticinsomniac
on 13 Jul 2017
For the light theme, it's all about how they scale as well. Using dark shades of the icon color instead of black looks great up close, but once scaled, the only effect it will have is slightly poorer contrast. Not worth it IMO.
narcolepticinsomniac
on 13 Jul 2017
The new icons look good
tophf
on 19 Jul 2017
Related issues
Gitoffthelawn
路
4Comments
txyyh
路
4Comments
TayliaM
路
6Comments
ExE-Boss
路
5Comments
farzadmf
路
3Comments
Most helpful comment
We all decided the icons needed to be changed. Pretty sure the only people here at that point were the few people in this thread. Nobody else was jumping at the opportunity, and it was yet another detail which was holding things up, so I did the best I could. You didn't bother chiming in at the time, and the other few all gave it a unanimous "good enough".
I like the concept and the color scheme, but the quality isn't great. If I had realized the Stylish Themes guys had a similar concept with a much higher quality image, I would've asked to use it as a template. I like the cyan/aqua as the active styles color because it stands out, and I like curly brackets worked into the border. I think red is a good choice for "globally disabled", but I'm open to any suggestions. As far as the "no active styles" icon, it should resemble a grayscaled version imo. If that's mimicked with transparency, great.
You are the second person to hate on my pixelated icons today. I'll reopen the issue, and tag it accordingly. Maybe now that there's a few more people here, someone with some actual graphic-design skills will step up. You're more than welcome to as well tophf.