I'm interested in redesigning all icons in the software

[Fatih20]

Issue Summary

Many of the icons in this software frankly feel outdated and they're not even in svg. Also, they don't look like they have the same design philosophies.

### Expected Results The icon would be better than they currently are now and will look like they are made with the same design principles. ### Video or Image Reference  ### Steps to reproduce 1. Open the app 2. Look at the icons ### System Information + Pencil2D Version: 0.61.1 + Operating System: elementaryOS Hera 5.1 + RAM Size: 16 GB + Graphics Tablet: None

[Fatih20]

Is there any reason to keep these pngs? If not, I wanted to clear it.

[davidlamhauge]

I'm still a little in doubt, concerning the 'Clear Canvas' icon. I doodled a little, and then searched for 'clear icon', and found something that was more in my line of thinking, than the recycle basket and the red cross. What do you think? Is it to cartoony? It must of course be redisgned to look more like the others, but I like the idea that you throw something into a wastebasket. Just an idea... Besides that, I think it looks good so far.

[Fatih20]

I'm still a little in doubt, concerning the 'Clear Canvas' icon. I doodled a little, and then searched for 'clear icon', and found something that was more in my line of thinking, than the recycle basket and the red cross. What do you think? Is it to cartoony? It must of course be redisgned to look more like the others, but I like the idea that you throw something into a wastebasket. Just an idea... Besides that, I think it looks good so far.

I think it's an interesting idea and I actually have explored the trash can, but the way the icon is displayed is not big enough for the trash can to be recognizable, at least from what I've tried. I'll circle back to the feedbacks regarding the tools icon but for now I'll be moving on to the other icons in other widgets first.

[chchwy]

The "Clear canvas" icon is not a trash can in the early days. It was a crumpled paper. (I like it actually )

A screenshot: https://images.app.goo.gl/he22ZyGY8MofBX1V8

Just want to say it's not necessary to be a trash can.

[Fatih20]

The "Clear canvas" icon is not a trash can in the early days. It was a crumpled paper. (I like it actually )

A screenshot: https://images.app.goo.gl/he22ZyGY8MofBX1V8

Just want to say it's not necessary to be a trash can.

The crumpled paper is also an idea that I've thought but it was pretty difficult to make. I'll circle back to it along with @CandyFace criticism of the smudge tool. However, I have to say that using crumpled paper means that it would probably have to be white or light-ish gray. Since the widget itself is white, there could be an accesibility issue there, I had to look closer to my screen to recognize the crumpled paper that you've shown on that image. I'll re-explore the idea later though.

[Fatih20]

I've cleaned up the app/data/icons, this is how it looked now. I had to modify quite a lot of cpp and ui files to make it work.

[Fatih20]

I've redesigned the icons in the display, onion skin, and color palette widget.

[Fatih20]

Screenshotted the wrong app lmao. Here's how the new preferences looked like.

[davidlamhauge]

The Pencil looks a little old fashioned, but we should keep it. It looks fine to me. When I saw the four buttons in the Shortcuts, I imagined a :heart: on the upper one, and a 'P2D' on the three lower ones, but that's probably too hippie-like :peace_symbol: :laughing:

[Fatih20]

I was looking into redesigning the icons in the menu bar but is it really necessary to even have icons in there? Most software nowadays doesn't have icons in their menu bar.

[Fatih20]

Also, I've redesigned the error icons but I don't know how to trigger the error dialog to test how it would look.

[MrStevns]

A lot of changes... let me try to get through it all

.
Pen: Looks good to me now.

---

Clear frame: I like the idea but I think it's too ambiguous still, I've played with a similar concept before but my conclusion was that it's difficult to understand the meaning just from looking at the icon. The rip could be interpreted as several things eg. a new page, folding, layer. Another alternative could be a skull. I personally still like the idea of a trash can but I agree adding enough detail to make it obvious what it is, can be difficult at ~30 pixels. I've also tried crumbled paper but as you state, it quickly becomes a mess of shades, which does not fit the current style you're going for.

---

Layer identity icons: I like these, no feedback in particular.

---

These has been made based on the old design but it really doesn't make much sense, to make sure they won't be obsolete after our timeline rewrite, it would be better if you designed the icons based on the timeline mockup I mentioned earlier #533. Here's how I envisioned the layer and keyframe icons should look like.

Ignore the dropdown triangle on the duplicate icon, that's a future feature thing...

---

Sound icon: The left one should show the state of the button, eg. waves when it's on and no waves when it's off (like the shown icon).
Sound scrub icon: The scrubber is too dark here, you can hardly see red color, try a lighter base instead or change the color of the speaker.

---

Playback icons: These are fine

---

Onion skin previous/next: Not sure what you wanted to achieve here but I find it's too abstract. What are the stripes supposed to convey? I think it's better to go with a simple palette upgrade in this case, eg.

---

Onion skin colorize previous, next: Again the same with the stripes, not sure what it's meant to convey but I do not feel like I get much info from the icon alone, it's visually too similar to the other icons. My own take on this would either be something similar to the current implemented ones, with paper laying on top of each other or alternatively go with something like this...

If it's not obvious, these are light bulbs, The blue will light next frame, based on the direction the light is pointing and the red will light the previous frames.

---

Flip view hori/vertically: These looks visually fine but context wise they're meant to flip the view, maybe it could be conveyed in the icon better than simple arrows.

---

I think you've misunderstood these icons and that's understandable if you thought they were related to the overlay icons. The invisible and outline icons are for vector only, the first one is to show a line that's invisible and the outline icon next to it will show any vector drawing as an outline.

As such I do not think they convey their intend properly.

---

These looks fine to me, although maybe less informative than the current ones, eg. the last icon only contains one box but in reality there will be two.

---

Looks fine to me, although the Hammer feels a bit out of place compared to the rest of them.

[Fatih20]

Okay, before addressing the other previous feedback and your current one, I'll be finishing the redesign of the menubar icon and make a pull request so people would be able to experience the first hand. I'll refine the icons further from there.

Sound icon: The left one should show the state of the button, eg. waves when it's on and no waves when it's off (like the shown icon). Sound scrub icon: The scrubber is too dark here, you can hardly see red color, try a lighter base instead or change the color of the speaker.

The first one has an obvious line crossing the sounds. I'll look into improving the second.

[Fatih20]

Flip view hori/vertically: These looks visually fine but context wise they're meant to flip the view, maybe it could be conveyed in the icon better than simple arrows.

These looks fine to me, although maybe less informative than the current ones, eg. the last icon only contains one box but in reality there will be two. Regarding these, I think I've made a fix. The blue background is supposed to be the canvas so I think it's pretty consistent.

[Fatih20]

I've made a PR #1361. You can download the fork, compile it for yourself, and have a firsthand experience with the icons and provide feedbacks.

[Fatih20]

I think you've misunderstood these icons and that's understandable if you thought they were related to the overlay icons. The invisible and outline icons are for vector only, the first one is to show a line that's invisible and the outline icon next to it will show any vector drawing as an outline.

As such I do not think they convey their intend properly.

I don't understand, why is the first line you drew with the pencil classified as "invisible" and will only be shown with the "Show Invisible Lines" button?

[Fatih20]

These has been made based on the old design but it really doesn't make much sense, to make sure they won't be obsolete after our timeline rewrite, it would be better if you designed the icons based on the timeline mockup I mentioned earlier #533. Here's how I envisioned the layer and keyframe icons should look like.

Ignore the dropdown triangle on the duplicate icon, that's a future feature thing...

I assume the layers buton is still for adding and removing layers?

[MrStevns]

I don't understand, why is the first line you drew with the pencil classified as "invisible" and will only be shown with the "Show Invisible Lines" button?

It's based on an old way pencil did its workflow, mixing vector and bitmap. The invisible stroke was/is meant to be used for filling so you could lay down a stroke that will in the end become invisible and only the fill would be shown.

It is only shown when you lay down the stroke because it's highlighted, once you deselect it, it becomes invisible, unless the "show invisibile line" is enabled.

I assume the layers buton is still for adding and removing layers?

Yes, the left layer button is for adding layers, showing an arrow down because a drop-down menu will appear. The right button is to remove a layer.

[scribblemaniac]

Also, I've redesigned the error icons but I don't know how to trigger the error dialog to test how it would look.

A simple way to trigger the error dialog is to follow these steps:

1. Open a project in Pencil2D.
2. Rename that project on your file system.
3. Try to open the file again from the recent files dialog.

You can trigger the warning dialog easily by trying to draw on a hidden layer.

[Fatih20]

I've redesigned the show lines icon. This is pretty literal, I have other idea for a more abstract icon. @CandyFace

[Fatih20]

Also, I've redesigned the error icons but I don't know how to trigger the error dialog to test how it would look.

A simple way to trigger the error dialog is to follow these steps:

1. Open a project in Pencil2D.

2. Rename that project on your file system.

3. Try to open the file again from the recent files dialog.

You can trigger the warning dialog easily by trying to draw on a hidden layer.

Tried this. This is how the dialog error look now.

[Fatih20]

I've recolored the hand icon to look more like skin. @CandyFace Can you elaborate on what you think is inadequate regarding the smudge tool icon?

[Fatih20]

Also, here's how the timeline icons will look. This is the new one I've made after your request.

[Fatih20]

Also also, I have redesigned the onion skin.

[MrStevns]

Yes this is much better

@CandyFace Can you elaborate on what you think is inadequate regarding the smudge tool icon?

I don't think it conveys the functionality of the tool better than the current icon, it's visually too similar to the hand icon, eg. the thumb is the same but rotated 45 deg but if you consider your thumb anatomically, then I do not think it make sense. To me it looks more like a pointy finger rather than your finger about to or already smudging.

My own take here:

The smudge fingers is slightly bended, it's a bit longer, the highlight is clearer, making the index finger more focused than the rest. There's a path below the fingers, conveying the action of the tool, eg. dragging your finger.

At 100%: Mine

Yours:

Here's the svg if you need inspiration. smudge-icon.svg.zip

---

These are fine, although I liked the cross, because it's a known symbol and has a well established meaning. I do not think the red color carry enough meaning in itself.

---

Not a fan of that dark background and I think the colors has lost their meaning now, everything is important so nothing is important or something... What does blue mean, no one knows but it's pretty, that doesn't work for me. The blue icon is about as informative as our current duplicate icon eg. the (+) button with a slightly smaller plus underneath it, which is no good. I'd like a bit more conventional icon type for the duplicate keyframe, there are plenty of duplicate icons to take inspiration from. It should be easy to tell the icons apart, even for a colorblind person.

Same critique about the missing cross, I like that there's always an easy way to distinguish what the button does, in this case it should delete a keyframe and the cross ensures that the user knows what the button will do. In the latest design you posted the red color could mean anything, especially in a context of a white and blue icon next to it, so I'd be worried that it wouldn't be well enough explained.

It's not by coincidence that I gave the layer and keyframe delete icon the same palette for the highlighted (red) part, it was to ensure that it's easy to understand the meaning of both icons because of their similar functionality.

---

These looks good to me now, though I'd like to hear what @Jose-Moreno thinks too.

In general you're doing a great and I hope you do not take my criticism and feedback too hard. Keep up the good work 👍

[MrStevns]

Forgot this...

The arrow icons are fine, same with the overlay icons. As for the invisible line and border buttons, I still do not the new icons explain what will happen when I press them. The invisible stroke is not specific to the pencil tool, nor has the pen anything to do with the stroke becoming outlines. Both the brush and pencil can make invisible lines although it would make sense if we limited these actions to certain tools, that's not how it currently is, so I do not think it's a good idea to put tool icons here. The outline button affects all vector strokes, I know Inkscape has the same functionality so maybe study that for a bit and try to come up with a new icon based on your findings. I still think the old icons shown here, does a better job at explaining their action.

[Fatih20]

What about this one

[Fatih20]

Here's how the smudge tool look now.

[Fatih20]

This is the redesigned layer icons.

[MrStevns]

Yes, I think that works much better. Same with the layer icons. It's much easier to understand what the button will do now. Good job 👍 I do miss one thing on the layer + icon though, the arrow that indicates that this will initiate a drop-down action.

This is still very abstract to me. It bears no meaning to the functionality still, what were you trying to achieve with the eye? Or... what am I supposed to get from looking at the dotted line and the eye? The main point that needs to be conveyed in the invisible icon is: A line that goes from dots to nothing, this needs to be conveyed in one way or another, otherwise I feel the icon strays too far away from its functionality. The outline icon should convey any line going from x size to 1 pixel size and fill being removed. No time to draw but here's a description on how I would approach this icon, draw two shapes where the first half is a filled blob, and the second half is only outline and intersect or merge them together or something. Try to convey that the first half is off state and the second half is on state.

Much better, although the thumb looks a little odd, looks a bit too much like a pinky on the wrong side of the hand, the palette and the shade creating the smudge effect works nice though.

[Fatih20]

Yes, I think that works much better. Same with the layer icons. It's much easier to understand what the button will do now. Good job +1 I do miss one thing on the layer + icon though, the arrow that indicates that this will initiate a drop-down action.

I think the dropdown thing should be made its own button and its own icon.

This is still very abstract to me. It bears no meaning to the functionality still, what were you trying to achieve with the eye? Or... what am I supposed to get from looking at the dotted line and the eye? The main point that needs to be conveyed in the invisible icon is: A line that goes from dots to nothing, this needs to be conveyed in one way or another, otherwise I feel the icon strays too far away from its functionality. The outline icon should convey any line going from x size to 1 pixel size and fill being removed. No time to draw but here's a description on how I would approach this icon, draw two shapes where the first half is a filled blob, and the second half is only outline and intersect or merge them together or something. Try to convey that the first half is off state and the second half is on state.

The eye means to "show". Why the dotted line? Because the previous icon uses a dotted line. Can you draw it, please? I'm obviously biased but I think the icon is pretty clear about what it is trying to do.

[Fatih20]

We get many feature requests, and at one time we will make a Text tool, a Shape tool, and maybe a Camera tool(?).

I've looked into this.

[Fatih20]

I'll be redesigning the icons in the core_lib/data/icons next.

In the meantime, I have redesigned the arrow-x icons but I can't seem to find the .cpp or .ui files in which the arrow-vertical and arrow horizontal are used.

[Fatih20]

I'll be redesigning the icons in the core_lib/data/icons next.

In the meantime, I have redesigned the arrow-x icons but I can't seem to find the .cpp or .ui files in which the arrow-vertical and arrow horizontal are used.

It's done. This is how it looks. It's a minute long so I can't make it into GIF. https://open.lbry.com/Screen-record-from-2020-05-27-21.08.51:2?r=Cg1pp5MCWV1a5Nj5jDumPs9b13dNZqWG They are mostly just a resize from the tool icons except for paint bucket which I had to modify a bit and the liquify that I had to make from scratch.

What I needed to do now is to tune the "parameters" to make the cursors fit the new icons, which I've done for the pen tool.

[Fatih20]

Also, this is how the arrow-x icons look now.

[Fatih20]

What I don't understand is the hand tool. Where does it get its icon? And if it's possible to change it.

[MrStevns]

The eye means to "show". Why the dotted line? Because the previous icon uses a dotted line. Can you draw it, please? I'm obviously biased but I think the icon is pretty clear about what it is trying to do. The dotted line has importance, you shouldn't add it only because the previous icon has it, you need to understand its meaning, so you can design the icon properly. The dotted line is how the line is rendered when shown as invisible

at 100%:

If you're in doubt, the first icon is the invisible line and the next is the outline icon.

I made these quickly, so there's room for improvement but it should give you an idea. I designed the invisible icon based on the old one with one apparent change, the dots are now appearing after the first half of the icon (from left to right). This imo. makes more sense because the off state is invisible and the on state is visible. I've improved the visibility of the dots and added some extra stuff like the fade in effect of the "invisible" dots (think ghost steps from cartoons...)

---

I think the dropdown thing should be made its own button and its own icon.

I don't see why it should, what would the argument be for such a change and what would happen to the current layer button?

---

In the meantime, I have redesigned the arrow-x icons but I can't seem to find the .cpp or .ui files in which the arrow-vertical and arrow horizontal are used.

The vertical and horizontal arrow icons are not in use currently but they're meant to be used with the selection and move tool.

---

Also, this is how the arrow-x icons look now.

The Diagonal arrows are fine, the move arrow is not, it needs to be contain two colors (typically an outline) to be able to see on a single color background, eg. if the background was black, then it would be impossible to see. This is a general rule when you design icons that are to be used as a cursor.

---

What I don't understand is the hand tool. Where does it get its icon? And if it's possible to change it.

The hand tool uses the system hand but it could be changed. If that were to happen then it would need an open and closed hand icon, otherwise it would be less intuitive than the current one and therefore meaningless... in my opinion.

[Fatih20]

The eye means to "show". Why the dotted line? Because the previous icon uses a dotted line. Can you draw it, please? I'm obviously biased but I think the icon is pretty clear about what it is trying to do. The dotted line has importance, you shouldn't add it only because the previous icon has it, you need to understand its meaning, so you can design the icon properly. The dotted line is how the line is rendered when shown as invisible

at 100%:

If you're in doubt, the first icon is the invisible line and the next is the outline icon.

I made these quickly, so there's room for improvement but it should give you an idea. I designed the invisible icon based on the old one with one apparent change, the dots are now appearing after the first half of the icon (from left to right). This imo. makes more sense because the off state is invisible and the on state is visible. I've improved the visibility of the dots and added some extra stuff like the fade in effect of the "invisible" dots (think ghost steps from cartoons...)

Interesting, I'll look into this.

I think the dropdown thing should be made its own button and its own icon.

I don't see why it should, what would the argument be for such a change and what would happen to the current layer button?

There would be 3 button, the layer dropdown, add layer, and remove layer. The argument is that with current icon that already has a plus, it would be hard to convey another message of layer options. Alternatively, I could make the current add icons to be more ambiguous (like my previous proposal).

In the meantime, I have redesigned the arrow-x icons but I can't seem to find the .cpp or .ui files in which the arrow-vertical and arrow horizontal are used.

The vertical and horizontal arrow icons are not in use currently but they're meant to be used with the selection and move tool.

Also, this is how the arrow-x icons look now.

The Diagonal arrows are fine, the move arrow is not, it needs to be contain two colors (typically an outline) to be able to see on a single color background, eg. if the background was black, then it would be impossible to see. This is a general rule when you design icons that are to be used as a cursor.

Ah, you're right I overlooked it.

What I don't understand is the hand tool. Where does it get its icon? And if it's possible to change it.

The hand tool uses the system hand but it could be changed. If that were to happen then it would need an open and closed hand icon, otherwise it would be less intuitive than the current one and therefore meaningless... in my opinion.

Correct, I could make a closed and open hand icon.

[Fatih20]

Here's a quick fix for the arrow move with dark background.

[MrStevns]

There would be 3 button, the layer dropdown, add layer, and remove layer. The argument is that with current icon that already has a plus, it would be hard to convey another message of layer options. Alternatively, I could make the current add icons to be more ambiguous (like my previous proposal).

Depending on the situation, you would either want to add a bitmap, vector, sound or camera layer. What you suggest here would be to favor one of the layer types as the standard layer button and use the drop-down otherwise.

Maybe that could work if the layer button saved and used the most recent added layer, eg. by default it would for example add a bitmap layer but if your most recent added layer was a vector layer, then it would create that instead. For that to work well though, the layer add icon would have to convey what layer type was used most recently, otherwise there could be times where you wouldn't know what kind of layer the button would add.

I'd need more opinions from the other developers before I'd implement something like that.

[Fatih20]

Wait a sec, the reworked timeline will have the same behaviour of the add layer button as the current implementation? If so, I think it's perfectly fine to keep the icon as my latest proposal, no need to add a dropdown icon to it.

[MrStevns]

Yes but there's an important difference in your current proposed icon and the one I designed for the mockup, the mockup layer icon contains a drop-down arrow because I want to emphasis that it's not a normal button (this information would also be nonexistent on our current icon, if not for that ugly arrow appearing behind the icon) but requires user interaction again once clicked. The reason I like your current proposal more than the old proposal is because it's less ambiguous. You can clearly see intend of the button, where as before you had three similar icons, only different in color, which in their own didn't say much about what they intended to do because they were all colorful.

You could also mix the two proposals you had, make the delete icon colorful but keep the duplicate more in style of the add frame button from the new proposal.

I still think the cross makes it easier to understand than an icon that's just red but even the raw red delete icon bears more meaning to it now because there's no other icon of such a striking color.

[Fatih20]

Yes but there's an important difference in your current proposed icon and the one I designed for the mockup, the mockup layer icon contains a drop-down arrow because I want to emphasis that it's not a normal button (this information would also be nonexistent on our current icon, if not for that ugly arrow appearing behind the icon) but requires user interaction again once clicked.

I have to disagree that this "requiring another user interaction after clicked" needs to be conveyed. Both in Inkscape and GIMP when adding a new layer, it will trigger a user dialog asking you "what kind of layer do you want?", "where do you want to put it relative to the other layers?". Yet, their icon is the exact same between adding and removing layer. It's just a convention that if you ask a software, "I want to add x", it will ask you back "what kind of x?". The user doesn't need to be told that the button will require additional action because they know the app will, one way or another, ask the user what type of layer the user wanted. The user already know that there are more than one type of layer when they opened the app. When the user clicked on add layer, they know that they'll have to specify what type of layer, they expect the app to ask them. The user doesn't expect the app to read their minds and magically add the layer they want just by clicking a button without any further actions. As such. because the user already know this, it doesn't need to be told through the icon.

Regarding the remove layer and keyframes, the red is already different from the base icon for adding them. If you think the red is insufficient we will switch to another way to conveying the message of deleting, not adding on top of the red. Conveying the same message through 2 way is wasteful and makes the icon looks unnecessarily complex. It's either the red or the cross, unless there are another action that specifically uses just red, only then we need the additional cross to add on top of the red to differentiate between that fictional action and delete.

[Fatih20]

Here's my new sketch of the show outlines icon.

[Fatih20]

Changed it to white to better contrast the green. This is how it looked like. Ignore the invisible line icon.

[MrStevns]

I'm not saying they need to now but that it's nice to know, to say that GIMP or Inkscape does it is not a good argument, since open source applications usually go with functionality over quality, which can be applied to pencil2D too. Inkscape recently got a nice makeover but that doesn't mean the UX part of it has become any better (some of it has though). My point is that you can't argue that x is fine because y application does it, unless that application is seen as state of the art of good UI/UX or something or has meaningful numbers to backup the way its doing things.

To say that having color and a symbol makes the icon unnecessarily complex and wasteful, is a bit silly. Red is simply a color, it doesn't say much about its intend in a context of hundred of colorful icons. You might or might not expect it to do what you want but the color does say that you should be wary, because we often signal "dangerous" behaviors through the use of red color. Consider Mac OS window, which contains red, yellow and green color for close, minimize, expand. The button is only color at the beginning, which is aesthetically pleasing (biased) and not needed as I don't necessarily intend to press the button but as you hover over the buttons, the intend is conveyed in form of either a cross, - or expanding arrows, because now you want to know what the button will do as you might want to do either action, since it could potentially be an absolute action. There's no golden rule although there are plenty of established conventions. It's our job as designers to help the user understand the intend of any action, no we do not need to be mind readers but the the easier we make it for them, the better the experience will be.

If you search for "delete icon" and check images, you'll see that every second image contains red color and a cross, so I disagree that you disagree with me about not being able to have a cross on a red background in the icon :P the number of similar icons speak for itself

But let's put this discussion aside, we can go with your latest proposal.

Yes this is much better 👍 although I'd turn the fill/non fill around but that's because I expect left to be disable and right to be enable.

[Fatih20]

Here's the design on the show invisible icon.

[Fatih20]

Alright, I got the open and closed hand cursor icons. Just need to get it working. This is the icon for the closed hand. This is as far as I got. I got this by copypasting the Qtcursor section from buckettool.cpp to handtool.cpp and changing the icon to the hand icon. How do I get it to respond to active and inactive to make it change between open and closed?

[MrStevns]

Haven't tested but I'd think this should be enough. return mIsHeld ? QCursor(QPixmap(":/icons/hand-closed.svg")) : QCursor(QPixmap(":/icons/hand-open.svg"));

edit: fixed typo..

[Fatih20]

Haven't tested but I'd think this should be enough. return mIsHeld ? QCursor(QPixmap(":/icons/hand-closed.svg")) : QCursor(QPixmap(":/icons/hand-open.svg));

You forgot " after the filename I think.