Difference between revisions of "GradientEditing"
(Adding new page related to gradient editing)
Revision as of 02:29, 4 May 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):
Adobe Illustrator (not hovering over gradient controls):
Adobe Illustrator (while hovering over gradient controls):
Autodesk Sketchbook Designer:
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.
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.