AvraShow
Thursday, January 17, 2008
  Gradients

Here is a Web page consisting of text.

quotes-ben-whitebg

Here is an illustration of a child.

cardcollector

Here is an airplane with a fish design (no special effects, BTW).

cropped-fishplane

Here is a drawing (top hat? short Greek column?).

knob

Adding a Gradient as a Design Element

A gradient can add visual interest. The Web page previously shown has just two colors: blue text on a white background.  By adding a gradient at the left side of the page, the page has more visual interest.

quotes-ben

The gradient softens the previously monochromatic (one color) design. It acts as a kind of bridge that goes from dark blue (the text color) to white (the background color). The gradient also reinforces the page layout, acting as a vertical column that reinforces the invisible line formed by the left margin of the heading and text lines.

Using a Gradient to Simplify an Image

This was the photo I used as a basis for the illustration.

AFTER---p00000841

The piano and power cord distract from the main subject, so I replaced them with a background with a gradient that is brighter on the left and slightly darker to the right.

In this case, the gradient adds a visual hint that the objects are in a realistic space. A solid color background would make the illustration look flat.

Did you notice the gradient in the illustration before I described it?

The original picture of the airplane has a cloudy sky that competes for the viewer's attention, so I replaced it with a simple vertical gradient. This makes the plane more prominent. Addition by subtraction.

Using a Gradient to Give a 3-Dimensional Appearance

I added some rectangles with semicircles to the "side" of the cylinder and a rectangle  with white rectangular dot on the "top" of the cylinder of the geometric drawing shown earlier in this post.

clearknob3

These added rectangles represent indentations for gripping and turning the plastic knob. The rectangle on top of the knob indicates where the knob is pointing.

The effect is convincing because the gradients used on the plain shape shown earlier trick the eye into thinking the graphic represents a three-dimensional shape with light reflected due to its curvature.

Summary

We've seen how gradients can be used as an element in page layouts, as a background that adds power to an image by eliminating unnecessary details, and as a visual device that suggests three-dimensional space.

There's lots more to cover. I know I didn't give any how-to directions or even suggest what techniques were used. I'll cover all that and plenty more. Stay tuned.

 
Comments:
Words about people and things and ideas that you might find useful, interesting and enjoyable.

ARCHIVES
December 2003 / July 2005 / August 2005 / September 2005 / October 2005 / November 2005 / March 2006 / May 2006 / June 2006 / July 2006 / August 2006 / September 2006 / October 2006 / November 2006 / December 2006 / January 2007 / February 2007 / March 2007 / April 2007 / May 2007 / June 2007 / July 2007 / August 2007 / September 2007 / October 2007 / November 2007 / December 2007 / January 2008 / February 2008 / March 2008 / April 2008 / May 2008 / June 2008 / July 2008 / August 2008 / September 2008 / October 2008 / November 2008 / December 2008 / February 2009 / March 2009 / May 2009 / July 2009 / August 2009 / September 2009 / October 2009 / November 2009 / December 2009 / January 2010 / February 2010 / March 2010 / April 2010 / May 2010 / December 2010 / September 2011 /

Subscribe!

Paste this into in your newsreader URL and choose "Subscribe":
http://feeds.feedburner.com/avrashow


Powered by Blogger