Giáo trình Thiết kế đồ họa (Ngành: Thiết kế trang web) - CĐ Kinh tế Kỹ thuật TP.HCM

Sau khi học xong học phần này học sinh sẽ có khả năng: Trình bày hình vẽ, màu sắc trong hội họa. Ứng dụng hình vẽ, màu sắc, chất liệu trong thực tế đời sống. Trình bày nguyên lý thị giác. Trang bị cho học sinh các kiến thức cơ bản về cách sử dụng các công cụ minh họa và xử lý ảnh trong thiết kế đồ họa bằng chương trình Adobe Photoshop. Trang bị kiến thức về các nguyên tắc thiết kế để tạo ra những hình ảnh đồ họa và ảnh kỹ thuật số ấn tượng công cụ vẽ và xử lý ảnh kỹ thuật số trong thiết kế đồ họa.

THÀNH PHỐ HỒ CHÍ MINH THÁNG 08 NĂM 2020

ỦY BAN NHÂN DÂN THÀNH PHỐ HỒ CHÍ MINH

TRƯỜNG CAO ĐẲNG KINH TẾ - KỸ THUẬT

THÀNH PHỐ HỒ CHÍ MINH

 

GIÁO TRÌNH THIẾT KẾ ĐỒ HỌA NGÀNH: THIẾT KẾ TRANG WEB

TRÌNH ĐỘ: CAO ĐẲNG

ỦY BAN NHÂN DÂN THÀNH PHỐ HỒ CHÍ MINH

TRƯỜNG CAO ĐẲNG KINH TẾ KỸ THUẬT

THÀNH PHỐ HỒ CHÍ MINH

 

GIÁO TRÌNH THIẾT KẾ ĐỒ HỌA NGÀNH THIẾT KẾ TRANG WEBSITE

TRÌNH ĐỘ CAO ĐẲNG

THÔNG TIN CHỦ NHIỆM ĐÈ TÀI

Họ tên: NGUYỄN THỊ THANH GIANG Học vị: THẠC KỸ KHOA HỌC MÁY TÍNH Đơn vị: KHOA CÔNG NGHỆ THÔNG TIN Email: nguyenthithanhgiang@hotec.edu.vn

TRƯỞNG KHOA TỔ TRƯỞNG CHỦ NHIỆM

BỘ MÔN ĐỀ TÀI

HIỆU TRƯỞNG DUYỆT

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

2

GIỚI THIỆU

Giáo trình Thiết kế đồ họa dùng cho học sinh cao đẳng ngành Thiết kế trang web nhằm đáp ứng yêu cầu học tập, giảng dạy, tham khảo của sinh viên và giáo viên trường Cao đẳng Kinh Tế Kỹ thuật TPHCM Giáo trình được biên soạn

có sự lựa chọn trên những kiến thức cơ bản hiện đại, có tham khảo, chỉnh lý và

bổ sung cho phù hợp với đối tượng và nhiệm vụ đào tạo của nhà trường và của ngành Thiết kế trang web trong giai đoạn hiện nay

Để phục vụ cho ngành học, sách được trình bày theo chương trình chi tiết học phần môn Thiết kế đồ họa trong chương trình đào tạo cao đẳng ngành Thiết

kế trang web đã được ban hành của nhà trường

Trong quá trình biên soạn giáo trình không tránh khỏi những hạn chế, rất mong nhận được ý kiến đóng góp của các đồng nghiệp, nhà khoa học, doanh nghiệp để giáo trình ngày càng hoàn thiện hơn

Biên soạn

Nguyễn Thị Thanh Giang

3

MỤC LỤC

TUYÊN BỐ BẢN QUYỀN 1

GIỚI THIỆU 2

CHƯƠNG 1 TỔNG QUAN VÀ NHỮNG THAO TÁC CƠ BẢN 6

1.1 Giới thiệu 24

1.2 Các khái niệm cơ bản trong Photoshop 24

1.3 Khởi động chương trình 25

1.4 Giao diện Photoshop 26

1.5 Các thao tác điều khiển giao diện 29

1.6 Thao tác với File 31

1.7 Chọn màu hiện hành 33

1.8 Một số thao tác với hình ảnh 35

CHƯƠNG 2 TẠO VÀ HIỆU CHỈNH VÙNG CHỌN 39

2.1 Tạo vùng chọn 39

2.2 Hiệu chỉnh vùng chọn 53

2.3 Thao tác trên vùng chọn 59

2.4 Trích hình ảnh 62

2.5 Xén hình ảnh dùng Crop Tool 64

2.6 Các lệnh về khung làm việc 68

2.7 Biến ảnh bằng lệnh Transform 70

2.8 Biến ảnh bằng lệnh Liquify 74

CHƯƠNG 3 LỚP VÀ CÁC CHẾ ĐỘ HÒA TRỘN 80

3.1 Tìm hiểu về Lớp 80

3.2 Thao tác với lớp 82

3.3 Một số tính năng đặc biệt 92

3.4 Các dạng lớp khác 95

3.5 Hiệu ứng lớp 96

3.6 Copy và Paste hiệu ứng 107

3.7 Các chế độ hòa trộn 107

4

CHƯƠNG 4 BIÊN TẬP ẢNH 119

4.1 Tô đầy bằng lệnh Fill 119

4.2 Vẽ bằng lệnh Stroke 120

4.3 Lệnh tô màu Foreground 121

4.4 Lệnh tô màu Background 121

4.5 Sử dụng các công cụ tô vẽ 122

4.6 Các vấn đề khác 145

CHƯƠNG 5 TẠO ĐỐI TƯỢNG ĐỒ HỌA 153

5.1 Nhóm công cụ Pen 153

5.2 Vẽ bằng nhóm công cụ Shape 158

5.3 Nhóm công cụ Path Selection 162

5.4 Sử dụng Palette Path 166

5.5 Tạo các hình dạng tương tác 169

5.6 Nhóm các công cụ nhập văn bản 169

CHƯƠNG 6 BIÊN TẬP THEO KÊNH 179

6.1 Làm việc với kênh 179

6.2 Thao tác với kênh màu vết 185

6.3 Thao tác với kênh Alpha 189

CHƯƠNG 7 HIỆU CHỈNH MÀU 193

7.1 Các mô hình màu cơ bản 193

7.2 Các chế độ màu trong Photoshop 197

7.3 Gam màu 200

7.4 Chuyển đổi chế độ màu 201

7.5 Nhóm cân chỉnh màu tự động 202

7.6 Nhóm cân chỉnh sáng tối 204

7.7 Nhóm cân chỉnh trắng đen 212

7.8 Nhóm cân chỉnh cân bằng 213

7.9 Nhóm cân chỉnh thay thế 218

7.10 Nhóm cân chỉnh nhuộm màu 221

CHƯƠNG 8 Sử dụng bộ lọc 229

5

8.1 Nhóm bộ lọc Artistic 230

8.2 Nhóm Blur 233

8.3 Nhóm bộ lọc Brush Strokes 235

8.4 Nhóm bộ lọc Distort 237

8.5 Nhóm bộ lọc Noise 241

8.6 Nhóm bộ lọc Pixelate 243

8.7 Nhóm Render 246

8.8 Nhóm bộ lọc Sharpen 249

8.9 Nhóm bộ lọc Sketch 250

8.10 Nhóm bộ lọc Stylize 253

8.11 Nhóm bộ lọc Texture 259

8.12 Nhóm bộ lọc Video 261

8.13 Nhóm bộ lọc Other 261

CHƯƠNG 9 Các dạng thức lưu tập tin và in ấn 266

9.1 Chuẩn hóa màn hình 266

9.2 Chọn không gian màu RGB 271

9.3 Tái tạo màu 272

9.4 Các dạng thức lưu tập tin 275

9.5 Xuất ảnh 278

9.6 In ấn 279

CÁC THUẬT NGỮ CHUYÊN MÔN, TỪ VIẾT TẮT 285

TÀI LIỆU THAM KHẢO 286

6

CHƯƠNG TRÌNH MÔN HỌC

Tên môn học: THIẾT KẾ ĐỒ HỌA

Mã môn học:

Thời gian thực hiện môn học: 75 giờ; (Lý thuyết: 45 giờ; Thực hành, thảo luận,

bài tập: 28 giờ; Kiểm tra 2 giờ)

Đơn vị quản lý môn học: Khoa Công nghệ thông tin

I Vị trí, tính chất của môn học:

- Vị trí: Môn học được bố trí sau khi sinh viên học xong các môn học chung và

môn kiến thức kỹ thuật cơ sở và trước các môn học, mô đun đào tạo nghề chuyên sâu khác

- Tính chất: Là môn học chuyên môn nghề bắt buộc

II Mục tiêu môn học:

Sau khi học xong học phần này học sinh sẽ có khả năng:

+Về kiến thức:

- Trình bày hình vẽ, màu sắc trong hội họa

- Ứng dụng hình vẽ, màu sắc, chất liệu trong thực tế đời sống

- Trình bày nguyên lý thị giác

- Trang bị cho học sinh các kiến thức cơ bản về cách sử dụng các công cụ minh họa và xử lý ảnh trong thiết kế đồ họa bằng chương trình Adobe Photoshop

- Trang bị kiến thức về các nguyên tắc thiết kế để tạo ra những hình ảnh đồ họa

và ảnh kỹ thuật số ấn tượng công cụ vẽ và xử lý ảnh kỹ thuật số trong thiết kế

đồ họa

- Vận dụng các kiến thức về yếu tố thẩm mỹ để thiết kế các sản phẩm quảng cáo như Poster, …

+ Về kỹ năng:

- Trình bày các kiến thức cơ bản về chụp ảnh kỹ thuật số

- Trình bày các nguyên tắc thiết kế trong đồ họa

- Sử dụng cấc công cụ vẽ và xử lý ảnh kỹ thuật số trong thiết kế đồ họa

- Vận dụng các kiến thức về yếu tố thẩm mỹ và sử dụng các phần mềm để thiết

kế các sản phẩm quảng cáo như Poster, …

+ Về năng lực tự chủ và trách nhiệm:

- Làm việc một cách tỉ mỉ, cẩn thận

- Rèn luyện khả năng tự học, tư duy sáng tạo

7

- Tinh thần cởi mở, hợp tác làm việc theo nhóm

III Nội dung môn học:

1 Nội dung tổng quát và phân bổ thời gian:

Thực hành

Kiểm tra

1.3.1.Bảy màu quang phổ

1.3.2.Sắc độ tự thân của màu

Kiểm tra

2.1.1.Tâm lí thị giác và không gian ước lệ

2.1.2.Chín cách tạo không gian trên diện

phẳng

2.2 Hình khối

2.2.1.Đối xứng trong không gian 2D

2.2.2.Design chữ đối xứng

2.3 Các trường phái hội họa

2.3.1.Thị giác luôn cảm thụ nền lớn hơn

hình

2.3.2.Các quan hệ hình và nền

2.4 Những hình thức thể hiện hình vẽ

2.4.1.Cái nhìn ban đầu

2.4.2.Lực hút chính tâm với thị giác trên

3.1.1.Các thao tác cơ bản

Kiểm tra

3.1.2.Sử dụng công cụ tạo vùng chọn Ellipses,

Rectangular

3.2 Chuyển đổi các chế độ màu

3.2.1 Tô màu cho đối tượng

3.2.2.Tạo màu chuyển sắc

3.3 Thao tác trên layer và layer

3.3.1 Tạo mặt nạ lớp (Layer Mask) trên Layer

một đối tượng là bông hoa hồng

3.3.2 Tạo mặt nạ lớp (Layer Mask) trên Layer

một đối tượng là bông hoa sen

3.3.3 Tạo mặt nạ lớp (Layer Mask) trên Layer

là một đối tượng ruộng nước

- Trình bày hình vẽ, màu sắc trong hội họa

- Ứng dụng hình vẽ, màu sắc, chất liệu trong thực tế đời sống

- Vẽ tay một số hình ảnh Bitmap

10

1.1 Các hệ màu Thời gian: 04 giờ

1.1.1.Khái niệm nét

1.1.2 Các loại đường nét

1.2 Màu tương phản, màu tương đồng Thời gian: 04 giờ

1.2.1 Các cặp tương phản thao tác được trong design

1.2.2 Các loại tương phản

1.2.3 Cảm thụ tương đồng

1.2.4 Ứng dụng

1.3 Sắc độ, hòa sắc Thời gian: 04 giờ

1.3.1.Bảy màu quang phổ

1.3.2.Sắc độ tự thân của màu

1.3.3 Màu tương phản bổ túc

1.4 Màu nền, màu nhấn, màu chủ đạo Thời gian: 04

giờ

1.4.1.Các loại cân bằng

1.4.2.Cân bằng điều chỉnh lực hút và sức căng thị giác

1.5 MÀU SẮC TRONG THIẾT KẾ ỨNG DỤNG Thời

gian: 04 giờ

1.5.1.Nguyên tắc

1.5.2 Phân tích các thiết kế thực tế

1.5.3 Sử dụng các công cụ vẽ trong CorelDraw

CHƯƠNG 2: BỐ CỤC Thời gian: 25 giờ

* Mục tiêu:

- Thực hiện vẽ, thiết kế các hình ảnh theo các loại bố cục chuẩn

- Vận dụng các kiến thức về yếu tố thẩm mỹ và sử dụng phần mềm Photoshop

để thiết kế các sản phẩm theo các loại bố cục

11

2.1 BỐ CỤC Thời gian: 05 giờ

2.1.1.Tâm lí thị giác và không gian ước lệ

2.1.2.Chín cách tạo không gian trên diện phẳng

2.2.1.Đối xứng trong không gian 2D

2.2.2.Design chữ đối xứng

2.3 Các trường phái hội họa Thời gian: 05 giờ

2.3.1.Thị giác luôn cảm thụ nền lớn hơn hình

2.3.2.Các quan hệ hình và nền

2.4 Những hình thức thể hiện hình vẽ Thời gian: 10 giờ

2.4.1.Cái nhìn ban đầu

2.4.2.Lực hút chính tâm với thị giác trên giao diện phẳng

2.4.3.Những vùng có lực hút thị giác mạnh sau vùng chính tâm

2.4.4.Sức căng thị giác

2.4.5.Một số hình ảnh design tạo ra sức căng thị giác

CHƯƠNG 3: PHOTOSHOP Thời gian: 30 giờ

* Mục tiêu:

- Liệt kê một số khái niệm cơ bản về độ phân giải, ảnh bitmap, ảnh Vectơ

- Sử dụng các công cụ chọn để xử lý đối tượng hình ảnh

- Thực hiện tạo vùng chọn cho đối tương hình ảnh với công cụ Ellipses, Rectangular

- Trình bày một số khái niệm cơ bản về lớp (Layer)

- Liệt kê các chế độ màu được sử dụng trong phần mềm Photoshop CS6 và cách chuyển đổi các chế độ màu

- Trình bày các chế độ màu để tô màu cho đối tượng hình ảnh và trong việc in ấn

- Mô tả cách hiệu chỉnh đối tượngbằng các công cụ Brush, Gradient trên đối tượng

- Liệt kê các công cụ chọn để xử lý đối tượng hình ảnh

- Liệt kê một số chức năng của các bộ lọc có sẵn và cách sử dụng các bộ lọc có sẵn

để tạo cho hình ảnh sinh động hơn

3.1 Tạo vùng chọn và đường Path Thời gian: 05 giờ

3.1.1.Các thao tác cơ bản

12

3.1.2.Sử dụng công cụ tạo vùng chọn Ellipses, Rectangular

3.2 Chuyển đổi các chế độ màu Thời gian: 05 giờ

3.2.1 Tô màu cho đối tượng

3.2.2.Tạo màu chuyển sắc

3.3 Thao tác trên layer và layer Thời gian: 05 giờ

3.3.1 Tạo mặt nạ lớp (Layer Mask) trên Layer một đối tượng là bông hoa hồng

3.3.2 Tạo mặt nạ lớp (Layer Mask) trên Layer một đối tượng là bông hoa sen

3.3.3 Tạo mặt nạ lớp (Layer Mask) trên Layer là một đối tượng ruộng nước

3.4 Sử dụng các công cụ vẽ Thời gian: 05 giờ

3.4.1 Sử dụng công cụ Brush vẽ hình ảnh

3.4.2 Sử dụng công cụ Gradient tô màu cho hình ảnh

3.5 SỬ DỤNG MỘT SỐ BỘ LỌC THỜI GIAN: 10 GIỜ

3.5.1 Sử dụng bộ lọc Radial Blur, Noise

3.5.2 Sử dụng bộ lọc Render, Distort

IV Điều kiện thực hiện môn học:

1 Phòng học chuyên môn hóa/nhà xưởng: Phấn, bảng đen

2 Trang thiết bị máy móc: Máy chiếu Projector, máy tính

3 Học liệu, dụng cụ, nguyên vật liệu:

+ Các Slide bài giảng

+ Phần mềm cài đặt: Adobe Photoshop

+ Bài tập thực hành Thiết kế đồ họa

+ Giáo trình Thiết kế đồ họa

4 Các điều kiện khác:

+ Phòng học lý thuyết đủ điều kiện để thực hiện môn học

V Nội dung và phương pháp, đánh giá:

1 Nội dung:

+Về kiến thức:

- Trình bày hình vẽ, màu sắc trong hội họa

- Ứng dụng hình vẽ, màu sắc, chất liệu trong thực tế đời sống

- Trình bày nguyên lý thị giác

13

- Trang bị cho học sinh các kiến thức cơ bản về cách sử dụng các công cụ minh họa và xử lý ảnh trong thiết kế đồ họa bằng chương trình Adobe Photoshop

- Trang bị kiến thức về các nguyên tắc thiết kế để tạo ra những hình ảnh đồ họa

ấn tượng bằng công cụ vẽ trong thiết kế đồ họa

- Vận dụng các kiến thức về yếu tố thẩm mỹ để thiết kế các sản phẩm quảng cáo như Poster, …

+ Về kỹ năng:

- Trình bày các kiến thức cơ bản về chụp ảnh kỹ thuật số

- Trình bày các nguyên tắc thiết kế trong đồ họa

- Sử dụng cấc công cụ vẽ và xử lý ảnh kỹ thuật số trong thiết kế đồ họa

- Vận dụng các kiến thức về yếu tố thẩm mỹ và sử dụng các phần mềm để thiết

kế các sản phẩm quảng cáo như Poster, …

+ Về năng lực tự chủ và trách nhiệm:

- Làm việc một cách tỉ mỉ, cẩn thận

- Rèn luyện khả năng tự học, tư duy sáng tạo

- Tinh thần cởi mở, hợp tác làm việc theo nhóm

2 Phương pháp:

03 Thi kết thúc môn học Thực hành trên máy tính

VI Hướng dẫn thực hiện môn học:

1 Phạm vi áp dụng môn học:

- Chương trình môn học được sử dụng để giảng dạy cho trình độ Cao đẳng nghề

- Giáo viên trước khi giảng dạy cần phải căn cứ vào nội dung của từng bài học chuẩn bị đầy đủ các điều kiện thực hiện bài học để đảm bảo chất lượng giảng dạy

2 Hướng dẫn về phương pháp giảng dạy, học tập môn học:

- Đối với giáo viên, giảng viên: Sử dụng phương pháp thuyết trình, phát vấn, làm mẫu,

- Đối với người học: Thảo luận nhóm, thực hành trên máy

3 Những trọng tâm cần chú ý:

- Sử dụng một số bố cục cân đối, đối xứng,

14

- Sử dụng một số hệ màu trong việc tô vẽ cho đối tượng

- Sử dụng một số công cụ của Adobe Photoshop thiết kế các đối tượng

4 Tài liệu tham khảo:

[I] Nguyễn Hồng Hưng – Nguyên lí Design thị giác – NXB ĐHQG TP.HCM –

15

CHƯƠNG 1

MÀU SẮC

* Mục tiêu:

- Trình bày hình vẽ, màu sắc trong hội họa

- Ứng dụng hình vẽ, màu sắc, chất liệu trong thực tế đời sống

- Vẽ tay một số hình ảnh Bitmap

* Nội dung:

1.1.1 Khái niệm màu:

- Màu sắc là con đẻ của ánh sáng Màu sắc là ánh sáng

- Màu sắc mà chúng ta phân biệt từ ánh sáng là những cảm giác

+ Sự phản chiếu của ánh sáng trên những vật thể màu sắc ánh sáng

+ Màu của vật thể mà ta cảm nhận được là sự cộng hưởng của màu ánh sáng với màu của bản thân vật thể đó, màu của các sự vật lân cận tác động vào, màu của bầu khí quyển đang bao bọc chung quanh đó nữa

- Theo quang học: Khi luồng áng sáng trắng đi qua lăng kính mặt trời thì tách ra

7 sắc gồm: Vàng, cam, đỏ, lục, lam, chàm, tím

- Trong hội hoạ thì màu là những chất liệu cụ thể do những sắc tố được chiết ra

từ khoáng chất, hoá chất, thảo mộc > màu sắc tố

1.1.2 Các hệ màu:

• Ba màu cơ bản là màu: vàng chanh, đỏ và xanh lam (xanh da trời)

• Về mặt lý thuyết cơ bản về màu sắc Chúng ta gọi chúng là ba màu gốc, màu căn bản vì từ ba màu này mà chúng ta pha ra các màu khác, và không có màu nào pha

ra được nó

16

1.2 Màu tương phản, màu tương đồng:

1.2.1 Các cặp tương phản thao tác được trong design

1.2.1.1.Màu sắc tương phảm

Đây là loại tương phản thường gặp nhất trong thiết kế Tuy nhiên, khá khó khăn để làm chủ kỹ thuật màu sắc tương phản này Nếu bạn chọn kết hợp màu sắc sai, thiết kế của bạn sẽ rất "khó coi" Điều quan trọng ở đây là việc lựa chọn màu sắc bổ sung (Adobe Kuler có thể giúp bạn với điều đó) và đảm bảo rằng họ sẽ không làm cho người xem cảm thấy khó chịu

1.2.1.2.Kích thước tương phản:

Kích thước tương phản là một trong những loại tương phản dễ hiểu và dễ thực hiện nhất Khi bạn muốn tập trung sự chú ý vào một điểm nhấn định, chỉ cần tăng kích

cỡ của chúng để làm chúng thật nổi bật (có thể là văn bản, hình ảnh…)

Chẳng hạn, có một cách khá mới lạ về độ tương phản là để font chữ to hẳn hoặc

bé hẳn Hình ảnh chữ to quá khổ có thể rất thu hút và đó là một cách nổi bật để lôi kéo người dùng tiếp tục xem trang web hoặc bản thiết kế của bạn Mặc dù font chữ nhỏ hay

to đều có hiệu quả như nhau, nhưng việc sử dụng chữ cái nhỏ sẽ khó hơn chữ cái lớn trong thiết kế đồ họa

1.2.1.3 Hình ảnh tương phản: Sử dụng hình dạng đối lập nhau để tạo

sự tương phản

17

1.2.1.4 Vị trí tương phản:

Đây là một cách tốt để thu hút sự chú ý của người khác vào ấn phẩm thiết

kế của bạn Hơn nữa, nó còn giúp cho việc tổ chức các yếu tố trên một trang tốt hơn,

để làm cho hệ thống cấp bậc thú vị và thuận tiện hơn

1.2.2 Các loại tương phản

* Màu tương phản: Màu đối kháng nhau, khi đứng cạnh nhau màu này làm nổi

bật màu kia hay ngược lại

Màu tương tự là những màu nằm cạnh nhau trong phổ màu Trong tự nhiên bạn có thể

dễ dàng thấy những thứ có kết hợp màu theo kiểu này, như trên 1 cái cây có lá đậm, lá nhạt, lá non, lá già… nhưng đều mang màu sắc tương cận nhau Kiểu kết hợp này sẽ tạo cảm giác dễ chịu cho mắt khi nhìn vào

* Đặc điểm

Một bất lợi đó là bạn phải chọn màu sao cho chúng có mức độ tương phản nhất định với nhau Lời khuyên đặt ra, bạn nên chọn 1 màu làm chủ đạo trước đã, chọn 1 màu nữa làm màu phụ và màu thứ 3 (cùng với đen, trắng, xám) chỉ như một chất phụ gia thêm vào thôi

18

1.2.4 Ứng dụng

1.3 Sắc độ, hòa sắc

1.3.1.Bảy màu quang phổ

Là một dải màu liên tục, không ngắt quãng, bắt đầu từ màu đỏ

19

1.3.2 Sắc độ tự thân của màu:

Mỗi màu sắc có độ tươi, độ đậm, sáng khác nhau Cùng một bậc màu (ví dụ

màu bậc 1,2,…) nhưng khi nhìn vào sẽ có màu nổi bật nhất Đó, chính là sắc độ tự thân của màu

Ví dụ: cùng là màu bậc 1 nhưng màu đỏ và xanh dương thu hút thị giác mạnh hơn màu vàng

ấn tượng cho người xem

* Ưu điểm

Cách phối màu bổ túc xen kẽ tương đối đơn giản và an toàn nhưng vô cùng hiệu quả Để thu hút sự chú ý và gây ấn tượng đến người dùng ngay từ cái nhìn đầu tiên thì phương thức phối màu bổ túc này sẽ là sự lựa chọn hoàn hảo cho thiết kế bao bì giấy, hộp giấy của bạn

* Các cặp màu tương phản, bổ túc được dùng chung với nhau nhằm tăng thêm tính nổi bật cho cặp màu, hoặc màu này hỗ trợ và làm nền cho màu kia

20

1.4 Màu nền, màu nhấn, màu chủ đạo

1.4.1.Các loại cân bằng

1.4.2.Cân bằng điều chỉnh lực hút và sức căng thị giác

1.5 MÀU SẮC TRONG THIẾT KẾ ỨNG DỤNG

- Thực hiện vẽ, thiết kế các hình ảnh theo các loại bố cục chuẩn

- Vận dụng các kiến thức về yếu tố thẩm mỹ và sử dụng phần mềm Photoshop

để thiết kế các sản phẩm theo các loại bố cục

- Đường nét là sự tiếp nối giữa hai điểm

- Nét vẽ là phương tiện để diễn tả cảm xúc của người và hình là sự phối hợp diễn đạt của nhiều nét vẽ khác nhau, mỗi nét vẽ thể hiện, gây ra những cảm xúc khác nhau

Có 5 loại đường nét:

+ Đường thẳng nằm ngang: Gây cảm giác tĩnh lặng, trải rộng ra, mênh mang

+ Đường thẳng thẳng đứng: Tạo cảm giác tĩnh lặng và uy nghi, sợ hãi, vững chãi + Đường xiên: Gây cảm giác nhẹ, mạnh, rối loạn (hỗn loạn) chuyển động

+ Đường gãy: Sự chuyển động bất ngờ, gây sự đột biến, chuyển động mạnh

+ Đường cong: Gây cảm giác chuyển động có nhịp điệu, ghê rợn, ma quái

+ Hình thể gắn liền với tả khối

Hình và nền trong không gian là sự tương quan và diện tích, còn trong design thì cần phải có sự liên kết giữa hình và nền (âm bản – dương bản) > Bố trí sao cho hình của âm bản bổ sung cho hình của dương bản Nghệ thuật là vẽ như thật chứ không phải giống thật

2.1.1.3 Mảng (Masses)

Khối lượng (Mass), thể tích (Volume)

- Khối là một khoảng không gian bị chiếm bởi một vật thể nào đó

- Mảng là một diện tích mà hình của nó không rõ ràng (là diện tích của một khối nào đó mà chịu ảnh hưởng của ánh sáng cực mạnh, làm mất đi khối mà chỉ còn mảng sáng và tối của khối đó, mảng có khi là hình kỷ hà, có khi là những hình không nhất định)

> Mảng làm đơn giản hình khối gây ra hiệu quả cảm xúc nào đó…trong đó nếu màu nhiều quá > màu phá mảng

2.1.1.4 Không gian (Space)

Là một khoảng không bị chiếm bởi một vật thể nào đó

Không gian trong tác phẩm gắn liền với không gian của tác giả, tâm trạng của tác giả

- Không gian tâm lý và không gian vật lý

22

+ Phối cảnh không gian

Phối cảnh thuận: Cách nhìn vật lý (Góc nhìn, tầm nhìn, khoảng cách)

Phối cảnh nghịch: Có 2 tầm nhìn (không gian ảo)

Phối cảnh ước lệ: Trong tranh thuỷ mặc

2.1.1.5 Thời gian và sự chuyển động (Time and motion)

Thời gian và sự chuyển động được nhiếp ảnh giữ lại (giữ lại một khoảnh khắc điển hình, nhất định của khoảng thời gian và sự chuyển động nhất định) Áp dụng nghệ thuật điện ảnh 24 hình/1s

Trong ngành nghệ thuật có nghệ thuật chuyển động (Op.Arts) Khi nghiên cứu design ta không tách rời khái niệm thời gian và không gian

2.1.1.6 Ánh sáng (Light)

Ánh sáng thiên nhiên (Natural light)

Ánh sáng nhân tạo (Artificial light)

Ánh sáng nhìn thấy được (seeing light)

Ánh sáng ẩn tàng (implicit light)

+ Ảo giác về ánh sáng

+ Sự toả sáng của màu sắc

Ánh sáng như là phương tiện diễn tả nghệ thuật (light as a medium)

2.1.1.7 Màu sắc (Color)

Nghiên cứu tại bài lý thuyết về màu sắc

2.1.1.8 Chất liệu và mẫu vẽ (Texture and Pattern)

Các yếu tố hình thức và nội dung

+ Ý tưởng (nội dung)

+ Hình thức: Hình ảnh, màu sắc, đường nét, chất liệu, kích thước, kỹ thuật thể hiện, phong cách diễn tả, phong cách Chất chủ đạo trong thời trang, các nhóm chất liệu, chính phụ, điểm nhấn >Cảm giác về chất

2.1.2.Chín cách tạo không gian trên diện phẳng:

1 Lựa chọn màu sắc không gian sống

Diễn tả các thành tố (đường nét, hình dạng, texture, chuyển động…) một cách tuần

tự hoặc có mức độ lắp lại nhất định Như vậy, có thể chia ra thành 2 thể loại: Pattern (sao chép) và Rhythm (nhịp điệu)

2.2.1.3.Điểm nhấn/ Điểm trội (Focus/Emphasis/Dominance)

Bao gồm các trường hợp:

 Các điểm căn bản (4 điểm): mà ở đó hoặc liền kề nó có sự cuốn hút mạnh mẽ

nhất Chúng ta vẫn quen thuộc với ten gọi nguyên tắc 1/3 (Rule of Thirds) Thử

tưởng tượng chia bức hình thành 9 phần với 4 đường kẻ ngang cách đều nhau, giao điểm của 4 đường này là điểm trội

2.2.2.Design chữ đối xứng

2.3 Các trường phái hội họa

2.3.1.Thị giác luôn cảm thụ nền lớn hơn hình

2.3.2.Các quan hệ hình và nền

2.4 Những hình thức thể hiện hình vẽ

2.4.1.Cái nhìn ban đầu

2.4.2.Lực hút chính tâm với thị giác trên giao diện phẳng

2.4.3.Những vùng có lực hút thị giác mạnh sau vùng chính tâm

2.4.4.Sức căng thị giác

2.4.5.Một số hình ảnh design tạo ra sức căng thị giác

CHƯƠNG 3: PHOTOSHOP

* Mục tiêu:

- Liệt kê một số khái niệm cơ bản về độ phân giải, ảnh bitmap, ảnh Vectơ

- Sử dụng các công cụ chọn để xử lý đối tượng hình ảnh

- Thực hiện tạo vùng chọn cho đối tương hình ảnh với công cụ Ellipses, Rectangular

- Trình bày một số khái niệm cơ bản về lớp (Layer)

24

- Liệt kê các chế độ màu được sử dụng trong phần mềm Photoshop CS6 và cách chuyển đổi các chế độ màu

- Trình bày các chế độ màu để tô màu cho đối tượng hình ảnh và trong việc in ấn

- Mô tả cách hiệu chỉnh đối tượngbằng các công cụ Brush, Gradient trên đối tượng

- Liệt kê các công cụ chọn để xử lý đối tượng hình ảnh

- Liệt kê một số chức năng của các bộ lọc có sẵn và cách sử dụng các bộ lọc có sẵn

để tạo cho hình ảnh sinh động hơn

* Nội dung

1.1 Giới thiệu

Là phần mềm chuyên dụng cho công việc chỉnh sửa ảnh trên máy tính Được thiết kế bởi công ty Adobe, công ty chuyên thiết kế về các phần mềm đồ hoạ như:

Photoshop, Adobe In Design, Illustrator Các phiên bản của Photoshop: từ 1.0,

2.0, , 8.0 (CS), CS2, CS3, CS4 Phiên bản mới nhất hiện nay là Photoshop CS6

Ở giáo trình này chúng tôi sử dụng phiên bản Photoshop CS5 là phiên bản gần giống với Photoshop CS6 nhất Là một trong những chương trình xử lý ảnh

mạnh và tiện dụng Đối với những nhiếp ảnh gia thì có thể tăng hiệu ứng của bức ảnh, sửa chữa những khiếm khuyết không đáng có của bức ảnh và hơn thế nữa

Người ta có thể dùng PhotoshopCS5 để tạo lên hẳn một Template cho

Website của mình, hoặc làm ra những thanh di chuyển, những hình đồ họa độc

Hình 1.1 Điểm ảnh (pixel)

1.2.2 Độ phân giải

25

Là lượng điểm ảnh trên một đơn vị dài (thường là inch) Độ phân giải

(Resulotion, Pixel\Inch, DPI) của ảnh bằng 72 nghĩa là có 72 điểm ảnh trên một inch

dài Nếu độ phân giải thấp thì lượng điểm ảnh ít, khi đó diện tích của một Pixel

lớn dẫn đến ảnh sẽ không rõ nét Tuy nhiên, nếu cho độ phân giải quá cao thì dung

lượng của File ảnh sẽ tăng cao

Hình 1.2 Độ phân giải

1.2.3 Vùng chọn

Là miền được giới hạn bằng đường biên có nét đứt, được dùng để quy vùng

xử lý riêng Mọi thao tác xử lý hình ảnh chỉ có tác dụng bên trong vùng chọn

(Selection) Vùng chọn được tạo ra bằng các công cụ tạo vùng chọn hoặc một số

lệnh tạo vùng chọn khác

1.2.4 Layer

Là lớp ảnh, trong một Layer chứa các vùng chọn có điểm ảnh và không có điểm ảnh Vùng không có điểm ảnh gọi là vùng trong suốt (Transparent)

1.2.5 Màu Forground, Màu Background

Là hai hộp màu cơ bản nằm trên hộp công cụ, biểu tượng của hai công cụ này là hai hình vuông chồng lên nhau nằm ở gần cuối hộp công cụ

- Màu Forground: là màu sẽ được tô vào ảnh

- Màu Background: là màu sẽ được tô vào giấy Mặc định màu Foreground

là màu đen, còn màu Background là màu trắng Để thay đổi màu mặc định, kích chuột vào từng ô màu để thay đổi Muốn trở về màu mặc định, nhấn phím D và

để thay đổi qua lại giữa hai màu, nhấn phím X

1.3 Khởi động chương trình

- Click vào nút Start

- Chọn All Program\Adobe Photoshop CS5

- Cửa sổ chương trình Photoshop CS5 xuất hiện

26

1.4 Giao diện Photoshop

Cửa sổ làm việc của Photoshop bao gồm 5 thành phần cơ bản là: Thanh menu, thanh Option, thanh trạng thái, hộp công cụ và các Palette Giao diện của

Photoshop CS5 cơ bản như sau:

Hình 1.3 Giao diện Photoshop

1.4.1 Thanh menu

Bao gồm 11 menu phụ: File, Edit, Image, Type, Select, Layer, Filter, 3D,

View, Window và Help

- menu File: chứa các lệnh về đóng hoặc mở, tạo mới ảnh hay các lệnh nhập

xuất ảnh

- menu Edit: chứa các lệnh về Copy, Cut, Paste, tô màu hay xoay ảnh

- menu Image: Chứa các lệnh để thay đổi thuộc tính hay chỉnh sửa ảnh

- menu Type: chứa các lệnh để thay đổi thuộc tính hay chỉnh sửa chữ

- menu Layer: chứa các lệnh thao tác với Layer

- menu Select: chứa các thao tác với vùng chọn: lưu, hủy chọn hay làm mới

- menu Filter: chứa các nhóm bộ lọc của Photoshop

- menu 3D: chứa các lệnh liên kết với 3D

27

- menu View: chứa các lệnh về xem ảnh

- menu Window: bật hoặc tắt các Palettes

- menu Help: trợ giúp

- Nhóm công cụ tạo Path, chỉnh sửa Path và gõ Text

Ngoài các công cụ, Toolbox còn chứa các phím chuyển đổi qua lại giữa các

chế độ làm việc và 2 ô màu Foreground và màu Background

1.4.5 Các nhóm bảng

29

Các nhóm bảng (Palette) này dùng để quản lý hình ảnh và các tính chất khác

của File ảnh Gồm các nhóm bảng sau:

Hình 1.5 Các nhóm bảng (Palettes)

- Nhóm 1:

+ Bảng Navigator: quản lý việc xem ảnh

+ Bảng Info: thông tin màu sắc và toạ độ của địa điểm mà con trỏ đặt tới

- Nhóm 2:

+ Bảng Color: quản lý màu sắc

+ Bảng Swatches: quản lý những màu cho sẵn

+ Bảng Styles: quản lý những hiệu ứng cho sẵn

- Nhóm 3:

+ Bảng Layer: quản lý lớp

+ Bảng Channels: quản lý kênh

+ Bảng Path: quản lý Path

+ Bảng History: quản lý các thao tác đã làm đối với File ảnh

+ Bảng Action: quản lý các thao tác tự động

1.5 Các thao tác điều khiển giao diện

1.5.1 Các chế độ làm việc của màn hình

- Standard Screen Mode: chế độ thông thường

30

- Full Screen Mode With menu Bar: chế độ tràn màn hình có thanh menu

(cửa sổ File ảnh được phóng to hết cỡ Maximize)

- Full Screen Mode: chế độ tràn màn hình không có thanh menu Muốn

chuyển qua lại giữa các chế độ này, chỉ cần gõ phím F hoặc nhấp vào bộ phím

chuyển đổi các chế độ màn hình trên thanh công cụ

1.5.2 Thao tác với thanh menu

Cũng giống như các ứng dụng khác của Windows Trong chương trình các menu được bố trí nằm ngang trên màn hình Khi chọn một menu các bảng con hiện ra để chọn các menu tương ứng Nếu menu con có một hình tam giác ở bên phải, điều này cho biết menu đó còn có chứa các menu con bên trong

Ở giáo trình này thống nhất như sau:

Khi có một dòng lệnh “chọn menu Image\Mode\RGB”, dòng lệnh này thể

hiện các thao tác lần lượt như sau:

- Bước 1 chọn menu Image

- Bước 2 chọn menu con của Image là menu Mode

- Bước 3 chọn menu con của Mode là menu RGB

1.5.3 Thao tác với hộp công cụ

- Click vào biểu tượng của công cụ cần sử dụng

- Nếu công cụ chọn có biểu tượng mũi tên hình tam giác nằm ở góc bên phải cho biết có nhiều dạng khác nữa của công cụ này Khi thao tác Click vào biểu

tượng của công cụ và giữ khoảng một giây các công cụ khác cùng nhóm sẽ hiện

ra, khi đó chọn công cụ cần sử dụng

- Khi đã làm việc quen thuộc với chương trình, có thể sử dụng phím tắt để

chọn nhanh hơn các công cụ

Có thể sắp xếp lại các bảng như sau:

- Nhấn phím Tab để làm ẩn hoặc xuất hiện tất cả các bảng đang mở, hộp

công cụ và thanh tùy chọn

- Nhấn phím Shift+Tab để ẩn hoặc xuất hiện tất cả các bảng hiện có trên màn

hình (trừ hộp công cụ và thanh tùy chọn)

31

- Nhấn vào Tab của bảng để đưa bảng ẩn ở dưới lên trên cùng trong nhóm

bảng

- Drag thanh tiêu đề của nhóm bảng sang vị trí khác để di chuyển nhóm bảng

- Drag Tab của bảng chọn ra khỏi nhóm bảng

1.5.4 Sử dụng thước, lưới và đường gióng

Khi hình ảnh được xuất ra in ấn, để cho hình ảnh theo kích thước thực tế, chương trình thường dùng thước và đường gióng để cân chỉnh

Đường gióng (Guides) có 2 loại là đường gióng đứng và gióng ngang

- Tạo đường gióng đứng bằng cách Click vào thước dọc Drag vào vùng làm

- Khóa đường gióng: chọn menu View\Lock Guides

- Bắt dính hình ảnh vào đường gióng: chọn menu View\SnapTo\Guides

- Di chuyển đường gióng: chuyển sang công cụ Move hoặc phím tắt là V,

Click vào đường gióng Drag đến vị trí mới

- Xóa một đường gióng: chuyển sang công cụ Move hoặc phím V, Click vào đường gióng Drag ra ngoài vùng làm việc

- Xóa tất cả đường gióng: chọn menu View\Clear Guides

1.6 Thao tác với File

1.6.1 Mở File ảnh

32

- Trên thanh menu chọn lệnh File\Open hoặc nhấn tổ hợp phím Ctrl + O, hộp thoại xuất hiện và chọn File cần trong thư mục lưu trữ Hoặc D-Click vào chỗ trống trên nền màn hình để gọi bảng Open

1.6.2 Tạo File mới

Ta chọn menu File\New hoặc nhấn tổ hợp phím Ctrl + N, xuất hiện hộp thoại

New Hộp thoại New gồm các thông số sau:

- Mục Name: đặt tên cho File mới

- Mục Width: nhập kích thước cho chiều ngang

- Mục Height: nhập kích thước chiều dọc

- Mục Resolution: nhập độ phân giải (mặc định = 72)

- Mục Color Mode: chọn chế độ màu (thường là RGB)

- Mục Background Contents: chọn thuộc tính màu Background cho lớp

Hình 1.6 Hộp thoại New

+ White: chọn màu Background là màu trắng

+ Background Color: chọn là màu Background

+ Transparent: chọn màu Background là trong suốt (không màu)

1.6.3 Đóng và lưu File

Khi hoàn thành công việc, có thể lưu tập tin với nhiều định dạng khác nhau Nếu công việc chưa xong, nên lưu lại ở dạng chuẩn của Photosop là PSD để sau

này còn làm việc tiếp tục Thao tác lưu tập tin như sau:

- Chọn menu File\Save (lưu ở định dạng PSD)

- Chọn menu File\Save As (lưu ở định dạng khác)

33

Sau khi chọn lệnh chương trình sẽ xuất hiện hộp thoại Save As lưu File với

các tùy chọn như sau:

+ Save in: chỉ ra thư mục muốn lưu

+ File name: đặt tên tập tin muốn lưu

+ Format: chọn định dạng của tập tin như PSD, JPEG, JPG, GIF)

+ Save Option: lưu thành bản sao khác với các tùy chọn

Hình 1.7 Hộp thoại Save As 1.7 Chọn màu hiện hành

1.7.1 Dùng Palettes Swatches

Bảng Swatches là tập hợp những màu được pha sẵn Có thể chọn màu cho hộp màu Foreground bằng cách kích phím chuột lên một màu trong bảng này Muốn bổ sung màu cho bảng này bằng màu Foreground hiện hành, kích vào phím

Create new Swatch of Foreground Color dưới đáy bảng

34

Hình 1.8 Palettes Swatches 1.7.2 Dùng Palette Color

Có thể chọn nhanh màu cho 2 hộp màu Foreground và màu Background qua

bảng này bằng cách chỉ định màu trên thanh màu ở dưới đáy bảng hoặc nhập chỉ

số % các màu thành phần Để thay đổi màu thành phần trên bảng (RGB, CMYK) vào menu con của bảng Color và chọn hệ màu cần sử dụng

Nếu thấy xuất hiện biểu tượng cảnh báo ở góc trên bên trái bảng, có nghĩa màu đang chọn vượt quá cung bậc màu

Hình 1.9 Palette Color 1.7.3 Dùng hộp Color Picker

Chọn màu cho 2 hộp Màu mặt tiền và hậu cảnh qua bảng Color Picker gồm

những thao tác sau:

- Nhập các giá trị tương ứng vào các ô thành phần của các hệ màu HSB hoặc

RGB, Lab, CMYK

- Drag bên dải màu nằm bên phải để xác định tông màu nhấn chuột bảng

màu bên trái để xác định sắc độ của tông màu

Nếu làm với ảnh WEB đánh dấu vào ô Only Web Colors rồi chọn sắc độ tương ứng hoặc nếu xác định được mã màu thì nhập mã vào ô có dấu #

+ Ctrl + dấu+: phóng to (Zoom In)

+ Ctrl + dấu -: thu nhỏ (zoom out)

+ Ctrl + Alt + dấu +: phóng to ảnh đồng thời phóng to cửa sổ File ảnh + Ctrl + Alt + dấu -: thu nhỏ ảnh đồng thời phóng to cửa sổ File ảnh

+ Ctrl + 0: thu ảnh về mức độ vừa phải

+ Ctrl+ Alt + 0: thu về 100%

1.8.2 Di chuyển hình ảnh

Khi phóng File ảnh lớn, muốn xem ảnh ở khu vực khác có thể dùng 2 thanh cuộn trên 2 cạnh ngang và dọc của File ảnh, hoặc có thể mượn công cụ Hand trong khi sử dụng một công cụ nào đó Bằng cách giữ phím spacebar (phím cách) trên bàn phím, xuất hiện biểu tượng hình bàn tay của công cụ Hand và dùng nó

36

để dịch chuyển cửa sổ làm việc sang khu vực khác Sau khi thả phím spacebar ra,

công cụ Hand biến mất, trả lại công cụ hiện hành

1.8.3 Lệnh Canvas size

Thay đổi kích thước trang vẽ của File ảnh mà không thay đổi kích thước của hình ảnh Chọn lệnh Image\Canvas Size trên thanh menu Xuất hiện hộp thoại

Canvas Size như sau:

Hình 1.11 Hộp thoại Canvas Size

- Nhập kích thước mới cho File ảnh trong mục New Size

- Chọn hướng thay đổi và điểm mốc thay đổi kích thước File ảnh ở mục

37

Hình 1.12 Hộp thoại Image Size

- Mục Pixel Dimenson: Kích thước của File ảnh tính bằng đơn vị Pixel và dung lượng chiếm dụng bộ nhớ của File ảnh

- Mục Document Size: Kích thước thực và độ phân giải của File ảnh

- Tùy chọn Constrain Proportion: Duy trì tỷ lệ giữa chiều ngang và chiều dọc của File ảnh khi thay đổi giá trị của 1 chiều

- Tùy chọn Resample Image: Duy trì mối tương quan giữa kích thước và độ

phân giải

1.8.5 Nhân bản cửa sổ Canvas - Lệnh Duplicate

Tạo bản sao của File ảnh hiện hành, nhưng chưa được lưu Để tiến hành chọn menu Image\ Duplicate

B Câu hỏi - Bài tập

1 Trình bày các thành phần và chức năng cơ bản trong cửa sổ làm việc

2 Trình bày các thao tác với File, chọn màu và các thao tác với hình ảnh

3 Bài tập về thao tác điều khiển giao diện của chương trình

- Cho ẩn, hiện hộp công cụ, các bảng trên cửa sổ lảm việc

- Sắp xếp bảng để thuận tiện làm việc

- Cho ẩn, hiện thước, lưới và đường gióng

- Mở một File ảnh, phóng to thu nhỏ ảnh đó

- Mở nhiều File ảnh, sắp xếp các file ảnh để làm việc

- Nhân bản Canvas để làm việc

C Ghi nhớ

38

1 Các khái niệm cơ bản Cách khởi động chương trình Photoshop

2 Các thao tác điều khiển giao diện và thao tác với File

3 Chọn màu hiện hành và một số thao tác với hình ảnh