GradientEditing - Revision history

ScislaC: Wikifying w/ minor updates

2012-07-19T22:39:13Z

Wikifying w/ minor updates

← Older revision		Revision as of 22:39, 19 July 2012
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).		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).

Line 32:		Line 31:


	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:		==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 add a new gradient stop.
Line 41:		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

ScislaC at 22:30, 19 July 2012

2012-07-19T22:30:26Z

← Older revision		Revision as of 22:30, 19 July 2012
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:

ScislaC: Adding new page related to gradient editing

2012-05-04T02:29:14Z

Adding new page related to gradient editing

New page

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):

[[File:Gimp-grad.png]]

Adobe Illustrator (not hovering over gradient controls):

[[File:Ai-grad-controls.png]]

Adobe Illustrator (while hovering over gradient controls):

[[File:Ai-grad-controls2.png]]

Autodesk Sketchbook Designer:

[[File:Sketchbook-designer-grad-controls.png]]

Inkscape:

[[File: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: [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:

*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.

[http://vectorboom.com/load/web_roundups/mesh_tormentor_plugin_complete_guide/13-1-0-18 Mesh Tormentor plugin for Illustrator]