Giáo trình Đồ họa thiết kế web (Nghề: Tin học ứng dụng - Cao đẳng) - Trường Cao đẳng Bách khoa Nam Sài Gòn (2023)
lượt xem 4
download
Giáo trình "Đồ họa thiết kế web (Nghề: Tin học ứng dụng - Cao đẳng)" được biên soạn nhằm giúp sinh viên nhận diện được các nguyên tắc bố cục cơ bản, chọn lựa màu sắc phù hợp, mô tả được nghệ thuật sắp chữ trong thiết kế; trình bày được các thao tác cơ bản trong phần mềm Photoshop; nắm được các qui tắc thiết kế Layout web; vận dụng kiến thức vào môn thiết kế Layout web. Mời các bạn cùng tham khảo!
Bình luận(0) Đăng nhập để gửi bình luận!
Nội dung Text: Giáo trình Đồ họa thiết kế web (Nghề: Tin học ứng dụng - Cao đẳng) - Trường Cao đẳng Bách khoa Nam Sài Gòn (2023)
- UỶ BAN NHÂN DÂN THÀNH PHỐ HỒ CHÍ MINH UỶ BAN NHÂN DÂN THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG CAO ĐẲNG BÁCH KHOA NAM SÀI GÒN TRƯỜNG CAO ĐẲNG BÁCH KHOA NAM SÀI GÒN GIÁO TRÌNH MÔN HỌC/MÔ ĐUN: HỆ QUẢN TRỊ CƠ SỞ DỮ LIỆU NGÀNH/ NGHỀ: CÔNG NGHỆ THÔNG TIN TRÌNH ĐỘ: CAO ĐẲNG GIÁO TRÌNH MÔN HỌC/MÔ ĐUN: ĐỒ HỌA THIẾT KẾ WEB NGÀNH/ NGHỀ: TIN HỌC ỨNG DỤNG Ban hành kèm theo Quyết định ĐỘ: CAO ĐẲNG TRÌNH số:/QĐ_.....ngày……tháng…..năm2021 …………………của………………………………. Ban hành kèm theo Quyết định số: 451/QĐ-NSG, ngày 08 tháng 08 năm 2023 của Hiệu trưởng Trường Cao Đẳng Bách Khoa Nam Sài Gòn Tp.Hồ Chí Minh, năm 2021 Tp.Hồ Chí Minh, năm 2023
- 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 Đồ Hoạ Thiết Kế Web này được biên soạn theo chương trình đào tạo chuyên ngành tin học ứng dụng ở bậc cao đẳng của Bộ Giáo Dục Đào Tạo. Giáo trình trình bày những vấn đề cốt lõi nhất của môn Đồ Hoạ Thiết Kế Web. Các bài học được trình bày ngắn gọn, có nhiều ví dụ minh hoạ. Cuối mỗi chương đều có bài tập để sinh viên luyện tập. Giáo trình này có thể giúp các sinh viên trong việc học môn Đồ Hoạ Thiết Kế Web ở bậc cao đẳng có kiến thức cơ bản về mỹ thuật đồ họa, hướng dẫn học sinh sử dụng phần mềm Photoshop vận dụng vào việc thiết kế Layout cho web trong học tập và công việc trong tương lai. Chúng tôi mong rằng các sinh viên tự tìm hiểu trước mỗi vấn đề và kết hợp với bài giảng trên lớp của giáo viên để việc học môn này đạt hiệu quả. Bố cục cuốn sách gồm các bài như sau: - Bài 1: Mỹ thuật ứng dụng - Bài 2: Photoshop - Bài 3: Thiết kế Layout và banner cho web Trong quá trình giảng dạy và biên soạn giáo trình này, chúng tôi đã nhận được sự động viên của các thầy trong Ban Giám Hiệu nhà trường cũng như những ý kiến của các đồng nghiệp trong khoa Công Nghệ thông Tin. Chúng tôi xin chân thành cảm ơn và hy vọng rằng giáo trình này sẽ giúp cho việc dạy và học môn Đồ Hoạ Thiết Kế Web của trường chúng ta ngày càng tốt hơn. Xin chân thành cảm ơn Ban Giám hiệu Trường Cao Đẳng Bách Khoa Nam Sài Gòn, Hội đồng khoa học trường, tác giả của những tài liệu tham khảo, các đồng nghiệp, các bạn sinh viên đã giúp đỡ và đóng góp rất nhiều ý kiến bổ ích để nhóm tác giả hoàn thành cuốn sách này và xin trân trọng giới thiệu với quý bạn đọc. Mọi góp ý xin gửi về địa chỉ: xuanhuong2561@gmail.com Tp.Hồ Chí Minh, ngày 08 tháng 08 năm 2023 Tham gia biên soạn 1. Chủ biên: Đào Thị Xuân Hường 2. ………… 3. ………….
- MỤC LỤC Contents Chương 1. Mỹ thuật ứng dụng ........................................................................................... 1 1.1. Các nguyên tắc bố cục cơ bản .................................................................................... 1 1.1.1. Cân giác ........................................................................................................... 1 1.1.2. Bố cục đối xứng ............................................................................................... 2 1.1.3. Bố cục lệch tâm ................................................................................................ 3 1.1.4. Bố cục dựa trên đường ngang .......................................................................... 3 1.1.5. Bố cục tam giác ................................................................................................ 4 1.1.6. Bố cục dạng tròn .............................................................................................. 5 1.2. Màu sắc ...................................................................................................................... 6 1.2.1. Khái niệm màu sắc ........................................................................................... 7 1.2.2. Màu sắc và ý nghĩa .......................................................................................... 7 1.2.3. Tính chất của màu ............................................................................................ 8 1.2.4. Phân loại màu ................................................................................................... 9 1.2.5. Vòng thuần sắc ............................................................................................... 14 1.2.6. Định luật và phương pháp phối màu.............................................................. 15 1.3. Chữ trong thiết kế..................................................................................................... 18 1.3.1. Một số kiểu chữ chính.................................................................................... 18 1.3.2. Cấu trúc và tỷ lệ chữ ...................................................................................... 20 1.3.3. Ý nghĩa của các kiểu chữ ............................................................................... 21 1.3.4. Cách sắp xếp văn bản trong các ấn phẩm ...................................................... 21 1.3.5. Kế hoạch thiết kế một ấn phẩm ..................................................................... 23 1.4. Thiết kế logo ............................................................................................................ 23 1.4.1. Một số kiểu logo ............................................................................................ 23 1.4.2. Ý nghĩa của logo ............................................................................................ 24 1.4.3. Thiết kế logo .................................................................................................. 32 Chương 2. Photoshop ....................................................................................................... 38 2.1. Các thao tác cơ bản trong Photoshop ....................................................................... 38 2.1.1. Giới thiệu và cài đặt ....................................................................................... 38 2.1.2. Khái niệm ....................................................................................................... 42 2.1.3. Cửa sổ giao diện............................................................................................. 48 2.1.4. Các thao tác trên tập tin ................................................................................. 52 2.1.5. Tùy biến giao diện ......................................................................................... 55
- 2.1.6. Thiết lập màu Background/Foreground ......................................................... 57 2.1.7. Các thao tác biến đối hình ảnh ....................................................................... 64 2.1.8. Các thao tác đối với vùng chọn ...................................................................... 67 2.1.9. Bài tập thực hành vùng chọn .......................................................................... 83 2.2. Làm việc với Layer – Lớp đối tượng ....................................................................... 84 2.2.1. Khái niệm ....................................................................................................... 84 2.2.1. Paletter Layer ................................................................................................. 86 2.2.2. Bài tập tổng quát .......................................................................................... 107 2.3. Mask và Channels .................................................................................................. 116 2.3.1. Mask, Quick mask ........................................................................................ 116 2.3.2. Alpha Channels ............................................................................................ 120 2.3.3. Bài tập tổng quát .......................................................................................... 121 2.4. Path ......................................................................................................................... 126 2.4.1. Công cụ Pen tool .......................................................................................... 126 2.4.2. Bảng Paths Palette ........................................................................................ 129 2.4.3. Cách tạo đường Path .................................................................................... 130 2.4.4. Chuyển Path thành vùng chọn ..................................................................... 131 2.4.5. Bài tập thực hành tổng quát ......................................................................... 133 2.5. Công cụ tô vẽ và hiệu chỉnh ................................................................................... 136 2.5.1. Hộp màu Foreground /Background.............................................................. 136 2.5.2. Hộp Brush preset .......................................................................................... 146 2.5.3. History Palette .............................................................................................. 149 2.5.4. Công cụ Brush .............................................................................................. 150 2.5.5. Công cụ Pencil ............................................................................................. 151 2.5.6. Công cụ Gradient ............................................................................... 152 2.5.7. Công cụ Earser ............................................................................................. 153 2.5.8. Bài tập thực hành ......................................................................................... 154 2.6. Các nhóm bộ lọc ..................................................................................................... 157 2.6.1. Nhóm Filter Artistic ..................................................................................... 160 2.6.2. Nhóm Filter Blur .......................................................................................... 166 2.6.3. Nhóm Filter Stylize ...................................................................................... 168 2.6.4. Các nhóm khác ............................................................................................. 168 2.6.5. Bài tập Bộ Lọc ............................................................................................. 177 Chương 3. Thiết kế layout và baner cho web ................................................................ 180
- 3.1. Giới thiệu về cách thức hoạt động website ............................................................ 180 3.1.1. Khái quát ...................................................................................................... 180 3.1.2. Qui trình thiết kế giao diện Web .................................................................. 182 3.1.3. Cấu trúc Sitemap .......................................................................................... 189 3.2. Quy trình thiết kế website ...................................................................................... 190 3.2.1. Các kiến thức căn bản về Website. .............................................................. 190 3.2.2. Các bước phát thảo một website (các qui trình thiết website). ................... 191 3.3. Layout và các layout thông dụng ........................................................................... 192 3.3.1. Bố cục và thành phần thông thường của một trang Web. ............................ 192 3.3.2. Layout và các layout thông dụng ................................................................. 199 3.4. Cơ bản về đồ họa .................................................................................................... 200 3.4.1. Các dạng đồ họa ........................................................................................... 200 3.4.2. Độ phân giải ................................................................................................. 201 3.5. Xử lý ảnh cho web ................................................................................................. 202 3.5.1. Chỉnh ảnh xuống màu. ................................................................................. 202 3.5.2. Chỉnh ảnh ngược sáng.................................................................................. 206 3.5.3. Xóa mắt đỏ,xóa mụn, làm mịn da, mắt sáng và răng trắng ......................... 207 3.5.4. Bài tập thực hành ......................................................................................... 215 3.6. Tối ưu ảnh cho web ................................................................................................ 224 3.6.1. Các định dạng ảnh phổ biến trên internet .................................................... 224 3.6.2. Sử dụng định dạng ảnh nào để tối ưu hóa website ...................................... 224 3.6.3. Các công cụ tối ưu hóa hình ảnh .................................................................. 225 3.6.4. Độ phân giải ảnh. ......................................................................................... 226 3.7. Bố cục layout website với Photoshop .................................................................... 227 3.8. Thiết kế giao diện web ........................................................................................... 230 3.8.1. Thiết kế giao diện web Thời trang ............................................................... 236 3.8.2. Thiết kế giao diện web Beautyfull Salon ..................................................... 239 3.9. Cắt giao diện và layout PSD .................................................................................. 242 3.9.1. Phân tích và cắt giao diện theo mô hình F- layout ...................................... 242 3.9.2. Tối ưu ảnh khi save for web ........................................................................ 246 3.9.3. Convert PSD to HTML ................................................................................ 249 3.9.4. Bài tập .......................................................................................................... 252
- GIÁO TRÌNH MÔN ĐỒ HỌA THIẾT KẾ WEB Tên môn học/mô đun: Đồ Họa Thiết Kế Web Mã môn học/mô đun: MH24 Vị trí, tính chất, ý nghĩa và vai trò của môn học/mô đun: - Vị trí: Môn đồ họa thiết kế web là môn chuyên ngành trong chương trình đào tạo hệ cao đẳng ngành Tin học ứng dụng. Môn đồ họa thiết kế web học sau khi đã học xong môn Thiết kế Web. - Tính chất: Môn đồ họa thiết kế web là môn học cung cấp kiến thức cơ bản về mỹ thuật đồ họa, hướng dẫn học sinh sử dụng phần mềm Photoshop vận dụng vào việc thiết kế Layout cho web trong học tập và công việc trong tương lai. - Ý nghĩa và vai trò của môn học/mô đun: + Ý nghĩa: Môn đồ họa thiết kế web là môn quan trọng trong việc thiết kế layout Web vì môn học này nội dung bao gồm các nguyên tắc bố cục cơ bản, chọn lựa màu sắc phù hợp, mô tả được nghệ thuật sắp chữ trong thiết kế. Sử dụng phần mềm Photoshop hỗ trợ cho việc thiết kế. + Vai trò: Môn học này áp dụng cho sinh viên ngành Tin học ứng dụng trình độ Cao đẳng. Mục tiêu của môn học/mô đun: - Về kiến thức: + Nhận diện được các nguyên tắc bố cục cơ bản, chọn lựa màu sắc phù hợp, mô tả được nghệ thuật sắp chữ trong thiết kế; + Trình bày được các thao tác cơ bản trong phần mềm Photoshop; + Trình bày được các qui tắc thiết kế Layout web; + Vận dụng kiến thức vào môn thiết kế Layout web - Về kỹ năng: + Sử dụng thành thạo mềm Photoshop hỗ trợ cho việc thiết kế; + Thiết kế được các mẫu Layout web theo yêu cầu; + Sử dụng cơ bản các qui tắc sáng tạo trong việc thiết kế Layout web theo mẫu hoặc theo yêu cầu của khách hàng. - Về năng lực tự chủ và trách nhiệm: + Rèn luyện lòng yêu nghề, tư thế tác phong công nghiệp, tính kiên trì, sáng tạo trong công việc.
- Khoa Công Nghệ Thông Tin – Trường Cao Đẳng Bách Khoa Nam Sài Gòn Chương 1. Mỹ thuật ứng dụng Mục tiêu: - Trình bày được các nguyên tắc cơ bản trong thiết kế sản phẩm; - Vận dụng được các phương pháp phối màu vào bài thiết kế; - Nhận diện được các cách sắp xếp văn bản trong các bài thiết kế. 1.1. Các nguyên tắc bố cục cơ bản Một trong số các nguyên tắc cần có nhất, quan trọng nhất là Nguyên tắc Cân bằng. Bất kỳ một thiết kế đồ họa, hay một tác phẩm nghệ thuật đều phải thực hiện tốt yếu tố cân bằng. Sau đây là các nguyên tắc cơ bản để tạo thành một tác phẩm hoàn hảo. 1.1.1. Cân giác Một trong số các nguyên tắc cần có nhất, quan trọng nhất là Nguyên tắc Cân bằng. Bất kỳ một thiết kế đồ họa, hay một tác phẩm nghệ thuật đều phải thực hiện tốt yếu tố cân bằng. Nó là gì và làm thế nào là nó đạt được trên một bề mặt phẳng? Để trả lời câu hỏi này, chúng ta phải nghĩ về một tác phẩm ba chiều của nghệ thuật. Nếu các phần không thể cân bằng hoặc được giữ, chúng sẽ đổ. Đối với hình ảnh tạo ra trên một bề mặt bằng phẳng như một thiết kế hay một bức tranh sơn dầu cùng một nguyên tắc cân bằng được áp dụng. Tuy nhiên, thay vì có thể chất cân bằng thực tế, các nghệ sĩ cần phải tạo ra một ảo giác về sự cân bằng, được gọi là cân bằng thị giác. Một trong số các nguyên tắc cần có nhất, quan trọng nhất là Nguyên tắc Cân bằng. Bất kỳ một thiết kế đồ họa, hay một tác phẩm nghệ thuật đều phải thực hiện tốt yếu tố cân bằng. Nó là gì và làm thế nào là nó đạt được trên một bề mặt phẳng? Để trả lời câu hỏi này, chúng ta phải nghĩ về một tác phẩm ba chiều của nghệ thuật. Nếu các phần không thể cân bằng hoặc được giữ, chúng sẽ đổ. Đối với hình ảnh tạo ra trên một bề mặt bằng phẳng như một thiết kế hay một bức tranh sơn dầu cùng một nguyên tắc cân bằng được áp dụng. Tuy nhiên, thay vì có thể chất cân bằng thực tế, các nghệ sĩ cần phải tạo ra một ảo giác về sự cân bằng, được gọi là cân bằng thị giác. Trong cân bằng thị giác, mỗi khu vực của bức tranh cho thấy một trọng lượng hình ảnh nhất định, một mức độ nhất định nhẹ hoặc nặng. Ví dụ, màu sắc ánh sáng xuất hiện nhẹ hơn trọng lượng hơn so với màu tối. Màu rực rỡ ảnh hưởng thị giác nặng hơn màu sắc trung tính trong cùng khu vực. Màu sắc ấm như màu vàng có xu hướng mở rộng diện tích về kích thước, trong khi màu lạnh như màu xanh có xu hướng giữ diện tích. Và trong suốt ảnh hưởng thị giác ít nặng hơn các khu vực mờ đục. Cân bằng là sự ổn định về mặt thị giác, mỗi khu vực cho thấy một trọng lượng hình ảnh nhất định, là sự sắp xếp, phân bố đồng đều về trọng lượng. Xét về đồ họa, thuật ngữ cân bằng nhằm ám chỉ trọng lượng hiển thị của đối tượng (hình ảnh) được xác định bởi kích thước, tối sáng, dày mỏng,… Cân bằng rất cần thiết cho sự thành công của thiết kế. Vai trò của cân bằng trong thiết kế: Giống như trong thế giới vật chất, cân bằng thị giác là một điều quan trọng. Một phần không cân bằng có thể làm cho người xem cảm thấy không Giáo trình Môn Đồ Hoạ Thiết Kế Web – Hệ Cao Đẳng 1
- Khoa Công Nghệ Thông Tin – Trường Cao Đẳng Bách Khoa Nam Sài Gòn thoải mái. Khi một tác phẩm được cân bằng trực quan, mỗi phần của nó đều nhận được sự chú ý. Sự chú ý thị giác được cân bằng, giúp người xem gắn kết với thiết kế. Nếu không có cân bằng thị giác, người xem có thể không nhìn thấy tất cả các khu vực trong thiết kế. Có thể họ sẽ không dành thời gian ở những khu vực có ít trọng lượng hoặc sự chú ý hơn. Bất kỳ thông tin trong những khu vực này có thể dễ dàng bị bỏ qua. Chúng ta sẽ muốn cân bằng một thiết kế trực quan bởi vì chúng ta muốn cân bằng các điểm quan tâm trong thành phần của mình, để người xem dành thời gian với tất cả thông tin chúng ta muốn truyền đạt. 1.1.2. Bố cục đối xứng Đối với bất kỳ một trang trí nào người ta cũng cần đến bố cục đối xứng. Song không phải trong bất cứ một trang trí nào vấn đề này cũng được hiểu giống nhau. Bởi vậy không thể giải quyết được một vấn đề trọn vẹn trong một bố cục. Mà là sự tổng hợp của một hay nhiều vấn đề đan xen lẫn nhau. Hỗ trợ và tương hổ cho nhau. Trong một bố cục đối xứng, hình ảnh được chia ra một cách đối xứng, dọc hoặc ngang, ở giữa. Có nhiều đồ vật xung quanh chúng ta tạo thành những đối tượng chính cho bố cục đối xứng. Một số tác phẩm nhiếp ảnh thường thấy là các ảnh chụp phía đối diện của một hồ nước phản chiếu trên mặt nước. Những ảnh khác bao gồm ảnh có các công trình kiến trúc đối xứng hoặc các con đường nằm ở giữa. Tuy nhiên, vì bố cục này tạo ra một ảnh có các hoa văn tương tự. Cả ở trên lẫn dưới, hoặc trái và phải, cần phải thận trọng để tránh bố cục trở nên quá tầm thường. Giáo trình Môn Đồ Hoạ Thiết Kế Web – Hệ Cao Đẳng 2
- Khoa Công Nghệ Thông Tin – Trường Cao Đẳng Bách Khoa Nam Sài Gòn 1.1.3. Bố cục lệch tâm Cân bằng bất xứng là khi hai bên của trục đối xứng không giống nhau, nhưng vẫn đem lại cảm giác cân bằng. Cách để đạt được sự cân bằng bất xứng là sắp xếp các yếu tố trong bố cục với các kích cỡ, màu sắc hoặc khoảng cách tới tâm khác nhau một cách hợp lý. Nếu người nghệ sĩ có thể cảm nhận, đánh giá và ước lượng khối lượng thị giác của mỗi yếu tố khác nhau, người đó sẽ có khả năng cân bằng toàn bộ bố cục và từ đó có được một bố cục hút mắt hơn. 1.1.4. Bố cục dựa trên đường ngang Loại bố cục này sẽ rước ánh mắt ta chạy dài theo hình ảnh một cách rất bình thản mà lại không giống như khi ta đọc sách. Đây là những bố cục tạo ra cảm giác bình lặng, thánh thiện. Nhưng nó cũng dễ tạo ra vẻ đơn điệu khi không có một đường dọc hay xiên nào đối lập với đường ngang. Giáo trình Môn Đồ Hoạ Thiết Kế Web – Hệ Cao Đẳng 3
- Khoa Công Nghệ Thông Tin – Trường Cao Đẳng Bách Khoa Nam Sài Gòn 1.1.5. Bố cục tam giác Đối với một chủ thể được tạo nên bởi rất nhiều yếu tố sơ khởi hướng về mọi phía, tốt nhất là ta dẫn tất cả tới các bố cục ở dạng hình học đơn giản. Tuy nhiên, chúng ta phải loại trừ hình vuông: bốn góc, bốn cạnh song song một cách bắt buộc với khung của hình ảnh, sẽ tạo ra một bố cục rất cứng nhắc, quá cân đối và đều đặn, cuối cùng là thiếu sức sống. Ngược lại tam giác (cân, lộn ngược, nghiêng và tam giác vuông) thì không phiền như vậy vì ít nhất hai cạnh của nó không song song với khung của hình ảnh. Đây là giải pháp bố cục sinh động hơn, thường được các họa sĩ sử dụng. Miễn là chủ đề phù hợp với bố cục. Bố cục hình tam giác có thể có rất nhiều dạng khác nhau. Khi thì các yếu tố chính của bố cục sẽ được xếp một cách chuẩn xác trong hình tam giác mà các cạnh được coi như những đường định hướng sắp theo hình tam giác. Khi thì một vài yếu tố phụ của bố cục sẽ được bố trí ít nhiều theo hình tam giác bao quanh chủ thể, thậm chí cách một khoảng cách nhất định, để “dàn dựng” chủ đề ngay bên trong khung tự nhiên của hình ảnh. Nói chung việc này có hiệu quả làm tăng thêm giá trị một cách đặc biệt cho chủ đề Từ xưa, bố cục theo hình tam giác (hay hình kim tự tháp) đã từng được các họa sĩ sử dụng như phương tiện để đặc biệt làm tăng giá trị của chủ đề hoặc một phần của chủ đề. Hai đường chéo tụ vào một điểm, hết sức năng động, hiện ra như hai cạnh của một hình tam giác, cuốn hút ánh mắt của khán giả đi lướt tới đỉnh của tam giác chính là nơi có hình ảnh chủ yếu của bố cục, mà tác giả muốn người xem “đổ dồn con mắt” vào đó. Khi một hay nhiều nhân vật được khuôn trong một hình tam giác thì yếu tố mà người ta thường xếp ở đỉnh tam giác sẽ là khuôn mặt của chủ thể, sao cho “bắt mắt” khán giả nhất Giáo trình Môn Đồ Hoạ Thiết Kế Web – Hệ Cao Đẳng 4
- Khoa Công Nghệ Thông Tin – Trường Cao Đẳng Bách Khoa Nam Sài Gòn (xem tranh “Tự do dẫn dắt nhân dân” của Delacroix trang 173). Hơn nữa, khi có nhiều nhân vật cùng là quan trọng trong một hình tam giác thì họa sĩ cần phải kéo các khuôn mặt một cách tối đa trong chừng mực có thể vào đỉnh trên của tam giác để làm cho chúng được tập trung ở vị trí ưu tiên. 1.1.6. Bố cục dạng tròn Hiếm khi, các bố cục dạng này được tổ chức quanh trung tâm lý tính của hình ảnh và chúng tựa như một bố cục đối xứng, do đó có được vẻ trang trọng và sự lạnh lùng tương đối của bố cục này. Ngược lại, khi điểm trung tâm của chúng nằm ngoài các trục của hình ảnh, chúng lại tựa như một bố cục phi trọng tâm và tạo ra một ấn tượng lớn hơn về tính tự nhiên. Dù rằng bức tĩnh vật này trông có vẻ được “cắt cảnh” rất tự nhiên, nhưng nó không hề được sắp xếp một cách tùy tiện. Bố cục trở nên đặc biệt nổi bật do chọn cách nhìn theo kiểu quay máy ảnh chúc xuống, lại được thiết lập chủ yếu là dựa trên nhiều hình thể vòng tròn (như hình tròn rộng của các bánh kẹp tròn “nhại lại” dạng tròn nhỏ hơn của bình rượu nhỏ) sắp đặt trên đường chéo góc của bức tranh. Con dao đặt nằm chéo và cạnh bàn ở phía trên, song song với con dao, góp phần khẳng định ý nghĩa của bố cục dựa trên đường chéo góc, tất cả như đang khép lại ở phần trên (cái cạnh bàn) và ở phần dưới (con dao). Vậy nên, bốn đồ vật dùng hàng ngày có thể sẽ trở nên một bức tranh ngon lành dành cho con mắt. Ví dụ về bố cục: Giáo trình Môn Đồ Hoạ Thiết Kế Web – Hệ Cao Đẳng 5
- Khoa Công Nghệ Thông Tin – Trường Cao Đẳng Bách Khoa Nam Sài Gòn A. Trong hình tam giác B. Trong hình chữ nhật C. Trên đường chéo D. Trong vòng tròn 1.2. Màu sắc Đường nét và màu sắc là những yếu tố tạo hình gắn liền với thị giác. Hai yếu tố tạo hình này đã tạo nên đặc trưng cơ bản của ngôn ngữ mĩ thuật. Màu sắc mang lại cho người xem sự hứng khởi, niềm vui thích, lạc quan, yêu đời sự yên tĩnh, cảm giác thư thái, bình yên và cũng chính màu sắc có thể mang đến cho ngời xem cảm giác ngột thở, sự sợ hãi, cảm giác buồn bã, lạnh lẽo, cô đơn chán nản. Màu sắc có nguồn gốc tự nhiên và cũng chứa trong mình ý nghĩa xã hội. Theo phân tích của vật lý thì ánh sáng trắng chính là sự tổng hợp của bảy màu: đỏ - da cam - vàng – lục – lam - chàm – tím. Trong thực tế ta vẫn quen gọi đó là 7 sắc cầu vồng. Trong bảy màu sắc cầu vồng có 3 màu nguyên được tạo nên mà không có sự pha trộn nào đó là đỏ – vàng và lam (3 màu gốc) còn các màu khác là do pha trộn giữa hai màu mà có: Pha trộn màu đỏ và vàng ta có màu da cam, pha trộn màu vàng và lam cho ta màu lục, pha trộn màu đỏ và lam ta có màu tím… Màu sắc là tên gọi chung nhưng khi đi sâu vào nghiên cứu về màu sắc cần chú ý một số khái niệm cụ thể sau: - Sắc tố: chỉ những màu gốc trong đó có cả đen và trắng. - Sắc loại: là hỗn hợp của các sắc tố đợc biểu hiện dưới dạng riêng biệt và được gọi theo liên tưởng, thí dụ: cánh sen, lá mạ, hoa cà, nước biển …. - Sắc độ: chỉ độ đậm nhạt của màu sắc và cuối cùng là sắc thái, đó là vẻ khác nhau của những màu có cùng một gốc như: đỏ cờ, đỏ sen, mười giờ… Sự xếp đặt những màu cạnh nhau trong hội họa cho ta hòa sắc. Những màu đi với nhau, tạo ra thế quân bình khi chúng có tỷ lượng tương đương, hay thúc đẩy lẫn nhau, khi chúng có một tỷ lượng chênh lệch; ta gọi những màu đó là những màu bổ túc. Cũng giống các yếu tố tạo hình khác, màu sắc góp phần biểu cảm trong tác phẩm. Màu sắc có thể tạo cảm giác về gần xa, nóng lạnh, nặng nhẹ… nhờ những tương quan. Những màu nóng, đậm dễ gợi cảm giác gần, những màu lạnh, sáng gây cảm giác ngược lại…Những màu đối chọi như lam với vàng hay lục với cánh sen, đỏ và xanh lục… cho chúng Giáo trình Môn Đồ Hoạ Thiết Kế Web – Hệ Cao Đẳng 6
- Khoa Công Nghệ Thông Tin – Trường Cao Đẳng Bách Khoa Nam Sài Gòn ta cảm giác mạnh mẽ. Nếu trên tranh sử dụng những màu cùng sắc độ dễ gây cảm giác đều đều, buồn bã hay êm ái, nhẹ nhàng… Màu sắc là một trong những yếu tố ngôn ngữ biểu đạt đóng vai trò quan trọng của mĩ thuật. 1.2.1. Khái niệm màu sắc Màu là yếu tố thực tồn tại trong cuộc sống, nó tạo sự lôi cuốn, hấp dẫn đối với chúng ta, làm cuộc sống phong phú, giàu cảm xúc hơn. Trong thực tế, có khoảng 8000 màu tồn tại quanh ta. 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.2.2. Màu sắc và ý nghĩa Màu sắc đóng một vai trò rất quan trọng trong cuộc sống của chúng ta, cho dù chúng ta có nhận ra hay không. Nó có khả năng ảnh hưởng đến cảm xúc và tâm trạng của chúng ta theo cách mà ít thứ khác có thể. Tất cả các màu sắc có trên bảng màu đều bắt nguồn từ ba màu chính: màu đỏ, màu vàng và màu xanh dương hay còn gọi là màu lam. Với sự liên kết của màu sắc người ta qui ước ra bốn màu cơ bản: xanh dương, màu đỏ, màu vàng, màu xanh lá (hay màu lục) và hai màu của sắc độ sáng, tối là màu đen và màu trắng. - Màu đen: Màu của màn đêm và cái chết, thường được liên kết với âm mưu đen tối. Nó cũng gắn liền với sự giàu có và thanh lịch.Biểu đạt sự huyền bí, tuyệt vọng. Truyền độ sâu/đậm cho các màu khác. Hấp thu tất cả các màu. Hấp thu nhiệt và phản xạ ánh sáng không mạnh. - - Màu xanh (blue): Màu của bầu trời và biển cả. Ánh sáng xanh trông trẻ và thể thao, màu xanh hoàng gia có một không khí trang nghiêm và giàu có. Là màu Giáo trình Môn Đồ Hoạ Thiết Kế Web – Hệ Cao Đẳng 7
- Khoa Công Nghệ Thông Tin – Trường Cao Đẳng Bách Khoa Nam Sài Gòn lạnh, gợi cảm, mang đến cảm giác yên bình, tươi tắn và thư thái cho người nhìn. Màu này tốt cho thần kinh, sự nghỉ ngơi và giảm căng thẳng. - - Màu nâu (brown): Tượng trưng cho sự phong phú và phì nhiêu. Màu nâu có vẻ buồn. Nó trông mộc mạc và tự nhiên. - - Màu tím (Purple): Tím là một màu sành điệu, tượng trưng cho sự liên kết và sang trọng. - - Màu đỏ (Red): Là màu sắc của những con tim và ngọn lửa. Là màu nóng, sôi nổi, khỏe khoắn và mạnh mẽ nhất trong các màu nóng. Kích thích giác quan và sự ngon miệng. Mang tính cảnh báo. Được ứng dụng trong giao thông, cứu hỏa, cứu thương, trong hoạt động giải trí, ẩm thực. - Màu trắng (White): Màu trắng tượng trưng cho sự tinh khiết, ngây thơ; hòa bình, trong sáng, trung thực. Phản xạ ánh sáng và nhiệt lượng tốt. - - Màu vàng (Yellow): Màu vàng tượng trưng cho sự sống và hạnh phúc, màu sắc của ánh nắng và quyền quý. Là màu nóng, thể hiện sự vượt trội, mạnh mẽ cá tính, thu hút mắt nhìn vì là màu sáng chói nhất trong ba màu cơ bản, mang tính cảnh báo. Được ứng dụng với diện tích nhỏ sẽ gây sự hứng khởi năng động, tạo điểm nhấn ấn tượng, nhưng với diện tích lớn sẽ gây ra sự choáng ngộp tạo cảm giác khó chịu. - Màu xanh lá (màu lục): Tượng trưng cho cuộc sống thiên nhiên và sức khỏe con người. Cân bằng và hài hòa. Xoa dịu cảm giác và tâm trạng 1.2.3. Tính chất của màu Giáo trình Môn Đồ Hoạ Thiết Kế Web – Hệ Cao Đẳng 8
- Khoa Công Nghệ Thông Tin – Trường Cao Đẳng Bách Khoa Nam Sài Gòn Để diễn tả một màu thật đúng cách, ta xét tới 3 tính chất chủ yếu : ❖ Cường độ: Chỉ mức thuần túy, mạnh, yếu hay độ bão hòa của một màu. Cường độ định bởi số lượng của sắc trội nhất. Cường độ có thể nâng cao bằng cách thêm sắc chính trong màu. Độ đậm hoặc nhạt của một màu nào đó khi pha trắng hoặc pha đen. Là mức độ mạnh hay yếu của một màu nào đó (thị giác cảm nhận được độ tươi thắm) do Sự kích thích thị giác. ❖ Quang độ: (Valuer) Độ sáng hoặc tối của một màu, là tác dụng liên kết giữa các độ đậm nhạt này với độ đậm nhạt kia. Ví dụ: trong vòng thuần sắc, vàng là màu có đỉnh quang độ sáng nhất, tím là màu có đỉnh quang độ tối nhất do Sự đập mắt. Ví dụ: Màu Vàng: Quang độ sáng hơn. Màu Cam: Cường độ mạnh hơn do độ tươi thắm của nó. Màu càng pha trắng thì quang độ càng sáng nhưng cường độ càng yếu. 1.2.4. Phân loại màu - Màu bậc nhất : Còn gọi là màu chính, màu cơ bản, màu bậc nhất. Từ đó có thể pha ra các màu khác (trừ đen và trắng – không màu nào pha trộn ra nó). Gồm 3 màu như màu vàng, màu đỏ và màu lam - Giáo trình Môn Đồ Hoạ Thiết Kế Web – Hệ Cao Đẳng 9
- Khoa Công Nghệ Thông Tin – Trường Cao Đẳng Bách Khoa Nam Sài Gòn Hình 1-1- Màu Vàng, đỏ, lam - Màu bậc hai (màu bổ túc): Còn gọi là màu phụ, màu bậc hai. Gồm 3 màu như màu Tím màu lục và màu cam Hình 1-2- MàuTím, màu lục và màu cam - Màu bậc ba: Gồm các màu như màu Cam vàng, màu Cam đỏ, màu Tím lam, màu Tím đỏ, màu Lục lam và Lục vàng. Được pha với phân lượng bằng nhau từ màu bậc 1 với màu bậc 2 đứng cạnh nhau trên vòng thuần sắc. - Màu bậc 4,5,6,7 …: Bằng cách pha với phân lượng bằng nhau giữa các màu đứng cạnh nhau trong vòng thuận sắc ta tiếp tục có các màu bậc cao hơn. Giáo trình Môn Đồ Hoạ Thiết Kế Web – Hệ Cao Đẳng 10
- Khoa Công Nghệ Thông Tin – Trường Cao Đẳng Bách Khoa Nam Sài Gò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. Có 3 cặp màu tương phản là màu Vàng – Tím, màu Đỏ – Lục và màu Lam – Cam. Hình 1-3- Màu Vàng – Tím, Màu Đỏ – Lục, và màu Lam – Cam - Màu nóng: Gây cảm giác ấm áp, gần, kích thích thị giác→Màu ngả đỏ: Vàng, cam vàng, cam, cam đỏ, đỏ. - Màu lạnh: Gây cảm giác mát mẻ, dễ chịu hoặc lạnh lẽo, xa → Màu ngả xanh: Lục vàng, lục, lục lam, lam, tím lam, tím, tím đỏ - Màu trung tính: Màu trung tính do sự kết hợp giữa trắng và đen tạo ra. Màu không thuộc nóng, không thuộc lạnh. Màu xám có nhiều gốc xám + Xám do đen pha trắng + Xám do pha 2 màu tương phản với nhau + Xám do pha 3 màu chính với nhau Ví dụ: Giáo trình Môn Đồ Hoạ Thiết Kế Web – Hệ Cao Đẳng 11
- Khoa Công Nghệ Thông Tin – Trường Cao Đẳng Bách Khoa Nam Sài Gòn - Màu trung gian: Màu điều giải sự mâu thuẫn đối kháng về sắc độ, cường độ, quang độ, được pha từ hai màu đang có sự tương phản với nhau. Hai màu tương phản về nóng lạnh, tìm màu trung gian trên vòng thuần sắc. - Màu tương đồng: Màu tương đồng là những màu thoạt nhìn qua trông chúng có vẻ giống nhau, nhóm màu đứng cạnh nhau trong vòng thuần sắc. Một dãy màu nối tiếp nhau, liên kết nhau chặt chẽ, không phân biệt nóng lạnh (mở rộng cả khi pha với trắng hoặc đen). - Màu bổ túc xen kẽ: + Vàng và tím: cặp màu tương phản (Tím đỏ, tím lam: 2 màu tương đồng với tím, là một cặp bổ sung xen kẽ của vàng). + Đỏ và Lục: cặp màu tương phản. (Lục vàng, lục lam: 2 màu tương đồng với lục, là một cặp bổ sung xen kẽ của đỏ). + Lam và Cam: cặp màu tương phản (Cam vàng, Cam đỏ: 2 màu tương đồng với cam, là một cặp bổ sung xen kẽ của lam). Áp dụng để trang trí: Màu tương đồng nhau làm phông (fond) là chủ toàn bộ không gian, màu còn lại (cũng là màu gốc trong nhóm 3 màu bổ sung xen kẽ) làm màu nhấn, màu trọng điểm. Giáo trình Môn Đồ Hoạ Thiết Kế Web – Hệ Cao Đẳng 12
CÓ THỂ BẠN MUỐN DOWNLOAD
-
Giáo trình Đồ họa hình động (Nghề: Thiết kế đồ họa - Trung cấp) - Trường Cao đẳng Cơ điện Xây dựng Việt Xô
55 p | 47 | 18
-
Giáo trình Đồ hoạ ứng dụng - Nghề: Kỹ thuật lắp ráp và sửa chữa máy tính - Trình độ: Cao đẳng nghề (Tổng cục Dạy nghề)
175 p | 73 | 15
-
Giáo trình Đồ họa ứng dụng (Nghề: Kỹ thuật sửa chữa và lắp ráp máy tính - Cao đẳng): Phần 2 - Trường Cao đẳng Cơ điện Xây dựng Việt Xô
57 p | 28 | 9
-
Giáo trình Thực tập thiết kế đồ họa 1 (Ngành: Thiết kế đồ họa - Trung cấp) - Trường Cao đẳng Xây dựng số 1
13 p | 15 | 9
-
Giáo trình mô đun Thiết kế đồ họa (Nghề: Tin học ứng dụng - Trình độ: Trung cấp) - Trường CĐ Kinh tế - Kỹ thuật Bạc Liêu
112 p | 18 | 8
-
Giáo trình Đồ họa nội thất (Ngành: Thiết kế đồ họa - Trung cấp) - Trường Cao đẳng Xây dựng số 1
83 p | 7 | 6
-
Giáo trình Thực tập thiết kế đồ họa 2 (Ngành: Thiết kế đồ họa - Trung cấp) - Trường Cao đẳng Xây dựng số 1
90 p | 9 | 6
-
Giáo trình Đồ họa cơ bản (Ngành: Thiết kế đồ họa - Trung cấp) - Trường Cao đẳng Xây dựng số 1
83 p | 9 | 6
-
Giáo trình Thực tập thiết kế đồ họa 1 (Ngành: Thiết kế đồ họa - Cao đẳng) - Trường Cao đẳng Xây dựng số 1
18 p | 19 | 5
-
Giáo trình Thực tập thiết kế đồ họa 3 (Ngành: Thiết kế đồ họa - Cao đẳng) - Trường Cao đẳng Xây dựng số 1
60 p | 9 | 4
-
Giáo trình Thực tập thiết kế đồ họa 2 (Ngành: Thiết kế đồ họa - Cao đẳng) - Trường Cao đẳng Xây dựng số 1
90 p | 6 | 4
-
Giáo trình Đồ họa thiết kế web (Nghề: Tin học ứng dụng - Cao đẳng) - Trường Cao đẳng Bách khoa Nam Sài Gòn (2021)
258 p | 7 | 4
-
Giáo trình Đồ họa thiết kế web (Nghề: Tin học ứng dụng - Cao đẳng) - Trường Cao đẳng Bách khoa Nam Sài Gòn (2022)
259 p | 8 | 4
-
Giáo trình Đồ họa cơ bản (Ngành: Công nghệ thông tin - Cao đẳng) - Trường Cao đẳng Xây dựng số 1
70 p | 17 | 3
-
Giáo trình Đồ họa ứng dụng photoshop (Ngành: Công nghệ thông tin - Cao đẳng) - Trường Cao đẳng Xây dựng số 1
115 p | 4 | 3
-
Giáo trình Dự án - thiết kế bộ nhận diện (Ngành: Thiết kế đồ hoạ - Trình độ Cao đẳng) - Trường Cao đẳng Hòa Bình Xuân Lộc
51 p | 2 | 1
-
Giáo trình Đồ hoạ 3D Studio Max (Ngành: Thiết kế đồ hoạ - Trình độ Cao đẳng) - Trường Cao đẳng Hòa Bình Xuân Lộc
74 p | 1 | 0
Chịu trách nhiệm nội dung:
Nguyễn Công Hà - Giám đốc Công ty TNHH TÀI LIỆU TRỰC TUYẾN VI NA
LIÊN HỆ
Địa chỉ: P402, 54A Nơ Trang Long, Phường 14, Q.Bình Thạnh, TP.HCM
Hotline: 093 303 0098
Email: support@tailieu.vn