High Res Icons

[MicrosoftCEO]

High DPI displays are becoming much more common as Windows display scaling has improved. While Paint.net does work pretty well on these displays, the in app icons look terrible. It would be great if we could get a new high resolution set of icons for all of the tools and buttons.

[Rick Brewster]

Yes, it would be great. It's also a huuuuuuge amount of work. I mean astronomical.

 

If there's a source of high-DPI stock icons similar to (or identical to) http://p.yusukekamiyamane.com/ , that would basically make this possible. Otherwise, it's gonna be awhile, as I'll have to hire someone to do the graphics.

 

(a short-term solution is probably to draw with nearest neighbor filtering ... I find that things like awful at 200% scaling, I prefer the sharper look of nearest neighbor rather than bilinear in this case)

[Zagna]

We could just do it?

Fire up Inkscape and start doing them...

What... only 100-200 icons and it could be done to a repo of some sort?

Sure quality wouldn't be professional but I would imagine with enough work it would look good enough.

[Rick Brewster]

200 icons is quite an extraordinary amount of work!  And it would definitely need to be professional quality.

[Rick Brewster]

I think I've usually started by browsing the 10 billion icon packs on deviantArt, e.g. https://www.deviantart.com/customization/icons/os/win/

[Rick Brewster]

Actually, it looks like icons have gotten simpler. For an icon refresh in 2017/2018, I'd want to mimic Office 2016's icons. And there's a lot less fancy color gradients and stuff nowadays.

 

 

BTW, that whole ribbon area flickers when you resize the window. *facepalm* So embarrassing ...

[Zagna]

I was thinking 200 icons over several months with couple people doing it wouldn't be that impossible... I even tried to do Paste and.... my 15 minutes of work didn't really amount to much

Edited September 5, 2017 by Zagna

[Drydareelin]

The office 2016 ones, though basic, do look pretty good.

Better than delving into the depths of deviantart, which is a scary place.

[lynxster4]

I think that looks real good @Zagna.   Simple with a splash of color.   Icons are so much more clean-cut now.   

[AndrewDavid]

Any way to generate a list of the 200 icons desred - specify the size required and color limit if any?

We could all pitch in and have it done inside of a month. A real team effort. You can pick the best ones Rick 

[Zagna]

And set some basic guidelines. For that Paste I had a 256x256px SVG with a grid set to 4px. Line width set to 8px and rounded corners. Colors I chose at semi random.

All that tracing over the bitmap. Paste was really easy since it is all straight corners without any abstract features.

I imagine that things like Cut or Print are more complex.

A template .svg could be used.

 

[Rick Brewster]

This ain't such a bad idea, but I'll be very particular about the icons I will try to organize something, maybe a github repo, but it may be a bit before I have time even for that.

[Zagna]

I was bored....

SVGs and stuff, comments?

Cut and Print are still meh, rest I feel are fine.

[Rick Brewster]

Yeah those are actually pretty great!

[lynxster4]

Cut and Print look 'meh' to you because the line weight is not the same as the others.

Maybe you can match them up to the others?  Scissors might look funky, though...

 

Other than that, I think these look great!  

[Zagna]

99 SVG so far

[lynxster4]

2 hours ago, Zagna said:

99 SVG so far

 

Wow!  These look fantastic!  Nice work Zagna!       (scissors and printer look much better)

[Zagna]

138 so far but, couple of them will need a bunch of work. Oil Painting, Gauss Blur and Motion Blur need improvement.

And Dents, Polar Inversion, Tiled Reflection, Soften Portrait, Julia and Mandelbrot are quite tricky.

Dents is difficult to vectorize and others would probably be better just with a straight .png.

Edited November 16, 2017 by Zagna

[Rick Brewster]

The icon for Dents was just whatever looked the "most" appropriate from the icons I had to choose from. Don't feel like you need to replicate the existing icon

[Rick Brewster]

Also, just wanted to say these look great and I'm pretty excited about them. Zagna, would you be willing to license them for use in the actual Paint.NET app?

 

I think a good "next step" for this would be for me to create a little script of some kind that packages these SVGs into PNGs that the main app can load. Then you could see how it looks in the app itself without any guessing games.

 

And then I'll need to do some coding work so that these can be loaded at high-DPI as well. I would not be packaging these as SVGs -- they would be "compiled" down to PNGs at various resolutions. SVG (rather, vector art in general) is too CPU intensive to use directly

 

[Zagna]

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.

[Rick Brewster]

Sorry for the late reply -- I didn't notice!

 

But yes, CC-BY should be fine. I'm planning to start upgrading the icons soon

[toe_head2001]

I played with some of the SVG files @Zagna created, and modified them to conform the Office icon color palette.

 

Better? Worse?

 

[Rick Brewster]

Basically desaturated them? Is it easy to batch process that? If I can get a full icon set (with the right licensing btw -- see my comment above) then it'd be fun to look at it side-by-side, or even have it be configurable.

[toe_head2001]

1 hour ago, Rick Brewster said:

Basically desaturated them? Is it easy to batch process that?

 

Yes, in the sense that the colors specified in the Office icon palette are desaturated. In the case of the Eraser icon, it's actually more saturated, compared to @Zagna's original.

I had to manually changed the HEX values in the SVG files.

 

I did however create a .bat file to automated the conversion from SVG to PNG.  It will process all .svg files in a folder called "svg", and output .png files in a folder called "png". Or you can change the folder names to whatever you want. Same goes for the size; I have it set to 32x32.

Spoiler

@echo off
TITLE Convert SVG files to PNG files
    
set inkscapePath="%ProgramFiles%\Inkscape\inkscape.exe"

if not exist %inkscapePath% (
    echo Inkscape doesn't seemed to be installed.
    echo.
    goto end
)

set iconSize=32
set svgPath="svg"
set pngPath="png"

echo This will create PNG files with a size of %iconSize%x%iconSize%
echo.

pause
echo.

if not exist %pngPath% mkdir %pngPath%

for /f %%f in ('dir /b %svgPath%\*.svg') do (
    %inkscapePath% %svgPath%\%%f --export-png=%pngPath%\%%~nf.png -w%iconSize% -h%iconSize%
    echo %%f ---^> %%~nf.png
    echo.
)

echo All Done!
echo.

:end

pause

 

 

@Zagna and I (and others?) could probably finish fleshing out the SVG files he created, so that they are compliant to the Office icon guidelines. He chose the CC-BY license, so we could just continue using that.