The Principals and Elements Notes

Design: The Principles and Elements

What is Graphic Design?
Design elements are the basic units of a visual image.
The principles of design govern the relationships of the elements used and organize the composition as a whole.
All imagery, art, design, and photography alike, are comprised of elements that can be broken down and analyzed. This goes for web design as well.

What are the Elements and Principles?
Design and art elements are the basic units of a visual image.
The principals of design and art govern the relationships of the elements used an organize the composition as a whole.
All imagery, art, design, and photography alike, are comprised of elements that can be broken down and analyzed by it's visual components and the principles that guide them.

Design Elements:
Space/Line/Color/Shape/Texture/Value/Balance

Space:
Can exist in two dimensions or three dimensions.
It can refer to a positive space or a negative one.
It can also refer to foreground, mid, or background elements.

Line:
Line is a basic element, it can vary in thickness, texture, direction, etc.

Color:
Color consists of many pallets, and are use in different situations, depending on the project different pallets say different things.

Shape:
Shape is used for memory and keeping things in people's mind, iconic logos and shapes.

Texture:
Used to invoke people's likes and dislikes, depending on the market you wish to sell or show your product off.

Value:
Value is used to add dimension to something/anything.

Balance:
The properties of an image that allows it to be balanced/unbalanced or symmetrical/asymmetrical.

Design Principles:
Unity/Variety/repetition/Harmony/Proximity/Proportion/Functionality/Emphasis

Unity:
Unity creates a sense of order, a consistency in size and shape.
Proximity can create a sense of unity, it can also show a lack of unity.

Variety:
A sense of change yet similar colors or shapes to engage eyes in difference.

Repetition:
The use of one kind of object or color to improve upon a design.

Harmony:
The use of colors and objects blending together in a larger picture to improve upon the design.

Proximity:
The amount of space and curvature in a design to get as much information as tightly packed as possible, so the eye does not get bored.

Proportion:
The size of one or multiple objects in a design to give it more detail and/or depth.

Emphasis (Focal point):
Using color to emphasis what the user/client is supposed to be focusing on.

Functionality:
Making the design that is useful, necessary, and has a playful or comedic aspect to it.

Cookie gif

Juxtaposition project

Tree PNG Low to High

Bus PNG low to high

Graphic Design Notes #1

Understanding Graphic File Format:

-Understanding Format:

All computer documents and files are packaged in different formats.
The format is determined often by the files origin, such as the 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 image formats fall under 2 categories of compression, lossy and lossless.
With Lossy, image data is "lost" or reduced for smaller file sizes but can cause poor image quality. Can result in showing "compression artifacts".
Lossless retains image data for higher quality, but larger file sizes.
jpeg (lossy) Png (lossless)
Most common three formats for printing, scanning, and displaying images over the internet are TIF, JPG, and GIF.
PNG is a common web format, is high quality and can contain an alpha (transparency) channel.
Each format has it's pros and cons.

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 maximum image quality.
Can result in larger file sizes, not fit for display over internet, is not browser compatible.

JPG
Stands for Joint Photographers Expert Group.
Created for digital photography and works best for photo content.
Is a lossy format.
Can reduce an image file size by 10:1 without showing significant compression artifacts.
The level of compression is adjustable.

GIF
Stands for Graphic Interchange Format.
Is best for graphics or images that have flat color or even tone, such as a cartoon.
Reduces image size by "indexing" color from 3 channels to 1.
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.

-Choice and Image:

Photographic images:
Photos are continuous tones, 24 bit color or 8 bit Gray, no text, few lines and edges. (properties)
Tif or PNG (lossless compression and no JPG artifacts) (For unquestionable best quality)
JPG with a higher quality factor can be decent. (Smallest file size)
TIF or JPG for maximum compatibility.
256 color GIF is very limited color, and is a larger file than 24 bit JPG (Worst choice)

Graphics, including logos or line art
Graphics are often solid colors, up to 256 colors, with text or lines and sharp edges. ( For unquestionable quality)
Worst choice for graphics and such are GIFs

Know your pixels
TIF and JPG are best for images with pixels that blend in color, these are called "contiguous pixels".
GIF is best for images with flat even flat tone, or "Non-contiguous pixels".

Pen tool practice 2

Pen tool practice

Deer place and trace