NGHIÊN cứu PHÁT TRI ển ỨNG DỤNG CÔNG NGHỆ đa PHƯƠNG TIỆN

CHNG TRèNH KC 01 TI M S KC 01-14 & TI THUC CHNG TRèNH KHCN CP NH NC KC 01 M S KC 01.14 NGHIấN CU PHT TRI N NG DNG CễNG NGH A PHNG TIN Ch nhim ti: PGS.TS Nguyn Cỏt H BO CO NHNH: X Lí HO CHIU Ch tr ỡ: PGS TS Nguyn ỡnh Húa 6352-8 20/4/2007 H NI, 4/2005 Chơng trình kc01 đề tài m số kc-01-14 -& - tên đề tài: ứng dụng công nghệ multimedia lĩnh vực y tế, giáo dục đào tạo văn hóa Tài liệu: Xử lý đồ họa hai chiều cấp quản lý: Nhà nớc Cơ quan chủ trì: Viện Công nghệ Thông tin, Đại học Quốc gia Hà Nội Cơ quan thực hiện: - Viện Công nghệ thông tin, Đại học Quốc gia Hà Nội - Trung tâm Công nghệ Hội tụ Đa phơng tiện - Viện Khoa học Giáo dục, Bộ GD&ĐT - Khoa Toán Tin, Đại học KHTN, Đại học Quốc gia Hà Nội - Bộ môn Y học Hạt nhân, Đại học Y khoa Hà Nội - Viện Da liễu Trung ơng - Công ty AMEC Chủ nhiệm đề tài: PGS.TSKH Nguyễn Cát Hồ NHánh đề tài: Nghiên cứu xây dựng phần mềm mô thí nghiệm ảo đa phơng tiện công cụ hỗ trợ Chủ trì đề tài nhánh: PGS.TS Nguyễn Đình Hoá Hà nội, 4-2005 Đề tài kc 01-14 Viện Công nghệ Thông tin, Đại học Quốc gia Hà Nội Tài liệu: Xử lý đồ họa hai chiều Ngời viết: Lê Việt Hà Hà nội, 4-2005 Tạo ảnh đồ họa chiều Mục lục I Định dạng ảnh Khái niệm ảnh 1.1 Lý thuyết màu - mô hình màu sắc ảnh 1.1.1 Độ sâu màu 10 1.1.2 Các thuộc tính màu sắc 12 1.1.3 Số hoá ảnh chiều 16 Định dạng ảnh Bitmap 17 2.1 Khái niệm 17 2.2 Đặc điểm 17 Định dạng ảnh Vector 19 3.1 Khái niệm 19 3.2 Đặc điểm 19 So sánh ảnh bitmap ảnh vectơ 21 4.1 ảnh Bitmap 21 4.2 ảnh Vector 21 Định nghĩa số định dạng ảnh đồ họa 22 5.1 GIF 22 5.2 BMP 22 5.3 JPEG 22 5.4 TIF TIFF 22 5.5 PNG 22 5.6 SVG 23 5.7 SWF 23 5.8 EPS 23 5.9 So sánh số định dạng file ảnh đồ hoạ 23 5.9.1 GIF 23 5.9.2 JPEG 24 5.9.3 PNG 24 5.9.4 VECTOR (PGML, SWF VML) 25 II PaintShop Pro 26 Khái niệm PaintShop Pro 26 1.1 Một số khái niệm PainShop Pro 26 1.1.1 Khái niệm Paint Shop Pro 26 1.1.2 Các đặc tính bật 26 Trang Tạo ảnh đồ họa chiều 1.1.3 Các thao tác ảnh 26 1.2 Các phím nóng Paint Shop Pro 26 1.3 Yêu cầu cài đặt PaintShop Pro 29 Giới thiệu công cụ Paint Shop Pro 30 2.1 Các công cụ 30 2.2 Quản lý file ảnh 33 2.3 Một số thuật ngữ PaintShop Pro 33 2.4 Bút vẽ 33 2.5 Bút hình 34 2.6 Bút di màu 34 2.7 Bút xoá 35 2.8 Hộp phun màu 35 2.9 Hộp đổ màu 35 2.10 Soạn thảo văn 36 2.11Công cụ vẽ đờng hình học 36 2.12Th viện hình ảnh 36 Công cụ xử lý màu 37 3.1 Bảng màu 37 3.2 Điều chỉnh Gamma màu 37 Tạo hiệu ứng ảnh 40 4.1 Làm méo ảnh 40 4.2 Các hiệu ứng ánh sáng màu sắc 40 4.3 Các lọc ảnh 42 Lựa chọn vùng 43 5.1 Khái niệm 43 5.2 Vùng lựa chọn 43 5.3 Một số thuật ngữ lựa chọn vùng 44 5.4 Các công cụ chọn vùng 44 5.4.1 Công cụ chọn vùng 44 5.4.2 Công cụ chọn vùng đa giác 44 5.4.3 Công cụ chọn vùng theo màu 45 ảnh nhiều lớp 46 6.1 Khái niệm 46 6.1.1 Khái niệm lớp 46 6.1.2 Cửa sổ điều khiển lớp 47 6.2 Làm việc với lớp ảnh 47 Trang Tạo ảnh đồ họa chiều 6.3 Các u điểm sử dụng nhiều lớp ảnh 48 6.3.1 Độ mờ lớp 48 6.3.2 Chế độ trộn lớp 48 6.3.3 Phạm vi, tỷ lệ hoà trộn lớp 54 Các thao tác Alpha kênh Mask 55 7.1 Khái niệm Alpha kênh 55 7.2 Masking 56 7.2.1 Khái niệm Masking 56 7.2.2 So sánh cách tạo lớp Mask 57 7.2.3 Quan hệ vùng chọn-Mask-Alpha kênh 57 7.2.4 Ưu điểm lớp Mask 58 In ấn 61 III Tạo ảnh trang Web 62 Định dạng ảnh Web 62 Tạo ảnh suốt Web 63 Các định dạng file ảnh trang Web 63 3.1 So sánh đặc tính 63 3.2 Các trờng hợp sử dụng ảnh JPEG 63 3.3 Các trờng hợp sử dụng ảnh GIF 64 3.4 Các trờng hợp sử dụng ảnh PNG 65 Tối u hoá ảnh trang Web 65 4.1 Tổng quan ảnh màu Web 65 4.2 Tối u hóa ảnh GIF 66 4.3 Tối u hoá ảnh JPEG 68 4.4 Phối màu 68 Chống đờng viền ca 69 5.1 Đờng ca bao vùng màu 69 5.2 Trờng hợp tạo hiệu ứng chống đờng ca 71 ảnh động trang Web 71 IV Thực hành công cụ PaintShop Pro 74 Cài đặt Paint Shop Pro 74 Sử dụng công cụ PaintShop Pro 74 2.1 Mở bảng công cụ 74 2.1.1 Mở cửa sổ làm việc 74 2.1.2 Chỉnh sửa vùng làm việc với ảnh 74 2.2 Tạo file ảnh 75 Trang Tạo ảnh đồ họa chiều 2.2.1 Tạo file ảnh 75 2.2.2 Tạo ảnh từ hình 75 2.3 Mở file ảnh 76 2.3.1 Mở file ảnh 76 2.3.2 Mở xem đồng thời nhiều file ảnh 76 2.4 Ghi file ảnh 77 2.5 Chuyển đổi file ảnh 78 2.6 Các thao tác khác 78 Thao tác tạo hiệu ứng ảnh 78 3.1 Sao vùng ảnh 78 3.2 Tạo hiệu ứng ảnh 79 3.2.1 Làm méo ảnh 79 3.2.2 Chạm chữ tranh 79 3.2.3 Cắt vùng mầu trộn, làm chữ có bóng 80 3.2.4 Làm mờ ảnh làm mịn ảnh 80 3.2.5 Làm sắc ảnh sắc nét 80 3.2.6 Làm ảnh đục 80 3.2.7 Các hiệu ứng lọc ảnh 81 3.3 Thao tác lớp 82 3.3.1 Khởi tạo lớp, chèn thêm lớp 82 3.3.2 Hiển thị lớp 82 3.3.3 Di chuyển, đổi tên, chép lớp 82 3.3.4 Nhóm lớp, thay đổi độ mờ đục lớp 82 3.3.5 Sửa đổi lớp 83 V Các thực hành PaintShop Pro 84 Tạo cảnh cách sử dụng công cụ 84 1.1 Tạo cảnh gồm nhiều lớp 84 1.1.1 Phân tích yêu cầu 84 1.1.2 Các bớc thực 85 1.2 Tạo hiệu ứng ảnh lớp 85 1.2.1 Phân tích yêu cầu 85 1.2.2 Các bớc thực 85 1.3 Thực hành hiệu ứng lớp 86 1.3.1 Phân tích yêu cầu 86 1.3.2 Các bớc thực 86 1.4 Đặt chế độ hoà trộn màu sắc lớp 87 Trang Tạo ảnh đồ họa chiều 1.4.1 Phân tích yêu cầu 87 1.4.2 Các bớc thực 87 1.5 Tạo hiệu ứng ánh sáng cho ảnh 88 1.5.1 Phân tích yêu cầu 89 1.5.2 Các bớc thực 89 1.6 Nâng cao hiệu ứng ánh sáng cho ảnh 90 1.6.1 Phân tích yêu cầu 90 1.6.2 Các bớc thực 90 1.7 Thực hành tạo bóng dòng Text 91 1.7.1 Phân tích yêu cầu 91 1.7.2 Các bớc thực 91 1.8 Tạo màu chữ 92 1.8.1 Phân tích yêu cầu 92 1.8.2 Các bớc thực 92 Tạo cảnh cách sử dụng kết hợp lớp lớp Mask 2.1 Tạo hiệu ứng mask đơn giản 93 93 2.1.1 Phân tích yêu cầu 93 2.1.2 Các bớc thực 93 2.2 Lựa chọn vùng cảnh phức tạp 95 2.2.1 Phân tích yêu cầu 95 2.2.2 Các bớc thực 95 2.3 Tạo cảnh nh hình vẽ từ ảnh gốc sau 97 2.3.1 Phân tích yêu cầu 97 2.3.2 Các bớc thực 97 Tạo cảnh đặc biệt phức tạp 98 3.1 Tạo khung lồng ảnh 98 3.1.1 Phân tích yêu cầu 98 3.1.2 Các bớc thực 98 3.2 Tạo biểu tợng hình cầu 100 3.2.1 Phân tích yêu cầu 100 3.2.2 Các bớc thực 101 3.3 Tạo hình nón 102 3.3.1 Phân tích yêu cầu 102 3.3.2 Các bớc thực 102 3.4 Tạo nút điều khiển 3.4.1 Phân tích yêu cầu 104 104 Trang Tạo ảnh đồ họa chiều 3.4.2 Các bớc thực 3.5 Tạo nút thay đổi màu bo kích chuột vào 105 106 3.5.1 Phân tích yêu cầu 106 3.5.2 Các bớc thực 106 3.6 Thực hành ghép cảnh phức tạp 108 3.6.1 Phân tích yêu cầu 109 3.6.2 Các bớc thực 109 3.7 Tạo biểu tợng đơn vị 111 3.7.1 Phân tích yêu cầu 111 3.7.2 Các bớc thực 111 3.8 Tạo cảnh cầu vồng 121 3.8.1 Phân tích yêu cầu 121 3.8.2 Các bớc thực 121 3.9 Tạo khung frame trang Web 123 3.9.1 Phân tích yêu cầu 123 3.9.2 Các bớc thực 123 VI Tài liệu tham khảo 128 Trang Tạo ảnh đồ họa chiều I Định dạng ảnh Khái niệm ảnh ảnh tự nhiên tập hợp nhóm thông tin màu nhận biết mắt ngời, ảnh tự nhiên dễ hiểu nhiên hạn chế việc giải thích nội dung, ý tởng văn 1.1 Lý thuyết màu - mô hình màu sắc ảnh Màu sắc đợc lu liệu số hóa theo hai chế độ chính: RGB CMYK RGB(Red, Green, Blue) màu hình khối đợc tạo lu theo tỷ lệ Màu cộng màu bản: đỏ, xanh da trời xanh Phần lớn máy tính sử dụng chế độ Màu RGB(Red- Green- Blue): Đây màu hình Nó huỳnh quang màu đợc sử dụng để tạo ảnh hình: Đỏ, Xanh cây, Xanh dơng Thang màu đợc định từ đến 255 ảnh RGB sử dụng ba màu để tái tạo đến 16.7 triệu màu sắc tự nhiên RGB chế độ mặc định cho ảnh Paint Shop Pro Màn hình máy tính luôn hiển thị màu sử dụng mô hình RGB Một số u điểm sử dụng màu RGB: Trang Tạo ảnh đồ họa chiều Chọn công cụ Selection, đặt Selection type=Circle, Feather =0, chọn Antialiased, khoanh vùng bao viên ngọc mà không chứa đối tợng khác Chọn Magic Wand, trừ vùng bao viên ngọc 10 Chọn Edit ->Copy, Edit->Paste->As New Layer Trang 114 Tạo ảnh đồ họa chiều 11 Chúng ta cần giảm kích thớc viên ngọc Chọn Image->Resize, không chọn "Resize all layers" 12 Sao chép viên ngọc vào lớp đặt vị trí giao đờng Layer Grid 13 Đối với viên ngọc thứ 2, ta cần sử dụng hiệu ứng Image->Mirror để không tạo khác biệt đờng nối 14 Chọn Merge->Merge Visible để gộp tất lớp chứa viên ngọc thành lớp Corner Gems 15 Chọn Effects->3D Effects->Drop Shadow tạo bóng cho cho đối tợng lớp Corner Gems Trang 115 Tạo ảnh đồ họa chiều 16 Tạo lớp Center Setting1 Chọn Text, chọn kiểu tô màu GradientClick, đặt màu Gradient Red-Yellow-Red: 17 Trong cửa sổ quản lý thuộc tính dòng Text, chọn Name=Monotype Sorts, Script = Symbol, Size=84 18 Chọn View->Grid, đặt xác biểu tợng khung hình Trang 116 Tạo ảnh đồ họa chiều 19 Chọn Selections->Defloat Chọn Effects->3D Effects->Inner Bevel, đặt Presets =Metallic 20 Tạo lớp Setting2 mới, chọn Text Các thuộc tính đặt nh trớc, Trong textbox gõ chữ b thờng, chọn OK 21 Chọn Effects->3D Effects->Inner Bevel, đặt Presets =Metallic Chọn OK Trang 117 Tạo ảnh đồ họa chiều 22 Cộng lớp Center Ring mới, chọn Selection, đặt Selection Type = Circle, Feather= 0, chọn Antialiased, tạo vùng lựa chọn khung hình 23 Tô màu Gradient vùng chọn Chọn Selections->Modify->Contract đặt giá trị Chọn Edit->Cut để xoá vùng lựa chọn 24 Chọn Effects->3D Effects->Inner Bevel, đặt Presets=Metallic Chọn OK Trang 118 Tạo ảnh đồ họa chiều 25 Chọn hình viên ngọc khác Chọn Edit->Copy, Edit->Paste -> As New Layer 26 Chọn Image ->Resize để giảm kích thớc viên ngọc 27 Đặt lớp dới Layer Center Ring Trang 119 Tạo ảnh đồ họa chiều 28 Chọn Edit->Copy Merged, Edit->Paste->As New Image Chọn vùng biểu tợng 29 Chọn Selections->Convert to Seamless Pattern Trang 120 Tạo ảnh đồ họa chiều 3.8 Tạo cảnh cầu vồng 3.8.1 Phân tích yêu cầu Trong trình tạo cảnh ta cần phải biết phối hợp màu sắc hài hòa Tạo cảnh cầu vồng thực tế đơn giản ta sử dụng hiệu ứng màu Gradient 3.8.2 Các bớc thực Mở ảnh 300x300, tạo lớp Layer có tên Gradient Cutout Kích hoạt lớp Cutout, chọn công cụ Selection, đặt Selection Type = Circle, chọn Antialiased, tạo vùng tròn ảnh, tô màu cho vùng lựa chọn Chọn Selections->Save to alpha channel Chọn Selections->Select None Chọn Image->Resize, đặt Percentage of original =65.Lựa chọn hình tròn, chọn Selections -> Save to Alpha Channel Kích hoạt lớp Gradient, chọn Selections->Load from Alpha Channel, Trang 121 Tạo ảnh đồ họa chiều vùng lu (selection #0) Đặt giá trị màu Foreground R=255, G=0, B=0; giá trị màu Background R=0, G=0, B=192 chọn công cụ Flood Fill, chọn Fill Style=Sunburst Gradient Chọn tab Gradient, đặt Gradient = Violent-Orange, Repeats=9, Horizontal =50, Vertical =50 Chọn Tab Edit, đặt tên màu sắc đợc tạo "rainbow" Lần lợt kích chuột vào nút lựa chọn màu Fore, Back, Custom để lựa chọn màu sắc cầu vồng Trên trợt Custom di chuyển trợt chuyển đổi màu sắc Fore Back 50% Cộng thêm điểm màu dải màu vị trí 72%, chọn màu xanh trung màu xanh lựa chọn Đặt trợt màu 65%, cộng thêm màu có giá trị R=0, G=255, B=0 vào dải màu Các điểm trợt màu cần cộng thêm màu có giá trị Vị trí 58%, R=255, G=0, B=255 Trang 122 Tạo ảnh đồ họa chiều Vị trí 51%, R=255, G=255, B=0 Vị trí 44%, R=255, G=0, B=0 Tô màu cho vùng tròn đợc lựa chọn 10 Chọn Selections->Load Selection from alpha Channel Chọn Selections>modify->Contract, đặt giá trị 10 Xóa vùng lựa chọn Lựa chọn nửa hình tròn phía dới xóa 3.9 Tạo khung frame trang Web 3.9.1 Phân tích yêu cầu Kết hợp hình dạng khác nhau, yêu cầu độ mịn góc cạnh nối đối tợng 3.9.2 Các bớc thực Mở file kích thớc 570x350 (350x150), tạo lớp lớp Background, chọn công cụ Selection, đặt Selection Type=Elipse, chọn Antialiased, tạo vùng chọn Elipse tô màu đen Trang 123 Tạo ảnh đồ họa chiều Cộng thêm vùng chọn hình chữ nhật tô màu tím, hình chữ nhật nằm chồng phần lên hình Elipse vừa tạo Đặt Layer chứa hình chữ nhật lên lớp khác Để đặt, sửa đổi lớp xác ta cần Zoom ảnh lên lần Tại mức Zoom nhận thấy hiệu ứng ca vị trí chồng lớp Để tạo hiệu ứng xác, ta cần đặt vị trí hình vuông giữa, bên phải dới hình Elipse Lựa chọn công cụ Move, kéo hình chữ nhật tới vị trí thích hợp (chú ý trình di chuyển giữ phím Shift để tạo vị trí xác) Trang 124 Tạo ảnh đồ họa chiều Thực bớc nh hình Elipse bên phải Chọn côn cụ Color Replacer, đặt Foreground màu đen, Background màu hình chữ nhật thay màu hình chữ nhật Chọn Layers->Merge Visable Tạo hình vuông đen lớp Square, kích chuột phải lớp Square, chọn Duplicate cộng thêm lớp chứa hình vuông thứ Zoom vị trí góc hình, chọn View->Grid (lúc đờng biên hình Elipse hình chữ nhật đờng thẳng) 10 Chọn công cụ Move, di chuyển hình vuông đặt góc hình chữ nhật Elipse Trang 125 Tạo ảnh đồ họa chiều 11 Chọn công cụ Selection, đặt Selection Style = Circle, chọn Anti-aliased Tạo vùng lựa chọn có tâm góc dới phải hình vuông Chọn phím Delete để bỏ phần hình vuông tạo viền cong hình chữ nhật hình Elipse 12 Thực thao tác tơng tự đờng biên hình chữ nhật hình Elpise thứ Chọn Layers->Merge ->Merge Visible 13 Kích hoạt chế độ hiển thị Layer Background, lớp Merged chọn Edit>Copy dán sang lớp Final mới, di chuyển vị trí để tạo bóng cho hình Lựa chọn vùng hình lớp Final 14 Chọn Selections->Save to alpha channel Xoá lớp Merged, lớp Final chọn Selections->Load from alpha channel Trang 126 Tạo ảnh đồ họa chiều 15 Tô màu vùng chọn hiệu ứng, màu sắc bề mặt Sau tạo màu phù hợp với đối tợng Trang 127 Tạo ảnh đồ họa chiều VI Tài liệu tham khảo Tiếng Việt Nguyễn Hạnh, Nghệ thuật phối màu, Nhà xuất trẻ TP Hồ Chí Minh năm 2000 Nguyễn Quốc Cờng-Hoàng Đức Hải, Đồ họa vi tính, Nhà xuất giáo dục Hà Nội năm 1999 Tiếng Anh Alan Watt-Fabio Policarpo, The Computer Image, ACM Press New York Ramona Pruitt-Joshua Pruitt, PaintShop pro Visual Insight, CORIOLIS 14455 North Hayden Road Suite 220 Scottsdale, Arizona T.Michael Clark, PaintShop Pro Web Techniques, New Riders Publishing, Indianapolis, Indiana T.Michael Clark, PaintShop Pro in 24 hours, New Riders Publishing, Indianapolis, Indiana http://www.w3.org/Graphics http://www.jasc.com/tutorials http://www.adultnetsurprise.com/learning_center/paintshoptips.html Trang 128