Wednesday, May 27, 2015

[MAT] General Concepts on Web Graphics

Digital Media Types


*Typical software for creating that type of media

Still Images:
1. Bitmaps (or raster graphics):
  • Photoshop*.
  • The size and detail of the file depends on its resolution.
  • (Minimum) Unit: Pixels organized in a grid.
  • Resolution: Amount of pixels/unit of printed length (e.g. 300 ppi-300 pixels per inch).
  • Screen resolution: 72 ppi (bad for printing, good to be seen on a monitor).
2. Vector graphics
  • Illustrator, Freehand, Flash*.
  • Described and stored as points, lines and colors in mathematical formula.
  • Their size can be scaled infinitely without loosing quality.
Moving Images:
1. Film clips
  • Final Cut Pro, Premiere, After Effects*
  • (Minimum) Unit: Frames
  • Resolution (File-sizes):  
    • Digital video 640 X 480 pixels (half screen: 320 X 240 pixels).  
    • Professional standards: DVD “D1” 720 X 486 pixels (3:4), “DV” 720 X 480 pixels.
    • Hi-Res: HDTV : 1280 × 720/ 1920 X 1080 (16:9 aspect ratio).
  • Video architectures: Quicktime (for Mac), Windows Media/Real Video (for PC), Audio Video Interleaved (avi) (PC), DV/MPEG/FLV(for both).
  • Codecs (Compression/depression algorithm): MPEG4, Sorensen spark, H.264,  ON2 VP6.
2. Animation
  • Flash, Maya, 3D Max, Cinema 4D*.
  • Flash architecture: Vector based = small size. Mother-authoring-project  file (.fla)
  • Movie file: Compiled version to use on the Internet (.swf). Authoring-project  file (.mb, ma)
Sound:
  1. Audacity, Garageband, Pro-tools, Peak*.

Native programs
               Adobe Illustrator,
                       Macromedia Freehand
Adobe Photoshop

DRAWING APPLICATION
Object oriented


IMAGE EDITING AND RETOUCHING
Raster-images


Characteristics


Vector based


Shapes and characteristics of a line are stored as data (mathematical info).



Infinite scalable
Objects are redrawn mathematically for any defined output.
Can be  shown smaller or bigger without any loss in the quality of the image


Pixel based


Produces bit-mapped images
An image is stored as a grid of pixels, each pixel has a color value.



Resolution dependent
The input resolution defines the output resolution.
Renders perfect resolution at 100% size.
What they are best for


-Illustration artwork
-Technical illustration
-Diagrams and charts
-Graphic decoration
-Logo design


-Manipulating photography
-Integrating it  with text
-Assembling with illustration elements when desired output is a bitmap image.

Bitmaps are probably the most common form of digital image. When someone thinks of a photo, a picture, a piece of digital artwork, they are thinking of a bitmap. Bitmaps are composed of small colored blocks known as pixels. This method of storage means that all bitmaps have a specific size, measured by the number of horizontal and vertical pixels that make up its resolution. 
There are several advantages and disadvantages to bitmap images. The main disadvantage is that when a bitmap is scaled beyond its intended resolution, the blocks/pixels become obvious making even a beautiful picture appear atrocious. However, bitmaps are capable of capturing very complex images that would be difficult to replicate in vector based graphics. 
Common compression formats for a bitmap are jpeg, png, and gif. Jpegs and gifs are considered 'lossy' formats, meaning that they compress the data of an image, causing a loss in image quality. Gifs are an especially 'lossy' format because they only support 256 colors. Pngs are a lossless format; also supports transparency.

Vector graphics is an inherently better format than bitmaps. They take relatively almost no storage space, because they simply store information necessary to connect the anchor points that compose them. They are also infinitely scalable because of their mathematical nature. They create very clean and clear-cut images with a small file size, but have difficulty replicating more complex images, such as photos.

DPI stands for 'dots per inch'. Printing resolution generally has a much higher DPI (300) than the average screen resolution. A higher DPI makes for a higher quality image, but considering that a monitor is limited by the number of pixels within a given inch, it is impossible to display images with a higher DPI than the monitor has. This also means the web defaults to the highest resolution that the average monitor will allow someone to view.