K-State home » K-State Research and Extension » Technology  » Support » Imaging/Media » Computer Graphics
Technology
Computer Graphics

This section covers basic concepts that can be used to help spice up your computer graphics.


 

Photoshop & Illustrator Adobe® Photoshop® and Illustrator® are both very powerful image editing/creation tools.  Each has its own unique advantages and tricks.  Both are designed not only to work in conjunction with one another, but were also constructed to have similar interfaces.  So mastery of one helps you to learn the other fairly easily. 

Some general things you may want to keep in mind when working with computer graphics, are basic design principles.  We will briefly cover several of these concepts, as well as provide some insight into what types of file formats to use, and quality settings. 

 

Essential Design Concepts

There are certain theories/concepts to consider when working on creating any kind of image, be it digital, or even when working with standard design formats: painting, photography, graphic design, etc...  The key concepts that we will cover are:

  • Composition
  • Color Theory
  • File Formats (this is specific to working with computer graphics)

 

Composition

Composition refers to the layout of the visual elements within the image.  There is plenty of reading material available on the internet and in print about design and composition techniques.  A couple of quick tricks of composition that we will cover are the "Rule of Thirds", and creating gutters/sight lines in images. 

Rule of Thirds The "Rule of Thirds" is most commonly used when working with photography, but also applies to creating appealing graphic images.  This concept emphasizes that moving the focal point of an image, or the subject, to a "third" of the overall composition will help to enhance the visual appeal.  If you notice, the image to the right is divided up into 9 equal squares.  The X's where the lines intersect represent each "third" of the photo.  The flowers that are most in focus sit on or near these intersects.  This image also employs "depth of field".  Depth of field refers to when the objects closest to you are in focus, and as they get further away, are more blurred. 

 

Lines of Sight The other quick compositional concept we will cover is creating gutters/sight lines in an image.  A gutter is what is created by columns of text next to one another.  For instance, in a newspaper, the space between each column of type is called a gutter.  When used in graphics, gutters help to create sight lines which will help to guide the eye around the picture.  Sometimes they are only implied, and are not as obvious as a blank space between texts.  Sight lines can be created by contours in clothing, the natural flow of text, or clusters of similar colors.  It is also helpful to use gutters/empty space to help reduce clustering of too many objects together.  The corresponding photo is a good example of how implied lines of sight are created.  The natural contours of this lighthouse stairwell help to lead the eye around the image.  The lines and arrows show one way that eye can easily flow throughout the image.  Also note where the stairwell and pole intersect is near the third of the photo, so the photo also uses the rule of thirds. 

 

Color Theory

Color Schemes Color Theory is the basis of creating color schemes for images, websites, or other design scenarios.  All of color theory is based upon the color wheel.  The color wheel consists of: the primary colors (red, yellow, blue), secondary colors (green, orange, and purple) which are formed by mixing each of the primaries with one another (i.e. red + yellow = orange, etc...), and finally the tertiary colors (yellow-orange, red-orange, red-purple, blue-purple, blue-green, and yellow-green) which are combinations of the secondary & primary colors.  All together, this gives us 12 colors, that when placed in order of color, create a color wheel (shown in the corresponding graphic).  This is a very basic form of a color wheel; a true color wheel has a full gradation between each color, and is not split into 12 separate colors, but instead is one homogenous wheel of color.  Color schemes are created by combining certain colors with one another dependant upon their placement in the color wheel.  Some different color schemes are: Complimentary, Triadic, and Analogous. 

Complimentary color schemes are created by choosing two colors that are directly across from one another within the color wheel.  For instance: green & red, blue & orange, and yellow & purple.  This color scheme is often used to create maximum contrast, and a strong sense of stability.  They are also often considered very formal.

Triadic color schemes are created by choosing three colors that are equally spaced within the color wheel.  An easy way to calculate this is by picking a color, then going four colors over sequentially, and again four colors over.  Because there are 12 colors total in this color wheel, there are 3 colors in between each of our triadic colors, spacing them equidistant from one another.  Examples of a triadic color scheme are: blue, yellow, and red (primary colors!); green, orange, and purple; and yellow-orange, blue-green, and red-purple.  These color schemes are often considered very playful and lively. 

Finally, Analogous color schemes are some of the easiest to create.  They are formed by picking three colors that are directly next to one another.  For instance: red, red-purple, and purple; blue, blue-green, and green; and orange, yellow-orange, and yellow.  These color schemes are good when you want to have one color emphasized, but do not want to use a monochromatic color scheme. (A monochromatic color scheme is when only one color is used, but with varying amounts of white/black added, i.e. purple, light purple, and dark purple.)

File Formats

File Formats There are three common graphic file formats-TIFF (tif file extension), GIF (gif), and JPEG (jpg).  The Web uses JPEG, GIF, PNG and a new file type (released April 2001) called SVG (Scalable Vector Graphic).  You also might also use BMP image files. BMP's are Windows Bitmaps and are a common Windows image file format.  You can find thorough explanations of each file type on the web.  We are going to cover the basics. 

To make files smaller, compression can be used.  Lossless compression saves the data and packs it more tightly together.  With no compression.  The other option is to lose some data when the file is compressed.  JPEG uses this lossy (rhymes with bossy) compression to achieve very small file size.  The more you compress a JPEG, the lower the image quality.

TIFF or TIF
TIF is a good format for master copies of images.  It is widely supported by image editing software.  It uses lossless compression which means when a TIFF file is saved no image information is thrown out.  This also means the files can be large.

GIF (pronounced "Jif" or "Gif")
GIF format is best for saving images with few colors.  GIF can store and yield up to 256 colors.  This works best for something like our K-State Research and Extension Logo.  GIF files are smaller than TIFF and higher quality than JPEG, if the image contains few colors.  GIF is not an appropriate file type for storing photographic images.  GIF files are viewable in web browsers and GIF is common format for web icons and clipart.

JPEG or JPG (pronounced "Jay-Peg")
The JPEG format is the king of compression.  JPG is the most common format for viewing images on the Web. JPEG images are small for fast delivery over the Web and are also the most common format saved in digital cameras. A word of caution, don't save JPG's over and over because the images get compressed over each other and lose significant amounts of image detail and information.  JPEG uses lossy compression.  The good news is that a high quality JPEG is often 1/10 the size of a TIFF.  If you are going to send an image via e-mail, it should be as small as possible without affecting image quality. 

Avoid opening and saving a JPEG file multiple times since a JPEG file loses some quality each time.  It is a bit like making a video tape copy from a copy.  Every generation is of lower quality.  If you will be editing an image, don't save your master or archive as JPEG.  If you need to edit an image, save the intermediate image as TIFF.  If you want a master copy, keep it in TIFF and you can always save a JPEG file later for email or for placing on a web page.