This forum has been archived. All content is frozen. Please use KDE Discuss instead.

Brush Editor Docker Mockups

Tags: None
(comma "," separated)
kritau
Registered Member
Posts
9
Karma
0

Brush Editor Docker Mockups

Wed Oct 10, 2018 10:10 pm
Two years ago I made a few mockups for a brush editor redesign, including a docker design. I'm reposting them because I just read the 4.2 news post and saw there's renewed interest in shrinking the brush editor and possibly making it a docker, so they seem relevant again.

I decided to make a new thread instead of bumping my old one because I changed my design several times over the course of that thread, so it's cluttered to read and a lot of the old discussion isn't relevant anymore.

This post is a summary of my final design. Note that my mockups are 2 years old now and I can't update them at the moment, so a few of the new brush features in recent releases are missing. Hopefully it's intuitive to see where they could be fit in, but if not I'm happy to answer questions.

Mockup images:

Image

Image

Image

Image

(link to images in case embedding doesn't work: https://imgur.com/a/rni08)

Main design features:

Consolidates all settings into just a few tabs:
  • preset - name/icon/metadata
  • brush tip - everything related to the shape of the brush mask
  • general - anything that doesn't fit in other categories (opacity/flow/scatter/etc)
  • color - hue/saturation/value/etc settings
  • texture - textured brush settings

(the proposed categories above are for the pixel brush engine, other brush engines may be slightly different. i have spacing listed under brush tip only because gimp brush tips can specify a default spacing value, but i think it otherwise makes more sense under general because it has nothing to do with the mask shape.)

The main sliders for all parameters in each category are all on the same screen to minimize switching around. Each slider has a checkbox on the right to quickly enable/disable all pen sensors for it, which also allows users to see at a glance which brush parameters are being modified by pen pressure or other sensors.

Most parameters can be expanded to see additional controls (such as pen sensors) by clicking the right arrow button to the right of each parameter. I have "expanded options" screen mockups for the "Diameter" and "Predefined Brush Tip" parameters. Clicking the left arrow button in the top left returns to the previous screen.

For Predefined Brush Tips (as well as Textures): I've replaced the grid of thumbnails with a large preview of the currently selected brush tip/texture. Clicking on the right arrow button to the right switches to the list of thumbnails where you can select one (see my mockup). I like this design because it's difficult to see what the selected brush tip/texture looks like in a tiny thumbnail, and you don't need the large grid of thumbnails taking up space once you've chosen a brush tip.

Additional notes:
  • Scott Petrovic's video in the 4.2 news post (timestamp 5:47) has a dropdown list for pen sensors that saves a ton of space compared to the 2 column scrolling list in my mockup!
  • The "Pen Settings" checkbox (seen on the Diameter "expanded options" screen mockup) enables/disables all pen sensors for that parameter (and should be renamed "Pen Sensors" instead of "Pen Settings" in my mockup). This is what is being controlled when the user checks/unchecks the pen sensors button in between the slider and the right arrow button on the previous screen, so checking one also needs to update the other.
  • The icon controls in the preset tab mockup are missing; just imagine it having the new brush icon settings from the 4.0 release :)
  • Choosing a different brush engine at the top switches to a new, unnamed brush preset with the default settings for that engine.
  • Stroke preview could be added to the top or bottom of the docker, however I think it would be more flexible and useful as a separate docker because:
    • it could be resized to any size, regardless of the size of the brush editor
    • it wouldn't take up space in the editor when people aren't using it
    • users can have a preview of their selected brush displayed, without having to keep the editor open
  • One of my goals with this design was to have an intuitive flow from more broad settings to more specific settings. From the top my design goes: Brush Engine Selector > 4-5 tabs with broad categories of settings (e.g. brush tip) > parameters in that category > parameters can be expanded for more specific controls.

I'd appreciate any feedback, positive or negative!


Bookmarks



Who is online

Registered users: Bing [Bot], claydoh, Evergrowing, Google [Bot], rblackwell