Recommended Posts

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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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.

 

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
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).

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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

Share this post


Link to post
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.  :)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now