Jibble

Author Topic: Design of Smart Image Crop, my cropping app  (Read 248 times)

Buckethead

  • No m8...
    • Buckethead worked on one or more games that was nominated for an AGS Award!
Design of Smart Image Crop, my cropping app
« on: 18 Jul 2019, 15:28 »
Hi all,

I'm working on an application to crop sprites according to the size of the biggest sprites, so the animation won't jump. It's an upgrade of an java app I did a while ago:
https://github.com/Sanderdl/SmartImageCrop

I'm redoing it because I want to add some new features and learn Electron in the process.

The designs are done in Figma which you can find here:
https://www.figma.com/file/QOjzmAWjVqKI4QSdOzDeMPWe/SmartSpriteCrop?node-id=0%3A1

If you want to edit the design in Figma yourself you can download it here:
https://github.com/Sanderdl/smart-sprite-crop/blob/master/design/SmartSpriteCrop.fig

Please let me know what you think.

Gurok

  • Rottwheelers
  • When life hands you lemons, combine them with the mop
    • I can help with AGS tutoring
    • Best Innovation Award Winner 2016, for improving and extending the AGS scripting language
    • I can help with proof reading
    • I can help with scripting
    • Gurok worked on one or more games that won an AGS Award!
    •  
    • Gurok worked on one or more games that was nominated for an AGS Award!
Re: Design of Smart Image Crop, my cropping app
« Reply #1 on: 19 Jul 2019, 07:21 »
You probably want "overwrite original" instead of "override original" for the output files

I don't think it's really clear what constraints does. A preview of what happens to the first frame might help here.

Along similar lines, it might be good to show the colour of the top-left, bottom-right, etc. in the first frame when choosing an auto-detect option under "Background color".

I wouldn't use "Save cropped sprites" as a heading beacuse you're not choosing whether or not the cropped sprites are saved but how. "Output file location" might be better.

"Sprites are overwritten" isn't really appropriate because it hasn't happened yet. Maybe "sprites will be overwritten" or "overwrite source files" or even just "overwrite".

Your wizard seems to only have one real step (the middle one). I'd consider removing the previous/next all together and just show enable options when at least one file or path has been chosen.

I would right align the navigation buttons (previous/next). It keeps next in position when there's no previous button and it's also consistent with how most desktop OSes present wizards.

Buckethead

  • No m8...
    • Buckethead worked on one or more games that was nominated for an AGS Award!
Re: Design of Smart Image Crop, my cropping app
« Reply #2 on: 19 Jul 2019, 09:20 »
Great suggestions! I'll see what I can do to make things more clear.


I don't think it's really clear what constraints does. A preview of what happens to the first frame might help here.
This is used if you have an animation that should go to from one side to another. For example if a character bends over to the right to pick something up, you don't want to crop all the sprites from the center. I hope that makes sense. It's even hard to explain in text.


Your wizard seems to only have one real step (the middle one). I'd consider removing the previous/next all together and just show enable options when at least one file or path has been chosen.

I would right align the navigation buttons (previous/next). It keeps next in position when there's no previous button and it's also consistent with how most desktop OSes present wizards.
Yeah I was thinking of having everything on one screen and having the crop button disabled until all the steps are completed

Buckethead

  • No m8...
    • Buckethead worked on one or more games that was nominated for an AGS Award!
Re: Design of Smart Image Crop, my cropping app
« Reply #3 on: 24 Jul 2019, 15:33 »
I did some redesigning. There are now just two screens and you advance to the next after selecting sprites. Here are some images for people who don't want to open up Figma:



I also started working on the actual app. I've made the first screen and you can drag and drop files on it like in this screenshot:



Still not sure how to convey what constraints do. Maybe some sort of animation to display what will happen. But that's for later.