search

pencil2d / pencil

Pencil2D is an easy, intuitive tool to make 2D hand-drawn animations. Pencil2D is open source and cross-platform.
http://pencil2d.org
GNU General Public License v2.0
1.45k stars 271 forks source link

I'm interested in redesigning all icons in the software #1356

Closed Fatih20 closed 11 months ago

Fatih20 commented 4 years ago

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 ![image](https://user-images.githubusercontent.com/51940383/82531496-b80db980-9b69-11ea-89ec-9cf7b388d98c.png) ### 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
MrStevns commented 4 years ago

Hi and thanks for taking interest

You're absolutely right, a lot of the icons are old and hasn't been updated. The newest icons are the toolbox icons, which are available as svg.

You're welcome to give it a try, then we can consider making an icon pack or something. I personally like detailed icons, even though it doesn't quite feel like 2020 but that's my preference. I've designed the toolbox icons, and while it's not there, there's a simplified version of the icons too.

All other icons are old and does not exist in svg nor have they been designed by me.

If you look around though you'll see that the timeline will be reworked and the icons has gotten a rework there too.

https://github.com/pencil2d/pencil/issues/533

Fatih20 commented 4 years ago

Hi and thanks for taking interest

You're absolutely right, a lot of the icons are old and hasn't been updated. The newest icons are the toolbox icons, which are available as svg.

You're welcome to give it a try, then we can consider making an icon pack or something. I personally like detailed icons, even though it doesn't quite feel like 2020 but that's my preference. I've designed the toolbox icons, and while it's not there, there's a simplified version of the icons too.

All other icons are old and does not exist in svg. If you look around though you'll see that the timeline will be reworked and the icons has been updated there too.

533

No, no, I'm not arguing against detailed icons. What I'm arguing for is that it's inconsistent in terms of style and the color palette it uses. Given that I've gotten your blessings, I'll start working on it.

Fatih20 commented 4 years ago

Also, what's the file that corresponds to what icons are being used for the ui? I'm also interested in renaming some of the icons you got here.

Fatih20 commented 4 years ago

And why is some icon in svg has almost identical copy of itself?

MrStevns commented 4 years ago

The "new" folder contains the most recent toolbox icons, the ones we use currently has "_detailed" behind its name. If you're referring to the svg files that are named "detailed" and "flat_outline" when you say "almost identical copy", you'll notice that the style is different... the more cartoonish looking icons (flat_outline) are not used currently.

You might want to post your designs as you complete them here, so we can discuss your results rather than create a pull request that is not finished yet because redesigning all the icons is not something that's done nor approved overnight.

Here's the last issue I created when I started the first redesign. https://github.com/pencil2d/pencil/issues/603

MrStevns commented 4 years ago

The resources we use are more or less this

<RCC>
    <qresource prefix="/">
        <file>icons/clear.png</file>
        <file>icons/remove.png</file>
        <file>icons/add.png</file>
        <file>icons/magnify.png</file>
        <file>icons/layer-vector.png</file>
        <file>icons/layer-bitmap.png</file>
        <file>icons/layer-sound.png</file>
        <file>icons/layer-camera.png</file>
        <file>icons/controls/play.png</file>
        <file>icons/controls/loop.png</file>
        <file>icons/controls/sound.png</file>
        <file>icons/prefspencil.png</file>
        <file>icons/prefstimeline.png</file>
        <file>icons/prefs-files.png</file>
        <file>background/weave.jpg</file>
        <file>background/dots.png</file>
        <file>background/grid.jpg</file>
        <file>icons/logo.png</file>
        <file>icons/icon.png</file>
        <file>icons/open.png</file>
        <file>icons/copy.png</file>
        <file>icons/paste.png</file>
        <file>icons/next.png</file>
        <file>icons/prev.png</file>
        <file>icons/save.png</file>
        <file>icons/saveas.png</file>
        <file>icons/undo.png</file>
        <file>icons/redo.png</file>
        <file>icons/new.png</file>
        <file>icons/controls/endplay.png</file>
        <file>icons/controls/startplay.png</file>
        <file>icons/controls/duplicate.png</file>
        <file>icons/exit.png</file>
        <file>icons/cut.png</file>
        <file>icons/prefs-shortcuts.png</file>
        <file>background/checkerboard.png</file>
        <file>icons/controls/stop.png</file>
        <file>icons/controls/sound-disabled.png</file>
        <file>icons/new/svg/arrow.svg</file>
        <file>icons/new/svg/brush_detailed.svg</file>
        <file>icons/new/svg/bucket_detailed.svg</file>
        <file>icons/new/svg/eraser_detailed.svg</file>
        <file>icons/new/svg/eyedropper_detailed.svg</file>
        <file>icons/new/svg/hand_detailed.svg</file>
        <file>icons/new/svg/line.svg</file>
        <file>icons/new/svg/pen_detailed.svg</file>
        <file>icons/new/svg/pencil_detailed.svg</file>
        <file>icons/new/svg/selection.svg</file>
        <file>icons/new/svg/smudge_detailed.svg</file>
        <file>icons/new/svg/trash_detailed.svg</file>
        <file>icons/new/checkerboard_smaller</file>
        <file>icons/new/arrow-diagonalleft.png</file>
        <file>icons/new/arrow-diagonalright.png</file>
        <file>icons/new/arrow-horizontal.png</file>
        <file>icons/new/arrow-selectmove.png</file>
        <file>icons/new/arrow-vertical.png</file>
        <file>icons/overlayCenter.png</file>
        <file>icons/overlayGoldenRatio.png</file>
        <file>icons/overlaySafe.png</file>
        <file>icons/overlayThirds.png</file>
        <file>icons/overlay_center.png</file>
        <file>icons/overlay_godenratio.png</file>
        <file>icons/overlay_safe.png</file>
        <file>icons/overlay_third.png</file>
        <file>icons/controls/soundscrub.png</file>
        <file>icons/controls/soundscrub-disabled.png</file>
    </qresource>
    <qresource prefix="/app">
        <file>icons/onion-blue.png</file>
        <file>icons/onion-red.png</file>
        <file>icons/onionNext.png</file>
        <file>icons/onionPrev.png</file>
        <file>icons/thinlines5.png</file>
        <file>icons/outlines5.png</file>
        <file>icons/mirror.png</file>
        <file>icons/mirrorV.png</file>
        <file>icons/dialog-error.svg</file>
        <file>pencil2d_quick_guide.pdf</file>
        <file>icons/new/svg/color-dialog.svg</file>
        <file>icons/new/svg/more_options.svg</file>
    </qresource>
</RCC>

This list is made based on our master branch, which has a bunch of new icons compared to the version you're using.

Fatih20 commented 4 years ago

The resources we use are more or less this

<RCC>
    <qresource prefix="/">
        <file>icons/clear.png</file>
        <file>icons/remove.png</file>
        <file>icons/add.png</file>
        <file>icons/magnify.png</file>
        <file>icons/layer-vector.png</file>
        <file>icons/layer-bitmap.png</file>
        <file>icons/layer-sound.png</file>
        <file>icons/layer-camera.png</file>
        <file>icons/controls/play.png</file>
        <file>icons/controls/loop.png</file>
        <file>icons/controls/sound.png</file>
        <file>icons/prefspencil.png</file>
        <file>icons/prefstimeline.png</file>
        <file>icons/prefs-files.png</file>
        <file>background/weave.jpg</file>
        <file>background/dots.png</file>
        <file>background/grid.jpg</file>
        <file>icons/logo.png</file>
        <file>icons/icon.png</file>
        <file>icons/open.png</file>
        <file>icons/copy.png</file>
        <file>icons/paste.png</file>
        <file>icons/next.png</file>
        <file>icons/prev.png</file>
        <file>icons/save.png</file>
        <file>icons/saveas.png</file>
        <file>icons/undo.png</file>
        <file>icons/redo.png</file>
        <file>icons/new.png</file>
        <file>icons/controls/endplay.png</file>
        <file>icons/controls/startplay.png</file>
        <file>icons/controls/duplicate.png</file>
        <file>icons/exit.png</file>
        <file>icons/cut.png</file>
        <file>icons/prefs-shortcuts.png</file>
        <file>background/checkerboard.png</file>
        <file>icons/controls/stop.png</file>
        <file>icons/controls/sound-disabled.png</file>
        <file>icons/new/svg/arrow.svg</file>
        <file>icons/new/svg/brush_detailed.svg</file>
        <file>icons/new/svg/bucket_detailed.svg</file>
        <file>icons/new/svg/eraser_detailed.svg</file>
        <file>icons/new/svg/eyedropper_detailed.svg</file>
        <file>icons/new/svg/hand_detailed.svg</file>
        <file>icons/new/svg/line.svg</file>
        <file>icons/new/svg/pen_detailed.svg</file>
        <file>icons/new/svg/pencil_detailed.svg</file>
        <file>icons/new/svg/selection.svg</file>
        <file>icons/new/svg/smudge_detailed.svg</file>
        <file>icons/new/svg/trash_detailed.svg</file>
        <file>icons/new/checkerboard_smaller</file>
        <file>icons/new/arrow-diagonalleft.png</file>
        <file>icons/new/arrow-diagonalright.png</file>
        <file>icons/new/arrow-horizontal.png</file>
        <file>icons/new/arrow-selectmove.png</file>
        <file>icons/new/arrow-vertical.png</file>
        <file>icons/overlayCenter.png</file>
        <file>icons/overlayGoldenRatio.png</file>
        <file>icons/overlaySafe.png</file>
        <file>icons/overlayThirds.png</file>
        <file>icons/overlay_center.png</file>
        <file>icons/overlay_godenratio.png</file>
        <file>icons/overlay_safe.png</file>
        <file>icons/overlay_third.png</file>
        <file>icons/controls/soundscrub.png</file>
        <file>icons/controls/soundscrub-disabled.png</file>
    </qresource>
    <qresource prefix="/app">
        <file>icons/onion-blue.png</file>
        <file>icons/onion-red.png</file>
        <file>icons/onionNext.png</file>
        <file>icons/onionPrev.png</file>
        <file>icons/thinlines5.png</file>
        <file>icons/outlines5.png</file>
        <file>icons/mirror.png</file>
        <file>icons/mirrorV.png</file>
        <file>icons/dialog-error.svg</file>
        <file>pencil2d_quick_guide.pdf</file>
        <file>icons/new/svg/color-dialog.svg</file>
        <file>icons/new/svg/more_options.svg</file>
    </qresource>
</RCC>

This list is made based on our master branch, which has a bunch of new icons compared to the version you're using.

No, I mean, the cpp file or whatever that dicatet which icon goes where, the one which manages the UI.

MrStevns commented 4 years ago

It comes down to the specific widget. In some widgets, you will find the icon specified in the .cpp file, pointing to a resource like I posted earlier, while in other cases it'll be located in the .ui file of the corresponding widget.

Fatih20 commented 4 years ago

It comes down to the specific widget. In some widgets, you will find the icon specified in the .cpp file, pointing to a resource like I posted earlier, while in other cases it'll be located in the .ui file of the corresponding widget.

Can you give me a directory of each of those files?

scribblemaniac commented 4 years ago

Can you give me a directory of each of those files?

Just search for the filename in github and it will show all the places in the code where that resource is used.

I second what @CandyFace has said that you should be posting updates here and discussing things with the rest of the team. Development nor design happen in isolation.

Also, while I agree with your desire for more consistent design principles, I do not believe that the toolbox icons are the problem. Quite frankly they are by far the best icons we have, and it is things like the timeline, menu, and display icons which I would be interested in seeing improved to match the tool icons.

Yet another thing. So you are aware, any SVGs you make for this should conform to the SVG Tiny specification with no dynamic features (ECMA scripts/DOM manipulation) as that is all that the framework we use supports.

Fatih20 commented 4 years ago

Also, while I agree with your desire for more consistent design principles, I do not believe that the toolbox icons are the problem. Quite frankly they are by far the best icons we have, and it is things like the timeline, menu, and display icons which I would be interested in seeing improved to match the tool icons.

You're right, they are. I still think that they aren't consistent in principle and could be improved. If you want to opine about the development, it's better to discuss it in the pull request tho.

MrStevns commented 4 years ago

I disagree, the pull request should be made when it's done, discussion about the designs should be made here, before the pull request is made. That is how we usually do the development.

Fatih20 commented 4 years ago

I disagree, the pull request should be made when it's done, discussion about the designs should be made here, before the pull request is made. That is how we usually do the development.

Dude, I already made the pull request, you should have said this earlier. I already mentioned this issue in the PR. Scroll up in this thread.

Fatih20 commented 4 years ago

I disagree, the pull request should be made when it's done, discussion about the designs should be made here, before the pull request is made. That is how we usually do the development.

I'd have to respectfully disagree, sir. I don't know what is the best for coding a new feature but I don't think this approach works well with icon design. Icons can't be seen in a vacuum. To properly analyze and see how they go together, I can't just post the photos of icons here and let people judge it from there as it won't be sufficient in judging whether the icon is good or bad. You should interface and interact with it directly within the app to be able to see whether the design is good or bad (as I do in every step of doing this). So, I think it's better to make an ongoing PR first where we all can compile the stuff ourself from the fork and see how it'd look in the actual app. Furthermore, it's more efficient than doing it there because in PRs, you can see the changes I've made and compare it side by side with the files I've changed.

Jose-Moreno commented 4 years ago

@Fatih20 Hi. First of all thank you for your consideration in the icon redesign.

We certainly haven't changed most of the icons at the time, not because we "love" them, but because to be honest it is a demanding task and we had to allocate our time for other tasks while waiting to redesign the whole interface, icons included for a later version so everything could have a fresh take while being informed with all the new features that have been added over the years.

I'd have to respectfully disagree, sir. I don't know what is the best for coding a new feature but I don't think this approach works well with icon design. Icons can't be seen in a vacuum.

To be fair, the particular issue at hand is not a matter of coding vs design. This is a matter of adjusting one's workflow to an already established pipeline.

I'm not a programmer, I'm an animator and used to be a graphic designer, so I understand what you're trying to say about the importance of context and I believe the others do too, particularly for UI design, but making a PR at this stage unfortunately assumes your designs will be approved regardless of discussions, and disrupts the existing work pipeline that Pencil2D, and similar FOSS apps, follow for such tasks.

We would definitely like to see sketches, thought process and have a healthy discussion about the choices made for each icon. There are also extravagant features only available to animation software and those will require icons at some point too and those need to be developed from scratch as well.

Don't get me wrong though, I agree that seeing the icons working in the app itself is an integral part of the design experience, but what about non-technical contributors? Since github has no SVG preview for commits or PR's we are forced to download them for individual review and re-compile the application everytime there's an icon modification on the interface. This unfortunately limits the amount of people that can provide an informed opinion if they don't even know how to compile the project.

I don't think it's an outrageous request to post screenshots of the icons both in isolation as well as how they look on the interface before committing, and for every update or batch you plan to commit you can post a comment with said screenshots to host a discussion on the specific icons batch.

Once these updates have been discussed and partially approved then you can submit the svg's to the existing PR. This would help more contributors have a better idea of the changes overall as well as to avoid backtracking on designs that we might have missed previously.

Of course I hope you understand our intent is not to discourage you from working on the icons nor to make your life "harder", since like us you're volunteering your time to this project, but I hope you can see that we do have a procedure for how design & coding tasks are developed and integrated into Pencil2D, and simply making a PR without guiding your potential clients (project contributors & users) through a clear design pipeline that allows for proper review and that integrates with the Pencil2D pipeline, can eventually become harmful for the overall reception & acceptance of your proposals.

Either way thank you again for your time. I'll try to review the icons as soon as my work schedule allows me in order to output my personal feedback on these first commits you already made.

Fatih20 commented 4 years ago

@Fatih20 Hi. First of all thank you for your consideration in the icon redesign.

We certainly haven't changed most of the icons at the time, not because we "love" them, but because to be honest it is a demanding task and we had to allocate our time for other tasks while waiting to redesign the whole interface, icons included for a later version so everything could have a fresh take while being informed with all the new features that have been added over the years.

I'd have to respectfully disagree, sir. I don't know what is the best for coding a new feature but I don't think this approach works well with icon design. Icons can't be seen in a vacuum.

To be fair, the particular issue at hand is not a matter of coding vs design. This is a matter of adjusting one's workflow to an already established pipeline.

I'm not a programmer, I'm an animator and used to be a graphic designer, so I understand what you're trying to say about the importance of context and I believe the others do too, particularly for UI design, but making a PR at this stage unfortunately assumes your designs will be approved regardless of discussions, and disrupts the existing work pipeline that Pencil2D, and similar FOSS apps, follow for such tasks.

In past contributions I designed the icon as I push the commit through PRs, if you do things differently, that's fine, I'll follow.

We would definitely like to see sketches, thought process and have a healthy discussion about the choices made for each icon. There are also extravagant features only available to animation software and those will require icons at some point too and those need to be developed from scratch as well.

I can provide you this.

Don't get me wrong though, I agree that seeing the icons working in the app itself is an integral part of the design experience, but what about non-technical contributors? Since github has no SVG preview for commits or PR's we are forced to download them for individual review and re-compile the application everytime there's an icon modification on the interface. This unfortunately limits the amount of people that can provide an informed opinion if they don't even know how to compile the project.

Github has SVG preview for commits in a PRs, by the way. In the development of the icons I've made a bash script within the app directories that can compile the app in one command given all dependencies are installed.

I don't think it's an outrageous request to post screenshots of the icons both in isolation as well as how they look on the interface before committing, and for every update or batch you plan to commit you can post a comment with said screenshots to host a discussion on the specific icons batch.

Once these updates have been discussed and partially approved then you can submit the svg's to the existing PR. This would help more contributors have a better idea of the changes overall as well as to avoid backtracking on designs that we might have missed previously.

Of course I hope you understand our intent is not to discourage you from working on the icons nor to make your life "harder", since like us you're volunteering your time to this project, but I hope you can see that we do have a procedure for how design & coding tasks are developed and integrated into Pencil2D, and simply making a PR without guiding your potential clients (project contributors & users) through a clear design pipeline that allows for proper review and that integrates with the Pencil2D pipeline, can eventually become harmful for the overall reception & acceptance of your proposals.

Either way thank you again for your time. I'll try to review the icons as soon as my work schedule allows me in order to output my personal feedback on these first commits you already made.

I'm not used to this workflow, but I'll follow this if you think this is how Pencil2D workflow works.

Fatih20 commented 4 years ago

Okay guys, so my so-called "design philosophies" is simplistic skeuomorphism, where it's trying to imitate objects in the real world (not flat at all) but in a cartoon-y or illustrated kind of way. Example of this is the icons in Affinity Designer's actions icon, Affinity Photo's actions icon, or elementaryOS .

So far, I've made the trash, pencil, eraser, selection, pen, and move. This is how they looked like in the actual app. image

The pencil. eraser, and pen has this kind of style (if it's not obvious enough) where it only shows the tip of it. That's because the only part that really matter is the tip. Furthermore, the tip of a fountain pen is relatively small to the whole pen itself. as such, if I were to design it as a whole, it wouldn't really be seen as a pen. This is probably the reason why that the UI designer of Affinity Designer do this to to their pen icon in the screenshot provided.

The trash icon has been replaced with as simple red x button. Because, it's meant to clear frame, not an actual trash bin. The previous icon is misleading to me because I (and probably many user too) thought it's a special cursor that can delete objects upon click, but turns out it's just a self-destruct button. It's even more so misleading because it has a recycle logo on the trash bin, even though when you use it, there's nothing being recycled.

Here's a screenshot to the actual design process. image When designing these icons, I'll keep the icons in the same widget to be level against each other. The importance of this is well said in this video (jump to 7:01)

Jose-Moreno commented 4 years ago

@Fatih20 Hey. thank you for your prompt reply. The lead dev noticed that your PR was closed and I see you closed it yourself. First and foremost I apologize in advance as I think I was unclear regarding that point.

I never said you needed to close your PR, I certainly thought it was part of the discussion, but not necessarily a requirement to continue working. I probably made a mistake while communicating my intent as well so I'm sorry I wasn't clear.

To me providing the screenshots was meant to occur as a complement to the work you were doing already. I personally don't see an issue with keeping the PR up while feeding it the changes. I only asked for the screenshots to help discuss the work more quickly prior to submitting more commits to the PR.

I still agree that we need to compile the application at times while reviewing the icons through Pencil2D's interface, so with all the above taken into consideration, I'll reopen your PR if that's ok with you and the other contributors.

Github has SVG preview for commits in a PRs, by the way. In the development of the icons I've made a bash script within the app directories that can compile the app in one command given all dependencies are installed.

That's good to know. Thanks for taking this into account and making the script. When reviewing your PR I couldn't see the svg's as images, not even as RAW, only as code, which is why I mentioned that, but if others can see it then it's one less issue for the rest 👍

Regarding the icons themselves, I'll need more time to carefully read your full comment. However going by the images and some of the considerations I've read so far, I'm personally liking the icons quite a bit. Thank you for your time 🙇

Fatih20 commented 4 years ago

@Fatih20 Hey. thank you for your prompt reply. The lead dev noticed that your PR was closed and I see you closed it yourself. First and foremost I apologize in advance as I think I was unclear regarding that point.

No biggie. I could always make a new PR.

Fatih20 commented 4 years ago

Github has SVG preview for commits in a PRs, by the way. In the development of the icons I've made a bash script within the app directories that can compile the app in one command given all dependencies are installed.

That's good to know. Thanks for taking this into account and making the script. When reviewing your PR I couldn't see the svg's as images, not even as RAW, only as code, which is why I mentioned that, but if others can see it then it's one less issue for the rest +1

You can see it by clicking this button. image

davidlamhauge commented 4 years ago

Hi @Fatih20 ! Just wanted to say, that I liked your designs so far. I'm sorry you closed your PR. If you look at the list of PRs, you'll see that four of the nineteen PRs are from 2018. Sometimes you make a PR, and it's reviewed and merged within days or weeks, while other times it takes ages, because there are new ideas or other things stopping it. A re-design of the icons are a huge thing, in my world. It'll take many considerations to alter the UI so significantly. It's been refreshing to see a guy like you, come in and give us a solid input, that I think we need. Please consider re-opening the PR, and continue your good work - with patience ;-)

Fatih20 commented 4 years ago

I've spent the whole day continuing the redesign and I've completed 3 more of the icon. The hand, line, and paint bucket. Here's a screenshot of the apps with the redesigned icon so far. image Here's the design process. image

The hand in here is illustrated like it is grabbing something (in this case, the canvas) The line tool in this app can be used to make zig-zag pattern so I tried to show it in the icon without being cluttered. The paint bucket here is the most cumbersome so far because of the many components and shape needed. If you notice, the paint that came out from the bucket looks odd if you look at it closely because it seems to be defying gravity. The paint bucket is tilted 45 degrees downward while the paint itself is pointed 30 degrees downward. This is on purpose. The paint is meant to touch the boundaries I've set (look at the guides in Inkscape) to make it look level when shown with the other icons with icons above, below, and next to it.

Fatih20 commented 4 years ago

Feel free to leave feedback, guys!

davidlamhauge commented 4 years ago

I think it looks good so far. I have comments on two (three) of them: The paint bucket: As you write, it defies gravity, and even if it is on purpose, I don't like it. I saw some of the video you referred to, and I'm aware of the principle, that they should have the same size, but I think the paint should spread more naturally, like I've tried to draw (with my mouse) below. billede The pencil tool: It looks a little clumpsy. I think it should keep the thickness, but the point should be a little longer in my opinion. The delete all: I've never really liked the waste basket. Whether a red cross is better... I don't know. That's about it. It looks promising to me, and I have a request: We get many feature requests, and at one time we will make a Text tool, a Shape tool, and maybe a Camera tool(?). And maybe more. It could be fun to see your idea, on how these tool icons should look.

Fatih20 commented 4 years ago

I think it looks good so far. I have comments on two (three) of them: The paint bucket: As you write, it defies gravity, and even if it is on purpose, I don't like it. I saw some of the video you referred to, and I'm aware of the principle, that they should have the same size, but I think the paint should spread more naturally, like I've tried to draw (with my mouse) below. billede The pencil tool: It looks a little clumpsy. I think it should keep the thickness, but the point should be a little longer in my opinion. The delete all: I've never really liked the waste basket. Whether a red cross is better... I don't know. That's about it. It looks promising to me, and I have a request: We get many feature requests, and at one time we will make a Text tool, a Shape tool, and maybe a Camera tool(?). And maybe more. It could be fun to see your idea, on how these tool icons should look.

What point are you talking about regarding the pencil? Do you mean the black tip? I did make a copy of the paint bucket that doesn't defy gravity but with the different size from the other icons. I'll look into how to make it work.

For the upcoming tools, fortunately, I have worked on another open source project called Xournal which has the three tools you've mentioned. I could just modify it to suit this app better.

Fatih20 commented 4 years ago

Alright, I've tweaked the paint bucket to not defy gravity and I think it does look better. image Here's how it looked up close. image

Jose-Moreno commented 4 years ago

Hi. Here are my comments on the latest tools (polyline, hand, fill tool, pen tool, pencil tool, arrow, eraser). Note that none of my sketches will have the same level of detail as yours (light, shadow)

Hand

Currently it looks like a little fist, since Pencil2D's userbase is widely children and pre-teens, we don't want them to resort to violence (laugh).

I do understand you might have wanted to capture the "action" of grabbing, but in that case I think showing a bit more of the fingers, as it the hand was "about to" grab something, would be best as seen in this rough sketch over your artwork

image

The original hand icon from Pencil was a glove which I always loved due to it's relationship with rubber-hose (1920's-1930's) cartoon hands. But this was changed to a "naked" hand last time they were updated. image I think one positive idea from the original icons is that the fingers are spread if going for a fully open hand.

Another point related to this is the use of 4 vs 5 fingers. To be honest having 4 fingers is jarring. While old cartoons use 4 fingers these have to be thoroughly rounded to work (like a balloon glove) Keeping the "rounded square" shapes will require some adjusting, hence I used 5 fingers instead of 4

image

Lastly I think we should also consider a dynamic angle to suggest motion too, however this is merely an idea, I'm sure there are better solutions that my sketch here:

image

Bucket Tool

As David mentioned portraying gravity is important, so I don't repeat that. However I'm going to suggest using the same circular shapes form your bucket to represent the color on the "floor"

image

As you can see I simply made a circle and then joined the shapes with a free form fill to give it dynamism. Since this is a rushed example on my part i'm sure it can be better integrated. image

Polyline Tool

This one as it is right now reminds me of a stock chart, and I feel Pencil2D is losing stocks haha, this is why I flipped it horizontally.

An additional suggestion is to also consider that the polyline uses control points under the hood and the user has to click once move the mouse and then click again to form the line, so perhaps adding the control points as part of the icon can help make it look like a multi-point connected line so people can understand their use at first.

image

Pen Tool

image

My only suggestion is to round off these sharp edges. Real inking pens are rounded. I understand you might have wanted to emphasize visual constrast between the pen grip and tip (round vs sharp edges) but I think having the extremely sharp tip is enough. This is mainly so it won't be felt aggressively.

Pencil Tool

What David was trying to say as I see it is that the Pencil should be slimmer, right now it looks like a Pencil that's a stump and nearing it's end as it's been sharpened too much.

The comment on the lead shape is valid, perhaps a finer point would work but I think simple making the Pencil body volume thinner will help perceive the lead as sharper. If you try that out, you could probably also make the lead a bit longer by raising these points.

Take a look at the current icon and you'll see that while the lead tip is a bit too small the shaved part actually makes it look like a Pencil because of how much it's being shown.

image

Eraser Tool

I like this one and my only suggestion is to raise the red part a bit so you can see more eraser, i'd say there should be a 1/3 up to 1/2 of visible eraser head as opposed to the red cover. If you see the current icon you can see more of the eraser being shown.

Here's an example of what I mean. image

Arrow tool

I think it's better to use two levels of shading and leave the highlight as the main color (white) that way it will look a bit cleaner. Because right now the bevel effect is a bit complicated.

image

Select Tool

I think this one is fine too, however if we reference the current one, one think I liked is that the icon indicated a sequence of use. I don't know if you know this but the select tool always works by clicking an initial point and then dragging to create a rectangle. That's why there's a cross in the top left corner of the icon. In that sense I think preserving that idea is to be encouraged.

Here's an example

image

Note that all of these are suggestions to improve and not mandatory changes, but please consider them as you refine the icons and also for future icons always think if it's possible to include hints of the functionality as for upcoming icons like those from the timeline must suggest their functionality or resulting action at a glance to consider them an improvement over the current ones (which are ambiguous at best, particularly the keyframe / layer manipulation area).

Fatih20 commented 4 years ago

Hand

Currently it looks like a little fist, since Pencil2D's userbase is widely children and pre-teens, we don't want them to resort to violence (laugh).

I do understand you might have wanted to capture the "action" of grabbing, but in that case I think showing a bit more of the fingers, as it the hand was "about to" grab something, would be best as seen in this rough sketch over your artwork

image

The original hand icon from Pencil was a glove which I always loved due to it's relationship with rubber-hose (1920's-1930's) cartoon hands. But this was changed to a "naked" hand last time they were updated. image I think one positive idea from the original icons is that the fingers are spread if going for a fully open hand.

Another point related to this is the use of 4 vs 5 fingers. To be honest having 4 fingers is jarring. While old cartoons use 4 fingers these have to be thoroughly rounded to work (like a balloon glove) Keeping the "rounded square" shapes will require some adjusting, hence I used 5 fingers instead of 4

image

Lastly I think we should also consider a dynamic angle to suggest motion too, however this is merely an idea, I'm sure there are better solutions that my sketch here:

image

I think the look of the hand is fine as it is. Making it 5 fingers instead of 4 would require me to make the finger thin and makes the icon as a whole more alien when put side by side with the other icons. The hand icon here is trying to imitate when your fingers are bent halfway through, which in my opinion, the icon has succeed in doing that.

Bucket Tool

As David mentioned portraying gravity is important, so I don't repeat that. However I'm going to suggest using the same circular shapes form your bucket to represent the color on the "floor"

image

As you can see I simply made a circle and then joined the shapes with a free form fill to give it dynamism. Since this is a rushed example on my part i'm sure it can be better integrated. image

I'll look into this.

Polyline Tool

This one as it is right now reminds me of a stock chart, and I feel Pencil2D is losing stocks haha, this is why I flipped it horizontally.

An additional suggestion is to also consider that the polyline uses control points under the hood and the user has to click once move the mouse and then click again to form the line, so perhaps adding the control points as part of the icon can help make it look like a multi-point connected line so people can understand their use at first.

image

I think this is a good idea. I'll look into it.

Pen Tool

image

My only suggestion is to round off these sharp edges. Real inking pens are rounded. I understand you might have wanted to emphasize visual constrast between the pen grip and tip (round vs sharp edges) but I think having the extremely sharp tip is enough. This is mainly so it won't be felt aggressively.

I'll fix this.

Pencil Tool

What David was trying to say as I see it is that the Pencil should be slimmer, right now it looks like a Pencil that's a stump and nearing it's end as it's been sharpened too much.

The comment on the lead shape is valid, perhaps a finer point would work but I think simple making the Pencil body volume thinner will help perceive the lead as sharper. If you try that out, you could probably also make the lead a bit longer by raising these points.

Take a look at the current icon and you'll see that while the lead tip is a bit too small the shaved part actually makes it look like a Pencil because of how much it's being shown.

I don't think simply making the tip longer is a good idea because I have tried it. I think the proper solution is to make the tip sharper so it doesn't look stumped even if it's short.

image

Eraser Tool

I like this one and my only suggestion is to raise the red part a bit so you can see more eraser, i'd say there should be a 1/3 up to 1/2 of visible eraser head as opposed to the red cover. If you see the current icon you can see more of the eraser being shown.

Here's an example of what I mean. image

In my opinion, the previous one is fine. Making the red part longer (I've experimented with it before) could makes the people who uses the app to mistake the red part (which is cropped by the canvas) to look more like an arrow instead of looking like an eraser. This is a problem that happened with the previous icon. Making it slanted to counteract the problem would make it look bizarre because no (or at least not common) real eraser has a slanted cover.

Arrow tool

I think it's better to use two levels of shading and leave the highlight as the main color (white) that way it will look a bit cleaner. Because right now the bevel effect is a bit complicated.

image

I'll look into this.

Select Tool

I think this one is fine too, however if we reference the current one, one think I liked is that the icon indicated a sequence of use. I don't know if you know this but the select tool always works by clicking an initial point and then dragging to create a rectangle. That's why there's a cross in the top left corner of the icon. In that sense I think preserving that idea is to be encouraged.

Here's an example

image

I think the previous one is better, the one you've drawn and the previous one is pretty non standard compared to other software ranging from Photoshop to Inkscape. I think going along with the grain is better here.

Note that all of these are suggestions to improve and not mandatory changes, but please consider them as you refine the icons and also for future icons always think if it's possible to include hints of the functionality as for upcoming icons like those from the timeline must suggest their functionality or resulting action at a glance to consider them an improvement over the current ones (which are ambiguous at best, particularly the keyframe / layer manipulation area).

Fatih20 commented 4 years ago

I've fixed the line icon to make it look more like a polyline and I have 2 ideas. Which one do you think is best? image image image image

Fatih20 commented 4 years ago

I've finished the icons for the tools. image Here's the eyedropper, brush, and smudge. image The smudge tool uses the same hand as the hand tool. The design of this one is pretty straightforward so there's not much to explain.

I've looked into @Jose-Moreno feedback and acted upon it.

The pencil is now sharp. The box in the selection icon is dark to improve accessibility. Pen is now only sharp at its end. Subtler shades and gradient for move tool. Line tool has been reworked (as you've seen in my previous post).

Feedback appreciated.

Fatih20 commented 4 years ago

Also, is there any particular reason why the tools in the tool widget is arranged the way it is?

MrStevns commented 4 years ago

Okay let me get started on my feedback, I think most of the icons looks nice and works fine, however a few of them could still use some improvement.

Whenever I design icons and anything for that matter, I always take into account real life and how things are perceived in both shape and form, I admit that I went overboard with the icons I made, they're more illustrations than icons but well that was some time ago and I've gotten wiser since then, nowadays I would probably go with a simple palette and colorful variations to make it easy to distinguish, like you have so far.

Clear: The clear icon is difficult because the way I see it, you take a paper and trash it when you don't like it, It's true the recycle logo doesn't make much sense if you look that deep into the icon, because as you state, it doesn't recycle anything. The cross or 'x' however caries just as many problems, given that the nature of it has for a long time been that it's meant to close something, destroy is another concept but in the toolbox, it confuses me more than the previous icon. I'm not sure a trash icon is better but I do not think the cross works either. I feel like i'm going to close the window whenever I press it.

Its functionality in particular has always been a bit weird too, since it's not really a tool a such, it's just an action to clear the frame.

Pencil: I like the colors of it, although personally I'd go with black for the tip. In the newest iteration I feel its tip is getting a bit too familiar to the brush icon, in its shape, not when you look at it very zoomed in, but when 100% in size, eg. when I look at the screenshot of the toolbox. Instead of making the tip sharper in shape, you can also convey a bit more sharpness by removing most of the shading on the tip, black and white are nice shades and can usually stand on their own. Here's my take on it

image image

The tip is completely black now and I've adjusted the highlight too a bit, the combination makes the tip feel a more sturdy and appears slightly sharper too.

Eraser: The red color doesn't quite work for me, more because I've never seen an eraser with red shell, in my two iterations of the old design, it was either blue/white like most staedler erasers in the real world, or pink to base it off the pink eraser types. The context to the real world makes it easier to find similarity to the icons and while the one I had also had some issues I don't think the colors was the problem. I agree with @Jose-Moreno about the size of the erasing part compared to its shell, I'm do not think it creates the illusion of an arrow, so I too would prefer if there was more of it.

Selection: I like the simplicity of it, although given the size of the dots, there's no need to shade them. One thing that's bothered me while I've been thinking and looking at it since you first put it up, is the pattern. I like symmetry as I think it creates good harmonization, especially in icons, so here's my take on your selection icon.

image image image

Notice that the placement of the dotted line and the overall thickness There's no shading either, the icon feels more balanced this way, to me at least :)

Arrow: This icon is very simple and you've made it quite straight forward, so I've got nothing else to say, looks fine to me.

Pen: The color of the tip doesn't work for me, I'd prefer a more metallic look for the tip, the rest looks fine.

image

Hand: No particular feedback on this, I think it looks fine, although the colors are a bit too alien for me. This modification is very quick so only consider the base color, A more yellow or pinkish shade would imo. work better, I find the current one is a bit too much.

image

Polyline: I like this icon, especially the newest iteration, no comments. Looks great 👍

Bucket: The latest iteration looks good to me, no comments currently. Colors and shape are good.

Color picker: I like the shape and the colors are also fine, although I think the glass in particular could look a bit more colorful with a slight shade of blue instead of gray. It gives a little pop to the overall nature of the icon. I've only adjusted with overlays here, so the colors looks a bit off, disregard that.

image

Brush: The tip feels a bit too bulky I like the current implemented one a bit better, maybe if you straightened it a bit more, eg. here's a quick example

image

When comparing, only consider the shape, the rest is fine.

Smudge: I'm not a fan of this one, I find it a bit too bulky. You've designed it based on the hand contour, I do not think that's a good idea. The anatomy of the hand is too similar to that of one that's clutching, which does not work for me, the thumb for instance seems incorrect, to me it would either be hidden entirely underneath the index finger or more straightened and pointing away from the index finger in a slight arc shape. In general I would like to see a bit more emphasis on the index finger compared to the rest because index finger is the important part of this particular icon, not so much the hand.

Great work and sorry about the earlier comments, it's difficult to know when and how often you'll see people contribute, to consider whether a pull request should be open or not. Which is why I didn't mention much of it at the beginning, plus I was very limited on time and just wanted to lay down some quick comments to encourage. Considering the speed you're going at however, I'd have no problem you opening a PR again.

Fatih20 commented 4 years ago

I'll look into your feedback.

Fatih20 commented 4 years ago

Any reason why the color of yellow doeesn't work the pen for you? @CandyFace

Fatih20 commented 4 years ago

image I've made improvements to the icons :

I'm looking into more natural hand color, rework for clear frame and smudge tool.

MrStevns commented 4 years ago

Any reason why the color of yellow doeesn't work the pen for you? @CandyFace

It's not so much the yellow color that's bothering me but the combination of that striking light blue and the yellow. I made the tip grey to make it stand out a bit more from the base but it can also work with yellow. To me the blue and yellow clashes as they both want your attention, so it's difficult for the eye to find out where to focus.

Here's a slightly more subtle version with the yellow tip. The few adjustments I've made: Make the tip a bit bigger and the base a bit smaller, to put more emphasis on the tip. The blue color has been toned down a bit too and the shading altered to make it easier to see. I also added a small metal ring but well.. that's perhaps just me going too much into details again :)

image image

yours:

image
Fatih20 commented 4 years ago

Any reason why the color of yellow doeesn't work the pen for you? @CandyFace

It's not so much the yellow color that's bothering me but the combination of that striking light blue and the yellow. I made the tip grey to make it stand out a bit more from the base but it can also work with yellow. To me the blue and yellow clashes as they both want your attention, so it's difficult for the eye to find out where to focus.

Here's a slightly more subtle version with the yellow tip. The few adjustments I've made: Make the tip a bit bigger and the base a bit smaller, to put more emphasis on the tip. The blue color has been toned down a bit too and the shading altered to make it easier to see. I also added a small metal ring but well.. that's perhaps just me going too much into details again :)

image image

yours:

image

Ok, so I tried to neuter the body of the pen instead to put more emphasis on the tip. image image

Fatih20 commented 4 years ago

I've reworked the clear frame to look like ripping out a frame in a traditional animation process. What do you think? image image

Fatih20 commented 4 years ago

I'm looking into the other icons and ran into trouble. I wanted to change the controls icons from png to svg. To do this, I'd have to change the name of the file being used in app/data/app.qrc from .png to .svg. I then put my file in it. image I then compile the app to test how it'd look. It successfully compiled it but it doesn't show the icon shown below. image

How do I fix this?

MrStevns commented 4 years ago

The playback icons are defined in the timecontrols.cpp file, from line 76 to 81. You'd have to change the resource names to match the new extension.

Fatih20 commented 4 years ago

I've redesigned the controls icons. image image Here's how it looked like up close. image image image image

Fatih20 commented 4 years ago

The playback icons are defined in the timecontrols.cpp file, from line 76 to 81. You'd have to change the resource names to match the new extension.

What files do I need to change for the toolbox? I wanted to rename the icons in the toolbox.

Fatih20 commented 4 years ago

I'm about to design the icon for the sound scrub but what does it do? I can't find any guides to what is sound scrub.

davidlamhauge commented 4 years ago

If you have a sound layer, you can 'scrub' the timeline with the mouse, and it plays the sound in the tempo you scrub it.

Fatih20 commented 4 years ago

I'm trying to redesign the icon for the layers. I put them in a new directory icons/timeline. image I then change all the name of the icons to reflect the change of directory in app.qrc and timeline.cpp. image image But it resulted in this instead. image What should I do?

MrStevns commented 4 years ago

Ah, that's because you're missing renaming the icons for the timeline specifically. What you've edited so far are the icons for the dropdown menu that appears when you click the layer button, the painting of the icons on each layer happens elsewhere. You have to rename the corresponding resources in layer.cpp from line 474-477, then it should work. The same icons are also used in the top "Layer" menu, you'll have to open mainwindow2.ui and change the path there too.

Fatih20 commented 4 years ago

Ah, that's because you're missing renaming the icons for the timeline specifically. What you've edited so far are the icons for the dropdown menu that appears when you click the layer button, the painting of the icons on each layer happens elsewhere. You have to rename the corresponding resources in layer.cpp from line 474-477, then it should work. The same icons are also used in the top "Layer" menu, you'll have to open mainwindow2.ui and change the path there too.

I just found this right before you posted this lol. So I've done it, but it looked weird, now. image

Fatih20 commented 4 years ago

The SVG size is 32 by 32.

MrStevns commented 4 years ago

Take a look at the previous icons, if the size doesn't match, then the icons won't fit. They do not automatically resize because of the way the timeline is painting its graphics. 32x32 is too big.

Fatih20 commented 4 years ago

The whole bottom row has been redesigned. image image Here's the icons up close. image