Created attachment 154003 [details]
Rough pixel drawn icon ideas
I played around in GIMP & created a few pixel-drawn mock-ups of an Breeze-type icon that is a bit like the Oxygen one. I took the red from the Updates icon & created a moon too.
Yeah this could stand some improvement. It should stay monochrome though, since using red would both call attention to it ans denote destructiveness (this is what red means in our icons) which isn't accurate. I like the idea of incorporating a moon though... maybe a moon with a lightbulb? Created attachment 154149 [details]
Nighlight icons
I've cobbled together some more versions in the attached file. The two to the left of the lower pink link on the attached seem OK, the difference between them is the filament. The third one has the moon a bit closer to the bulb, probably too close. These 3 are 16x16px, which I read is what is needed (+22px, but I'll see how these look first).
Maybe the moon icon could be a crescent? (In reply to Nate Graham from comment #4) > Maybe the moon icon could be a crescent? I'm currently working on that, yes. :^) Created attachment 154150 [details]
with crescent moon, at lower right
Please see attached with crescent moon. I'm not sure if I prefer the bulb with or without the filament. The filament looks nice but may be a bit busier than other Breeze icons.
Created attachment 154151 [details]
with crescent moon rotated the other way + stars
with crescent moon rotated the other way + stars. Sorry for all the versions, I'm not a pro.
Created attachment 154296 [details]
22x22 bulb with on & off & moon & stars
To fit the moon in the bulb has to be moved off-centre. It would look a bit odd if the moon & stars were hidden while night colour mode wasn't enabled.
Created attachment 154299 [details]
2 more layers, Bulboff & The Shining Pt2.
Now has layer for when bulb is off: Bulboff.
And a Shining Pt2 layer for when the bulb is on, but without the upper left 'shine' effect, not sure if it is good or bad, so this is a plain 'On' fill.
Quite nice, though there's a lot going on for a 22x22 icon; maybe simplify it a bit? Also keep in mind that we need a 16x16 version too. Created attachment 154361 [details]
Simpler; smaller moon, no stars.
Simpler; same bulb, smaller non-angled moon, no stars.
Created attachment 154362 [details]
16px version of the above.
16px version of the above.
Nice. How about making the crescent moon use the same orientation as the crescent moon in the system-suspend icon? Created attachment 154364 [details]
16px. 45degrees moon
Created attachment 154365 [details]
22px. 45degrees moon
Good! Now, I wonder if it might make sense to emphasize the moon a bit more, like, put the moon in the bottom-left corner, with the bulb above it and right. That way the bulb would not have to be scaled down much at all, as it would be sitting in the open empty area made by the crescent moon. What do you think? Created attachment 154366 [details]
moon on left & 1px bigger, any bigger & it touches the bulb
Created attachment 154367 [details]
or this, different but bulb very small & blurry (although it is just shrunken previous bulb rather than drawn)
Created attachment 154368 [details]
or this, big moon, tiny bulb.
Created attachment 154369 [details]
Big translucent moon behind medium bulb
Ooh, I like "or this, different but bulb very small & blurry (although it is just shrunken previous bulb rather than drawn)" Created attachment 154374 [details]
here's one like that, but with slightly bigger moon (i think the inner bit looks better on this one).
I like it! Wanna try your hand at doing it in Inkscape? Our icons are all SVG, which is what enables the automatic color-changing functionality. Created attachment 154401 [details]
First ever attempt at SVG-ing after a quick search of how to turn PNG into SVG... weird result but looks ok-ish at ~75% and 100% size. Make of this what you may, probably not useable! :D
Created attachment 154404 [details]
SVG WIP.
Created attachment 154405 [details]
The monn is rotated a smidgen to prevent the bottom of it touching the bulb, is that ok? I isn't the 45deg like on the hibernate icon. I also snapped it to a grid this time.
Created attachment 154407 [details]
Clearer bottom bit of bulb.
That last change makes the bulb look a bit more like an exclamation mark though when at the 16 & 22px sizes, so maybe not. Created attachment 154437 [details]
Fully blackened lower part of bulb. Not sure how bulb on/off difference will look. Also moved bulb 1px down as it was too close to edge.
I really like the first and third attachments! This is good work. What do you think about making the moon an outline, rather than filled? We use the outline style elsewhere already. Created attachment 154461 [details]
Outline moon + bulb with clear bottom bit
Created attachment 154462 [details]
Outline moon + bulb with solid bottom bit
Note: both these are just black. Do they need to be the special white Breeze uses?
In Firefox the lower right of the bulb has a sharp bit, but it doesn't show up in Dolphin or inkscape. I presume that is just Firefox rendering it oddly. Created attachment 154476 [details]
fixed bulb sharp corner i think. bulb line also a bit thinner.
Created attachment 154477 [details]
fixed bulb sharp corner i think. bulb line also a bit thinner. black bottom buit of bulb.
Created attachment 154478 [details]
fixed bulb sharp corner i think. bulb line also a bit thinner. +fixed slight bulb position difference.
Created attachment 154479 [details]
fixed bulb sharp corner i think. bulb line also a bit thinner. +fixed slight bulb position difference. black bottom bit.
That looks perfect! Any chance you want to open a merge request to formally submit it? The icons live in https://invent.kde.org/frameworks/breeze-icons/-/tree/master/icons/status and are named `redshift-status-on` and `redshift-status-off` I mentioned earlier that my icons are just black at the moment, is that OK? Does the system colourize them somehow or do I need to make them a specific colour? Plus, neither of my icons are on/off yet, they're just outlines. The two different ones are just design differences; one with white bit at the bottom, one without. I think I prefer the one* with the white gap at the bottom - it looks nice when bigger, and doesn't look bad when small. *the last scored out one, i did that by accident. If you prefer the simpler bulb with the lower black bit that's fine too, i can go with it instead. The system colorizes them through the use of a CSS stylesheet embedded within the icon (SVG is just text). It's quite cool, but rather fiddly. See https://community.kde.org/Guidelines_and_HOWTOs/Icon_Workflow_Tips. It's not the best documentation out there, but it has all the information in it. We will need two icons, one for when Night Color is on, and one when it's off. Maybe the bulb could be filled when off and empty when on? Or it could have lines coming out of it when on? Or something else. Created attachment 154604 [details]
shine off
Created attachment 154605 [details]
shine on
Created attachment 154606 [details]
simple off
Created attachment 154607 [details]
simple on
Couple of designs both on & off attached above. The one with the shine around the bulb has a smaller bulb, to fit the shine around it. The other is just the same as before but a filled bulb & the lower screw bit inverted to avoid having an all black bulb, although the gap looks oddly big. I like the ones with the rays coming out of the bulb! I wonder if we could combine them, so in the off state, the bulb is filled. But not filled with pure black, but rather a gray. You could do this by filling with black and applying 50% opacity (or whatever). Created attachment 154608 [details]
Nicer bulb shape, revised moon size & shine beam things. Not tackled bulb fill yet.
My thinking was that the beams would indicate when it was on, as I wasn't that keen on filling the bulb as when using a dark theme, the filled state will be white (bright), and the opposite on a light themed desktop. I'll give it a go though. Created attachment 154609 [details]
Off version of the above (50% opaque fill + no shine bits)
Those look excellent. Really nice work. Ready for submission once the CSS stylesheet embedding stuff is done, methinks. Thanks. I'll have a read through that link you posted, looks like I need to do stuff like stroke to path & probably more. I've converted strokes to paths, and optimised via Scour (Inkscape method left a gap on the transparent bit of the Off bulb). Now I'm trying to do the 'Embedding stylesheets in SVGs' section. I've put the bunch of aliases into .bashrc & they all appear as available commands to run when I input "sed-" and press tab. I have run the sed-Text command on one of my icons, but it doesn't make any change to the SVG file. Do I need to run through all the sed- commands against each icon (bar the separate dark/light ones)? Do I need to be using the relevant Breeze themes when running any of the commands? As I'm currently using a mix of breeze dark, light & oxygen icons. Created attachment 154787 [details]
On colour working.
Created attachment 154788 [details]
Off colour working.
I also tried to optimize these, but when I optimize via Inkscape it creates a gap between the off-bulb's semi-opaque fill and the bulb outline. I then did SCOUR to optimise, but it strips out the colours. Note also: Firefox is showing the icons componenets with different colours, Dolphin correctly shows them all being the one colour defined by the ColorScheme-Text. Stripping out the colors is correct, no? These should be monochrome icons. generally the workflow is: 1. make the icon in Inkscape 2. run it through `scour` 3. manually fix up the CSS stylesheet and its assignment to the individual changes in the text of the SVG file Sorry, I wasn't very clear. After putting in the 5 lines of CSS colour bit including "color:#232629;" i was changing the colour to other colours to check that I'd got it working properly, i.e. if I changed the colour, all of the bulb + moon etc. should be colourised as per the new colour code. This works fine in when viewing the thumbnails in Dolphin, but once they were uploaded here & I viewed them in Firefox I saw the colours weren't right. I'll need to have another go at it. Created attachment 155105 [details]
Bulb On. Scoured & the CSS done,
Created attachment 155106 [details]
Bulb Off. Scoured & the CSS done.
I've got the files to the stage where they display correctly now in Dolphin & Firefox. Both are scoured too. I'm not 100% that I've edited the CSS in the best possible way, but they work. :) And when I change the colour defined in the top <defs> section the whole bulb is colourised (which I assume is what gets changed for light/dark themes). Looks fabulous! Wanna submit a merge request at https://invent.kde.org/frameworks/breeze-icons/-/merge_requests that replaces the existing redshift-status-off and redshift-status-on icons with those? (In reply to Nate Graham from comment #63) > Looks fabulous! Wanna submit a merge request at > https://invent.kde.org/frameworks/breeze-icons/-/merge_requests that > replaces the existing redshift-status-off and redshift-status-on icons with > those? Thanks. I've raised a thingy here: https://invent.kde.org/frameworks/breeze-icons/-/issues/10 I'll raise a proper merge request (for the above + the refresh icon one) once I get through the process of setting up a build environment, I just keep hitting issues as I go. :D Cool, let me know if you need a hand with anything. (In reply to Nate Graham from comment #66) > Cool, let me know if you need a hand with anything. I was running out of HDD space so only got around to re-partitioning + reinstalling my system recently. I tried to build the build environment last night again but hit an issue with my waylandprotocols v1.20 when it needs v1.27 for kidletime to build. My system is debian 11 which is from August 2021. The instructions say a particular Qt version is needed, which debian 11 has, but that a fresher distro is recommended but older system can still work. Is it possible, or do I just need a newer distro (I was hoping to not have to create a virtual machine)? Honestly you don't really need to compile the repo. Just add or substitute icons in it and we can review the work. Being able to compile it it nice since you can run tests locally, but it's by no means required for something like Breeze icons. A possibly relevant merge request was started @ https://invent.kde.org/frameworks/breeze-icons/-/merge_requests/251 Thanks. I've now raised a merge request here, hope its OK: https://invent.kde.org/frameworks/breeze-icons/-/merge_requests/251 A possibly relevant merge request was started @ https://invent.kde.org/frameworks/breeze-icons/-/merge_requests/253 Git commit b2a55d879124546085a489a78a224898ed5ae54d by Noah Davis, on behalf of Philip Murray. Committed on 21/03/2023 at 23:44. Pushed by ndavis into branch 'master'. Update Redshift icons to off on & sun Redshift icon set with off, night & day states. Lightbulb sits beside cross, moon & sun respectively, to indicate the states. The existing icon is unclear as it looks like an exclamation mark. The new lightbulb is more bulb-shaped. A +13 -0 icons/status/22/redshift-status-day.svg M +12 -13 icons/status/22/redshift-status-off.svg M +12 -12 icons/status/22/redshift-status-on.svg https://invent.kde.org/frameworks/breeze-icons/commit/b2a55d879124546085a489a78a224898ed5ae54d Git commit 292a4c2b41ff94a33e06808df587900567c2a423 by Noah Davis, on behalf of Philip Murray. Committed on 22/03/2023 at 10:20. Pushed by ndavis into branch 'kf5'. Update Redshift icons to off on & sun Redshift icon set with off, night & day states. Lightbulb sits beside cross, moon & sun respectively, to indicate the states. The existing icon is unclear as it looks like an exclamation mark. The new lightbulb is more bulb-shaped. (cherry picked from commit b2a55d879124546085a489a78a224898ed5ae54d) A +13 -0 icons/status/22/redshift-status-day.svg M +12 -13 icons/status/22/redshift-status-off.svg M +12 -12 icons/status/22/redshift-status-on.svg https://invent.kde.org/frameworks/breeze-icons/commit/292a4c2b41ff94a33e06808df587900567c2a423 |
Created attachment 154002 [details] Oxygen + Breeze SUMMARY *** The Breeze icon for Night Colour could be better. It isn't very clear what it is; it looks mostly like an exclamation mark, and even a bit like a footprint. I've attached screenshot of the Breeze one & an Oxygen one. The Oxygen one is very clear what it is, it is more obviously a lightbulb & it is red and has a moon behind it, which makes it very clear to me that it is for Night Colour / Redshift. The space at the sides of the Breeze icon are also greater than most other icons, which makes it look slightly separate, but this could allow elements to be added to it to make it clearer or more bulb-like. *** Operating System: Debian GNU/Linux 11 KDE Plasma Version: 5.20.5 KDE Frameworks Version: 5.78.0 Qt Version: 5.15.2 Kernel Version: 5.10.0-19-amd64 OS Type: 64-bit Processors: 4 × Intel® Core™ i5-4570 CPU @ 3.20GHz Memory: 7.7 GiB of RAM Graphics Processor: NVIDIA GeForce GTX 750 Ti/PCIe/SSE2