Multimedia - Lecture 3: Graphics

1 Graphics 2 Objective  What is a Graphics  What is an Image  Introduction about Adobe Photoshop Software  Creating Graphics by Adobe Photoshop  Modifying Graphics  Adding Text to Graphics  Creating Special Effects  Design WebSite interface 3 What is a Graphics?  Graphics are building blocks for developing exciting and informative multimedia documents, presentations, and publications.  They are the images you use to enhance the work you do on your computer, and include drawings, paintings, logo, Navigation button, diagram, photographs, cartoons, charts, and maps.  Graphics programs provide the tools you need to create, edit, and mainpulate images on your computer. 4 What do graphics look like?  Graphics can be:  Black and White  Grayscale  Color  Still  Animated 5 What do graphics do?  Graphics can:  Illustrate or demonstrate procedures  Clarify data  Convey ideas  Tell stories  Add visual appeal 6 What is an image?  An image is the graphical and visual representation of some information that can be displayed on a computer screen or printed out  Images come in a variety of forms:  Photographs  Drawings  Paintings  Television and motion pictures  Semantics  Maps etc. 7  Images show us the prominent features of the objects that they represent. These images are composed quite differently, each is an effective representation of its subject What is an image? 8 What is an image?  Images play an important part in multimedia  Navigation  User interface components  Help systems  Clip art 9 Image media types Images can be generally divided into two formats:  Bitmapped or raster images  Bitmapped graphics, also known as raster graphics, consist of grids of tiny dots called pixels. Each pixel is assigned a color.  Bitmapped images are stored as an array of pixels  Vector graphics or Metafile images  Vector graphics use mathematical formulas to define lines, curves, and other attributes.  Vector graphics are stored as the set of graphic primitives required to represent the image 10 Bitmaps Image  A pixel is the smallest element of resolution on a computer screen (Screen Resolution). Each pixel can be in a specific colour and each pixel consists of two or more colors.  A bitmap is composed of a matrix elements called pixels  Color depth refers to the number of distinct colors an image can contain. It can range from 2-bit (black and white) to 24- bit (16.7 million colors). Colour depth is measured in bits per pixel.  Resolution is the number of pixels per inch. 11 Colour depth  1 bit per pixel = 2 colours (monochrome)  2 bits per pixel = 4 colours  4 bits per pixel = 16 colours  8 bits per pixel = 256 colours  Generally good enough for colour images  16 bits per pixel = 65536 colours  Better quality for photograph-like images, also known as high colour  24 bits per pixel = >16 million possible colours  Used to recreate photo realistic images(hiện thực), also known as true colour 12 Bitmaps Image  The more colours that are allowed per pixel, the greater the size of the image  The number of pixels is related to the size of file that required to store an image.  Two factors effect the size file bitmap are:  Resolution  Color Depth 13 Bitmapped images Original image Shown Magnified 14 8 bytesinsize depthcolourheightwidth Calculating the size of a raster image  Where:  Width of the images measured in pixels  Height of the images measured in pixels  Colour depth is the number of bits used for color measured in bits per pixel  Remember:  1024 bytes = 1 kilobyte (KB)  1024 kilobytes = 1 megabyte (MB) 15 Example  A 640 x 480 pixel image in 24-bit colour would require how much disk space? 900KB bytes921600 8 7372800 8 24480640 bytesinsize 16 Popular bitmap formats  Microsoft bitmap (.bmp)  Used in microsoft windows  Supports pixel resolution up to 24 bits  TIFF - Tagged Image File Format (.tif)  Used for faxing images  Supports pixel resolution up to 48 bits  JPEG - Joint Photographic Expert Group (.jpg)  Useful for storing photographic images 17 Popular bitmap formats  GIF - Graphics Interchange Format (.gif)  Index(8 bits) of 24 bits(8R+8G+8B) is sent  Used a lot on web sites  PNG - Portable Network Graphics (.png)  BMP image format with lossless data compression. PNG was created to improve upon and replace the GIF format  A new format for web graphics  PCD – Kodak Photo CD  A new format for store image in a compressed form on a CD 18 Advantages and Disadvantages of using bitmap images  Advantages  Convey detail of information quickly  Real life  Disadvantages  Depend on a Resolution  Effect to the image quality  Size file is big 19 Software to create bitmap images  Popular PC packages include:  Microsoft Paint  Microsoft PhotoDraw 2000  Adobe Photoshop  Paint Shop Pro  Macromedia Fireworks 20 Vector images  Vector images are stored as the set of graphic primitives required to represent the image  A graphic primitive is a simple graphic based on drawing elements or objects such as shape  e.g. square, line, ellipse, arc, etc.  The image consists of a set of commands (mathematical equations) that are drawn the object when needed. 21 Vector images  Storing and representing images by mathematical equations is called vector graphics or Object Oriented graphics.  Each primitive object has various attributes that go to make up the entire image  e.g. x-y location, fill colour, line colour, line style, etc.  Example:  RECTANGLE : rectangle top, left, width, height, color is ( 0, 0, 200, 200, red) 22 Vector images  CIRCLE : circle top, left, radius, color  LINE : Line x1, y1, x2, y2, color  Vector image or vector graphics can be resized without losing the integrity of the original image.  Scaling a vector is a mathematical operation - only the attributes change, the image is unaffected 23 Primitive geometric drawing objects  Basic  Line  Polyline  Arc  Bezier curve  Text  Font, weight  Shapes  Circle  Ellipse  Rectangle  Square  Pie segment  Triangle  Pentagon, hexagon, heptagon, octagon, etc TextText 24 Scaling vector graphics Original image V e c t o r g r a p h i c s Shown magnified V e c t o r g r a p h i c s 25 Advantages and Disadvantages of using vector image  Advantages  Relatively small amount of data required to represent the image.  Therefore, it does not require a lot of memory to store  Easier to manipulate  Disadvantages  Limited level of detail than can be presented in an image 26 Software to create vector images  Graphics programs are tools that allow an artist (họa sĩ) to create and edit designs used in multimedia applications.  Generally, graphics programs can be categorized as:  Drawing programs  Creating draw type graphics  Provide freehand. Example geometric shape  Example : Adobe Illustrator, Corel Draw, Macromedia Freehand 27 Software to create vector images  Paint programs - Those creating bitmaps - Useful in creating original art - Example: Paint Shop Pro  Image editing programs - Making changes to existing images, such as manipulating the brightness or contrast, applying textures, patterns. - Examples : Adobe Photoshop, Adobe Page Maker, 28 Vector formats  Windows metafile (.wmf)  Used by Microsoft Windows  SVG - Scalable Vector Graphics (.svg)  A new format devised for the web  CGM - Computer Graphics Metafile (.cgm)  Older format commonly used for clip art  Adobe PostScript (.ps)  A page description language used to control printers 29 Vector formats  Adobe Portable Document Format (.pdf)  A page description language common on the web  Drawing Exchange Format (.dfx)  Store 3D image created by design program AutoCAD  Encapsulated PostScript (.epf)  Professional (chuyên nghiệp) printing: Illustration program, Adobe Systems, Desktop Publishing programs 30 Hardware used to acquire images  Scanners and digital imaging products  Many forms of scanner  Drum  Flat-bed  Negative / slide  Hand-held  Important to check the optical resolution of the scanner  measured in dots per inch (DPI) Slide scanner Flatbed scanner 31 Hardware used to acquire images  Digital camera  Uses digital memory instead of film  Images are transferred to computer via a cable  Can be very high resolution  Stills from a camcorder máy quay or PC “web-cam” type camera  Home products tend to be low resolution Web cam Digital camera 32 Hardware used to create/edit images  Graphics tablet and pen  Preferred (thích hơn) by digital artists  Pressure sensitivity  Digitiser tablet  Preferred by technical artists  Mouse has accurate crosshair to help digitise drawings Tablet and pen Digitiser 33 Converting image formats T ex t B itm a p p ed im a g e V ecto r im a g e Bitmapped font TrueType / PostScript Type 1 font Optical Character Recognition (OCR) Contour trace dò theo đường viền Render as bitmap 34 Working With Graphics  Considerations and guidelines when we are working with graphics:  Choose the graphic depend on your work  Choose the correct software  Use minimum color depth  Delivery Systems 35 Introduction about Adobe Photoshop Software  Adobe Photoshop CS4 là chương trình đồ họa ứng dụng chuyên nghiệp dùng xử lí ảnh Bitmap.  Chương trình Adobe Photoshop có thể chạy trên các hệ điều hành Win 2k trên cả hai hệ máy PC và Macintosh.  Những ứng dụng tiêu biểu của Adobe Photoshop là:  Lắp ghép hình ảnh.  Tạo ảnh nghệ thuật.  Thiết kế mẫu (Poster, Prochure, Catologue).  Hỗ trợ thiết kế web.  Phục hồi hình ảnh cũ.  Tạo chữ nghệ thuật.  Hiệu chỉnh ảnh màu.  Chuyển ảnh đen trắng sang màu. 36  Click StartProgramsAdobe Photoshop Introduction about Adobe Photoshop Software ( hay ) 37 Create, Save, and Close a Graphics File Thanh Menu: Gồm có 9 Menu chức năng:  Menu File: các thao tác trên tập tin: Mở mới tập tin, Mở tập tin có sẵn, Lưu tập tin, In ấn  Menu Edit: các thao tác liên quan đến việc hiệu chỉnh tập tin trong quá trình thao tác như: Trở về thao tác liền trước, thao tác liền sau. Sao chép, di chuyển nội dung vào vùng nhớ tạm, dán nội dung từ vùng nhớ tạm vào vùng ảnh  Menu Image: các lệnh về biên tập hình ảnh: Chế độ màu, Quay hình ảnh  Menu Layer: Chứa các chức năng xử lý lớp.  Menu Select: Chứa các chức năng liên quan đến thao tác chọn và thôi chọn hình ảnh, biến đổi vùng chọn. 38 Create, Save, and Close a Graphics File Thanh Menu: Gồm có 9 Menu chức năng:  Menu Filter: Chứa các chức năng tạo hiệu ứng trên ảnh.  Menu View: Chứa các chức năng xác lập chế độ hiển thị hình ảnh.  Menu Window: Chứa các chức năng hiển thị hay ẩn các Palette của chương trình.  Menu Help: Chứa các thông tin trợ giúp sử dụng chương trình Adobe Photoshop. 39 Create, Save, and Close a Graphics File Chức năng Palettets  Palette Navigator: Giúp trượt hình ảnh và điều chỉnh tỉ lệ hiển thị của hình ảnh.  Palette Info: Cho biết thông tin màu tại vị trí con trỏ cũng như các thông tin khác tùy thuộc vào công cụ được chọn.  Palette Layer: Quản lý lớp của đối tượng.  Palette Style: Chứa các mẫu Style của lớp.  Palette Chanel: Giúp quản lí Kênh màu  Palette Action: Giúp tạo và quản lí các thao tác tự động.  Palette Color/ Swatches: Dùng để chọn màu.  Palette Path: Quản lí đường biên.  Palette History: Lưu các ảnh chụp nhanh và các trạng thái hiệu chỉnh ảnh. 40 Create, Save, and Close a Graphics File Thanh tùy chọn:  Chứa các tùy chọn chức năng của công cụ được chọn trong hộp công cụ. Thanh Trạng Thái:  Hiển thị một số thông tin liên quan đến việc thao tác và tạo đối tượng trên ván vẽ. Ván Vẽ:  Ván vẽ là một cửa sổ làm việc được giới hạn bởi kích thước chiều dài và chiều rộng của hình ảnh. Là nơi tạo và hiệu chỉnh hình ảnh. Ván vẽ có thể được thay đổi màu nền thông qua chức năng Background 41 Create, Save, and Close a Graphics File 1. Create a Graphics File  Click Menu FileNew hoặc CTRL+N hay Click Button New 42 Create, Save, and Close a Graphics File 2. Close a Graphics File  Click Menu FileClose hoặc CTRL+W hay Click Button X 3. Open an Existing Graphics File  Click Menu FileOpen hoặc CTRL+O hay Click Button  Click Menu FileBrowse hoặc CTRL+Shift +O: Duyệt file 4. Save a Graphics File  Click Menu FileSave hoặc CTRL+S hay Click Button  Click Menu FileSave As Hay CTRL+SHIFT+S (lưu với tên khác)Chọn nơi lưu trữ Đặt tên (Lưu theo dạng Web phần mở rộng là .gif và .jpg 5. Exit Photoshop  Click Menu FileExit hoặc Click Close Button hay Alt+F4 43 Create, Save, and Close a Graphics File 44 Create, Save, and Close a Graphics File  As a copy: lưu thành một tập tin bản sao trong khi đó vẫn mở cửa sổ tài liệu hiện hành.  Alpha Chanels: lưu kênh màu Alpha kèm theo tài liệu. Ngược lại xoá tất cả các kênh màu Alpha.  Layers: giữ nguyên các lớp. Ngược lại sẽ trộn tất cả các lớp lại thành một lớp duy nhất.  Anotation: cho phép lưu kèm chú thích.  Spot color: lưu thông tin màu vết. Ngược lại thì loại bỏ.  Use Proof setup, ICC Profile: lưu tài liệu quản lí màu.  Thumbnail: lưu kèm ảnh thu nhỏ cho tài liệu. Mục này có tác dụng khi chức năng Preview Image trong hộp thoại Preferences là Ask When Saving.  Use Lower Case Extensions: phần tên mở rộng luôn luôn là kí tự thường. 45 Màu Background và Foreground 1. Thiết lập Màu Foreground và Backdground bằng Swatches:  Kích hoạt Swatches trên Palette cùng nhóm Color, Swatches và Styles Palettes.  Chọn màu cho Foreground: Click chuột tại một mẫu màu.  Chọn màu cho Background: Nhấn tổ hợp phím Ctrl + Click chuột tới một mẫu màu. 46 Màu Background và Foreground 2. Thiết lập Màu foreground/ Backdground bằng Color Picker:  Muốn chọn màu cho Foreground hay Background, nhấp chuột lên chức năng Foreground hay Background hộp công cụ.  Chọn mẫu màu tại vùng nhìn thấy hoặc chọn mô hình màu rồi nhấp giá trị màu, chọn Ok. 47 Màu Background và Foreground 3. Thiết lập Màu foreground/ Backdground bằng Palettes Color:  Kích họat Menu Color trên Palette cùng nhóm Color, Swatches và Styles.  Chọn Mô hình màu: Chọn từ Menu palette Color góc trên bên phải  Khai báo các giá trị màu cơ bản cho mô hình màu tại các thanh giá trị hay chọn bất kì một mẫu màu tại thanh màu.  Chọn màu cho Foreground hay Background. Click chuột chọn chức năng tương ứng là Set Foreground Color hay Set Background Color bên trái hộp thoại (Vùng khoanh tròn). 48 Màu Background và Foreground 4. Thiết lập mặc định màu cho Forground và Background:  Nhấn phím tắt là D. 5. Hoán chuyển màu cho Foreground và Background:  Chọn chức năng Switch Foreground and Background Color  Nhấp phím tắt là X. 49 Use Drawing Tools 50 Các thao tác biến đổi hình ảnh 1. Sử dụng công cụ Zoom Tool, thu nhỏ hình ảnh  Nhắp chuột chọn công cụ Zoom trên hộp công cụ.  Nhắp chuột trái lên hình ảnh. 2. Sử dụng công cụ Zoom Tool, phóng to hình ảnh  Nhắp chuột chọn công cụ Zoom trên hộp công cụ.  Nhấn giữ phím Alt + Nhắp chuột trái lên hình ảnh.  Lưu ý:  Nhấn giữ chuột trái đồng thời drag chuột tạo thành một khung hình chữ nhật bao quanh đối tượng.  Khi chọn công cụ Zoom trên thanh Option sẽ hiện thị chức năng Zoom in và zoom out chúng ta cần chọn đúng kiểu khi thực hiện phóng to hay thu nhỏ. 51 Các thao tác biến đổi hình ảnh 3. Kết hợp Phím chức năng tạo vùng chọn để thu phóng ảnh  Nhấn giữ hai phím Ctrl + Space bar kết hợp Click chuột lên hình ảnh phóng to.  Nhấn giữ hai phím Alt + Space bar kết hợp Click chuột lên hình ảnh cần thu nhỏ. 4. Sử dụng Palettes Navigator để thu phóng hình ảnh:  Kéo con trỏ trượt sang phải hay trái để chọn chức năng Zoom In hay Zoom Out hay nhập giá trị bên góc trái màn hình. 52 Các thao tác biến đổi hình ảnh 5. Sử dụng menu View để thu phóng hình ảnh  Phóng to: - Chọn menu View, chọn Zoom in - Hay nhấn tổ hợp phím tắt là Ctrl + “dấu cộng”.  Thu nhỏ: - Chọn menu View, chọn Zoom out - Hay nhấn tổ hợp phím tắt là Ctrl + “dấu trừ”.  Hiển thị cửa sổ hình chữ nhật vừa khít với cửa sổ chương trình: - Chọn Menu View, chọn Fit on Screen - Hay nhấn tổ hợp phím tắt là Ctrl + 0 (phím Zero). 53 Các thao tác biến đổi hình ảnh 5. Sử dụng menu View để thu phóng hình ảnh  Hiển thị hình ảnh với tỉ lệ 100%. - Chọn Menu View, chọn Actual Pixel - Hay nhấn tổ hợp phím: Ctrl + Alt + 0 (phím Zero).  Hiển thị hình ảnh cùng tỉ lệ khi in - Chọn Menu View, chọn Print size.  Cuốn nhanh hình ảnh: - Chọn công cụ Hand tool. - Nhắp chuột vào hình ảnh rồi drag hình ảnh. - Hay nhấn giữ phím Space bar (Alt hay CTRL)+ Drag hình ảnh. 54 Các thao tác biến đổi hình ảnh 6. Thay đổi kích thước hình ảnh bằng lệnh Canvas size  Lệnh Canvas size cho phép thay đổi kích thước của Ván vẽ nhưng không làm thay đổi kích thước của hình ảnh trong ván vẽ.  Chọn Menu Image, chọn lệnh Canvas size. Hộp thoại xuất hiện. Xác lập các thuộc tính sau: - Width: Thay đổi chiều rộng ván vẽ. - Height: Thay đổi chiều cao ván vẽ. - Anchor: Chọn vị trí thực thi chức năng đối với hình ảnh trong Canvas. 55 Các thao tác biến đổi hình ảnh 7. Thay đổi kích thước hình ảnh bằng lệnh Image size  Lệnh Image size cho phép thay đổi kích thước và độ phân giải của hình ảnh.  Chọn Menu Image, chọn lệnh Image size. Hộp thoại xuất hiện, xác lập các thông số:  Width, Height, Resolution.  Constrain Proportion: Khoá tỉ lệ giữa chiều rộng và chiều cao không đổi.  Resample Image: Tùy chọn về định lại kích thước 56 Các thao tác biến đổi hình ảnh 8. Nhân bản cửa sổ Canvas  Chọn Menu Image, chọn chức năng Duplicate.  Xác lập các giá trị:  Hộp As: Tên của bản vừa Copy.  Duplicate Merged Layers only: cho phép trộn các lớp lại trên tập tin vừa chép nếu hình ảnh có nhiều lớp. 57 Các thao tác biến đổi hình ảnh 8. Phục hồi ảnh với lần lưu cuối:  Chọn Menu File, chọn Rever. 9. Trở về trạng thái bất kì:  Nhấp chuột chọn Palette History.  Chọn trạng thái muốn phục hồi. 58 Các thao tác biến đổi hình ảnh 10. Thiết lập tổ hợp phím Ctrl + Z. Version CS3  Vào Menu Edit, Keyboard Shortcut  Mở thư mục Edit.  Mục Undo/ Redo: Cột Shortcut xóa và để trống  Mục Back Foreward: Cột Shortcut nhấn Ctrl + Z. Gõ Enter  Chọn Ok. Đóng cửc sổ Canvas  Chọn File chọn Close, Hay Close Button. 59 Các thao tác biến đổi hình ảnh 11. Sử dụng nhóm công cụ Marquee để tạo vùng chọn  Rectangular Marquee Tool: Cho phép tạo vùng chọn hình chữ nhật hoặc hình vuông.  Elliptical Marquee Tool: Cho phép tạo vùng chọn dạng hình Ellipse hoặc hình tròn.  Single Row Marquee Tool: Cho phép tạo vùng chọn có dạng hình chữ nhật nằm ngang 1 Pixel.  Single Column Marquee Tool: Cho phép tạo vùng chọn có dạng hình chữ nhật thẳng đứng 1 Pixel.  Thực hiện: Click chọn công cụChọn (dùng kèm phím Shift).  Bỏ vùng chọn: CTRL+D 60 Các thao tác biến đổi hình ảnh 12. Sử dụng nhóm công cụ Lasso Tool để tạo vùng chọn  Lasso Tool: Cho phép kẻ đường biên tự do để tạo vùng chọn.  Polygonal Lasso Tool: Cho phép tạo vùng chọn dạng đa giác.  Magnetic Lasso T