Giáo trình Đồ họa ứng dụng - Nghề: Công nghệ thông tin - CĐ Kỹ Thuật Công Nghệ Bà Rịa-Vũng Tàu

ỦY BAN NHÂN DÂN TỈNH BR – VT
TRƯỜNG CAO ĐẲNG NGHỀ

GIÁO TRÌNH
MÔ ĐUN ĐỒ HỌA ỨNG DỤNG
NGHỀ CÔNG NGHỆ THÔNG TIN
TRÌNH ĐỘ TRUNG CẤP VÀ CAO ĐẲNG
Ban hành kèm theo Quyết định số: 01/QĐ­CĐN, ngày 04 tháng 01 năm 2016  
của Hiệu trưởng trường Cao đẳng nghề tỉnh Bà Rịa – Vũng Tàu


Bà Rịa – Vũng Tàu, năm 2016


TUYÊN BỐ BẢN QUYỀN
Tài liệu này thuộc loại sách giáo trình nên các nguồn thông tin có thể 
được phép dùng nguyên bản hoặc trích dùng cho các mục đích về đào tạo và 
tham khảo.
Mọi mục đích khác mang tính lệch lạc hoặc sử dụng với mục đích kinh doanh 
thiếu lành mạnh sẽ bị nghiêm cấm.


LỜI GIỚI THIỆU
Giáo trình “Đồ  họa  ứng dụng” được biên soạn dành cho học sinh trung  
cấp nghề và cao đẳng nghề với mục tiêu cung cấp cho các em các kiến thức  
và kỹ  năng làm việc trên phần mềm Adobe Photoshop ­ Một phần mềm hỗ 
trợ thiết kế và xử lý ảnh chuyên nghiệp được sử dụng rộng rãi hiện nay.
Giáo trình được biên soạn một cách ngắn gọn, hướng dẫn các bước thực 
hiện một rất rõ ràng và dễ  hiểu giúp cho các em thực hành và hình thành kỹ 
năng nhanh chóng.
Nội dung giáo trình giúp HSSV sử  dụng được các công cụ, lệnh để  có 

thể thiết kế, xử lý ảnh nghệ thuật, vẽ được giao diện trang web phục vụ cho  
mô đun thiết kế web.
Trong quá trình biên soạn, chắc chắn giáo trình còn nhiều thiếu sót. Tác  
giả rất mong nhận được ý kiến đóng góp của quý thầy/cô và các em học sinh,  
sinh viên.
Bà Rịa – Vũng Tàu, ngày …… tháng …… năm 2015
Tham gia biên soạn
1. Phan Hữu Phước – Chủ biên


MỤC LỤC


MÔ ĐUN ĐỒ HỌA ỨNG DỤNG
Vị trí, tính chất, ý nghĩa và vai trò của mô đun:
Là mô đun chuyên ngành của nghề Lập trình máy tính, Công nghệ thông tin, 
Quản trị mạng.
Cung cấp cho HSSV kiến thức và kỹ năng thiết kế, xử lý ảnh nghệ  thuật, 
vẽ giao diện trang web.
Được giảng dạy sau khi học xong Tin học IC3.
Mục tiêu của mô đun:
Biết chức năng của các công cụ trong Photoshop.
Cắt, ghép, phục hồi và xử lý ảnh.
Thiết kế các banner, catalogue, brochure sản phẩm
Vẽ được giao diện trang web trên Photoshop.
Thực hiện các bài thực hành đảm bảo đúng trình tự.
Nội dung của mô đun:
TT
1
2

3

Tên các bài 
trong mô đun
Tổng quan 
Photoshop
Chọn màu và tô 
màu
Tạo và hiệu 
chỉnh vùng chọn
Kiểm tra bài 1  
3

4
5

Quản lý layer
Tạo mặt nạ và 
kênh

Thời gian

Hình thức giảng 
dạy

5

Tích hợp

10

Tích hợp

8

Tích hợp

2

Thực hành

10

Tích hợp

8

Tích hợp


Kiểm tra bài 4  

2

Thực hành

Tạo type và shape

13

Tích hợp

Kiểm tra bài 6

2

Thực hành

3

Tích hợp

7

Tích hợp

Kiểm tra bài 8, 9

5

Tích hợp

9

Hiệu chỉnh màu

6

Tích hợp

10

Phục hồi ảnh

4

5
6

7
8

11

Kỹ thuật mặt nạ 
nâng cao
Vẽ giao diện 
trang web

Tạo hiệu ứng 
nghệ thuật
Kiểm tra bài 10, 
11
Tổng cộng

3

Tích hợp

2

Tích hợp
90


BÀI 1.
TỔNG QUAN PHOTOSHOP
Giới thiệu:
Adobe Photohop là ứng dụng thiết kế và xử lý ảnh chuyên nghiệp được 
sử dụng nhiều nhất từ trước đến nay. Với Adobe Photoshop, chúng ta có thể 
vẽ bố cục trang web, tạo ra những tác phẩm ảnh nghệ thuật, …
Mục tiêu:
Trình bày được vị trí và công dụng của từng thành phần trê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 ở các chế độ khác nhau
Thoát khỏi chương trình Photoshop
Cẩn thận, an toàn, không làm mất hình ảnh nguồn.
Nội dung:
Khởi động chương trình Photoshop
Cách 1: Click đôi chuột lên biểu tượng Adobe Photoshop trên desktop.

Hình 1.1: Biểu tượng Adobe Photoshop trên desktop
Cách 2: Vào Start  Adobe Photoshop


Hình 1.2: Biểu tượng Adobe Photoshop trong 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, lưu và đóng tập tin
3.1. Mở tập tin ảnh
Vào File    Open (hoặc bấm tổ  hợp phím Ctrl+O). Xuất hiện hộp thoại  
Open

Hình 1.9: Hộp thoại Open
Chọn ổ đĩa, đường dẫn và tập tin ảnh cần mở rồi click chuột lên nút Open
3.2. Tạo tập tin mới
Vào File  New (hoặc bấm tổ hợp phím Ctrl+N). Xuấ hiện hộp thoại New


Hình 1.10: Hộp thoại New
Đặt tên cho ảnh trong hộp nhập Name

Nhập độ phân giải trong hộp nhập Resulution
Nhập kích thước và đơn vị đo tại Width và Height
Chọn chế độ màu tại Color Mode
Chọn màu nền tại Background Contents
3.3. Lưu tập tin
Vào File  Save (hoặc bấm tổ hợp phím Ctrl+S) để lưu đè tập tin cũ; File  
 Save As (hoặc bấm tổ hợp phím Shift+Ctrl+S) để lưu vào tập tin mới. 
Nếu lưu vào tập tin mới thì xuất hiện hộp thoại Save As.

Hình 1.11: Hộp thoại Save As
3.4. Đóng tập tin
Vào File    Close (hoặc bấm tổ  hợp phím Ctrl+W) để  đóng tập tin  ảnh  
hiện hành.


Vào File  Close All (hoặc bấm tổ hợp phím Alt+Ctrl+W) để đóng tất cả 
tập tin ảnh.
Nếu có sự thay đổi trên tập tin ảnh đang làm việc mà chưa được lưu thì sẽ 
xuất hiện hộp thoai nhắc nhỡ có muốn lưu lại hay không.

Hình 1.12: Hộp thoại nhắc nhỡ khi đóng tập tin mà chưa được lưu
Chọn Yes để lưu tập tin
Chọn No để đóng mà không cần lưu
Chọn Cancel để hủy lệnh đóng và quay trở lại làm việc.
Chọn chế độ xem ảnh
Bấm phím F để  chuyển lần lượt qua các chế  độ  xem  ảnh Standard Screen 
Mode, Full Screen Mode With Menu Bar, Full Screen Mode
Làm việc với các palette
Bật/tắt palette: Vào menu Window  Chọn để bật/bỏ chọn để tắt palette
Sắp xếp palette: Dùng chuột kéo rê tên palette đến vị trí mong muốn

Thu gọn palette: Click chuột lên Collapse to Icon (
click chuột lên Expand Panel (

) để  thu gọn palette, 

) để mở rộng palette.

Kết thúc chương trình
Vào File  Exit (hoặc bấm tổ  hợp phím Alt+F4). Có thể  sẽ  xuất hiện hộp  
thoại nhắc nhỡ như khi đóng tập tin ở phần 3.4.
CÂU HỎI, BÀI TẬP 
1.1. Khởi động Adobe Photoshop tạo một tập tin ảnh mới theo yêu cầu sau:


Độ phân giải: 72 pixels/inch
Kích thước: 1000 pixels x 500 pixels
Chế độ màu: RGB 8bits
Màu nền: trắng
1.2. Thực hiện đóng/mở/mở rộng/thu nhỏ/di chuyển các palette
1.3. Chọn các chế độ xem ảnh
YÊU CẦU KIỂM TRA, ĐÁNH GIÁ KẾT QUẢ HỌC TẬP
Mở Adobe Photoshop và tạo tập tin ảnh đúng yêu cầu
Xác định đúng vị trí các thành phần trên giao diện Adobe Photoshop
Chọn chế độ xem ảnh


BÀI 2.
CHỌN MÀU VÀ TÔ MÀU
Giới thiệu:
Mọi họa sĩ đều phải làm việc trên hộp màu và các loại cọ  khi sáng tác  

nghệ thuật. Chúng ta cùng tìm hiểu xem người thiết kế làm việc đó như  thế 
nào trên Adobe Photoshop.
Mục tiêu:
Trình bày được công dụng của các công cụ vẽ, tô màu, công cụ tẩy xóa.
Vẽ, tô màu cho đối tượng bằng các công cụ  Brush, Pencil, Gradient, Paint 
bucket.
Sử dụng được các công cụ tẩy xóa.
Cẩn thận chọn đúng màu nền/màu vẽ  trước khi sử  dụng các công cụ  tô, 
vẽ.
Nội dung:
1. Chọn màu vẽ và màu nền
1.1. Định nghĩa
Màu Foreground: xác định màu vẽ
Màu Background: xác định màu nền mặc định của layer


1.2. Xác định màu foreground và background

Hình 2.1: Hộp chọn màu vẽ và màu nền

Hình 2.2: Hộp thoại chọn màu (Color picker)
Tô màu đơn
2.1 Brush Tool (cọ vẽ)
Chọn cọ vẽ để vẽ với màu foreground.
Bước 1: Xác định màu foreground
Bước 2: Trên thanh công cụ vẽ, chọn Brush Tool

Hình 2.3: Vị trí công cụ Brush
Bước 3: Chọn kiểu, kích thước cọ và các tùy chọn khác trên thanh tùy chọn

Hình 2.4: Tùy chọn của Brush tool
Bước 4: Click giữ chuột trái và di chuyển chuột để vẽ
2.2. Pencil tool
Dùng bút vẽ để vẽ với màu foreground.
Bước 1: Xác định màu foreground
Bước 2: Trên thanh công cụ vẽ, chọn Pencil Tool
Bước 3: Thiết lập các tùy chọn tương tự Brush tool
Bước 4: Click giữ chuột trái và di chuyển chuột để vẽ
2.3. Paint Bucket tool
Tô nhanh với màu foreground
Bước 1: Xác đinh vùng cần tô
Bước 2: Xác định màu foreground
Bước 3: Chọn Paint Bucket Tool trên thanh công cụ vẽ. Con trỏ chuột có hình 
thùng sơn 

.

Hình 2.5: Vị trí Paint Bucket tool
Tô màu chuyển sắc
Công dụng: Tô màu chuyển sắc


Bước 1: Xác định vùng cần tô
Bước 2: Chọn Gradient Tool

Hình 2.6: Vị trí Gradient tool
Bước 3: Chọn màu 

 , kiểu tô 

 , … trên thanh tùy 

chọn.
Bước 4: Kéo rê chuột từ vị trí bắt đầu đến vị trí kết thúc để tô.
Các công cụ tẩy, xóa
4.1. Eraser
Công dụng: Xóa vùng hình ảnh
Bước 1: Chọn Eraser Tool

Hình 2.7: Vị trí Eraser tool
Bước 2: Thiết lập các giá trị trên thanh tùy chọn
Bước 3: Kéo rê chuột lên vùng hình ảnh cần xóa
4.2. Background Eraser
Công dụng: Xóa vùng hình ảnh có màu giống với Background
Bước 1: Chọn Background Eraser Tool

Hình 2.8: Vị trí Background Eraser tool
Bước 2: Thiết lập các giá trị tùy chọn trên thanh tùy chọn
Bước 3: Kéo rê chuột lên vùng hình ảnh cần xóa màu nền


4.3. Magic Eraser
Công dụng: Xóa vùng hình ảnh có màu tương đồng
Bước 1: Chọn Magic Eraser Tool

Hình 2.9: Vị trí Magic Eraser tool
Bước 2: Thiết lập các giá trị tùy chọn trên thanh tùy chọn
Bước 3: Click chuột lên vùng hình ảnh có màu cần xóa
CÂU HỎI, BÀI TẬP

2.1. Dùng các công cụ tô, vẽ đã học để vẽ nhân vật bất kỳ.
Ví dụ:

YÊU CẦU KIỂM TRA, ĐÁNH GIÁ KẾT QUẢ HỌC TẬP
Chọn màu
Sử dụng cọ, bút vẽ


BÀI 3.
TẠO VÀ HIỆU CHỈNH VÙNG CHỌN
Giới thiệu:
Đôi lúc, khi xử lý một vấn đề bất kỳ, chúng ta thường khoanh vùng giới  
hạn nội dung cần giải quyết  để  tránh  ảnh hưởng đến các khu vực khác. 
Trong Adobe Photoshop, vùng giới hạn đó được gọi là vùng chọn.
Mục tiêu:
Công dụng của vùng chọn
Tạo vùng chọn bằng cách sử dụng nhiều công cụ khác nhau
Hiệu chỉnh, lưu và tải, sao chép, xóa vùng chọn
Cẩn thận các thiết lập trên thanh tùy chọn trước khi tạo vùng chọn
Nội dung:
1. Định nghĩa
Vùng chọn là vùng giới hạn bị   ảnh hưởng bởi các thao tác tô, vẽ, chỉnh sửa  
ảnh.
2. Tạo vùng chọn với nhóm công cụ tạo Marquee (M)

Hình 3.1: Vị trí nhóm Marquee tool
Rectangular Marquee

: tạo vùng chọn hình chữ  nhật (hoặc hình 

vuông bằng cách nhấn giữ thêm phím Shift trên bàn phím) trên ảnh.
Elliptical Marquee

:   tạo   vùng   chọn   hình   elip   hoặc   hình   tròn 

bằng cách nhấn giữ thêm phím Shift trên bàn phím.


Single Row Marquee

: tạo vùng chọn hết chiều rộng của  ảnh, cao  

1 pixel tại vị trí con trỏ chuột
Single Column Marquee

: tạo vùng chọn hết chiều cao của ảnh, rộng 

1 pixel tại vị trí con trỏ chuột
Các bước thực hiện:
Bước 1: Chọn công cụ phù hợp với vùng chọn cần tạo
Bước 2: Thiết lập các tùy chọn trên thanh tùy chọn

Hình 3.2. Các tùy chọn của nhóm Marquee
Tạo vùng chọn mới (hoặc giữ phím Shift)
Thêm vùng chọn (hoặc giữ phím Alt)
Tạo vùng chọn mới từ việc loại bỏ phần giao của 2 vùng chọn
Tạo vùng chọn mới từ phần giao nhau của 2 vùng chọn
Feather: tạo độ loan mờ dần cho vùng chọn
Bước 3: Tạo vùng chọn:
Với các công cụ  Rectangular Marquee và Elliptical Marquee: kéo rê chuột 

để tạo vùng chọn
Với  các công cụ  Single Row Marquee và Single Column Marquee: click 
chuột tại vị trí cần chọn

 
Hình 3.3. Tô màu lên vùng chọn không có Feather và có Feather=5px
Tạo vùng chọn với nhóm công cụ Lasso (L)
Nhóm công cụ Lasso tạo vùng chọn theo đường di chuyển của chuột.


Hình 3.4. Vị trí nhóm công cụ Lasso
3.1. Lasso ( )
Công dụng: Hay còn gọi là công cụ chọn tự do. Sử dụng công cụ này để chọn 
những vùng ảnh không có hình dạng hình học và không cần độ chính xác cao.
Bước 1: Chọn Lasso Tool.
Bước 2: Thiết lập các tùy chọn trên thanh tùy chọn.

Hình 3.5. Các tùy chọn của Lasso
Bước 3: Click giữ  chuột tại vị  trí bắt đầu, di chuyển chuột bao xung quan  
vùng chọn, khi quay trở lại điểm bắt đầu thì thả chuột.

Hình 3.6. Vùng chọn được tạo bằng Lasso
3.2. Polygonal Lasso (

)

Công dụng: Tạo vùng chọn hình đa giác
Bước 1: Chọn Polygonal Lasso
Bước 2: Thiết lập các tùy chọn trên thanh tùy chọn (tương tự Lasso)
Bước 3: Lần lượt click chuột tại các điểm để tạo vùng chọn

Bình 3.5. Vùng chọn được tạo bằng Polygonal Lasso
3.3. Magnetic Lasso (

)

Công dụng: Tự động tạo vùng chọn dựa trên độ khác biệt màu theo đường đi 
của chuột.
Bước 1: Chọn Magnetic Lasso
Bước 2: Thiết lập các tùy chọn trên thanh tùy chọn (tương tự Lasso)
Bước 3: Click chuột tại điểm đầu, di chuyển chuột chậm để xác định đường 
biên vùng chọn, khi quay trở lại điểm đầu thì click chuột để kết thúc tạo vùng 
chọn.

Hình 3.6. Vùng chọn được tạo bằng Magnetic Lasso
Tạo vùng chọn với công cụ Magic Wand
Công dụng: tạo vùng chọn dựa trên màu tương đồng tại vị trí xác định

Hình 3.7. Vị trí của Magic Wand
Bước 1: Chọn Magic Wand (

)

Bước 2: Thiết lập các tùy chọn

Hình 3.8. Các tùy chọn của Magic Wand
Bước 3: Click chuột tại điểm có màu thuộc vùng cần chọn

Hình 3.9. Magic Wand khi không chọn và có chọn Contiguous
Tạo vùng chọn với lệnh Color Ranger
Vào menu Select  Color Range. Xuất hiện hộp thoại.

Hình 3.10. Hộp thoại Color Range
: Tùy chọn màu: 
Fuzziness: sai số màu
: chọn lại
: thêm màu chọn
: bớt màu chọn
: chế đọ xem trước kết quả chọn
Hiệu chỉnh vùng chọn với menu Select
All (Ctrl+A): chọn tất cả


Deselect (Ctrl+D): bỏ chọn
Inverse: chọn vùng ngược lại
Modify  Border: tạo vùng chọn từ đường biên của vùng chọn hiện tại

Hình 3.11. Hộp thoại tạo vùng chọn đường biên
Modify  Smooth: làm mềm đường biên vùng chọn
Modify  Expand: mở rộng vùng chọn
Modify  Contract: thu hẹp vùng chọn
Modify  Feather: tạo độ loan mờ cho vùng chọn
Lưu và tải vùng chọn
Lưu vùng chọn
Vào Select  Save Selection. Xuất hiện hộp thoại.

Hình 3.12. Hộp thoại Save Selection
Đặt tên cho vùng chọn cần lưu

Tải vùng chọn
Vào menu Select  Load Selection. Xuất hiện hộp thoại.