Graphics Design

Boonlert AroonpiboonNECTEC

boonlert@nectec.or.thhttp://www.nectec.or.th/courseware

What is a Digital Image?

• Digital image is picture that consists of bits and bytes.

• Digital image can be read, stored, and displayed by a computer.

Types of digital images

• Bitmapped image – Raster graphic

• Vector graphics

Bitmapped image

• collection of bits and bytes

• arranged in a set ratio of rows and columns, which form pixels

• resolution is determined by the number of pixels found in a given area.

Bitmapped image

Vector graphics

• consists of mathematical formulas or equations which represent lines and curves– Macromedia Flash– MS ClipArt

How to getting images

• Scanners

• Digital Cameras

• Video Capture

• Photo CD

• Save from Website

• Capturing

Save image from the website 1

• Find a Web graphic that interests you

• Right-click on it • Choose “Save Picture

As ...” in IE or “Save Image As...” in Netscape

• Save the graphic on your computer

Save image from the website 2

• Find a Web graphic that interests you

• Right-click on it

• Choose “Copy”

• Then “Edit, Paste” it on workspace of PhotoShop

Pixel

• “Picture Element”• On a screen, the

smallest part of an image is called a “pixel”

• Pixels are just those squillions of dots that make up an on-screen image

Pixel - Your eye perceives Continuity

Pixel - Your eye perceives Continuity

Zoom-In on the Patch

Resolution

• Resolution is how fine the detail is on a screen or printout.

• Types of Resolution– Monitor resolution– Image resolution– Bit resolution– Printer resolution

Monitor Resolution

• The number of pixels or dots displayed per unit of length on the monitor.

• Many monitor typically displays 800 pixels horizontally and 600 vertically.

Monitor Resolution• An image with dimens

ions of 800 pixels by 600 pixels would fill on screen.

• Changing the setting of monitor to 1024-by-768 pixels would display the image at a smaller size, occupying only part of the screen.

Image Resolution

• The number of pixels displayed per unit of printed length in an image.

• Measured in pixels per inch (ppi) or dots per inch (dpi)

• The web is always 72dpi - this is the standard resolution of a monitor.

• Higher the resolution, more pixels in the image

Example of an image at 72-ppi and 300-ppi

• 72 ppi = 72 pixels high x 72 pixels wide = 5184 pixels in a square inch

• 300 ppi = 300 pixels high x 300 pixels wide = 90,000 pixels in a square inch

Bit Resolution

• Measurement of the number of bits of stored information per pixel.

• Determines how much color information is available for each pixel

Bit Resolution

Bit Depth

256 colors

16 colors

32-bit 16.7 million colors + 8 bit grayscale mask

24-bit 16.7 million colors

16-bit 65.5 thousand colors

15-bit 32.8 thousand colors

8-bit 256 colors

7-bit 128 colors

6-bit 64 colors

5-bit 32 colors

4-bit 16 colors

3-bit 8 colors

2-bit 4 colors

1-bit 2 colors

Bit depth drastically affects file size

24 bit color

16 million colors

1.55 MB

8 bit color

256 colors

518k

8 bit gray scale

256 shades of gray

518k

1 bit dithered

image

64k

Printer Resolution

• The number of ink dots per inch (dpi) produced by all printers, including imagesetters.

• Most desktop printers have a resolution of 300 to 720 dpi.

File Size• The digital size of an image, measured in kilobytes

(K), megabytes (MB), or gigabytes (GB). • The file size of an image is proportional to its

resolution• Images with high resolution have greater detail and

result in higher file sizes. • Web graphics only need to be 72 dpi (monitor

resolution).• Photoshop supports a maximum file size of 2 GB and

maximum pixel dimensions of 30,000 by 30,000 pixels per image.

Digital Image

• Original Image• Digital Archive • Desktop Publishing• Database• Presentation / Multimedia Presentation• Web Graphics

Digital ImageOriginal DTP Digital Ar

chivePresenta

tionDataba

seWebs

itePrevie

w

Format

JPEG, TIFF

TIFF JPEG JPEG JPEG GIFJPGPNG

GIFJPGPNG

Resolution

Up to 350 dpi

Up to 350 dpi

72 dpi 72 dpi 72 dpi 72 dpi 72 dpi

Size Up to184

0 1 2 3 2 p

i xel s

Up to184

0 1 232

pi xel s

Up to 1024

768

pi xel s

Up to 1024

768

pi xel s

30 0 2

5 0 pixel s

3 00

2 50

pi xels

10 0 1

00 pixel s

From Digital Camera, Scanner

ActionScript ของโปรแกรม Adobe PhotoShop 7.0

Folder original dtp archive present database

web preview

File Name

ตามจร�ง เปลี่��ยนตามข�อก�าหนด โดยแยกเป�นโฟลี่เดอร�เฉพาะ

Color Mode

• A color mode determines the color model used to display and print images.

• Common models include – RGB (red, green, blue)– CMYK (cyan, magenta, yellow, black)– …

RGB model

• RGB model used for lighting, video, and monitors

• So, computer’s monitor only has 3 colors

Red

Green

Blue

CMYK model

• The CMYK model is based on the light-absorbing quality of ink printed on paper.

Bitmap

• Bitmap mode contains one colour, 100% black.

• The pixels are dithered to create the sahdes of gray.

• This mode is suitable for printing on dot-matrix printers.

Grayscale

• Grayscale mode has 256 colours; black, white and 254 shades of gray.

• When an colour image is converted to grayscale, all the colours are discarded leaving only brightness values which are converted into pixels.

• This mode is suitable for printing grayscale images.

Duotone

• Duotone is similar to grayscale but replaces the black with a different colour.

• This mode is suitable for printing with limited colours.

Indexed Color

• Index mode contains only a pallet of up to 256 colours.

• When converting an image to index mode, Photoshop selects 256 colours and replaces the rest of the colours with a similar colour in the pallet.

• This mode is suitable for web graphics to reduce file size.

CMYK• CMYK stands for Cyan, Magenta, Yellow and Key.

• Black is just called key so that it won't be mislead for the colour blue.

• CMKY mode has four channels, each with their own percentage value to specify the brightness of the channel.

• This mode is suitable for colour printers.

• Most printers use the "CMKY" model because inks are subtractive (colours get darker when mixed) and CMY (Cyan, Magenta, Yellow) are more lumious than RGB (Red, Green, Blue).

RGB

• RGB stands for Red, Green and Blue.

• RGB mode contains three channels, each with their own percentage value to specify the brightness of the channel.

• This mode is suitable for screen display. RGB (Red, Green, Blue) are used because light are additive colours (colours get lighter when mixed) and they are darker than CMY (Cyan, Magenta, Yellow).

Lab

• Lab mode contains 3 channels; lightness, chroma A and chroma B.

• Chroma A represents 128 colours within a range from green to red, chroma B represents 128 colours within a range from blue to yellow and the lightness represents the lumosity of the image.

• Lab mode is suitable for editing Photo CD images, transfering photographs and printing on postscript 2 and 3 printers.

Multichannel

• Multichannel mode converts channels to grayscale values.

• Each channel contains 256 colours; black, white and 254 shades of gray.

• This mode is for specialized printing.

Graphic formats• True Image Formats

– Accurately stores an image for future editing– Hundreds of true image formats including: .tif (Tag File

Format), .bmp, .pict, .psd– No compression involved

• Web Image Formats– GIF– JPEG– PNG

– JPEG2000

TIFFs

• ".tiff" or ".tif" extensions

• Exchange images between graphics application programs– DTP, faxing, and 3-D applications

JPEG

• Joint Photographic Experts Group• A universal standard for the digital compression

and decompression of still images for use in computer systems

• Can store millions of colors (16,777,216 colors)• File format used for photographic images,

continuous tone images.• Doesn't work well for line art and images with

large blocks of color

JPEG File Format

• When you save a file as a .jpg you have the option of saving it as a low, medium, high, or maximum quality.

JPEG - 19KLow Quality

JPEG - 60KMax Quality

Progressive JPEG

• Low to high resolution

รู�ปภาพที่แสดงในโหมดปกติ� Progressive

GIF

• Graphics Interchange Format• An extension for graphic files in a format

developed by CompuServe• Used for line art and images with large blocks of

color or 256 colors• Works best for flat color, sharp-edged art (stuff

that looks like clip art), diagrams, text, ….• Doesn't work well for highly detailed images:

Photographs.

GIF

GIF vs JPEG

• GIFs– 256 Colors

– Best for flat-color art

– Transparent

– Interlaced

– Animation

• JPEGs– 16,777,216 colors

– Best for full-color images of real-world scenes

– No transparent, animation

– Progressive

GIF vs JPEG

JPEG - 21KMax Quality

GIF - 26K

JPEG - 4KLow Quality

JPEG - 12KMedium Quality

GIF vs JPEG

JPEG – 50% Quality GIF – 8 Colors

GIF or JPEG?

GIF89 format

• GIF have 2 varieties– GIF87 …. Normal GIF– GIF89a

• Interlaced GIF

• Transparent GIF

• Animation GIF

Interlaced GIF

• affects display of image when loading• image displays as series of lines building up

to whole picture• gives ‘venetian blind’ effect (depends on

browser)• good for larger images• gives good idea of what image represents

without waiting for all image to be loaded

รู�ปภาพที่แสดงในโหมดปกติ�

รู�ปภาพที่แสดงในโหมด Interlaced

Interlaced GIF

Interlaced GIF

Pass 1 Pass 3Pass 2

Transparent GIFs

• can set a colour to be invisible

• set background to transparent

Animation GIF

– A sequence of images, or frames, that is displayed over time.

PNG

• Portable Network Graphics format

• 24-bit color support

• Capability for interlacing and transparency

• Compression which works equally well for photographs and logos

JPEG2000

• ".jp2" extension

• Based upon wavelet image compression technology

• View images at multiple resolutions without the burden of downloading large files

Image file

• Original Image File– Have layer in the file– Can editing, deleting– File extension is .psd

• Working Image File– Have only one layer– Can’t editing, deleting– File extension is .jpg, .gif or .png

Graphic for Web

• Try to keep your images small – both in actual size and file size – so that they will load quicker

• Never create images larger than 780 pixels wide

• The standard resolution for Web graphics is 72 pixels per inch – so saving files at a resolution of 72 ppi is a good way to minimize the file.

truehits.net

Screen Area & Color Depth

Web Layout

Web Area 780 pixel

Scr

een A

rea 6

00 p

ixel

web A

rea

Folder for Image file

• Backup folder for original image

• Image folder for working image

Creating new images :: Web

• Choose File, New…• Set the width and

height, measured in pixels

• Resolution must be 72 pixcels/inch

• Mode must be RGB Color

Creating new images :: Screen

• Choose File, New…

• Set the width and height to 800 x 600 pxs

• Resolution must be 72 pixcels/inch

• Mode must be RGB Color

Creating new images :: DTP

• Choose File, New…

• Set the width and height, measured in inch / cm / mm.

• Resolution >= 150 pixcels/inch

• Mode must be CMYK Color

Size of elements

Title

≤ 780 pixel

≤ 200

Banner

≤ 500 pixel

≤ 200

Button

≤ 200 pixel

≤ 200

Blending Modes

• Blending modes define how layers, fills, strokes, fades and paths blend.

• You can easily cycle through the blending modes in the layer window by pressing "Shift++" or "Shift+-" buttons or by highlighting a blend mode and pressing the "Up" or "Down" buttons.

Normal

• Original colours and opacity are preserved.

Noise

• Noise is added according to the opacity of the blend colour to fill the layer.

• A 100% opacity will create enough noise to create a solid object.

Darken

• Only blend colours with a brightness value below 50% will be visible.

• The brightness of the blend colour defines the opacity of the blend colour; if the blend colour has a brightness value of 25%, the blend colours opacity will be 50%.

• If brightness is equal or less than 50, then opacity equals brightness times two.

Multiply

• Source areas are darkened according to the darkness of the blend colour.

• Darker blend colours will be more opaque; if the blend colour has a brightness value of 25%, the opacity will be 25%.

• Opacity equals darkness.

Color Burn• Opacity of the blend is defined by the darkness of the

blend colour. • Darker blend colours will be more opaque; if the blend

colour has a brightness value of 25%, the opacity will be 75%.

• The contrast of the source is defined by the opacity of the blend colour.

• More opaque blend colours will add more contrast to the source colours; if the blend colour has an opacity value of 75%, the source contrast will increase by 75.

• Opacity equals darkness.• Contrast equals contrast plus opacity.

Linear Burn

• Opacity of the blend is defined by the darkness of each colour channel of the source.

• Darker source colour channels will be more opaque; if the source blend colour has a brightness value of 25%, the opacity will be 75%.

• Opacity equals darkness of each colour channel.

Lighten

• Only blend colours with a brightness above 50% will be visible.

• The brightness of the blend colour defines the opacity; if the blend colour has a brightness value of 75%, the opacity will be 50%.

• If brightness is equal or greater than 50, then opacity equals brightness minues brightness divided by two.

Screen

• Areas are lightened according to the brightness of the blend colour.

• Brighter blend colours will be more opaque; if the blend colour has a brightness value of 25%, the opacity will be 25%.

• Opacity equals darkness.

Color Dodge• Opacity is defined by the brightness of the blend colour.

• Brighter blend colours will be more opaque; if the colour has a brightness value of 75%, the opacity will be 75%.

• Contrast of the source is defined by the opacity of the blend colour.

• More opaque blend colours will be have add more contrast to the source; if the blend colour has an opacity value of 75%, the source contrast will increase by 75.

• Opacity equals brightness.

• Contrast equals contrast plus opacity.

Linear Dodge

• Opacity is defined by the brightness of each source colour channel.

• Brighter source colour channels will be more opaque; if the blend colour has a brightness value of 75%, the opacity will be 75%.

• Opacity equals darkness of each colour channel.

Overlay

• Bright areas are screened and dark areas are multiplied.

• Brightness is defined by the brightness of the blend colours.

• Darker areas will appear darker and lighter areas will appear lighter.

Soft Light

• Lighter areas are dodged and darker areas are burned.

• Opacity is defined by the brightness of each source colour channel.

• Brighter source colour channels will be more opaque; if the source colour has a brightness value of 75%, the blend opacity will be 75%.

Hard Light

• Areas are lightened or darkened according to the brightness of the blend colour.

• Lighter areas will be screened and darker areas will be multiplied.

Vivid Light

• Lighter areas are dodged and darker areas are burned.

• Contrast is increased according to the distance from the blends brightness and darkness to a 50% gray.

Linear Light

• Lighter areas dodged and darker areas are burned.

• If the brightness of the blend colour is greater or equal to 50, then the source area will be lightened by increasing its brightness.

• If the brightness of the blend colour is less or equal to 50, then the source area will be darkened by increasing its brightness

Pin Light

• Blend colours are replaced according to the brightness of the colours.

• Darker source colours with a brightness equal or less than 50 will be replaced by the blend colour if it is darker than the source colours.

• Lighter source colours with a brightness equal or greater than 50 will be replaced by the blend colour of it is lighter than the source colour.

Hard Mix

• Source colours are posterized according to the difference of the blend colours brightness and a 50% gray.

Difference

• Blend colours are subtracted from the base colours to invert the colours.

• The colours are inverted according to the difference between the colours.

Exclusion

• Blend colours are subtracted from the base colours to invert the colours.

• The colours are inverted according to the difference between the colours.

• The amount of gray is equal to the opacity of the blend colours.

Hue

• Saturation and brightness of the source colour is equal to the difference of the source colour and the hue of the blend colour.

Saturation

• The saturation of the source colours is equal to the saturation of the blend colours.

Color

• The saturation of the source colours is equal to the saturation of the blend colours.

• The hue of the source colours is equal to the hue of the blend colours.

• The brightness of the source colours is the opposite of the blend colours.

Luminosity

• The brightness of the source colours are equal to the brightness of the blend colours.

Graphic for Web

• When you insert your image into your HTML, add Width=n and Height=n attributes to the img tag– n is value of width/height

• Never use the Width=n and Height=n attributes to resize an image

• Always use the alt= attribute in the image tag to describe your image

Image Metadata• Image Retrieval & Copy right • XMP (eXtensible Metadata Platform)

– The Newspaper Association of America (NAA) • The International Press

Telecommunications Council (IPTC) – Title, Author, Position, Caption, Copyright,

URL, Keyword, Categories, Detail of org.

Watermark

• Text Embedded Watermark

• Image Embedded Watermark

• Digital Library, Digital Archive, E-Commerce

Text Embedded Watermark

• ม�ลี่�กษณะเป�นข�อความที่��ผนวกก�บไฟลี่�ภาพ • สามารถระบ+ได�จากโปรแกรม

Adobe PhotoShop จากค�าส��ง File, File info, Copyright & URL

• สามารถค�นหาได�จากค�าส��ง Search/Find ของ Windows

Image Embedded Watermark

• ม�ลี่�กษณะเป�นภาพที่��ผนวกก�บไฟลี่�ภาพ • อาจจะเป�นภาพโลี่โก�ของหน,วยงาน, ภาพ

ข�อความลี่�ขส�ที่ธิ์�.• สามารถระบ+ได�จากซอฟต�แวร�ประเภที่

Watermarking Software

Watermark Processing

• Encoding การเข�ารห�ส• Decoding/Detect การตรวจสอบรห�ส

– ระบบ Detect สามารถกระที่�าได�ก�บภาพที่��ม�การลี่ง Watermark แลี่ะส��งพ�มพ�บนกระดาษ โดยน�าภาพด�งกลี่,าวมาสแกน แลี่�วใช้� Detecting Watermark Software ที่�าการตรวจสอบ

The Watermark Embedding Process

The Watermark Detection Process