INTRODUCTION TO COMPUTER GRAPHICS

Similar documents
Using Adobe Photoshop

Specific structure or arrangement of data code stored as a computer file.

Graphics for Web. Desain Web Sistem Informasi PTIIK UB

Digital Imaging & Photoshop

LECTURE 02 IMAGE AND GRAPHICS

Digital Images. Digital Images. Digital Images fall into two main categories

Images and Graphics. 4. Images and Graphics - Copyright Denis Hamelin - Ryerson University

4 Images and Graphics

Raster (Bitmap) Graphic File Formats & Standards

ITP 140 Mobile App Technologies. Images

MOTION GRAPHICS BITE 3623

Factors to Consider When Choosing a File Type

Digital Imaging and Image Editing

B.Digital graphics. Color Models. Image Data. RGB (the additive color model) CYMK (the subtractive color model)

Fundamentals of Multimedia

Topics. 1. Raster vs vector graphics. 2. File formats. 3. Purpose of use. 4. Decreasing file size

Bitmap Image Formats

Image Optimization for Print and Web

Dr. Shahanawaj Ahamad. Dr. S.Ahamad, SWE-423, Unit-06

Digital Imaging - Photoshop

IMAGE SIZING AND RESOLUTION. MyGraphicsLab: Adobe Photoshop CS6 ACA Certification Preparation for Visual Communication

Glossary Unit 1: Hardware/Software & Storage Media

Bitmap Vs Vector Graphics Web-safe Colours Image compression Web graphics formats Anti-aliasing Dithering & Banding Image issues for the Web

PCCLUB.ORG.UK Tuesday, 3 rd May 2005 Stuart Crump. Picture Editing, Printing & Publishing Tutorial 1 of 2

The next table shows the suitability of each format to particular applications.

CMPT 165 INTRODUCTION TO THE INTERNET AND THE WORLD WIDE WEB

Computers & Philately Overview

TEST INFORMATION: 40 questions 50 minutes 70% minimum required to pass. Score is based on a 1000 pt system so passing will be a 700.

PENGENALAN TEKNIK TELEKOMUNIKASI CLO

LECTURE 03 BITMAP IMAGE FORMATS

Understanding Image Formats And When to Use Them

Starting a Digitization Project: Basic Requirements

Lecture - 3. by Shahid Farid

CHAPTER 3 I M A G E S

STANDARD ST.67 MAY 2012 CHANGES

Elements of Design. Basic Concepts

Applying mathematics to digital image processing using a spreadsheet

6. Graphics MULTIMEDIA & GRAPHICS 10/12/2016 CHAPTER. Graphics covers wide range of pictorial representations. Uses for computer graphics include:

apt solutions, inc. Tips Graphics - An Introduction Vector vs. Raster Graphics Vector Graphics

WordPress Users Group Manchester, NH July 13, Preparing Images for the Web. Daryl Johnson SvenGrafik

Color, graphics and hardware Monitors and Display

Pros and Cons for Each Type of Image Extensions

CD: (compact disc) A 4 3/4" disc used to store audio or visual images in digital form. This format is usually associated with audio information.

Photoshop CS6. Table of Contents. Image Formats! 3. GIF (Graphics Interchange Format)! 3. JPEG or JPG (Joint Photographic Experts Group)!

Sampling Rate = Resolution Quantization Level = Color Depth = Bit Depth = Number of Colors

Coreldraw Crash Course

Photoshop 01. Introduction to Computer Graphics UIC / AA/ AD / AD 205 / F05/ Sauter.../documents/photoshop_01.pdf

Multimedia. Graphics and Image Data Representations (Part 2)

Digital imaging or digital image acquisition is the creation of digital images, typically from a physical scene. The term is often assumed to imply

A raster image uses a grid of individual pixels where each pixel can be a different color or shade. Raster images are composed of pixels.

Unit 4.4 Representing Images

UNIVERSITY OF CALICUT INTRODUCTION TO MULTIMEDIA QUESTION BANK

COMPSCI 111 / 111G Mastering Cyberspace: An introduction to practical computing. Digital Images Vector Graphics

3.1 Graphics/Image age Data Types. 3.2 Popular File Formats

Adobe Fireworks CS4 Kalamazoo Valley Community College February 25, 2010

HTTP transaction with Graphics HTML file + two graphics files

This report provides a brief look at some of these factors and provides guidelines to making the best choice from what is available.

UNIT 7C Data Representation: Images and Sound

Epson Scanner (Expressions Photo) Basic Directions:

Image is a spatial representation of an object or a scene. (image of a person, place, object)

BEST PRACTICES FOR SCANNING DOCUMENTS. By Frank Harrell

Learning Outcomes. Black and White pictures. Bitmap Graphics. COMPSCI 111/111G Digital Images and Vector Graphics

What You ll Learn Today

Developing Multimedia Assets using Fireworks and Flash

raw format format for capturing maximum continuous-tone color information. It preserves all information when photograph was taken.

Digital photo sizes and file formats

Adobe Illustrator CS6

CGT 511. Image. Image. Digital Image. 2D intensity light function z=f(x,y) defined over a square 0 x,y 1. the value of z can be:

V Grech. Publishing on the WWW. Part 1 - Static graphics. Images Paediatr Cardiol Oct-Dec; 2(4):

Digital Darkroom P 207

CS 262 Lecture 01: Digital Images and Video. John Magee Some material copyright Jones and Bartlett

Resolution: The Peanut Butter Analogy

1 Li & Drew c Prentice Hall Li & Drew c Prentice Hall 2003

Image Perception & 2D Images

CGT 211 Sampling and File Formats

Basic photography Art, composition, and computer principles AEE 211 February 24, 2003

PHOTO 11: INTRODUCTION TO DIGITAL IMAGING

PAINT Pa and DRAW Dr aw

CS101 Lecture 19: Digital Images. John Magee 18 July 2013 Some material copyright Jones and Bartlett. Overview/Questions

The Need for Data Compression. Data Compression (for Images) -Compressing Graphical Data. Lossy vs Lossless compression

1. Using Images on Web Pages 2. Image Formats 3. Bitmap Image Formats

15110 Principles of Computing, Carnegie Mellon University

Commercial Art 1 Photoshop Study Guide. 8) How is on-screen image resolution measured? PPI - Pixels Per Inch

School of Digital Media Arts Photography GM300BB

Lecture #2: Digital Images

Chapter 3 Graphics and Image Data Representations

Chapter 3 Graphics and Image Data Representations

How to Avoid Landmines: Managing your Motion Graphics Projects

Photoshop Domain 5: Publishing Digital Images Using Adobe Photoshop CS5

ITP 140 Mobile App Technologies. Colors Images Icons

ADOBE PHOTOSHOP CS 3 QUICK REFERENCE

UNIT 7C Data Representation: Images and Sound Principles of Computing, Carnegie Mellon University CORTINA/GUNA

Vector VS Pixels Introduction to Adobe Photoshop

Convert images and non-vector PDFs

1. Describe how a graphic would be stored in memory using a bit-mapped graphics package.

Slide Scanning Converting Your Film Photographs to Digital. Presentation to UCHUG - 8/06/08 G. Skalka

Computer Graphics and Image Editing Software

PHOTOGRAPHY AND DIGITAL IMAGING

Guide to Computer Forensics and Investigations Third Edition. Chapter 10 Chapter 10 Recovering Graphics Files

Digital Asset Management 2. Introduction to Digital Media Format

Transcription:

INTRODUCTION TO COMPUTER GRAPHICS ITC 31012: GRAPHICAL DESIGN APPLICATIONS AJM HASMY hasmie@gmail.com

WHAT CAN PS DO? - PHOTOSHOPPING CREATING IMAGE Custom icons, buttons, lines, balls or text art web design ALTERING IMAGE Altering an image includes doing such things as changing the colors within an image, modifying the size and scale of an image, or putting one picture "within" another. Alteration also includes technical modifications such as changing the mode of image compression from one type to another, or changing the number of bits used per pixel

PHOTOSHOPPING..

WHO USES PHOTOSHOP PHOTOGRAPHERS PUBLISHERS SCIENTIFIC RESEARCHERS TECH COMMUNICATORS

http://www.photoshop.com/products/photoshop/what

Photoshop CS6 system requirements (Windows) Intel Pentium 4 or AMD Athlon 64 processor Microsoft Windows XP with Service Pack 3 or Microsoft Windows 7 with Service Pack 1. Adobe Creative Suite 5.5 and CS6 applications also support Windows 8 and Windows 8.1. See the CS6 FAQ for more information about Windows 8 support.* 1 GB of RAM 1 GB of available hard-disk space for installation; additional free space required during installation (cannot install on removable flash storage devices) 1024 x 768 display (1280 x 800 recommended) with 16-bit color and 512 MB (1 GB recommended) of VRAM OpenGL 2.0 capable system DVD-ROM drive This software doesn't operate without activation. Broadband Internet connection and registration are required for software activation, validation of subscriptions, and access to online services.

ALTERNATIVES http://alternativeto.net/software/adobe-photoshop/?platform=windows

CHARACTERISTIC OF COMPUTER GRAPHICS PIXEL COLOR MODES RASTER & VECTOR IMAGES IMAGE TYPES NOISE

Improving image quality by Eliminating noise Enhancing contrast Eg: A "noisy" image Smoothed Continued

PIXEL A picture can describe as a set of intensities of the pixels WHAT IS A PIXEL? The smallest addressable unit on a display screen All pictures are made of pixels. And it is the smallest element of an image. http://graphics.wikia.com/wiki/pixel Zoom

RASTER VS VECTOR IMAGE If an image stores its picture information as intensities of individual pixels it is referred as a Raster Image If an image stores its picture information as geometric structures it is referred to as Vector Image

VECTOR GRAPHICS Stores image information using points and curves. Contains instructions for drawing lines, circles, ellipses, curves, and other shapes. Uses mathematical formula Vector graphics can be edited and manipulated far easier than raster images. Easy to work with individual shapes separately Consumes less disk space Not suitable for images contains natural scenes Vector graphics can be scaled up and down easily and quickly while retaining the quality of the picture Example for vector graphics base designing tool- corel draw

RASTER GRAPHICS Uses pixel values to describe an image. File size is independent of the image complexity. For higher resolution, file size increases. Suitable for natural images Image loose its quality when scaling and zooming Example for raster graphics based image editing tool Adobe Photoshop

Zoom Raster Vector

RASTERIZING GENERATING PIXEL BASED INFORMATION FROM VECTOR IMAGES HARD TO CONVERT RASTER IMAGE TO A VECTOR IMAGE

If I am creating a new design which software should I use; Raster or Vector Graphic Program? It depends on the design itself. If it's going to have photographic elements with continuous tones and blends of color, you are probably better off using a paint program like Photoshop which is a raster program that specializes in photo editing, or use any other PAINT program. If you want your final design to look like an illustration instead with clear contrasts between objects & shapes, then use a vector program. You MUST use a vector program when creating art for plotters, vinyl-cut signs, engraving and other specialty items. Ideally a company that has a logo design with photographic elements, also has a secondary version of their logo in vector format that can be used for those specialty items that require vector art.

DPI VS PPI DPI - DOTS PER INCH This is the amount of ink dots the printer will put on each pixel of your image. The DPI is set by the actual printer device. PPI - PIXELS PER INCH Digital raster images are measured in pixels, or picture elements. How many pixels per inch is determined by the device you create the digital image with: camera, scanner, or graphics software and can be modified with a photo editing software like photoshop.

IMAGE COMPRESSION WHY COMPRESSION? To store images using less disk space To reduce the transferring time( network) To reduce loading time DISADVANTAGES Loose quality

TYPES OF COMPRESSION LOSSLESS COMPRESSION - All image detail and color information is retained as the image is compressed. This retains image sharpness and clarity as in the source LOSSY COMPRESSION - Image color or image detail information is reduced to compress the image. Lossy compression makes much smaller image files than lossless. Always use lossless compression while editing images. Only the final image should be compressed in a lossy format, and only if small file size is of primary concern (like internet web images, for example).

HOW COLOUR INFORMATION STORED Each pixel is assigned with set of bits Number of bits used to store color information of a pixel is called bit-depth Bit depth can be varies from 8 to 24 Higher bit depths will increase the quality as well as file size What is the size of a image file which use 24 bits to store colour information and resolution is 1024x768? (this file format uses compressions algorithm which has the compression ratio 8:1)

IMAGE FILE FORMATS DIFFERENT FILE FORMATS USE DIFFERENT TECHNIQUES TO STORE IMAGE INFORMATION BMP: Bitmap file format is used for bitmap graphics on the windows platform. Unlike other file formats, which store image data from top to bottom and pixels in red/green/blue order, the BMP format stores image data from bottom to top and pixels in blue/green/red order. Compression of BMP files is not supported, so they are usually very large. These files contains ".Bmp " extension.

IMAGE FILE FORMATS GIF: GRAPHICS INTERCHANGE FORMAT This was originally developed by compuserve in 1987. Most popular file formats for web graphics The gif format supports 8 bits of color information or less. In addition, the gif89a file format supports transparency, ( compuserve gif(87) does not support transparency.) This feature makes gif a particularly popular format for web images. This uses a "lossy" compression method. It reduces an image's file size by removing bits of color information during the conversion process. This file format also support animations. Uses ".Gif" as extension.

IMAGE FILE FORMATS JPEG: JOINT PHOTOGRAPHIC EXPERTS GROUP FORMAT This is the most popular formats for web graphics. It supports 24 bits of color information, And is most commonly used for photographs and similar continuous-tone bitmap images. This is a compressed file format and uses lossy compression strategy. This use to save only the color information that is essential to the image. Jpeg does not support transparency. The jpeg file format supports millions of colors. In theory, JPEG was designed so that changes made to the original image during conversion to JPEG would not be visible to the human eye. These files contains ".Jpg" as extension

IMAGE FILE FORMATS PNG: THE PORTABLE NETWORK GRAPHICS FORMAT This consider as the successor to the GIF file format. It is platform independent and should be used for single images only (not animation). Compared with gif, png offers greater color support and better compression, gamma correction for brightness control across platforms, better support for transparency, and a better method for displaying progressive images. Png format uses ".Png" as extension

IMAGE FILE FORMATS TIFF: TAG INTERCHANGE FILE FORMAT This is a tag-based format that was developed and maintained by aldus (now adobe). This is compatible with a wide range of software applications and can be used across platforms such as Macintosh, Windows, and Unix. The tiff format is complex, so tiff files are generally larger than gif or jpeg files. Tiff supports lossless lzw (lempel-ziv welch) compression; however, compressed tiffs take longer to open. Extension used is ".Tif"

??? HOW TO SAVE A PICTURE FILE IN DIFFERENT FORMATS?