Giáo trình mô đun Đồ họa ứng dụng (Nghề Công nghệ thông tin Trình độ cao đẳng)

UBND TỈNH BÀ RỊA – VŨNG TÀU TRƯỜNG CAO ĐẲNG KỸ THUẬT CƠNG NGHỆ GIÁO TRÌNH MƠ ĐUN ĐỒ HỌA ỨNG DỤNG NGHỀ: CƠNG NGHỆ THƠNG TIN TRÌNH ĐỘ: CAO ĐẲNG (Ban hành kèm theo Quyết định số: ……/QĐ-CĐKTCN, ngày … tháng … năm 20…… Hiệu trưởng Trường Cao đẳng Kỹ thuật Công nghệ BR-VT) BÀ RỊA – VŨNG TÀU TUYÊN BỐ BẢN QUYỀN Nhằm đáp ứng nhu cầu học tập nghiên cứu cho giảng viên sinh viên nghề Công nghệ thông tin trường Cao đẳng Kỹ thuật Công nghệ Bà Rịa – Vũng Tàu, thực biên soạn tài liệu Đồ họa ứng dụng Tài liệu biên soạn thuộc loại giáo trình phục vụ giảng dạy học tập, lưu hành nội Nhà trường nên nguồn thơng tin phép dùng ngun trích dùng cho mục đích đào tạo tham khảo Mọi mục đích khác mang tính lệch lạc sử dụng với mục đích kinh doanh thiếu lành mạnh bị nghiêm cấm LỜI GIỚI THIỆU Giáo trình “Đồ họa ứng dụng” biên soạn dựa khung chương trình đào tạo Cao đẳng nghề Cơng nghệ thông tin Trường Cao đẳng Kỹ thuật Công nghê Bà Rịa – Vũng Tàu phê duyệt Với mục tiêu cung cấp cho em kiến thức kỹ làm việc phần mềm Adobe Photoshop - Một phần mềm hỗ trợ thiết kế xử lý ảnh chuyên nghiệp sử dụng rộng rãi Giáo trình biên soạn cách ngắn gọn, hướng dẫn bước thực rõ ràng dễ hiểu giúp cho em thực hành hình thành kỹ nhanh chóng Nội dung giáo trình giúp HSSV sử dụng công cụ, lệnh để thiết kế, xử lý ảnh nghệ thuật, vẽ giao diện trang web phục vụ cho mô đun thiết kế web Nội dung giáo trình chia thành 09 bài, đó: Bài 1: Tổng quan Photoshop Bài 2: Chọn màu tô màu Bài 3: Tạo hiệu chỉnh vùng chọn Bài 4: Quản lý Layer Bài 5: Tạo mặt nạ kênh Bài 6: Tạo Type Shape Bài 7: Vẽ giao diện trang Web Bài 8: Hiệu chỉnh màu Bài 9: Phục hồi ảnh Trong q trình biên soạn, chắn giáo trình cịn nhiều thiếu sót Tác giả mong nhận ý kiến đóng góp q thầy/cơ em học sinh, sinh viên để tiếp tục hoàn thiện Xin chân thành cảm ơn quý đồng nghiệp, bạn bè có ý kiến đóng góp q trình biên soạn giáo trình Bà Rịa – Vũng Tàu, ngày …… tháng …… năm Tham gia biên soạn Lê Viết Huấn MỤC LỤC GIÁO TRÌNH MƠ ĐUN Tên mô đun: Đồ họa ứng dụng Mã mô đun: MĐ22 Vị trí, tính chất, ý nghĩa vai trị mơ đun: - Vị trí: Sau học xong mơ đun Tin học văn phịng học trước mơn thiết kế Web, thiết kế hoạt hình - Tính chất: Cung cấp cho người học kiến thức kỹ xử lý hình ảnh, thiết kế quảng cáo, vẽ giao diện web phần mềm Photoshop - Ý nghĩa vai trị mơ đun: Thiết kế sản phẩm đồ họa, lắp ghép dạng hình ảnh, thay đổi chỉnh sửa màu sắc ảnh theo ý muốn, xử lý chi tiết thừa không mong muốn, tạo hiệu ứng nghệ thuật cho hình ảnh thiết kế giao diện website kết hợp với hình ảnh 3D sinh động hấp dẫn Mục tiêu mô đun: Về kiến thức: - Nắm công dụng công cụ vẽ, tơ màu, cơng cụ tẩy xóa - Nắm cơng dụng vùng chọn - Trình bày khái niệm Layer, quy trình quản lý Layer - Nắm chế độ Quick mask thay đổi chế độ - Nắm cách tạo văn Photoshop - Biết phân tích, ghi nhận thơng tin kích thước, màu sắc trang mẫu, phân chia bố cụ cho trang Web mẫu Về kỹ năng: - Vẽ, tô màu cho đối tượng công cụ Brush, Pencil, Gradient, Paint bucket - Tạo vùng chọn cách sử dụng nhiều công cụ khác - Sử dụng lệnh xử lý màu sắc cho ảnh - Quản lý layer, tạo hiệu ứng cho layer - Tạo định dạng văn Photoshop - Sử dụng kỹ để phục hồi ảnh, thiết kế nội dung quảng cáo, vẽ giao diện trang web Về lực tự chủ trách nhiệm: - Có thể làm việc độc lập theo nhóm, tự lên kế hoạch từ ý tưởng đến thực việc xử lý ảnh: Tự lắp ghép dạng hình ảnh, thay đổi chỉnh sửa màu sắc ảnh theo ý muốn, xử lý chi tiết thừa không mong muốn, tạo hiệu ứng nghệ thuật cho hình ảnh - Thiết kế sản phẩm đồ họa, thiết kế giao diện website kết hợp với hình ảnh 3D cơng trình kiến trúc để tạo mẫu phối cảnh nội ngoại thất sinh động hấp dẫn - Thực công việc thực tế theo chuyên đề, kết hợp với lọc chuyên dụng để tạo hiệu ứng đặc biệt cho mẫu thiết kế đẹp, nghệ thuật, sản phẩm đồ họa quảng cáo, giao diện trang web, poster, brochure, thiết kế album ảnh cưới, xử lý ảnh phong cảnh, thiết kế ảnh nghệ thuật cách ấn tượng độc đáo, chuyên nghiệp Nội dung mô đun: BÀI 1: TỔNG QUAN VỀ PHOTOSHOP Mã bài: 16.01 Giới thiệu: Adobe Photohop ứng dụng thiết kế xử lý ảnh chuyên nghiệp sử dụng nhiều từ trước đến Với Adobe Photoshop, vẽ bố cục trang web, tạo tác phẩm ảnh nghệ thuật, … Mục tiêu: − Trình bày vị trí công dụng thành phần giao diện − Tạo tập tin ảnh mới, lưu tập tin ảnh, đóng tập tin ảnh, mở tập tin ảnh − Xem ảnh chế độ khác − Thoát khỏi chương trình Photoshop − Cẩn thận, an tồn, khơng làm hình ảnh nguồn Nội dung chính: Tạo, mở, đóng điều chỉnh tập tin − Cách 1: Click đôi chuột lên biểu tượng Adobe Photoshop desktop Hình 1.1: Biểu tượng Adobe Photoshop desktop − Cách 2: Vào Start  Adobe Photoshop Hình 1.2: Biểu tượng Adobe Photoshop Start + Màn hình Photoshop Hình 1.3: Màn hình Photoshop Hình 1.4: Thanh menu lệnh Hình 1.5: Thanh cơng cụ vẽ Hình 1.6: Thanh tùy chọn Hình 1.7: Các palette/panel Hình 1.8: Cửa sổ ảnh Mở, tạo, đóng điều chỉnh tập tin - Mở tập tin ảnh Vào File  Open (hoặc bấm tổ hợp phím Ctrl+O) Xuất hộp thoại Open 10 Hình 9.8 Chọn cơng cụ tạo vùng chọn • Quick Selection Tool: Sử dụng cơng cụ chọn có dấu '+' phím Shift, sau chọn vùng hình mà bạn muốn xóa kéo xung quanh để mở rộng vùng chọn Nếu không may lựa chọn phải chủ thể, bạn nhấp giữ phím Alt để chọn cơng cụ có dấu '-', giúp loại bỏ vùng chọn Nhấp Shift để quay trở lại cơng cụ lựa chọn • Magic Wand: Công cụ phù hợp với vùng chọn chi tiết Sau chọn Magic Wand, click chuột vào điểm hình mà bạn muốn bỏ Nếu sau click, hình ảnh hiển thị bạn tăng mức Tolerance lên 10 15 Để thêm vùng chọn, vừa click vừa giữ phím Shift Để loại bỏ vùng chọn, giữ phím Altvà click 68 Hình 9.9 Dùng Magic Wand tạo chọn • Lasso Tool: Với cơng cụ này, chọn chủ thể bạn muốn tách Polygonal Lasso Tool Click dọc theo điểm xung quanh chủ thể tạo đường khép kín Nhớ click nhiều điểm vùng chọn xác Khi chọn xong, nhấp đúp chuột để biến chủ thể thành vùng chọn click vào điểm trơng thấy hình trịn nhỏ bên cạnh trỏ chuột - Bước 3: Nếu sử dụng Quick Selection hay Magic Wand để chọn vùng hình bạn cần click chuột phải, sau chọn Select Inverse để chọn chủ thể hươu cao cổ tiếp tục tinh chỉnh Nếu dùng Lasso Tool bạn chuyển sang bước - Bước 4: Chọn Add Layer Mask bên bảng Layers (biểu tượng hình chữ nhật có hình trịn đen giữa) Khi cịn chủ thể hình bạn Đừng lo hình chưa chuẩn ta tinh chỉnh thêm Hình 9.10 Chọn Add Layer Mask - Bước 5: Click đúp chuột vào hình mặt nạ (hình đen trắng bên cạnh hình preview) bảng Layers chọn Mask Edge Cửa sổ Refine Masks sau Chọn Show Radius tùy chỉnh thông số Radius trượt Khi rê chuột xung quanh hình, bạn thấy hình trịn với dấu cộng nhỏ bên Hãy dùng công cụ để loại bỏ chi tiết thừa hình 69 Hình 9.11 Tùy chỉnh thơng số Radius trượt - Bước 6: Bỏ chọn Show Radius để quay lại hộp thoại Refine Mask điều chỉnh thông số khác trượt đạt kết ý Để nhìn hình ảnh rõ ràng hơn, thay đổi chế độ xem cách click vào biểu tượng thumbnail hình ảnh chọn chế độ danh sách sổ xuống - Bước 7: Click OK hài lòng với hình Giờ bạn sử dụng hình ảnh để chèn vào đâu muốn Nếu cần đặt chủ thể vào hình khác, cần mở hình lên PTS kéo thả hình vào Bạn thay đổi kích thước ảnh tổ hợp phím Ctrl/Cmd + T, giữ phím Shift kéo thả Hình 9.12 Kéo thả thay đổi 70 Tách lọc voan cưới B1: Ta chọn hình cần tách voan vào Menu File ➨ Open (Crt+O) chọn ảnh cần tách backgroud để sau tách voan xong ghép vào background Hình 9.13 Chọn ảnh cần tách B2: Khi chọn ảnh dung công cụ Quick selecsiton tool để cắt đối tượng B3: Sau tạo vùng chọn ta nhấn tổ hợp phím ctrl+c chọn đến file chứa background cần ghép nhấn tổ hợp phím ctrl+v để dán đối tượng ta 71 Hình 9.14 Chọn background cần ghép Khi ghép ảnh sang background khác ảnh khơng thời điểm, khơng gian tông màu nên ta phải chỉnh lại sắc độ ảnh cách làm nhuốm màu đối tượng background hay lấy thời điểm không gian đối tượng cách sau: Ta chọn vào manu Inmage – Adjustment – Match color Match color đối tượng thơng minh màu sắc lấy nguyên tố màu đối tượng background để làm cho nguyên tố phía Sau chọn vào Match color xuất bảng sau: Hình 9.15 Hiệu chỉnh thơng số Trong bảng ta cần ý đến thẻ: 72 + Fade: Mức độ nhuốm màu đối tượng + Source: chọn đến tên ảnh ta vừa đưa sang + Layer: tên đối tượng chọn Sau thực thao tác bảng ta hình sau: Hình 9.16 Sau hiệu chỉnh thơng số Sau lấy sắc thái ảnh ta tiến hành tách voan cho đối tượng để nhìn phần nước biển phía sau voan Đầu tiên ta ẩn layer Background cho dễ nhìn sau ta chọn vào Manu Window – Channels ( kênh màu) Khi xuất kênh màu RGB, Red, Green, Blue Ta chon đến kênh màu đậm ,trong ta chọn kênh Blue, sau ta nhấn Ctrl đồng thời click chuột trái vào mặt layer kênh Blue ta tạo lên vùng chọn 73 Hình 9.17 Thay đổi Channels Ta trở bên layer Add cho layer layer mask, ta dùng cơng cụ Brush Tool xóa phần người gái cuối ta Hình 9.18 Kết Làm mịn da Bước 1: Các bạn mở ảnh cần làm mịn da Photoshop, nhấn Ctrl+O để chọn ảnh: 74 Hình 9.19 Lựa chon ảnh Bước 2: Trước tiên sử dụng công cụ Spot Healing Brush Tool để xoá mụn mặt nhân vật Các bạn nhấn phím J để chọn cơng cụ chọn cơng cụ hình dưới, sau nhớ chọn Content-Aware mục Type phía Hình 9.20 Sử dụng cơng cụ Spot Healing Brush Tool Sau chọn xong bạn nhấn di chuột lên vùng có mụn để xố: Lúc gương mặt nhân vật hết mụn, nhiên da chưa mịn: Bước 3: Sau xoá mụn xong tiếp tục bước làm mịn da 75 Các bạn nhấn Ctrl+J để nhân đổi Layer, sau chọn Filter -> Noise -> Reduce Noise Hình 9.21 Làm mịn cơng cụ Reduce Noise Bước 4: Cửa sổ tuỳ chỉnh lên bạn chọn thông số sau: Strength : để làm mờ ảnh nên tăng hết lên 10 Preserve Details : để chỉnh cho mờ ngược lại Reduce Color Noise : để chỉnh màu tùy ảnh mà chinh Sharpen Details : đổ nét ảnh Chỉnh thông số cho da mịn cách tự nhiên Hình 9.22 Kết đạt 76 Xóa nếp nhăn Bước 1: Các bạn mở PTS lên vào File > Open > Chọn Ảnh Hình 9.23 Lựa chọn ảnh Bước 2: Các bạn tạo layer đặt tên Da Bước 3: Các bạn bấm phím tắt J chọn Healing Brush Tool Hình 24 Chọn cơng cụ Và góc Pts bạn chọn all Layers 77 Bước 4: Các bạn giữ Alt Click chuột vào vùng da mịn để lấy mẫu bạn tô lên vết nhăn cần xóa bạn điều chỉnh độ to nhỏ vịng trịn cho phù hợp chi tiết nhỏ nên để nhỏ Hình 9.25 Thực thao tác xóa Bước 5: Các bạn giảm Opacity xuống 85% ảnh ảnh khác bạn điều chỉnh cho phù hợp Hình 9.26 Điều chỉnh Opacity Xóa vết tàn nhan da Bước 1: Mở ảnh muốn làm mịn da Photoshop cách nhấn tổ hợp phím Ctrl + O vào File chọn Open 78 Hình 9.27 Hình ảnh ban đầu Bước 2: Click chuột phải vào Layer Background => chọn Duplicate Layer để nhân đôi lớp Background Cách thực đơn giản bạn nhấn tổ hợp phím Ctrl + J Bước 3: Tạo vùng chọn mặt công cụ Quick Mask (phím tắt Q) cọ Brush (phím tắt B) Bước 4: Tô lên vùng da mặt công cụ Brush Tool Hình 9.28 Dùng cơng cụ Quick Mask Bước 5: Tơ xong nhấn phím Q để hiển thị vùng chọn trở lại Quick Mask Đảo ngược vùng chọn cách nhấn tổ hợp phím Ctrl + Shift + I Shift + F7 Bước 6: Nhấn tổ hợp phím Ctrl + C để copy vùng da muốn chỉnh sửa Bước 7: Nhấn Ctrl + V để paste, chỉnh sửa vùng da 79 Bước 8: Vào Filter => chọn Blur => Tiếp tục chọn Surface Blur Bước 9: Thiết lập thơng số • Giảm Opacity xuống khoảng 70% để tạo độ chân thực cho ảnh • Trường hợp có vài vùng chưa mịn ý muốn => nhấp vào biểu tượng Create New Layer thẻ Layer để tạo Layer => chọn cơng cụ Healing Brush Tool (phím tắt J) Bước 10: Nhấn Alt đồng thời click chuột để lấy mẫu xóa vùng mụn Khi thực bạn nên phóng to hình để dễ dàng quan sát chỉnh sửa nhé! Hình 9.29 Kết đạt Thay đổi màu da Thực tế có nhiều cách để chọn thay đổi màu sắc đối tượng Photoshop video hướng dẫn bạn cách thực thông dụng nhanh đạt hiệu cao để tiết kiệm thời gian Chọn phạm vi màu - Để chọn màu khác nhau, bạn tạo Layer -> kích vào Select -> chọn Color Range -> sử dụng cơng cụ Eyedropper để kích vào màu bạn muốn lấy mẫu - Để có nhiều lựa chọn xác hơn, bạn thử với công cụ fuzziness - Để thêm bớt vùng chọn, bạn sử dụng cơng cụ Eyedroppers với dấu cộng trừ bên cạnh chúng - Điều chỉnh màu 80 - Sau chọn màu vào Layer, bạn tiến hành điều chỉnh thay đổi màu sắc cho vùng chọn -> chọn New Adjustment Layer -> Hue/Saturation -> sau thực thao tác kéo thả thông số Hue/Saturation - Tinh chỉnh Layer Masks - Để loại bỏ phần không mong muốn nhỏ vùng chọn, bạn sử dụng cơng cụ Brush Layer Mask CÂU HỎI, BÀI TẬP Khắc phục ảnh ngược sáng Làm mịn da cho hình sau 81 TÀI LIỆU THAM KHẢO [1] Phạm Quang Huy, Giáo trình thực hành photoshop CC, Nhà xuất khoa học kỹ thuật, 9-2014 [2] Nguyễn Hữu Tài, Giáo trình lý thuyết đồ họa, Nhà xuất thơng tin truyền thông, 08-2003 [3] Lê Thuận, Thanh Tâm, Quang Huy, Giáo trình xử lý photoshop dành cho người tự học, Nhà xuất từ điển Bách Khoa, 06-2013 [4] Tài liệu tham khảo Internet: http://dohoavn.net 82 ... mạnh bị nghiêm cấm LỜI GIỚI THIỆU Giáo trình ? ?Đồ họa ứng dụng? ?? biên soạn dựa khung chương trình đào tạo Cao đẳng nghề Công nghệ thông tin Trường Cao đẳng Kỹ thuật Công nghê Bà Rịa – Vũng Tàu phê... QUYỀN Nhằm đáp ứng nhu cầu học tập nghiên cứu cho giảng viên sinh viên nghề Công nghệ thông tin trường Cao đẳng Kỹ thuật Công nghệ Bà Rịa – Vũng Tàu, thực biên soạn tài liệu Đồ họa ứng dụng Tài liệu... ý kiến đóng góp trình biên soạn giáo trình Bà Rịa – Vũng Tàu, ngày …… tháng …… năm Tham gia biên soạn Lê Viết Huấn MỤC LỤC GIÁO TRÌNH MƠ ĐUN Tên mơ đun: Đồ họa ứng dụng Mã mơ đun: MĐ22 Vị trí,