Page MenuHome

GP Branch: UI design for topbar/tools integration
Closed, ArchivedPublic

Description

Task to figure out new design for how GP tools should integrate with topbar/toolbar design.

The main difference in 2.8, is that all the active tools (In this case brushes) will be in the toolbar, while all the tool settings will go in the top bar. You can refer to Sculpt Mode, which already works this way:

For the new 2D Draw Mode, we would like the tools to work the same way. Here's a mockup to demonstrate how it would work:

Icon-only view:

Initial icon design by Aslam Cader:

Details

Type
Design

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

I have been looking at the program an I have one doubt.

The new idea is to assign the material used to Brush, and the user can select any color for the Brush. If you draw with this brush, always the selected material will be used.

There are several assumptions:

  1. If the current material assigned to the brush, does not exist in the current GP Object material slots, the material is added to the GP object as a new slot.
  2. The user can select ANY grease pencil material for any Brush. We cannot filter the colors by object, because the Brush can be used in any GP object.
  3. As result of this, the color picker menu, will assign the selected color to the current Brush. This color picker will filter the colors for the current GP object, because is using the material slots.

The points 2) and 3) can look like opposite, but it depends of how select the color of the brush.

BTW, I think the Grease Pencil paper must be part of the overlay menu.

Regarding #2: That was why I was also open to having way to 'unlink' the active material from the active brush, and having it be a simple list of materials already added to the GP object. Users could still set the material in the top bar, but it would then not change with the brush.

That would only be an option though - by default I think it should work as you outlined, where the active material is simply part of the brush.

#1. IMO is clearer if we show in the color selector only the material assigned to the selected object.
If you want to use the same material in different objects, the user must first add that material to the object's material list in the properties panel.

#2. To keep both ways, I was thinking in a pin icon next to the color picker that indicate the material is linked to the brush (pinned).
If the material is unlinked (unpinned) the color picker will show whatever is the current active material for all the unpinned brushes

@Matias Mendiola (mendio) for #1, If the user select the color with the color picker or the list of materials will work in this way, but if the user "link/append" a Brush, the material will be the original one and the material will be added to GP Object when draw first stroke.

About #2, I think we can wait and see how works with the new UI, After test all, we can decide something like the Pin. We need test also how enable the materials to Brushes when you start to draw without a predefined GP Object.

Makes sense - sounds like a good plan.

I have been doing changes to color picker panel (still need UI redesign), but the new logic is already in place.

Before, when you selected an object and used the color picker, you could use only the colors of this object, but this is not the standard of Blender.

With the new change, if you have two objects with different materials, when you use the color picker, the list of colors includes all materials of all objects (the list shows any grease pencil material). If the user select a material that is not in the current grease pencil material slots, the material is added automatically when draws the first stroke.

As @Matias Mendiola (mendio) commented, it would be great to have a flag or pin to enable a "filter by object" color. If this filter is enabled, the list will show only the colors of the current objet and not the full list. This filter is not implemented yet in the color picker.

That sounds good. Makes sense I think.

@William Reynish (billreynish) In the second image you have put, there is a color selector drop down box (the example shows "Blue"). About this control, we need to show both colors stroke & fill, not only one color.

It's very important don't show the stroke color as the "border" line of the fill, box, because a lot of times the color hasn't fill and then all the icons are only a very thin line of stroke color fill of "nothing" and is more difficult find a color in the list.

Antonio: So, something more like this?

or

Yes, something like that, but try to give more visual priority to Stroke color, the fill is used less.

In your designs the color with more "visual impact" is the fill (green over yellow). If the color were only stroke, you would have only the stroke (yellow) and nothing for fill.

Anyway, I'm not designer and your designs are in the right direction, maybe @Matias Mendiola (mendio) can give us any idea.

We could make it look more like this, where the line is drawn on top:

That way, if you don't have a fill color assigned, you only see the lines, and it still works:

Update: Joshua pointed out that the stroke line was probably too thin, so I made it thicker and put an outline around it:

Yes, I like the proposal, but problems arise when we expand the list.

Things to keep in mind:

  1. The black color is lost if we use a dark theme (and black is by far the most used color)
  2. The colors of strokes and fill also could have opacities, which makes the problem worse with dark themes
  3. We need to have a way to filter colors by object (you can see a proposal in the mockup)

We could draw a white outline around it? Also we can put a checkerboard pattern behind each item to show the opacity.

The object button makes sense, yes.

yes, maybe the outline could work

Yes, something like that, yes

Great, I like it. I think we are on the right track. The checkerboard pattern behind will help a lot

For better consistency. Could be possible to use this kind of material visualization for the G-pencil materials in the properties editor?

Indeed. I was going to mention that we really should be integrating/making the GP colors preview get done using some dynamic icon system (i.e. much like the material previews), instead of having our own little modal operator that draws its own stuff in its own way. That way, GP materials always draw the right way.

Hi guys
I hope you don't mind an idea from an outsider - what would you think about swatches like these?

I liked the original GP swatches horizontal nature - they fit much better in lists and toolbars.
So I went back to that and tried to solve the problems you listed in that form factor.
(2 versions for showing "no color" and 2 overall versions with a slight change in the middle)

Thanks @David Kozma (kynu), any help is always welcome. I think your very thick line for stroke color is what we are looking for and really like the idea of showing clearly when the fill or strokes colors are not used.

David Kozma: Nicely done.

I find this one especially clear:

Works well.

I've tested with the list expanded. I suggest to invert the stoke and fill order (stroke to the left) because is how G-pencil always use to work.

Thanks guys!
It's all yours to use :)

I know it's not a big deal to redraw them but here are an svg and an ai file if you'd like to tinker with it.
(the svg flattens the stroke though :( )


haha, nice!
I just had my cursor on the submit button to send the same :)

I really like the last design.

Thanks Antonio!

As I see the small thumbnails there's one last thing I might change in my proposal:
The fills could have a little more space:

materials list mockup in properties editor with the current default G-pencil colors

If you think the majority of GP lines used will be unfilled then I might opt for not showing the fill at all by default - or with a subtle outline only as in my first (left) proposal

Simply to make it less noisy looking.
Also if we use the cross line (I'd only use it for lines not fills), in this small scale they should be thicker
Sorry I just looked at it with a fresh eye now :)

Personally I prefer the left one with less red diagonal lines, because the red lines are so visual intrusive in my opinion

yes, agree Daniel. That's why mockups in different contexts are so useful, it's more easy to found problems

push it a little further: only stroke, only fill and mixed color icons. What do you think?

For me personally it's a step back. I'd keep them consistent in their separate place - it's important to know at a glance what's going on and just by looking at the little holes it's not fast enough.

@Matias Mendiola (mendio) In the color list we are missing something: The user can modifiy the colors.

If we display the stroke & fill in the same icon, it's very difficult to select the color to modify.

We have 2 options here:

a) Remove change color functionality and use always the bottom panel.
b) Display two icons as before.

So true, the color picker popup when you press the color icons in color list is totally needed.

good point Antonio, so we need to show always both: strokes and color, but in a less visually intrusive way than the diagonal red line over white background.

We also have to keep in mind an icon that work well with a future dynamic icon system as @Joshua Leung (aligorith) said. Remember that strokes and fill could also have gradients and textures.

There is something I haven't seen yet: The "pin" button to filter to "only active object" materials.

Maybe this button must be on the right of the list?

Hello another outisider. I am very excited for the new grease pencil features and am a regular user. In my scenes I have many GP objects and worried the color picker object filter list will be cluttered.

Would it be possible to filter by collections and not just objects for when very large number of grease pencil objects are created? This way the objects can be nested in the object filter list.

@Adrian (lanmind) The current color picker is going to be replace by a new system and yes, you will be able to filter (not decided how yet). These new system must be implemented after merge the grease pencil branch in blender 2.8 branch.

@William Reynish (billreynish) : @Antonio Vazquez (antoniov) is working right now on the toolbar for Grease pencil. We already have the icons for draw mode, but we also need icons for Sculpt mode and Weight paint mode. Could you help us with this?

For reference, these are the icons that we are using in the Grease pencil branch an their names:

For sure. I am away for the summer, but will have time to organize remaining icons in August.

what is the problem with these icons theyre great!

They are good. One of the main issues is that they have no alpha background, so they won’t work well on the toolbar as-is. Other things is we need to unify all the toolbar icons with a common visual language.

what is the problem with these icons theyre great!

Thanks Luciano! was my design :)
but as William pointed out is better for Blender UI to have an unified icons set.

I totally agree that the new icons SHOULD NOT INCLUDE THE ENTIRE PENCIL/ PEN.
What´s important is the STROKE look and feel on the icon. JUST use an icon representing the PEN/PENCIL NIB and give focus to the stroke on the toolbar icon representation.
Just like it was on the previous 2.8.5 GP branch.

Regarding the stroke and fill, I also agree that should be represented like the squares posted above this post. Fill square + Outline square. That´s how it´s been since computers are computers... No need to reinvent the wheel.

can I suggest something cos im getting kind of desperate here?

a point to point curve drawing tool, like the new line drawing tool. to create smooth controlled curves.

https://www.youtube.com/watch?v=ugVn5Wq6DvU

rather than having to draw a stroke and hoping smooth will take care of it to get exactly what you want.

After doing a research of the options we had for the new color selector, the initial idea was not the best, so we change to use previews. Previews are better for several reasons, some of them are:

  • Use standard methods already tested.
  • Seamlessly integrated in UI.
  • Show all material features.
  • Easy to maintain.

Here are the designs we have done.

And for the color selector.

The previews allow replace the old single color list to a more realistic representation of the material.

@William Reynish (billreynish) welcome back!

We have been working in the tool bar icons while you were on vacation. Matias design new isons and I implemented the toolbar. Also, we have been working in color selector in top bar doing a new preview system that works really well.

Now, that you are here again, please contact with @Matias Mendiola (mendio) before doing changes in icon_geom.blend file because he has a changed version (he could not sent to SVN because we haven't right to do it).

@William Reynish (billreynish) yes, I've been working on icon_geom.blend file to port there Aslam icons design for Draw mode, and I also adapted the icons that we've already been using for Sculpt and Weight paint mode and it turn out they work well together! I just only had to make a few tweaks for better visivility at small size and some color changes to follow the new icon design.

Great! The tool settings & top bar settings are coming together nicely. I think you've done very well with the GP and annotations UI.

To make more improvements, we really need to work on the underlying tool/brush system in Blender. One of the main issues currently is that tools are not brushes, which creates a weird sync issue where the brush can get out of sync with the active tool. This problem exists in Sculpt mode and all of Blender's brush modes too, and is not a GP problem. I spoke with Campbell a while back, and he has ideas on how to make this nicer.

A few smaller points specific to the GP tools & top bar:

  • Would be great to put all the tool settings in the top bar. You have Brush Curves and Options. we could handle these just like the Sculpt Mode popovers.
  • Stroke Placement & axis lock is a tool setting, and should therefore not be in the 3D View header, but top bar/tool settings
  • The toggle to switch between the compact material list vs the icons would be really nice to place inside the material popup itself. Right now it's a bit inelegant to have this top level. Don't know how easy that is though.
  • Currently, the active brush overrides the gizmos, so if you try and manipulate the view with the viewport gizmo, it draws instead :)

About the problem with viewport gizmo, I opened task T55420.

I hope @Campbell Barton (campbellbarton) can take a look on this becase I was unable to know how detect the cursor is over gizmo.

Ah right, for sure. He probably knows what to do here - we can just wait for him to be back.

@William Reynish (billreynish) The stroke palcement and lock is used for any of the drawing brushes and is not linked to "only one" brush. is still valid put these parameters in toolbar?

I would say so, yes. I don't think it matters that the same option is available in more than one tool - that's completely fine.

Great! The tool settings & top bar settings are coming together nicely. I think you've done very well with the GP and annotations UI.

To make more improvements, we really need to work on the underlying tool/brush system in Blender. One of the main issues currently is that tools are not brushes, which creates a weird sync issue where the brush can get out of sync with the active tool. This problem exists in Sculpt mode and all of Blender's brush modes too, and is not a GP problem. I spoke with Campbell a while back, and he has ideas on how to make this nicer.

A few smaller points specific to the GP tools & top bar:

  • Would be great to put all the tool settings in the top bar. You have Brush Curves and Options. we could handle these just like the Sculpt Mode popovers.
  • Stroke Placement & axis lock is a tool setting, and should therefore not be in the 3D View header, but top bar/tool settings
  • The toggle to switch between the compact material list vs the icons would be really nice to place inside the material popup itself. Right now it's a bit inelegant to have this top level. Don't know how easy that is though.
  • Currently, the active brush overrides the gizmos, so if you try and manipulate the view with the viewport gizmo, it draws instead :)

@William Reynish (billreynish) Stroke Placement, axis lock and draw on back are not tool settings, they are general for all the brushes and related to the 3d view placement of the strokes. They should come back to the 3D View header

@William Reynish (billreynish) Sorry, I did not realize that you already answered to Antonio about this before. IMO for avoid user confusion all these settings that are viewport related should be only in the 3D view header

Yest, these settings that are viewport related should be in the 3D view header

I proposed stroke placement and locking popovers dynamically switching with transform orientation and snapping popover in header of 3DView.
But I realized that Annotation could be used for addons for modeling purpose.
It would imply masking of transform orientation popover when it could be used.

The fact is that there is not so much space available in 3D View header whan it does not take 3/4 of the screen.
But there is in topbar and as a modal setting, it does not seem to be so disturbing.
Setting is not changing while brush is changed.
So, I removed my comment.

But yes. Maybe things could be different for annotation brushes and GP object brushes that are only available in a draw mode where no transform orientation popover exists.

I don't get the viewport thing. Everything is visible in the viewport, of course. Same goes for strength, radius, stroke settings, etc. I can't see that the stroke placement thing is different here.

The important thing here is that these settings change the behaviour of the active tool, and so it's a tool setting.

@William Reynish (billreynish) We still have pending where relocate the old toolbar operators like this:

Any idea?

If you try to be consistent with Mesh Edit mode, you have to keep transform operators as potential active tools and move the rest to menus.
In mesh edit mode, 3 menus (vertex, edge, face) have been added.

So, you could add an Arrange menu to contain Arrange strokes, move to color, Join, Separate, Reproject ... operators.

You can also avoid Sculpt items in Strokes that should only be available in sculpt mode.
To sum-up, Strokes menu could be simpler. And if it is still too long, you can create a second menu.

Animation panel options could be a popover on the right of topbar.
But it could also make sense to adapt Timeline header to an active GP object to handle interpolate buttons.
Or at least, to create corresponding icons in dopesheet header.

I don't get the viewport thing. Everything is visible in the viewport, of course. Same goes for strength, radius, stroke settings, etc. I can't see that the stroke placement thing is different here.

The important thing here is that these settings change the behaviour of the active tool, and so it's a tool setting.

stroke placement tools (Stroke Placement - Axis lock - Draw on back) are general parameters for placement the strokes on the 3D space. They actually affects all the Grease pencil objects that you may have in the viewport and not only one in particular.

It's not just a brush setting, it's not even a setting per object. It's more like a viewport parameter, something simmilar like when you use the pivot point with meshes to set your point of rotation, you set it once to use with all the objects in the scene till you need to change it again.

That's why IMO the viewport header is the more appropriate place for this.
If you want @William Reynish (billreynish) , we can make you a quick video showing the behaviour.

@William Reynish (billreynish) We still have pending where relocate the old toolbar operators like this:

Any idea?

Yes. We had the same type of thing for mesh edit mode, and other modes too. Here's how we think we should deal with those types of operators:

We don't actually call those 'tools', but 'commands', because they don't stay active. They simply execute a command.

  • First, we should make sure that they are all available from the menus. From here, users can right-click and add items to the Q-menu for quicker access. In Mesh Edit Mode, we added more top-level menus, so that users don't have to drill many levels down to find editing commands.
  • Second, some of those could be made into active tools. Any operator for a transform is a good candidate, such as Bend, Shear, etc. We should also make Move, Rotate, Scale available here in the toolbar.
  • We should review the Context (W) menu to make sure the most-used features are included here.
  • Lastly, if needed, we might later introduce the Quick Menu as a panel in the sidebar for all the modes. This could also serve as an interface for re-ordering and removing Q menu items.

Make sense?

stroke placement tools (Stroke Placement - Axis lock - Draw on back) are general parameters for placement the strokes on the 3D space. They actually affects all the Grease pencil objects that you may have in the viewport and not only one in particular.

Well, that is expected for a tool setting, surely. A tool setting is not a per-object thing, as in an object property, but simply something that changes the behaviour of a tool.

It's similar to the Front Faces Only or 2D Falloff tool settings in Sculpt Mode or the Orientation setting when using the 3D Cursor tool.

Granted, in Mesh Edit Mode, we've now put the Transform Orientations, Snapping and Proportional Editing controls in the 3D View, but that was specifically because those things also apply when no active tool is used, if you just use G, R or S shortcuts.

For Sculpt/Paint/Draw modes, we don't have that problem, because users are always using active tools here, so we can simply put all the tool settings in the top bar and the Tool Properties.

I'm on IRC - we could chat there also, could be easier :)

I am not sure Shapes popover is needed in Draw mode.

3 shapes (line, rectangle circle) are requesting use of left click and choose of an active material. It would be valid to have them as an active tool in toolbar and see their material in topbar.
And there is space in toolbar to add another group of active.

Shapes popover is a temp location, the final idea is move a tools.

@William Reynish (billreynish) We still have pending where relocate the old toolbar operators like this:

Any idea?

Yes.

We would still would need a convenient place for addons to place their tools.

I kind of liked the old separation between tools in the tool shelf to the left, and properties to the right. Tabs provide a good way quickly access a lot of interface real estate.

Since the new toolbar now occupies the left I was wondering if in addition to the all h the new menus tabs could be introduced to the *Properties Area* on the right of the 3D view instead. The first tab would be the *Properties* themselves, which can hold what it currently holds (object transforms, and other settings not moved to the header), a few tabs for misc commands plus whatever addon generated tools and settings the users want.

Additionally it would also help if the user defined Quick menu could be organized into expandable sub menus, and have separators, so it doesn't quickly turn into a long hard to scan list.