Brainstorming/UI

From MyPaint

Jump to: navigation, search

This page is dedicated to main interface ideas. When you add your ideas, please focus on visual mock-ups and their discussion. Also check the GIMP UI brainstorm for inspiration from the GIMP world. There are also some interesting Krita design documents.

This is a brainstorming page, a place for new ideas and suggestions.
To contribute, please follow the these guidelines and help us keeping the wiki organized.

Contents

[edit] Symmetrical drawing tool

Often times when drawing you need to do a lot of symmetrical work a lot of time and energy could be saved by allowing one to create virtual planes in pseudo-3D that act as mirrors that mirror what you are doing on one side or in one plane and mirror (and transform it) to another.

To see a crude example (where you have little control) load up sumopaint and look at the symmetry drawing tool.

http://www.sumopaint.com/app/

Ancient Amiga's "Deluxe Paint" (c. 1991) had this feature, as well as n-way mirroring across a central point (great for caleydoscopic patterns), and tile mirroring.

-This has been added to the development version. It's still a little awkward though, and there doesn't seem to be a way to reposition the mirror point. --DementedSnake 21:28, 26 February 2012 (UTC)

[edit] TabletPC Support

As TabletPC are getting more and more common MyPaint should support them better. TabletPCs have some differences to normal Desktop PPCs or Notebooks:

  • You can paint directly on the screen
  • You can easily rotate the screen
  • You don't have any keyboard (Only a limited number of special keys)
  • Not easy to use right or middle mouse button
  • Relative small displays (<= 14")

The goal for my mockup as to create an interface were:

  • every thing is reachable with the left mouse button
  • no overlapping, separate windows
  • easy adjustable
  • not wasting to much screen space
  • easy to discover for new users
  • possess a 'hide/unhide' button

Image:MyPaint Gui Mockup tj 01.png Image:Mypaint_simplest_interface.png Image:Mypaint_simplest_interface_zoomed.png


[edit] Tablet Touch support

New Wacom Tablets have in addition to the pen also a touch support.

This Events can be captured and used for panning (scrolling) and zooming.

The benefit is you don't have to switch hands or reach for the keybord

[edit] Popups

[edit] Behavior

Several of the popup windows have behaviors that could be improved


  • Fix color wheel popup so that it doesn't disappear if the cursor crosses the center after entering the selection area.
  • If secondary windows are present but do not have focus when their hotkey is pressed, bring them to the front rather than close them. (Brush window in particular)

--Songwind apogee 18:12, 2 July 2009 (UTC)

Popup Defined:

a Transient window which closes when mouse focus leaves or the key that triggered the popup is pressed again.

File:Popup mouse focus.png

[edit] Context Pie

Horizontal movements change the brush size, vertical movements the opacity. The inner button of each piece opens some dialog, the two outer buttons immediately select something, eg. the most recent two brushes or colors. Open Problem: visualize the opacity/size that is really chosen. Size could be solved by changing the cursor shape.

Also, it might be better to have multiple small submenus instead of a big one that contains everything.

[edit] Markup Pie Menus

File:Colour_Markup_leaf_02.png

posted by SeanJM

If the right click menu brought up the markup menu, a lot of tablet users wouldn't need the keyboard.
Comment posted by SeanJM

[edit] Brush History Popup

File:Colour_Markup_leaf_brushHistory.png

posted by SeanJM

[edit] Brushes popup

File:Colour_Markup_brushes_2.png

File:Brushes_window_scaling.png
Posted by SeanJM

popolon reflected that he wanted the brushes to have customizable thumbnails; where you could load your own custom thumbnail. However there are problems that arise with static images in a dynamic program. The brush window would draw strokes that are updated in real time if any settings are changed. And since there are so many variable settings that would change the appearance of a brush, thumbnails are not an option--as they can quickly mis-represent the brush.
Posted by SeanJM

[edit] Palette

Simpler... File:Palette.png File:Palette_1.png

--SeanJM 15:11, 22 September 2009 (UTC) Cleaned up the Wiki

[edit] Right Click Menu

File:Right_click_window.png --SeanJM 11:26, 25 September 2009 (UTC)

[edit] Layers Window

File:Layers.png --SeanJM 14:54, 29 October 2009 (UTC)

[edit] Dialogs / Windows

[edit] Behavior

A window is a persistent window that will close once the [x] is clicked. It does not show up in the taskbar of the OS. The taskbar should be for individual applications NOT THE WINDOWS THEY CREATE. Creating windows that are on the taskbar leads to clutter and decreases legibility of other applications on the taskbar.


[edit] A "Gtk-like" layer dialog for blending modes

Image:Layers dialog.png

I paste here a simple mockup built around an inkscape screenshot of the layer dialog. I imagine it simple ; with the opacity setting & blending mode. The only new thing I bring, it's maybe a system of notification icon ; mainly my idea is to have a little icon ( here I create a little triangle ; but thats can be anything else ) that notify about the layer blending mode is another one of a regular normal one. A notification of the same type can be done if a protect alpha transparency is done in next version. That's all ! --Deevad 15:01, 13 September 2009

[edit] Workspace dialog

Image:Workspace_rotation.png

Dialog window with tools to manage your workspace: zoom and rotate. Zoom and rotation tools are already implemented, but they provide lack of functionality. A dialog like this one may help with this problem.


[edit] Toolbar Dialog and Brush Outlines

Wasn't sure where to put this, so I hope here is fine.

This is just an example of how one might show the brush outline while in a menu, changing it.

--DementedSnake 09:56, 27 June 2012 (UTC)

[edit] Docking Zone

File:Docking_Zone.png

Screenshots of my attempt to implement MyPaint using PyGTk's implementation of GDL (used in Anjuta and Inkscape). I opted for flexibility: thus, the canvas also acts as a dock, although it's title bar (called grip) is removed. --japtar10101

All tool windows undocked.
Tool windows docked to the right.
Tool windows docked around the bottom border.
Tool windows docked in their own window.

[edit] Status Bar

File:Status_bar.png And since there's a chance of landing on porn if you get that address wrong, it's here: http://omploader.org/vMnd4Nw --Naught101

[edit] Brush editor

It would be good to visually simplify the Brush editor by grouping and hiding most options until they are needed. Brush settings could be grouped under:

  • "shape" (angle, radius, elliptical ratio, etc.)
  • "colour" (HSV, opacity)
  • "effects" (blur, smudge, eraser, etc)
  • "dynamics" (jitter, dabs/s, etc.)

in each group, the specific settings would be displayed, and in a separate section of the window, the specific attributes of that setting (pressure, speed, direction, random). I reckon it'd be good if that section was hidden unless needed. Since I'm too lazy to do a mockup, I reckon a large-icon-tab-on-left interface would be best for the groups, a la konversation: http://commons.wikimedia.org/wiki/File:Kontact-Screenshot.png . I think the group's settings window should stay basically as it is now, and the setting's attibute window should be docked to the left of that, and be hidable in the same way that the "colour history" and "details" parts of the Color selector are. Maybe I'll try an do a mockup later... --Naught101 11:21, 22 February 2010 (UTC)

[edit] Drawing and measuring guide

File:Guide.png

not much text and the language is bad but I hope you understand what I want to tell you. Leo

[edit] Choice file size and resolution

File:File size.jpg

Now, the format of the working zone are the place that it has on the memory of my computer and the resolution are 72dpi. It's good for painting for web but in graphic industry of printing we need to choice a size and a resolution. If we have to draw a picture of 12 picas per 8 picas to but in the text of a book, we need to see the limit of the 12px8p zone and adjust the resolution to 300dpi. It's very important because we should drawing in the good size to go in the space on the text and need have the good quality to print. It's good to have a very big space to draw but you should add a frame that we can move to have guide when we draw and select what we want to export in jpg.

[edit] Frame manager and frame editor

File:MyPaint_-_scrap002_a.ora_003.png

Mypaint needs a simple way to manage multiple frames to export. Frames wouold be especially useful when dealing with concept art for production. Having an infinite canvas means that the artist has unlimited space to draw character concepts. Having them on one canvas enables the director to quickly compare them and decide which work and which dont and also if the style is consistent.

Being able to individually frame a number of these concepts for export to separate files would not only save a lot of time, but would also make life easier when managing these files (to same dir as the ora source file). Re exporting their frames should overwrite them- that way the artist can work on multiple drawings in one single file!!

A simple frame manager (looks a bit like the layers gui) can be used in order to intuitively and quickly manage a concept canvas. here are the presentation slides:

https://docs.google.com/present/view?id=dc7366f8_131sr6k54hh

1. file>document frame editor opens the frame manager window (looks a bit like the layers)

2. Create new frame creates a new frame.

3. when the frame is selected, it shows on the canvas (frame editor) . Double clicking renames it. The tick box on the right tells mypaint to export it when saving. The x mark on the left deletes it...

4. The frame editor has corner handles to resize. It shows the name of the frame,its size. Double clicking on size lets user input numeric values.

5.File>export all frames exports all the frames that have a star symbol as png files or jpg files. Maybe instead of a star symbol we can have a JPG, PNG, or X (empty) symbols - clicking to toggle between the three values). X/empty means dont render

[edit] the saving file

Add the possibility to save on a format readable by adobe softwares with a with background and no compression.

[edit] Help Lines

Insert in mypaint a tool to create "help lines" to be snapped in drawing

  • I can create a rectangle, a circle, a straight line, a curved line with a tool

( a new menu?? for example a menu called Help Lines with create circle, create line,create etc etc, show/hide help lines)

  • these object are on a layer of their own, that can be show/hide with a menu or with a shortcut key
(Show-> Display Help Lines F4)
  • These "help Lines" can be modified/dragged using the square
  • The cursor "snap" on these lines when they are showed to create a perfect circle, a perfect straight line, a perfect

curved with any or part of shapes

[edit] Multifunctional select tool

Image:Select_tool.png

Selected area could be transformed in many ways: mirrored, rotated, scaled, etc.


[edit] Layers Transparency locks that affect active layer

Author(s): Todor Imreorov Pros: painted pixels on any layer can be used as a selection mask, it SIMPLIFIES the process Cons: mypaint would look into pixel data. Having many layers with a lock on might make it too heavy on mypaint. Also having a giant file.

[edit] Great selection feature.

Author: Rusty G.

I enjoyed making this demonstration of ideas... their are other software out their which are similar to these ideas. I do love these concepts.

File:RustyTool.JPG

Pros: A layer mask devoted to each layer would be nice for this tool, to save the selections. I don't care about the other options I'd just use gimp. It's not like Gimp selections. Cons: Maybe could not export svg...? (I don't know...)

[edit] Use layers as transparency locks (or masks). The whole idea is to have transparency still locked (layer A+B), while you work on your active layer (C).

The standard way transparency is locked usually puts a lock only on the active layer and that lock does not work when we paint on other layers. How about if mypaint had the ability to use the transparency lock of all layers that have it- any number of layers, and those locks would affect any active layer always(even newly created ones). We will be able to take the alpha of one layer and use it on another, or on a newly created one! Here is a user case (NEW): https://docs.google.com/present/view?id=dc7366f8_101s87gptg5


That feature that will let users add texture and shadow to an object -non destructively on a new layer, without the need and complexity of masks and selection tools - it is in fact simplifying the concept of masks. Also confusion of the user can be easily avoided by having enough GUI feedback . One way to hint that there is a lock is to have an indication on the canvas itself that hints that the Lock is ON and the user is in alpha lock mode. And maybe even have a quick keyboard shortcut/button to toggle alpha lock mode on and off-Much like masks in zbrush.


File:Masklayertransparency.jpg


== Having locks for specific layers gives you the ability to use them as alpha masks. That way you can lock areas which you dont want to paint on globally. Two ducks with one stone- the artist gets transparency locks and selection masks in one. Putting multiple layers on "Lock" lets you combine the masks. Other possible developments in that direction are: - Ticking an "Invert" box lets you invert the transparency lock on all masks - combining two or more alpha locks (by enabling their layer's transparency locks) - Making an alpha mask semi-effective by reducing the opacity of its layer

I sat down and made a mock up to explain visually. Here: == https://docs.google.com/present/view?id=dc7366f8_101s87gptg5

why are alpha locks useful? http://vimeo.com/20846279

Proposal forum thread: http://forum.intilinux.com/mypaint-development-and-suggestions/lock-transparency-on-layer-while-drawing-on-any-other-layer/msg7303/#msg7303

Also note that encountering this for the first time is not too different from the classic user case and wont confuse people. It will just add a whole new level of flexibility. It can be used just like the classic way- the user can still toggle the active layer's transparency lock and painting on it will be the same as it would in photoshop. Painting on other layers (with the lock still on) however will have a completely new powerful effect

[edit] Undo/Timeline/Scrap

It would be useful to have a more elaborate version of the undo slider of the status bar described about. Perhaps you could rightclick on it, and get a bigger bar with timestamps, markers for scrap snapshots, etc.

[edit] Project Manager

It would be useful to be able to store different versions of a painting as directed graph. Instead of random scraps, a work-in-progress would be a tree of experimental versions. You'd want a nice GUI of the graph with thumbnails, of course.

[edit] Guides and References Manager

This could either be a single window with a tabs, or two windows, but the functionality would be split into guides (paths that can constrain the brush) and references (linked or generated content that can be used to aid painting).

File:GuidesAndReferenceManager.png

Note: both panes would have an "Add" button that would bring up a menu or dialog to select what type of guide/reference you would like to add, and an "Edit" button that would bring up a custom dialog to edit the specific properties/settings on a guide/reference. Both would also have a checkbox for setting whether or not to display edit handles on the canvas for the selected guide/reference.

[edit] Guides

The guides manger would allow you to manage one or more guides. Guides would be presented in a list. The selected guide in the list would be considered the "Active Guide". When a guide was selected, edit handles would appear on the canvas so that you could edit the guide. These could optionally be turned off so they wouldn't interfere with the workspace. The ability to have more than one guide would be a huge advantage when doing 2 and 3 point perspectives.

Guides would work in one of six different ways that would be set globally (from the dropdown at the top of the guide pane).

File:GuideSnapType.png

Note: dotted lines are two guides, red line is stroke path (traveling left to right), and the blue is the painted stroke with the given snap type.

1) No Snap: would disabled snapping on all guides.

2) Snap to Active Guide: would snap the brush to the active guide (the guide selected in the guide list) no matter where you drew on the canvas.

3) Snap to Nearest Guide: would snap the brush to the nearest guide. The brush could snap to more than one guide across the entire brush stroke, allowing you to transfer the brush from one guide to another (such as two crossing line guides).

4) Snap to Nearest Guide - Sticky: would behave like "Snap to Nearest Guide", only the brush would stay snapped to the initially used guide throughout the entire brush stroke.

5) Snap to Guide by Distance: would snap to any guide once the brush fell within a globally defined distance from a guide path.

6) Snap to Guide by Distance - Sticky: would behave like "Snap to Guide by Distance", only once a guide had been snapped to, the brush would stay snapped to that guide for the rest of the brush stroke no matter how far from the guide you moved the brush.

[edit] Guide Types

While there could be many ways to derive a guide path there are three basic types that would prove useful: Line, Line Segment/Ruler, and Custom SVG Path. One possible other guide might be a angle measure/arc guide - but I haven't included that one.

File:GuideType.png

[edit] Line Guide

File:LineGuide.png

Note: green represents the handle the user is interacting with.

The "Line Guide" is a guide defined as a line passing through two points on the canvas. Each point has a handle through which the line can be edited. One handle is considered the "pivot" handle, and the other is the "rotation" handle. When the user moves the "pivot" handle, the entire line moves (the "pivot" handle moves the "rotation" handle, so that the line remains at the same angle and the "rotation" handle remains the same distance relative to the "pivot" handle). When the user moves the "rotation" handle the line angle changes (the "rotation" handle moves independently of the "pivot" handle, allowing the line angle and the "rotation" handle position relative to the "pivot" handle to change). The angle of the line might be displayed while the user was dragging the rotation handle. When the user double clicks (double pen taps) a handle, the handles switch (the "rotation" handle becomes the "pivot" handle, etc.). In the "Guides Manager", the popup editor for the "Line Guide" might allow you to turn on clipping for the "pivot" handle so that the line becomes a ray passing from the "pivot" handle through the "rotation" handle.

This guide would make it very easy to set up 1, 2, and 3 point perspectives - the "pivot" handle would be the viewpoint for each line. The ability to have the line operate as a ray would make a 1 point perspective a little more easy.

[edit] Line Segment/Ruler Guide

The "Line Segment/Ruler Guide" would allow you to have a line segment guide on the canvas as well as give you measurements.

[edit] Custom SVG Path Guide

The "Custom SVG Path Guide" would pull in a path from an SVG file, and display that on the canvas. It would use the "Generic Transformation Widget" to move/scale/rotate (see below for more details on the "Generic Transformation Widget"). This means the user could create there own guides (ellipses, rectangles, french curves, custom arcs, profiles, etc.).

[edit] References

References would be content displayed on the canvas while editing in MyPaint, but not saved as pixels in the actual image (the data to recreate them would have to be stored somewhere in the file though). If the code was written in such a way that it easily allowed programmers to add more reference tools there is a lot of room for additions. In the references manager, you can control the opacity of each reference, and whether it was display above or below the actual layer stack. The brush might be made to be able to use the references as a way to select color (you could place an picture on the canvas, and then paint it onto the actual canvas by paining over it with the brush).

The most basic reference type would be an image reference, that would pull in a image from a relative or absolute file path and display it on the canvas. It would use the "Generic Transformation Widget" to move/scale/rotate the image (see below for more details on the "Generic Transformation Widget").

Some other possible reference types are: a 3D Mannequin, that would allow you to pose a mannequin on the canvas; a generic 3D Object, that would pull a model in from a file and do a quick (crude) render of it and display that render on the canvas for massing purposes; a perspective grid; a series of color swatches; etc.

Not all - or perhaps any - of these reference types would be a wise use of time to implement initially, but if the reference tool code was modular enough to plug new tools into with ease, people could write reference tools of their own as required.

[edit] Generic Transformation Widget

File:GenericTransWidget.png

Note: green represents the handle the user is interacting with.

The "Generic Transformation Widget" would be an on canvas widget that would provide handles to quickly move/rotate/scale-zoom an arbitrary item. It could be used on references and guides, as well as layers (if layer transformation was add), the canvas itself (to move/rotate/zoom your view), or any other time you need to transform something.

The widget would be able to be either modeless or modal as the situation required (in layer transformations (modal) you would want the ability to dismiss the transformation with the pen, without using the keyboard, so a little button on the widget to preform a commit would be nice).

The inner-most handle would allow you to preform a move.

The ring around that would allow you to preform a rotate. When your cursor was over this ring, an icon indicating rotation would appear in the center handle. When the user double clicks (double pen taps) on this handle, rotation would be reset to the default.

The outer ring would be for scaling/zoom. If the aspect ratio was not locked there would be an additional two handles for scaling on each axis. Each handle would have a small arrow pointing in the direction of the scaling. The remainder of the ring would have an arrow pointing to the top left corner of the item. Again, an icon indicating the action of the handle would be displayed in the inner most handle. Double clicking on the main portion of the scale ring would reset the scale to the default (original). Double clicking on one of the axis scaling handles would scale that axis relative to the other axis so that the aspect ratio was back to the original ratio.

Optionally the widget could also display additional scaling handles at the edges of the bounding box:

File:GenericTransWidgetBBoxHandles.png

You could also specify the widget to display minimal handles when using bounding box handles:

File:GenericTransWidgetMinimalHandles.png

In this case the bounding box handle would combine the scale and rotate into a single handle (when you move a handle, moving in and out (parallel to the line drawn from the move handle) would scale, and side to side would rotate).

The optional bounding box handles, minimal handles, and aspect ratio lock could be set on an individual guide or reference, allowing the user to select the widget that works best for their needs (some custom guides might work best without bounding box handles, other might want aspect ratio locked, etc.).

Some examples of the widget in use:

File:GenericTransWidgetInUse.png

[edit] BrushQuicklist

The BrushQuicklist would be a visual representation of brushkey-brushes (brushes associated with a shortcut [a number between 1 and 9]) so as to make it easier to see which brushsetting is stored on which key and also to make the ui "tablet friendlier".

File:BrushQuicklist.png

[edit] Additional input devices

Allow generic HID input devices to be linked to functionality. Main use case would be a joystick/space navigator/whatever to scroll, zoom and turn used with the other hand than the drawing tablet pen.

[edit] Layer groups

Layers are treated in the same way as normal files, they can be moved, renamed, put in folders and so on. With folders, turning on/off visibility/locking doesn't toggle everything inside them, but just makes the folder invisible/locked while the state of everything in it is saved.

File:LayerGroups.png

Personal tools