Difference between revisions of "GradientEditing"

From Inkscape Wiki
Jump to navigation Jump to search
(Adding new page related to gradient editing)
 
m (Wikifying w/ minor updates)
 
(One intermediate revision by the same user not shown)
Line 1: Line 1:
Hopefully this can serve as a place to discuss thoughts and ideas about Gradient editing and Advanced (complex) Gradients.
+
Hopefully this can serve as a place to discuss thoughts and ideas about Gradient editing and Advanced (complex) Gradients as well as their UI.
  
 +
==UI Examples==
 
First off, here are a few different on-canvas gradient controls from different applications. While ours has served us well, it's not exactly the best UX. In addition to these images which show various controls there is a video in the next section which shows some very nice UX in action.
 
First off, here are a few different on-canvas gradient controls from different applications. While ours has served us well, it's not exactly the best UX. In addition to these images which show various controls there is a video in the next section which shows some very nice UX in action.
  
GIMP 2.8 (this shows only when creating initially):
+
'''GIMP 2.8''' (this shows only when creating initially):
  
 
[[File:Gimp-grad.png]]
 
[[File:Gimp-grad.png]]
  
Adobe Illustrator (not hovering over gradient controls):
+
'''Adobe Illustrator''' (not hovering over gradient controls):
  
 
[[File:Ai-grad-controls.png]]
 
[[File:Ai-grad-controls.png]]
  
Adobe Illustrator (while hovering over gradient controls):
+
'''Adobe Illustrator''' (while hovering over gradient controls):
  
 
[[File:Ai-grad-controls2.png]]
 
[[File:Ai-grad-controls2.png]]
  
Autodesk Sketchbook Designer:
+
'''Autodesk Sketchbook Designer''':
  
 
[[File:Sketchbook-designer-grad-controls.png]]
 
[[File:Sketchbook-designer-grad-controls.png]]
  
Inkscape:
+
'''Inkscape''':
  
 
[[File:Inkscape-grad-controls.png]]
 
[[File:Inkscape-grad-controls.png]]
  
  
----
+
==Advanced Gradients & Editing==
 +
Advanced gradients, powered by gradient meshes will empower users to achieve visual effects not easily doable currently. A key to advanced gradients is that the regular mesh controls do not need to be visible for "other" advanced gradients. Think of mesh editing as the real power-user/technical way to edit them. Conical gradients can be achieved with meshes, as well as "advanced linear" and "advanced radial" gradients which you can see in the following video (note, some visual transforms may not be achievable or otherwise "easy" to achieve).
  
 +
A gradient editing video from Autodesk Sketchbook Designer demonstrates the type of advanced "warping" and such that could be applied: [http://www.youtube.com/watch?v=N1F9y258LCk&hd=1&t=18s Youtube video]
  
Advanced gradients, powered by gradient meshes will empower users to achieve visual effects not easily doable currently. A key to advanced gradients is that the regular mesh controls do not need to be visible for "other" advanced gradients. Think of mesh editing as the real power-user/technical way to edit them. Conical gradients can be achieved with meshes, as well as "advanced linear" and "advanced radial" gradients which you can see in the following video (note, some visual transforms may not be achievable or otherwise "easy" to achieve).
 
  
A gradient editing video from Autodesk Sketchbook Designer demonstrates the type of advanced "warping" and such that could be applied: [http://www.youtube.com/watch?v=N1F9y258LCk?hd=1&t=18s Youtube video]
+
==Gradient UI from Sketchbook Designer==
  
Aside from the transformations that can be applied to linear and radial gradients, some very nice usability perks for their gradient controls are as follows:
+
Aside from the transformations that can be applied to linear and radial gradients (see video above), some very nice usability perks for their gradient controls are as follows:
  
 
*Single click to add a new gradient stop.
 
*Single click to add a new gradient stop.
Line 40: Line 42:
  
  
----
+
==Mesh Specific==
 
 
 
 
Mesh Specific:
 
  
 
This functionality is only being pointed out due to it being advanced
 
This functionality is only being pointed out due to it being advanced

Latest revision as of 22:39, 19 July 2012

Hopefully this can serve as a place to discuss thoughts and ideas about Gradient editing and Advanced (complex) Gradients as well as their UI.

UI Examples

First off, here are a few different on-canvas gradient controls from different applications. While ours has served us well, it's not exactly the best UX. In addition to these images which show various controls there is a video in the next section which shows some very nice UX in action.

GIMP 2.8 (this shows only when creating initially):

Gimp-grad.png

Adobe Illustrator (not hovering over gradient controls):

Ai-grad-controls.png

Adobe Illustrator (while hovering over gradient controls):

Ai-grad-controls2.png

Autodesk Sketchbook Designer:

Sketchbook-designer-grad-controls.png

Inkscape:

Inkscape-grad-controls.png


Advanced Gradients & Editing

Advanced gradients, powered by gradient meshes will empower users to achieve visual effects not easily doable currently. A key to advanced gradients is that the regular mesh controls do not need to be visible for "other" advanced gradients. Think of mesh editing as the real power-user/technical way to edit them. Conical gradients can be achieved with meshes, as well as "advanced linear" and "advanced radial" gradients which you can see in the following video (note, some visual transforms may not be achievable or otherwise "easy" to achieve).

A gradient editing video from Autodesk Sketchbook Designer demonstrates the type of advanced "warping" and such that could be applied: Youtube video


Gradient UI from Sketchbook Designer

Aside from the transformations that can be applied to linear and radial gradients (see video above), some very nice usability perks for their gradient controls are as follows:

  • Single click to add a new gradient stop.
  • Single click to delete a gradient stop (click on the X/delete tag that is attached to each stop).
  • The very obvious direction indicator pointing off the end stop of the gradient.
  • Pressing Alt when clicking a stop is what brings up the color chooser (right where your mouse is). Note, if you select a stop and bring up the color ring on another stop, it will change the color of the selected stop (it feels awkward since it's not where you're visually focused).
  • Click and drag within the fill moves the whole gradient (provided you don't click and drag on a specific gradient control) vs our creating a new one.


Mesh Specific

This functionality is only being pointed out due to it being advanced functionality that is not provided by Illustrator itself and other developers felt the need to add it.

Mesh Tormentor plugin for Illustrator