This Strip is Not Safe For Work!

okay so i can see youve been hard at work `Peyo` but i have to admit i was a bit shocked at the giant column of buttons, which... is usable, but not necessarily ideal. so i decided id give a crack at improving the design a bit... and i maybe got a bit carried away, but i ended up with a layout that i believe would be a lot more practical and leaves more room for future additions this only applies to the desktop drawing tool, im not tackling the mobile version at the moment for context, this is the drawing layout as it is at the time i post this  and then the redesign ive settled with for now  theres a lot going on so im gonna go through every aspect in detail and talk through my reasoning. this is going to be a long post im gonna make in multiple parts, but hopefully it will be worthwhile to put up with

naturally, it cuts off the images cause theyre too wide, but you can just right-click and open the image in another tab to see them in full (perhaps images too big to fit automatically scaling down?) okay back to the layout. first things first, this layout is slimmer, reducing the height of the ui by 10%, so you could scale some of the stuff up like the canvas (i probably wouldnt scale all the elements up since the buttons are plenty big as is, but this is down to your discretion) to achieve this, i took the size and alpha sliders and moved them up to the top, which matches existing art programs more (in my experience) and also just makes use of the space available up there im not entirely sure how the text for them should be, maybe something similar to the mobile ui where the text is ontop of the slider itself, but you could also just make the sliders smaller cause they dont need to be that big ive also introduced the contextual tool prompts/settings window at the bottom left corner of the screen (currently showing the options for the shape tool on my example) basically, based on the tool you have selected, it shows relevant options (or shows none when the tool has none) so instead of having a separate button for empty square, filled square, empty circle, filled circle, the main ui just has the shapes button, and then you can select which of the four you want to use in the contexual window ive also given the same treatment to the zoom in, zoom out, and pan, combined into the same button with options in context window, and i also figured instead of having a separate set button for the text tool, it could have the font and text field in the contextual window

ive also overall shifted some elements around to break up the huge section of buttons and group things in a perhaps more sensible way and have higher priority tools closer together so the brushes, eraser, and color picker are on the left side. i also moved the color palette to the left bar so the main things people use are all on the left side for easy access (the colors are also scaled down to make them fit the side, but also cause they dont really need to be that big in the first place) the settings, undo, redo, zoom all are at the top cause it felt that location is more natural to them and follows what people are probably used to a bit better (in hindsight, you could probably still have zoom in, zoom out, and pan as separate buttons at the top, but in that case, id definitely make the zoom in and out just do their thing when you press the button, rather than being a tool) and the bottom middle/right has the miscellaneous buttons that are useful, but probably get less traffic. i also moved the onionskin button here cause the current placement is just kinda awkward this is just some changes i personally think would improve the drawing tools and make them more comfortable to use feedback would be much apperciated not just from peyo, but others as well, since its good to have further insight from folk who frequently use the tools and might have felt theres problems or things that could be improved upon

it's a neat plan so far (I see you have trouble placing the sliders as well?) btw is the top slider for zooming on this one? putting the shapes as subtools seems like a good idea only thing I'm not sure about if is everyone ok with having a vertical color palette?

also is the previous panels unchanged for this one? (.. and same question for the submit and back buttons)

the two sliders at the top are brush size and opacity previous panels toolbar, back, and submit can remain how they are for now the layout can always be iterated upon if theres any new ideas or if some problem should arise vertical palette, wed need feedback on if people would mind it or not (if we had a poll feature, that could be used) technically, you could have more than one layout people can choose depending on their preference, if youre willing to commit to that, but i think asking people first would be wise also quick idea, the settings menu could also contain a quick cheatsheet of any keyboard shortcuts the tools have, since i dont think theyre listed anywhere other than maybe deep in some post somewhere

hmm.. how about we move the shapes to the brushes and switch the palette and shape tool menu:  I guess the stamp and text etc. could be added to its own submenu maybe.. maybe the brushes too ?

i'm not sure about this one.. just brainstorming (moving things around in mspaint and such)  I guess the submenu is a good idea to add no matter what .. maybe FX should be in convert to a seperate one as well? and the mirroring and blur could have buttons this way

id say a submenu for brushes might be overkill, unless we have a ton of brushes, which we currently dont have, itd just make swapping brushes slower (which id imagine people do more often than say use the shape tool) the main reason i made the context window horizontal rather than vertical is cause then it can be used for having the options for the text tool in it, the font selection and the textbox for typing in the text, but if the text tool itself is already in a contextual window, i guess that wouldnt be possible anyway

`Peyo` I'd have to say please no on the brush submenu, that would just be extremely inconvenient when working. With other stuff I'm still not a huge fan of submenu operations but could live with it, but the actual tools for drawing should stay out in the open I think to keep the workflow easy. Also I had no idea we had a pixel tool, I always saw that checkerboard icon and kind of glossed over it not knowing what it was for. That's neat we have one! Submenu for the multiple text buttons makes sense because people who are doing a text pass would probably be focusing heavily on it. Also if text functions are under a submenu it would make it easier to add other text features later without worrying about layout.

I'd say if anything, the whole thing should revolve around the basic drawing tools and them being easy to get to and use, and make settings for. Other stuff like the shape tools could go under a submenu since they're only used sometimes, but the actual drawing tools are why the whole thing exists.

yes I doubt the text window would fit in such a small panel I guess that is a veto for the submenu -- maybe we could just change the tools place for now? .. hmm maybe I could add some vertical space between some buttons .. how do you guys feel about this one:  (just small changes: special buttons on top -- brushes on bottom -- color picker and eraser moved to very bottom -- palette and sliders are next to each other)

and I forgot all about the onion and the onion slider .. and the button for anim backdrop

`Peyo` Personally, I think putting other more rarely used tools like the text tools and the stamper and duplicator, shape tools, et cetera, under submenus would be fine, especially if it leaves an easier way to add more related tools later. For example, if all the shape tools are put under one submenu, if you come up with another shape tool to add later, it can just go under that submenu with the others and requires no re-arranging of the main interface. Same with the text tools, if they're under one submenu, adding more text options later becomes really easy. But... I do think the brush tools, crayon, spray tool, eraser, line tool, eyedropper and pixel tool... The tools that are used directly for drawing and painting... Should not be in a submenu, and further, should be placed extremely close to the color picker and the size and alpha sliders so that when someone does art, they associate drawing with moving to one specific area of the interface and setting everything up, then getting to the art, then going back there when changes need to be made again to the drawing tool.

ok here is yet another variation:  in this on the brushes are always visible .. well expect for the pixel tool - not sure where to put it also I forgot about the onion slider again.. 🤔

is there a specific reason why you only want to have the buttons all in a single block? like one of the main reasons i divided buttons into different regions of the screen is because a single block of buttons is a lot harder read and honestly a bit daunting, they kinda look like this big soviet apartment building

I don't insist on it -- kind of a unconscious thing really.. (then again I live in a post-communist country with many soviet apartment buildings - it must had affected my thinking somehow) hmm.. now that I think about it.. kind of feels weird if they are not in one block .. like they feel all over the place.. there is also a conscious reason: I try to model things on the old mspaint because it was so simple and easy to use:  hmm.. maybe we could have a menu on the top? (not sure if that would solve anything.. just throwing it out there)

the reality is that within the post-soviet block, the ones who break out of that mentality are the ones that strive ive updated my design and i really do believe it is the direction to go. i cannot claim it is perfect, i believe it strikes a good balance  if theres any aspects you are unsure about, i can elaborate on why theyre set up the way they are, this hardly any of this is set up by chance also touching on your concerns on the vertical palette i seriously do not think the orientation of the palette is going to cause people problems. knowing from experience, another drawing site, drawception, had a userbase bigger than paneljam by orders of magnitude, despite having a vertical palette also a big reason why i have the contextual window and the buttons that trigger it (plus some extra) at the bottom of the ui is because theyre not as important so the average user can have a more streamlines ui experience (they can literally just ignore the bottom of the ui if they dont need to use it) while still keeping it easily accessible to people who do need them

I feel the opposite seems to be happening .. the whole world seems to be caught up in soviet mentality lately.. well we are not doing much striving that's for sure.. but I digress how do you feel about this one:  I moved the palette above the brushes and moved the line tool to the shapes .. hmm.. I'm doing it again.. it just doesnt feel right when the tools are not together..

that looks good to me if you can implement that, it would be a big improvement to the drawing experience

`Peyo` Yeah that looks neat! That would eliminate a lot of my current slowdowns.

ok I guess now comes the hard part and I should implement it somehow (in theory it should be easy as it's just layout) normally I would wait for others to chip in with their two cents .. but I imagine there will be plenty of feedback after the update

also of off-topic: so now that PJ is back I did some experiments and realised that the drawing tool of PCH is still not on the level.. at first I thought PJ just uses a higher resolution but there seems to be something else.. I don't know the brush just feels nicer somehow.. 🤔 and I don't get it - there is not much room in javascript to drawing differently.. and I already added tricks like smoothing the line (it got closer but still not quite it) or maybe the panel is place differently? 🤨 maybe the fact the tool is not fullscreen and you actually have to scroll the window? 😐 has anyone got any suggestions? ideas? how you guys feel about it? does it feel different still .. or is it just me? (maybe I also should try drawception now that they allow registering again to see how it compares 🤔 )

Love this brainstorming of layout changes, can’t wait to test 😁 `Peyo` , Regarding your questions on the smoothness of PJ vs PChutney, is it not because PJ is vector based? Whereas here on Chutney, it seems like you offer us a rasterized drawing application? Wonder if toggling between both options is possible, since both have their pros and cons I’d imagine. I personally enjoy using both, but for painting style art, Pchutney for sure takes the lead! I have yet to try high res on here though, been excited about that since you implemented it.

I had a theory that might be the case .. but the code is so convoluted I never could confirm it 😔

Hmm, strange, maybe it’s not after all. On my tablet, it certainly behaves and looks to be vector. But that screens resolution maxes out at 2160x1620. On my desktop though, using a 4k display, clearly see pixels and fuzzy edges on lines drawn in PJ. So both rasterized?

I have no idea .. the PJ drawing tool is such an enigma.. from the comments in the code I gathered that it's based on [http://literallycanvas.com/](http://literallycanvas.com/) but there seem to be so many hacks added on top .. I have no idea where they could come from.. I guess they might be added by jamdaddy(?) .. proving that indeed that there is only a thin line between genius and insane 🤔

`Peyo` I wanted to comment because this is an area of personal interest for me. Yes, PanelJam (and also Drawception unless they changed it since last I used it) both use vector drawing apps. This is very easy to diagnose since both of them change the shape of your lines, and not in the sense of smoothing but of actually re-calculating what you've made to be mathematically efficient. You can see this by doing a number of maneuvers that force vectorization to make extreme decisions. One of the easiest, tho, is just to test whether or not there is actually such a thing as a pixel. On vector apps that are geared for efficiency there won't be: The smallest unit will be a circle because all a circle requires to calculate is a radius. You can achieve actual square pixels in vector, of course (see the excellent-for-what-it-is FlockMod) but the price is extreme overhead. FlockMod is a good example of someone actually doing an excellent job using vector to emulate raster. My take on it is do not go vector! The strong points of vector are not artistic points, they're design points. Scalability without loss, the ability to be tweaked and edited using control points and the ability to create extremely smooth lines (vectors) using calculations done at render time to decrease storage requirements are the strengths of vector... Which sounds good... But the catch is you have to design work made in vector AROUND those aspects of it to really make good use of it. Otherwise, vector art is only going to constantly wrench control from detail-oriented artists. I can summarize vector like this: One artist drawing in a vector app: "OH look how smooth my lines are! I can use these control points to get a nice, clean result so that my lines have mechanical precision and are perfectly mono-width!" Other artist drawing in a vector app: "I literally can't get that pixel to do what I want it to do. I literally can't make the shape that I want to make. Not figuratively can't. Literally can't."

So what I'd ask is if you do add vector to the site please make it an additional option, and not a replacement for raster work. It's a highly conditional protocol that got a lot of popularity mostly due to mobile devices, but it should never under any circumstances have been viewed as any sort of baseline art creation method. However it's a great option to have if added as an extra, and once something is created in vector, using that vector creation to render raster art is trivial, so the two can work together great! Also, concerning what `Painovoima` brought up about the fuzzy edges, that's just anti-aliasing being applied to the vector work. The same art could be rendered with any edge, fuzzier, fuzz-free, double-lined, whatever, which is one of the strengths of vector, that you can do whatever you want with it at render time. So, my view on it is, vector is great to have as an option but should never be the sole option.

Wow! Ya'll been busy! That layout you settled for definitely is a lot closer to what I'm used to working with. Looking forward to drawing with that! Isn't vector the reason PanelJam canvas starts to lag the longer you draw on it?

I did some research and it seems they just use the svg html tag and draw by dumping drawing operations as string in there.. because simply canvas and html5 didn't exist when they first made these drawing tools and there was no othere way.. and PJ possibly gets slower because you end up with a gigantic svg tag as you draw more and more and it has to redraw them in order everytime a new operation is added.. 🤔 that is my guess anyway my plan is to only draw the vector while the brush is going on (so when you draw you draw onto a temp canvas) and just bake that into the canvas data (once I figure out the vector part that is) so no worries there are no plans to go full vector strange thing is that canvas supposed to do the exact same thing as svg when it comes to drawing (like canvas is full of vector operations) what I'm baffled by is that they seem to produce the same image for an svg image file but seem to differ when it comes to drawing 🤨

I realised I'm still not fully happy with it .. how about this variation?  in this one the Onion is moved to the top and the brush sliders are closer to the brushes

is that variation something youre fully happy with?

not exactly - which is why I'm asking your opinion also I was thinking of using vertical sliders (and switching the place of brushes and sliders) -- but turns out they are not really supported by browsers and have to be made with hacks (welcome to the future everyone)

maybe I should go at this step by step.. like first just put the undo and zoom icons on top (that is one we all seem to agree on)

vertical sliders would also require vertical text for them as well, which prooobably not ideal anyway i get what youre going for with the onion slider at the top, but honestly i feel like putting the size and alpha sliders down at the brushes is just... awkward? like i said earlier, theres no perfect solution for this, you can endlessly slide the elements around and never get anywhere the best bet really is to implement the previous design and then we can tweak things if necessary if you want a spot for the onion slider, you could either just use the space below it for that, or just use the contextual window for it? i dont think its something that heavily used that it needs prime real estate

yeah, implementing bit by bit seems reasonable if that works for you definitely cuts up the workload for you so you dont have to make all the changes at once

this is the current look:  there are no submenus yet - for now I just packed everything on the top but I also added the vertical palette what you guys think so far? does it feel better/worse?

I think it's not bad!

Delete it

Kidding, it looks great!

It definitely is a lot better no question

I've just drawn in the new layout and it does feel much nicer. Not that there was anything wrong with the old layout, of course.

oh yeah this definitely feels better than the original layout already

I should solve the scaling first (somehow stretch the whole thing to a window on desktop) before changing more things .. the code got into quite a spaghetti lately .. so that's the next step I guess in the end it's appropriate for me to have an italian for an avatar.. and yet it's still easier to work with than css 🤔

Great detail in explaining that, thanks `TeeEffDee` ! 😁