Jump to content

High Res Icons


MicrosoftCEO

Recommended Posts

Ok, well I guess he has yet to officially license them as CC-BY, but that was his intent a few months ago:

On 11/19/2017 at 7:16 PM, Zagna said:

Would simple CC-BY suffice? A tiny .txt just like now with copying.txt? Or which license?

The license on the website is just because I used Hugo to parse the directory for all .svg so that I wouldn't have to manually do it.

 

(September 25th, 2023)  Sorry about any broken images in my posts. I am aware of the issue.

bp-sig.png
My Gallery  |  My Plugin Pack

Layman's Guide to CodeLab

Link to comment
Share on other sites

I like the idea of an official palette for color conformance to improve consistency and future icons, whatever that palette is.
I dislike the office icon color palette used here, though. It seems a little washed out with pastel colors, and icons that pop are easier to identify at small sizes.

So I would generate a palette from existing icons in Before, then change other icons with near-colors to match the palette.

 

There are improvements here, though. I appreciate the RGB curves icon instead of green blue purple, and the green is easier to see on bright backgrounds. I would keep the dark outline for the eraser from Before, but use the white interior shown in After. Both of these choices are because it has better contrast in my opinion.

Link to comment
Share on other sites

All the colors currently are just a random sampling from the original icon using Inkscape's color picker couple times until the color was OKish.

Changing the colors would be just opening up all of them, using a palette of some kind. For example, Office 2016 would be like

GIMP Palette
Name: Office 2016 Colors
#
 80  80  80 Text Gray (80)
 95  95  95 Text Gray (95)
105 105 105 Text Gray (105)
128 128 128 Dark Gray 32
158 158 158 Medium Gray 32
179 179 179 Light Gray ALL
114 114 114 Dark Gray 16
144 144 144 Medium Gray 16
 77 130 184 Blue 32
 74 125 177 Blue 16
234 194 130 Yellow ALL
231 142  70 Orange 32
227 142  70 Orange 16
230 132 151 Pink ALL
118 167 151 Green 32
104 164 144 Green 16
216  99  68 Red 32
214  85  50 Red 16
152 104 185 Purple 32
137  89 171 Purple 16

It would be just couple clicks for the fill and stroke, wouldn't take too long.

I've started changing the colors to those... we'll see how they turn out later today.

And yes, CC-BY is the intended license, only reason for the CC-BY-NC is because that's for my Help pages and Hugo adds the shared footer to the svg list since it's so much easier to use Hugo to parse the directory for .svg. I'm just too lazy to change the .html file that it spits out.

Edited by Zagna

sig.jpg.7f312affa740bae49243c4439bc4a244.jpg

Link to comment
Share on other sites

Great! :) I think this will be a fantastic inclusion for a v4.2 release. I'm wrapping up v4.1 as quickly as possible (hopefully not famous last words, of course).

The Paint.NET Blog: https://blog.getpaint.net/

Donations are always appreciated! https://www.getpaint.net/donate.html

forumSig_bmwE60.jpg

Link to comment
Share on other sites

  • 4 weeks later...

Wow, these icons look amazing! Definitely should replace our current icon set, BUT... they are not perfect; here's my advice:

  1. Don't use gradients! They don't match the style, looking really out of place.
  2. Don't use blurred icons! They don't match the style, looking really out of place.
  3. Don't use photos! They don't match the style, looking really out of place.
  4. Don't use fractal renderings! They don't match the style, looking really out of place.
  5. Don't use super detailed icons! They don't match the style, looking really out of place.
  6. Don't use varying line widths! They don't match the style, looking really out of place.

In all seriousness, here's a list of things I reckon should change (numbers in the brackets are the reasons from list above):

  • Black and White [1]
  • Sepia [1]
  • Hue/Saturation [1]
  • Clouds [6]
  • Dents [5,6]
  • Emboss [5,6]
  • Gaussian Blur [2,5,6]
  • Fractal Julia [4]
  • Fractal Mandelbrot [4]
  • Motion Blur [2]
  • Polarize [5]
  • Soften [3]
  • Vignette [2]
  • Print [5]
  • Global Flood [5]
  • Canvas Size [5]
  • Resize [5]
  • Image Crop [5]
  • Sampling Image [5]
  • Gradient [1]

Also, special cases:

  • Help icon [Weird bit in the tip of the '?']
  • Drag [Oddly shaped fingers]

Please note that these changes are mostly nitpicks, and things to consider when making new icons. I've marked the real bad ones in red. Also a few important things to have in mind:

  • You really, really should invest in using just these colors: https://docs.microsoft.com/en-us/office/dev/add-ins/design/add-in-icons#icon-colors
  • You made extensive of a "50%" gray. You probably should use either lighter shades or pure white mostly.
  • I know it can be tough to have little icons for effects. Try to avoid making an actual demonstration of the effect with an image, and instead use something that represents it.
  • Don't forget that all of these will be resized to just 16px! Many of those icons have thin lines that might be hard to see in such a low resolution. Actually, it's a shame that so much detail will be lost. @Rick Brewster will icons have their size increased in order to look more similar to Office?
  • Keep up the fantastic work. You did something amazing and I can see you've put a lot of work into it, better than anything I could've done myself.
Link to comment
Share on other sites

3 hours ago, HCGS said:
  • You really, really should invest in using just these colors: https://docs.microsoft.com/en-us/office/dev/add-ins/design/add-in-icons#icon-colors
  • You made extensive of a "50%" gray. You probably should use either lighter shades or pure white mostly.
  • I know it can be tough to have little icons for effects. Try to avoid making an actual demonstration of the effect with an image, and instead use something that represents it.
  • Don't forget that all of these will be resized to just 16px! Many of those icons have thin lines that might be hard to see in such a low resolution. Actually, it's a shame that so much detail will be lost. @Rick Brewster will icons have their size increased in order to look more similar to Office?
  • Keep up the fantastic work. You did something amazing and I can see you've put a lot of work into it, better than anything I could've done myself.

The colors previously were random color picker results, they're now one of those Office colors chosen randomly, I spent literally seconds choosing colors for them. I have zero attachments to the colors.

All the icons were more or less traced over the old ones, nothing has been redesigned. So they'll all look weird. I assume that I'll redesign quite few of them. Or anybody else since I'm not artistic at all.

Resizing was something that would be most likely worked out when testing the icons.

Actual demonstrations are used because current icons are demonstrations and I just duplicated them. 

 

Edited by Zagna

sig.jpg.7f312affa740bae49243c4439bc4a244.jpg

Link to comment
Share on other sites

  • 3 months later...

Alright! As per my recent blog post ( https://blog.getpaint.net/2018/12/26/whats-next-for-paint-net-in-2019/ , which is crossposted here on the forum too: https://forums.getpaint.net/topic/113608-whats-next-for-paintnet-in-2019-x-post-from-blog/ ), I've finally started working on this for inclusion in the next release :)

 

I've paid for a license at https://Icons8.com, as they have a ton of Office-style icons that really match, well, Office. And it's not expensive at all. I can use these and @Zagna's SVGs to cover just about everything. There's a few important icons that Icons8 doesn't have that Zagna does have, and I think the whole set is basically there.

 

The SVGs will be the "source of truth" but they will not ship with the app itself. Instead, I'll use a script to convert them to PNGs of the appropriate sizes and then the PNGs will be included. Parsing and rendering SVGs is absolutely not something that an app like Paint.NET should be doing at runtime -- it's way too expensive to do all that vector rendering. Once I have things set up for 96 DPI and 192 DPI, I can also easily fill in any other scaling levels that are important such as 120, 144, etc. At that point it'll just be a matter of adding a few extra commands to some scripts.

 

I'm currently writing up an SVG-to-PNG converter that uses Direct2D. There are already solutions available for this but it's also a chance for me to learn how to work with SVG in Direct2D -- even if that means learning that SVG support in Direct2D is broken or incomplete, which is definitely possible.

 

 

  • Like 1
  • Upvote 3

The Paint.NET Blog: https://blog.getpaint.net/

Donations are always appreciated! https://www.getpaint.net/donate.html

forumSig_bmwE60.jpg

Link to comment
Share on other sites

  • 2 weeks later...

I decided to use the Axialis Flat Pro 2017 icon set ( https://www.axialis.com/icongenerator/stock-icons/flat-pro/ ) as the basis for the new icons. They match current Office styling pretty well and are already pixel snapped for 16x and 32x, which is exactly what I need right now. Icons8's icons are good but not really well aligned for 32px (for some reason they're at 16px and 30px? weird) so they require a lot of manual fixups in Inkscape. I'm sure I'll find some uses for their icons somewhere though, as Axialis doesn't cover everything.

 

A project like this goes pretty slow at first, but then quickly gains steam. Yesterday I got as far as "crop" for the main toolbar; I was also updating all relevant  code to use newer infrastructure for dealing with image resources that bring along a scaling factor. (this isn't necessarily final styling of course)

 

What's nice is that I can just edit a script in order to automatically produce PNGs for any scaling factor needed: I'm starting with 96 and 192 DPI, aka 100% and 200% scaling, but I'll be able to add 120 DPI (125%) and 144 DPI (150%) with just a few lines of code so that they can look (almost) as sharp. Same for newer high-end scaling factors like 250% and even 300%.

 

image.png

  • Like 2
  • Upvote 2

The Paint.NET Blog: https://blog.getpaint.net/

Donations are always appreciated! https://www.getpaint.net/donate.html

forumSig_bmwE60.jpg

Link to comment
Share on other sites

I'm loving the look of those icons :arrow-up:

 

Also, very excited to read the blog and note: "an improved selection of built-in brush stamps" <3

30b8T8B.gif

How I made Jennifer & Halle in Paint.net

My Gallery | My Deviant Art

"Rescuing one animal may not change the world, but for that animal their world is changed forever!" anon.

 
Link to comment
Share on other sites

18 minutes ago, Rick Brewster said:

Axialis Flat Pro 2017 icon set

 

I hope you didn't have to buy too many sets.   The Basic set seems to have a lot to work with.

If you have the Icon Generator software (which is free), you can easily alter the icon.  All the sets were 50% off for the holidays.

Glad you picked them. They have a nice, clean look.  :)

Link to comment
Share on other sites

  • 3 weeks later...

Wow, updating the icons takes a lot of time! Even with the Axialis icons to work with, there's a lot of pixel nudging and squinting to make sure things look just right, especially at 96 DPI.

 

The good thing is I can easily change my scripts to render the SVGs at whatever DPI is needed to ensure most people get a crisp UI. Right now I'm only generating the PNGs for 96 and 192 DPI, but I'll probably add 144 DPI as well, and even 288 (which is 300% scaling).

 

The big areas to finish up are the status bar, all tools, and all effects/adjustments. Whew!

 

(Also, these aren't necessarily final -- all sorts of things could be changed before I ship this.)

 

image.png

 

image.png

 

image.png

 

image.png

 

image.png

 

image.png

 

image.png

 

 

  • Like 5
  • Upvote 2

The Paint.NET Blog: https://blog.getpaint.net/

Donations are always appreciated! https://www.getpaint.net/donate.html

forumSig_bmwE60.jpg

Link to comment
Share on other sites

Wow. Those new icons look glorious!

Link to comment
Share on other sites

  • 1 month later...
  • 2 weeks later...

These new icons are niiiiice. But in the interest of future proofing even more, have you considered what most apps tend towards now - including Office itself as it happens - which is having the Icons as a coloured font? Would mean it would look pretty great on an crazy DPI display, and if you're already using D2D for the UI DirectWrite will natively render them happily with no custom parsing involved.

 

(I'm no stranger to making coloured fonts with the COLR format, although you can also make the glyphs straight from SVG's and D2D will happily use them).

Edited by Future_Larking
Link to comment
Share on other sites

That's a low-level technical implementation and really not very important. There's not much difference between doing that versus rendering from the SVGs directly.

 

Rendering all these vectors at runtime is also just cost-prohibitive for an app like Paint.NET. Just because D2D/DW can do it "natively" doesn't mean it'll actually be fast, even if they're highly optimized and/or hardware accelerated. This would especially hurt startup performance.

 

I'm already rendering the SVGs to PNGs at up to 400% scaling (384 DPI), which seemed like a good upper bound for now. If you're seriously running at higher scaling than 400%, then 1) that's pretty awesome, 2) I doubt you'd notice the little bit of blurring, and 3) "worst" case, I start bundling even higher resolution PNGs that are rendered from my existing SVGs. All I do is update one line of code and like 3 scripts.

 

Also, from a licensing standpoint, I'm not even sure if the Axialis or Icons8 icon sets permit distribution of the SVGs. It's kind of like their "source code".

The Paint.NET Blog: https://blog.getpaint.net/

Donations are always appreciated! https://www.getpaint.net/donate.html

forumSig_bmwE60.jpg

Link to comment
Share on other sites

I do not like these new icons at all (just got them in the beta). Showed them to my friend, he agreed. Here's what I'm suggesting, as a UI designer:

 

The colours are much too different and many of them are very low contrast with the Dark theme and even with each other, I'd appreciate if you retained the original colours, or at least colours close to them. Especially change the colours on the Gradient and Shape tools, blend type dropdown, shape fill/outline options, back to what they were, they look terrible imho. Also a lot of the icons that are purple now are pretty unappealing - change them back to blue pls.

 

Some icons imo deserve a complete rework, including these:

- Open (try using the vertical folder style to be consistent with the rest of Windows)

- Zoom (a plus sign would work much better than the visually noisy.. arrows? I can't tell what they are, they're just 2x2 pixel cubes on my regular DPI monitor)

- Sharpen (what even is this icon, an isosceles triangle cut in half? glasses worked better as a visual metaphor)

- Turbulence (misleading icon - looks more like some sort of distortion effect rather than a weird opalescent-looking cloudy effect)

- Dents (what is this ribbony-looking thing?)

- Unfocus (you could just use a front-facing eye instead of the weird abstract thing you got right now)

- Antialiased selection quality (an ellipse was much more recognisable than the weird rounded thing we have now)

 

If you're going for an Office 2013 style, I'd change the colour of the shapes in the Shapes tool dropdown to grey, not blue. Also you should probably discontinue the double outline thing you do to those - replace it with a single outline like what Microsoft does in their software.

 

Also, if I end up never liking these icons, a settings option to use the old style icons and colours would be much appreciated, alongside the already existing theme options. I want to like these icons, but they're just not all that great. I think you tried too hard to look like Office when the general style you had before already worked. I think for the flat style icons you should really have preserved the general style and feel of those, but without the extra skeuomorphism and ornamentation.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...