Difference between revisions of "GradientEditing"

From Inkscape Wiki
Jump to navigation Jump to search
(Adding new page related to gradient editing)
 
m
Line 29: Line 29:
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).
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]
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]
 


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, some very nice usability perks for their gradient controls are as follows:

Revision as of 22:30, 19 July 2012

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

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, 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


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:

  • 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