T356T356 - Graphic Workshop

Agenda:

• Aesthetics & color
• Photoshop tour
• Review exercise

Aesthetics

What are good graphics? Look at examples.

Color

Color can be described in terms of three characteristics:

1. Hue (the actual color)
2. Saturation (the strength or intensity, or how far it’s removed from gray)
3. Brightness (how dark or light)

But you can also describe it in other ways- depending on what color mode you are working in. Photoshop lets you work in different color modes. The two color modes you should be most familiar are

• Subtractive Color (CMYK)
• Additive Color (RGB)

Subtractive Color

The subtractive color system is used in world of print and painting. The primary colors (think paints or inks) are:

• Cyan
• Magenta
• Yellow

Mix them all together and you get black. In Photoshop when you work in this mode you can change colors by adjusting the CMYK (K is black) sliders in the color picker window.

Additive Color

The additive color system is used for computer graphics, TV and lighting design. This is the color mode we’ll use to create TV graphics.

The three primary colors (think of them as light sources) are:

• Red
• Green
• Blue

If you mix them all together you get white. In Photoshop when you work in this mode you can change colors by adjusting the RGB sliders in the color picker window.

The two systems together

The two color systems work in opposite ways, but are connected. If you look at a color wheel, you’ll see that Cyan, Magenta & Yellow can be found directly between Red, Green and Blue. Colors directly opposite each other on the color wheel are said to be complimentary. If you look directly opposite R, G or B, you’ll find a complimentary C, M or Y.

Open color wheel graphic along with on-line examples

On-line color examples:

http://www.bbso.njit.edu/Documentations/gimpdoc-html/color.html
(has nice pictures of color models)
http://mc2.cchem.berkeley.edu/Java
(cool interactive additive light java example)
http://www.visibone.com/colorlab/
(nice 216-color web color wheel

Color Bars

Color Bars contain the primary colors of both the additive and subtractive color systems.

On-line color bars:

http://www.videouniversity.com/tvbars2.htm (Hal Landen’s site)
http://www.mivs.com/technical/colorbars.html

Vector and Bitmapped graphics

Paint and drawing programs work with vector or bitmapped images, or a combination of the two.

Vector graphics are made up of shapes, lines and curves defined mathematically.

When you draw a circle or create a piece of text with a vector-based application (such as Adobe Illustrator), it keeps track of the lines and angles that make up objects. From this mathematical data, it draws the display. We can scale a piece of vector artwork up to any size, and it will still retain its quality.

Bitmap or raster images use a grid of pixels to represent an image. Each pixel has a specific color and brightness. It is well suited for images with subtle changes in color and brightness such as photographs or digital paintings. If you were to enlarge a bitmap graphic, it would lose resolution.

Enlarging a small circle would produce jagged edges.

A vector-based program like Illustrator simply draws the circle bigger, so the edges would retain their smoothness

Photoshop can work with both vector and bitmap files.

File Formats:

Photoshop lets you work on and save in a number of different color modes and file formats.

• BMP: standard Windows compatible image format (no alpha channels)
• EPS Encapsulated PostScript: Can describe both vector & bitmapped graphics.
  Support by virtually all page layout and desktop publishing programs
• PDF Portable Document Format. Used by Adobe Acrobat. No alpha channel
  support,
• GIF graphics interchange format: Developed by Compuserve for bulletin boards. (8 bit or 256 colors, Compressed once, Basic GIF doesn't support alpha channels but GIF89a does.
• JPEG: joint photographic experts group (no alpha) use variable compression. Doesn’t support alpha channels. Do support 24 bit (true) color.
  • Lossy vs lossless: Whenever you open something (like a JPEG) and save it again it loses some detail. This is know as lossy.
• PNG: portable network graphics (Used for the WWW. Lossless.) Supports 24 bit color. Supports alpha channels)
• PCX: another PC based image format
• PICT: widely used on Macs (Supports alpha channels)
• TIFF tagged image file format: Widely used by all image apps (Supports alpha channels)
• Targa (tga) Video format designed around Targa cards. Supported by most PC-based graphic applications. 32-bit color. Supports alpha channels.

Message

Graphics are a form of visual communication. They convey a message. The message should be decipherable by your viewer. Ideally it should be clear and easy to understand.

Make sure you are familiar with Jim's Graphic Guidleines!

Photoshop Tour

Main interface
Tools (keyboard shortcuts, foreground background etc)
Tool option bar
Windows (menu choices are available under the arrow on right hand side)
Navigator, options, info
Swatches, colors, brushes
Layers, channels, paths
Preferences: work in pixels not inches!
Color modes: Use RGB for video graphic work
Color picker
Layers
Text (kerning & leading)

Photoshop tour

Be sure you know how to do the following:

• Create a new document with the right pixel dimensions
• Work in the right color mode
• Create a new layer
• Copy a layer
• Link multiple layers
• Renaming layers (change in layer properties. Try right clicking)
• Applying layer styles (double click on the layer, but not the name)
• Create editable & rendered text
• Rasterizing vector objects
• Resizing (image size verses canvas size)
• Edit -> transform -> scale, rotate, etc.
• Holding down shift key retains the item’s aspect ratio
• Apply a filter to a selection or layer
• Magic Wand tool (tolerance setting)
• History

Vocabulary (know these)

• Kerning – the space between individual letters on the same line. Usually works by positioning the cursor between two letters then holding down the option key while pressing the left/right arrow.
• Leading – the space between different lines of text
• Anti-aliasing – You can turn this feature on and off. It produces intermediately shaded pixels to smooth out the appearance of jagged edges
• Landscape oriented - Visual pieces that are wider than they are tall (like a movie screen)
• Portrait oriented - Visual pieces that are taller than they are wide.

Scanning

Printed or hand-drawn images can be input into a computer through a scanner. This produces much better results than by using a video camera. The maximum resolution of a video camera is about 720 x 480 pixels, whereas most inexpensive scanners can operate at 300 dpi. In other words, a four-inch square area scanned at 300 dpi will result in a 600 by 600 image.

Because scanners can capture images at such high resolution, a common mistake is scanning at too high a resolution. It’s easy to end up with files that are close to 50 megabytes. These would quickly overwhelm most storage devices.

How high a resolution should you use? It depends on a number of factors.

The easiest way to get started scanning images for video graphics would be to do the following:

• Create a template (empty document) in Photoshop sized for your needs. (720 x 540 for example) Make sure you are using 72 dpi.
  For large images that are landscape oriented, I’d start with something like 100 dpi.
• Scan your image. This will create a new file in Photoshop.
• Copy the image and paste into your template.
  Was it too big or too small? If the image was too small, scan at a higher resolution. If the image was too big, simply scale the layer down in Photoshop.

Once you’ve nudged and sized the image in your Photoshop template, use the “save as” command to save it as a new file. It will be the right size for video and not be too large. Be sure to keep your template intact if you have more images to scan.

Homework

10-point graphic exercise (Due by the end of lab!)

Back to Jim's T354 Home page