Pencil: Toolbar icon design

[CandyFace]

Hi

Looking at issue #550 made me think that instead of fixing the icons, it would be better to give the toolbar a makeover. There are lots of decisions to be made when designing icons, so instead of me just bashing pixels without any consideration in what the rest of the pencil community thinks, I've decided to share my thoughts and progress.

I've made a bunch of sketches already, mainly to figure out the placement and how the icons should be illustrated. Nothing is finalized though, so try not to think too much about the style, color or shading.

Rules i've come up with so far:

• Style should be consistent across all icons, if possible
• icons should be designed in size 24x24.
• Icons should be designed in a vector program or be convertible from raster to vector.

Iterations:

These represent the look as you would see them in the program ie. in pixels

100% scale:

I prefer the top right icon, as it is displayed in a way similar to the old icon but with more emphasis on tip.

Mockup:

I'll keep updating the thread, showing more icons as I get them done. If no one disagree or comment, then I'll just go with the design I've mentioned already (the top right).

[Jose-Moreno]

@CandyFace due to this issue #597 I was also thinking of moving to a stage where we can begin changing Pencil2D's overall graphic design at least regarding it's icons.

As you can read on the latest response by scribblemaniac: https://github.com/pencil2d/pencil/issues/597#issuecomment-279237490

he says there shouldn't be a problem with having SVG icons displayed. I honestly believe it would be for the best to have the icons as vector files to improve readability and help with HiDPI screen users.

Regarding the icons themselves I think you've taken a great first step. I agree with your rules as well, however considering SVG icons must also become a factor while designing them since the size limit shouldn't be an issue.

It'd be fine if we had visualization templates for different resolutions and Operating Systems like Windows, OSX, Or common flavours of linux distros. If it's ok I'll post my own proposals to this thread so we can focus our efforts. Thanks a lot for your contribution!

[CandyFace]

You're welcome to post any kind of proposals as long as it is within discussion of the UI.

Changing from png to svg would be fine by me too, actually it would only make it easier for me, as vector to pixel graphics typically requires post editing to fit specific resolutions.

The icons will look good in any resolution, so scaling will not be a problem.

[CandyFace]

On a second thought, I think we should stick with raster graphics. SVG is indeed better for scaling but since it's just pure vector data, it will be slower than rendering raster graphics. Qt also mentions that scaling UI is a bad idea and should be avoided, it's better to stick with fixed resolutions. https://wiki.qt.io/Performance_tip_Images

I'll make sure to export icons in 3 different resolutions.

edit:

I've finished the pencil icon and also had some time to make a new eyedropper/color picker icon, let me know what you think.

[scribblemaniac]

No, we should be using vector graphics. They will take fractionally longer to load initially, but I'm sure they are cached as bitmaps by Qt and thus won't really affect Pencil's performance except during startup (if at all). Scaling UIs are useful for UHD resolutions and for accessibility purposes. Maybe I'll do a benchmark if I have time. If, for some reason, SVGs are super slow, we can easily render them out beforehand, but it's much more difficult to go the other way.

P.S. The icons look awesome ❤️

[CandyFace]

Hmm I'm not sure whether sticking with png rather than svg will be more difficult to go about the scaling problem.

I would assume that the scaling operation should only be executed once, in the initial setup when starting Pencil, and maybe later configureable in preferences. There should therefore be no actual gain in using vector instead of raster.

Scaling UI will also still be possible if we stick with png, it just requires more setup for different resolutions rather than presumably scaling the icons dynamically.

If there truly is no performance penalty in switching to vector, and no weird or wonky scaling issues then sure we can do it.
Nevertheless, we should test it before moving further with that discussion.

What is your take on this @chchwy?

Progress:

Eraser:

White:

Pen:

[CandyFace]

Not a crazy amount of work today, was busy with study. I managed to make a new paint bucket though and also refined the color picker icon ;)

Color picker:

Paint bucket:

[Jose-Moreno]

@CandyFace These are great Oliver. Great work. Regarding the svg dilemma, I agree with performing the benchmark, however even if it doesn't work I think we should have a base SVG file with the icons, for editing purposes that anyone can access in the spirit of being open-source (further design choices should be filtered by us though). I will upload soon the logo as well since it should be available for everyone to use too.

However we should also discuss where these source files should be uploaded. I don't know if we should create a "graphic design" branch here on github or if anyone else has an idea to make it accessible as well as part of the source files, please speak up. :smiley:

[scribblemaniac]

Okay, benchmarks are done. The code for them is at https://github.com/scribblemaniac/pencil/tree/svgbenchmarks. A box plot of the results can be found at https://plot.ly/~scribblemaniac/7.embed. Looking at these results, it is apparent that the speed of rendering depends heavily on the complexity of the SVG file. For very simple icons, SVG rendering can be even faster than PNG rendering with scaling! However, the initial loading times for SVGs can get relatively high. Here's the timing of the two main ways to render SVGs:

QSvgRenderer: 0.13-19ms for initialization, 0.045-4ms to render
QIcon: 0.3-35ms for initialization, 0.001-0.025ms to render
PNGs: 0.002 for initialization and render

As you can see, the initialization time varies greatly between the simple SVG (1kB) and the complex SVG (680kB). I'm thinking that most of the icons we have will be much closer to the simple icon times, which are definitely acceptable. I would say as long as QIcon is able to load the SVG file in <5ms, then we can use QIcon with SVG files with no problems. If it takes longer than that, we may have to use a scaled PNG to start, and then load the SVG with QIcon after Pencil2d is finished loading.

TLDR; Benchmarks say SVG icons are fine 😋

[CandyFace]

That looks good @scribblemaniac, i'm not entirely sure about the size yet, but i'm estimating they'll be between 5-10kb, so that shouldn't be a problem. @Jose-Moreno, if we go with png, then i'll still upload svg for editing purposes, I do not intend to keep anything hostage ;)

Progress:

hand icon

[CandyFace]

New smudge icon:

[Jose-Moreno]

@CandyFace I think every icon you've presented so far works fantastic except for those that involve realistic human parts. That's why usually there's this "cartoon glove" kind of thing on most software.

By themselves they look like great illustrations, but as an icon I think it's better to lean towards simplicity without details like nails and avoiding more than two (2) gradients or smooth rendering of skin tones.

It is also perhaps a good rule of thumb to design those anatomical parts by using more curved lines or constructing those based on circular patterns.

Perhaps even using the old cartoon "4 finger" stylization could work better. Something like this but that fits the style you're going for:

[CandyFace]

@Jose-Moreno Thanks for the feedback! Yes you are absolutely right, they don't work as icons. I was never happy with them tbh. it was just to show progress but you are right. A glove would be nice although white can be quite tricky to work with without outlines, so for consistency sake if I could get a design working that doesn't involve outlines, that would be nice.

I'll try and see if I can make it work :)

[CandyFace]

Update:

Alright i've had some time to work on the icons again.. I've actually had a few of them done for a while now but... I'm just not sure I like them :P

anyway here are two iterations of the hand icon. Shamelessly taken from @Jose-Moreno sketch because I like it :3

No clipping:

Brush icon:

I'm going to redo the brush though... I just don't like it :/

[CandyFace]

Last icons done
arrow tool:

selection tool:

brush tool:

Clear tool:

Line tool:

Hand tool:

Selection tool:

Smudge tool:

Now I just need to clean some things so they all looks the same in Vector, then I'll make a PR which has both png and svg. I think i'll make a new folder in resources so it's not mixed up with the rest, then we can always clean it up later.

[J5lx]

I think the clear tool looks like some kind of rock. The others are good though. I wonder what symbol other programs use for ‘clear’.

[CandyFace]

As far as most drawing applications i've used, they don't have a clear tool, it's usually an action which hidden in the menu. I do agree though that it can resemble a rock. I can make it brighter, maybe that'll help. A trashcan could work too.

[J5lx]

For reference, GIMP has this (in menu):

But it’s true that most software does not seem to have a symbol for that. Blender at least has a × to clear input fields but of course canvas ≠ input field.

Edit: Maybe a waste bin could also be an option.

[CandyFace]

So what about a trashcan?

It's simple and we've all seen one, so it should be easy to figure out what it does.

edit:
here's what it looks like in context with all icons. I have to add a backdrop or something to that trashcan... or I should have kept it metal.

edit 2:
more contrast and no single color.

[J5lx]

Yeah, I think it’s a good option. Maybe a little more texture would be good (like the three, uh, vertical lines in this symbolic one), but I think even the current one is already sufficiently recognizable (apart from that backdrop issue you noted).

Edit: Good job, by the way!

[Jose-Moreno]

@CandyFace Thanks a lot for your work. I think the trashcan works. The symbol that Jakob describes could work but I see it more as those stereotypical trash cans from a big U.S city resting on an alley from the 80's hehe.

A recycle symbol could help solve the issue of identifying the element even if we dismissed the trash can completely. And we're being eco-friendly lol.

On the matter of the blue lines, I really like the clean and modern look they give and the silhouette of the icons is working really nice. I still think that having too much blending / gradients on the icons is not ideal though.
Is there a way we can see the icons with flat colours only? If you don't have much time I'd like to try it out, can you upload a working version of your file? For making them pop I think the classic "cartoon" outline could work mixed with the flat colored version I'm proposing.

Thanks again, let me know about the file whenever you have some time! :smile:

[J5lx]

@Jose-Moreno Well, stereotypical means that it will be recognized :) Also I’m not insisting on exactly that design, it was just one possible example (though possibly the most common one). I think a recycle symbol would be more ambiguous than an 80s US trash can :)

Besides that, I agree that the version in edit 2 works well!

On the matter of flat vs. gradients, maybe icon themes à la GIMP (Edit/Preferences/Theme) or FileZilla (Edit/Settings…/Interface/Themes) could be an option too, at some point, though I have absolutely no idea how easy or difficult it might be to implement.

[CandyFace]

Thanks guys!

@Jose-Moreno
Alright, i'll try to make the icons flat, i'm not so sure about a cartoon outline but i'll make two versions anyway, then you guys can judge. ps. I'm glad you like the blue outline!

@J5lx yeah themes would be cool, but it's definitely a task for another time. The implementation for icons shouldn't be that bad though, insert a new tab (or add to the general tab) in the preferences window, add a dropdown menu to choose between "stylished" or "simple".

[CandyFace]

@Jose-Moreno Here are two flat versions, the second is outlined.

flat version:

flat outlined version:

[Jose-Moreno]

@CandyFace I liked how it the outline makes it pop. However I think if we were to test that route further there should still be "flat shadows" as well to help enhance the volume, For example on the eraser the bottom planes could be a slightly darker color to give that sense and so on.

Looking at them, I continue to believe you nailed the shapes, now it's just a matter of providing enough detail for it to be understood at an icon level without making it too detailed. At this stage I'd leave the previous set you showed today while softening the shadows on the Pen and the brush, while we test them and gather more feedback while considering to improve their readability.

The only one that confuses me off a bit is the smudge icon. I think the idea is fine, but the index finger should stick out a lot more, since traditionally that's the most used finger to smudge a drawing, or rather the other two fingers should be pressed closer to the palm. Plus having a bolder indication of a thumb wouldn't hurt.

Regarding the trash can I guess Jakob's suggestion might come in handy, perhaps a trash can lid or similar could help to sell the idea of the trash can just to enhance it's silhouette. Right now it sort of resembles a glass.

Thank you for all your contributions. Really liking all of it!

[J5lx]

I think a grid-like structure might also work for the waste bin, somewhat like here. Basically just any kind of texture, as I mentioned before. (That’s not saying something else can’t do the job, though.)

[CandyFace]

About the trashcan/bin icon, I think you're putting too much thought into it. Logically there's no reason why a glass would be there. The icon resembles the bin you've seen on windows and mac. As for the lid idea, that would be more for a trashcan with garbage and stuff, this is supposed to resemble those you have in an office for paper and such and they usually don't have a lid, at least not here :)

it's probably my fault though, when I say trashcan, I actually mean an office bin. I could add a recycle icon though, if that makes it better but i don't think it's necessary.

@Jose-Moreno Okay i'll look into it.
About the smudge icon, i'll make the index finger longer. The thumb is hidden beneath, i'll made a shadow to indicate that.

[CandyFace]

@Jose-Moreno
Okay here's a slightly more shaded version, I wouldn't call it flat though but it's definitely simplified.
I've also added some inward curved bevels or (three vertical lines :P) to the bin icon.

[CandyFace]

• More tweaking,
• new trash icon, now with recycle logo instead of bevelling.
• colored outline, not just brown anymore.

All icons has been cleaned up and should be ready now. I'll do another check tomorrow, just to see whether my eyes are not deceiving me, if they're not, then i'll probably upload svg + png tomorrow or one of the upcoming days.

[scribblemaniac]

@CandyFace What's the status of this? I would like to see these make it into the next release.

[CandyFace]

@scribblemaniac Hmm well since it was discussed in another thread that we should be focusing on bug fixing, I've put it on hold for now. All icons are more or less done though, just a bit more polishing

[CandyFace]

Alright i've made a PR now ;)