TypeFACE

"TypeFace Doom"
Created in Adobe Illustrator

Custom Text

"JT Slackr I"
Made in Adobe Photoshop

"JT Slackr II"
Made in Adobe Photoshop

"JT Slackr III"
Made in Adobe Photoshop

Poster Work

"Sexiboi"
Made with Adobe Photoshop

"Buzz E. Bear"
Made with Adobe Photoshop

"SQUADD"
Made with Adobe Photoshop

Sugar Skull

"SugarSatanSkull"
Made in Adobe Illustrator

NOTES: Type & Typography

Design

Typography

“Fonts are the clothing that our ideas wear”

classical time-tested typefaces

Sans & Serif

Serif reads best at smaller sizes, can be complementary

Font Variance: Too many confuse the reader

Definition: Fonts that are too similar cause ambiguity

Readability: use upper and lowercase letters, all caps+annoying and shout-y

Alignment: Left alignment reads easiest, consider eye flow as it moves down the page

Emphasis: Use these tools with discretion and without disturbing eye flow

• Italics
• Bold
• Size
• Color
• Typestyle Change

Integrity: Avoid stretching or distorting type

Weight: Strive for a sense of balance

Kerning: spaces between letters themselves

Tracking: spaces between groups of words

Large Text Blocks: Rags

NOTES: Color Theory

Color Theory

• Primary, secondary, tertiary
• Red, Orange, Yellow, Green, Blue, Indigo, Violet
  

Primary Colors

• Pigment generated: red, yellow, blue
• Light generated colors: red, green, blue
• Subtractive color: Pigment Generated Model
• Additive color: Light Generated Model

Secondary & Tertiary

• a secondary color wheel can expand to tertiary and beyond
• Dark color recedes, light color advances

Color Mixing

• RGB light generated models
• RGY Pigment generated model
• CMYK print process

Color Modes

• Monochrome: tints, shades and tones of a single hue
• Grayscale: Black and white only
• Web safe RGB: Hexadecimal compatible

Color Modification

• Tint: add white to a pure hue
• Shades: add black to a pure hue
• Tones: add grey to a pure hue

Color Harmony

• Complementary
• Split complementart is choosing one to the right left and across the spectrum
• Alogous are 3 colors right nect to eachother
• Triad triangle shap, corners
• Tetradic: rectangle
• Quadrilateral: square

Color Palettes

• Different color palettes can invoke mood,location,emotion

Color properties

• Cool
• Warm
• Bright
• Dark Saturated
• Desaturated

Color Intensity

• Color intensity changes in relation to its surrounding color

Cultural and Psychological Color Associations

• These color associations are generated from cultural and contemporary sources and may not be universally recognized

Why Color Matters

• 73% of purchasing happens in store
• catching shoppers eye.
• Color increases brand recognition by up to 80%
• Color affects appetite
• Blue is a rare occurrence in nature
• We have no appetite response to blue food
• Color affects the mind
• Pink is a tranquilizing color
• used in prisons, holding cells ect.

NOTES: Understanding File Format

Understanding File Format

File Formats

• All computers docs, or files are packaged in different formats
• The format is determined often buy the files origin, such as a software program like Photoshop, or a device such as a digital camera
• Graphic files such as a photo, video or artwork can be reduced in file size by using image compression formats

Lossy vs, Lossless

• Graphic images under 2 categories on compression, Lossy and Lossless
• With lossy, data is lost or reduced to be a smaller file, but lose resolution, compression artifacts.
• Lossless retains data but larger files

Graphic Formats

• TIF,JPG and GIF are the 3 most common formats. Printing, scanning, ect.
• PNG is a common web format, high rez and can contain alpha (transparency) channel
• Each format has its own advantages and disadvantages

File Format: TIF

• Stands for Tagged Image Format
• Common format for desktop publishing, print, photo and graphic design
• Is a LOSSLESS file format. It retains image data for max quality
• Can result in larger files, not fit to display over images

File Format: JPG

• Stands for Joint Photography Expert Group
• Created for digital photography and works best for photo content
• Is a LOSSY format
• Can reduce an image file size by 10 without showing significant compression.
• The level of compression is adjustable

File Format: GIF

• Stands for graphic Interchange Format
• Id best for graphics or images that have flat color or even tone, such as a cartoon
• Reduces images by “indexing” color from 3 channels to I
• Is adjustable by changing color bit levels from 1 to 8
• COntains no DPI (Dots Per INch) data for printing. Not a proper format for print.

Which Format to Use?

• Photographic images: TIF PNG best quality, GIF worst choice
• Graphics: PNG or TIF best quality, JPG worst choice

Know your Pixels

• Tif and JPG are bests for images with pixels that blend in color, these are called “contiguous pixels” Anti-Aliase
• GIF best for images with flat even tone, or “non-contiguous pixels” Aliase

NOTES: Vector v. Bitmap

Vector vs. Bitmap

• Bezier Curves/NURBS

What is Raster?

• Image or images created with pixels
• can be photo or video
• jpg,gif,psd,tiff,mpg,mov,wmv,mp4

Features of Raster

• Image file format standard for photography and video
• are resolution dependent
• more pixels = higher rez
• can be reduced in size but doesn't scale up without loss of quality
• Raste is a pixel-based image

What is Vector?

• Vector is a mathematically based method for creating line data
• popularized by Pierre Bizier to help with automobile manufacturing techniques for Renault.
• vector files are scalable without losing image quality
• because they are math based, vector files are smaller in file size generally
• vector files aren’t internet browser friendly, require the proper software for display such as Adobe Flash

Vector Graphics

• Vector graphics can be stored in different formats,AI,PDF,WMF,FLC
• Font data is stored as vector
• Are resolution “independent”

Vector vs. Bitmap

• Vector is scaleable, bitmap loses quality when scaled up
• Bitmap is best for photographs and video
• Fonts are stored as vector to ensure image quality at any size

Insightful Thoughts

What is color? What's so special about about it huh? Well let me begin at the basics. There are three types of color, primary, secondary, and tertiary. The primary colors include red, yellow, and blue. When various combinations of those colors are mixed then you get the secondary colors: green, purple, and orange. For example, blue and yellow combine to create green. Tertiary colors, to go even deeper, are all the colors between the primary and secondary colors. There can also be this great thing called additive and subtractive color models. Subtractive color comes from a pixel generated model and additive is derived from light generated models. Color can also be very powerful. The types of colors we choose for our art can evoke differing feeling. For example Black might be associated with death and blue could be associated with sadness.

Grey Scale

Monotone

Complementary Colors

Color Palette Generation

"Color Palette Generated from Photograph"
Created in Adobe Photoshop

Color Theory Poster

"Color Theory"
Created in Adobe Illustrator