BÀI GIẢNG THIẾT KẾ ĐỒ HỌA CƠ BẢN

BÀI GIẢNG THIẾT KẾ ĐỒ HỌA CƠ BẢN NỘI DUNG MÔN HỌC CHƯƠNG I: Giới thiệu về đồ họa máy tính CHƯƠNG II: Đồ họa vector CHƯƠNG III: Đồ họa bitmap • Tài liệu môn thiết kế đồ họa cơ bản • Photoshop CS classroom in Abook • How to do everything Adobe Illustrator CS4

THIẾT KẾ ĐỒ HỌA CƠ BẢN

PTIT

NỘI DUNG MÔN HỌC

CHƯƠNG I: Giới thiệu về đồ họa máy tính CHƯƠNG II: Đồ họa vector

CHƯƠNG III: Đồ họa bitmap

PTIT

TIÊU CHÍ ĐÁNG GIÁ SINH VIÊN CỦA MÔN HỌC

Hình thức kiểm tra Tỷ lệ đánh giá Đặc điểm đánh giá

- Tham gia học tập trên lớp (đi học đầy

đủ, tích cực thảo luận)

10 % Cá nhân

- Các bài tập và thảo luận trên lớp 10% Cá nhân

- Kiểm tra giữa kỳ: Bài tập lớn 20% Cá nhân

- Kiểm tra cuối kỳ: Bài tập lớn 60% Cá nhân

PTIT

HỌC LIỆU MÔN HỌC

•  Tài liệu môn thiết kế đồ họa cơ bản

•  Photoshop CS classroom in Abook

•  How to do everything Adobe Illustrator CS4

PTIT

GIỚI THIỆU ĐỒ HỌA MÁY TÍNH

Khái niệm đồ họa máy tính:

“Đồ họa máy tính là tất cả những gì liên quan đến việc sử dụng máy tính để phát sinh ra hình ảnh Các vấn đề liên quan tới công việc này bao gồm : tạo, lưu trữ, thao tác trên các mô hình (các mô tả hình học

PTIT

ỨNG DỤNG CỦA ĐỒ HỌA MÁY TÍNH

ĐỘ PHÂN GIẢI ẢNH LÀ GÌ?

Độ phân giải là số điểm ảnh hoặc pixels tạo nên hình ảnh Được tính

bằng đơn vị dpi hoặc dots/ inch Chỉ số dpi của ảnh cao, đồng

nghĩa cho ra hình ảnh chất lượng cao và dung lượng file cũng lớn

PTIT

ĐỘ PHÂN GIẢI CỦA ẢNH VÀ KÍCH

THƯỚC ẢNH

PTIT

ĐỘ PHÂN GIẢI CỦA ẢNH VÀ KÍCH

THƯỚC ẢNH

PTIT

MỘT SỐ LOẠI ĐỊNH DẠNG PHỔ BIẾN

PTIT

MỘT SỐ LOẠI ĐỊNH DẠNG PHỔ BIẾN

PTIT

CHƯƠNG II: Đồ họa Vector

PTIT

Đồ họa vector

Hinh Vector trong đồ hoạ:

-­‐ Là dạng được vẽ theo thuật toán

học và không lệ thuộc vào độ phân

giải của mẫu vẽ

-­‐ Vẫn giữ nguyên tính chất về

đường nét và mầu sắc khi in ra ở

tất cả các tỉ lệ

PTIT

Môi trường làm việc của

IIlustrator chia làm 5 khu

Bảng control palette

LÀM QUEN VỚI GIAO DIỆN ILLUSTRATOR

PTIT

Menu bar

LÀM QUEN VỚI GIAO DIỆN ILLUSTRATOR

PTIT

Thanh công cụ (Toolbox)

LÀM QUEN VỚI GIAO DIỆN ILLUSTRATOR

PTIT

LÀM QUEN VỚI GIAO DIỆN ILLUSTRATOR

PTIT

SỬ DỤNG CÁC PALETTES VÀ DIALOG BOXES (HỘP THOẠI) LÀM QUEN VỚI GIAO DIỆN ILLUSTRATOR

PTIT

TRANG MẪU VẼ (ARTBOARD)

LÀM QUEN VỚI GIAO DIỆN ILLUSTRATOR

PTIT

CÁC CHẾ ĐỘ HIỂN THỊ BẢN VẼ

PTIT

Bảng quan sát mẫu vẽ (Navigator palette)

LÀM QUEN VỚI GIAO DIỆN ILLUSTRATOR

PTIT

LÀM QUEN VỚI GIAO DIỆN ILLUSTRATOR

PTIT

CÁC DẠNG HÌNH HỌC CƠ BẢN (PATH AND SHAPE)

Công cụ Rectangle (M)

Công cụ này dùng để vẽ hình chữ nhật Trong khi vẽ

•  Nhấn giữ phím Alt để vẽ hình chữ nhật xuất phát từ tâm

•  Nhấn giữ shift để vẽ hình vuông

•  Nhấn giữ thanh khoảng trắng (spacebar) để di chuyển hình chữ nhật để một vị trí mới

•  Nhấn phím ~ để vẽ ra nhiều hình chữ nhật cùng một lúc

•  Để vẽ hình chữ nhật một cách chính xác, ta bấm (Click) chuột vào trang bản vẽ

PTIT

CÁC DẠNG HÌNH HỌC CƠ BẢN (PATH AND SHAPE)

Công cụ Rounded Rectangle

Công cụ này dùng để vẽ hình chữ nhật bo tròn góc Trong khi đang vẽ

•  Nhấn giữ phím Alt để vẽ hình chữ nhật xuất phát từ tâm

•  Nhấn giữ phím Shift để vẽ hình vuông bo tròn góc

•  Nhấn giữ thanh khoảng trắng (spacebar) để di chuyển hình chữ nhật đến một vị trí mới

•  Nhấn giữ phím mũi tên lên/ mũi tên xuốngĠ để tăng giảm bán kính bo tròn

•  Nhấn phím ~ để vẽ ra nhiều hình chữ nhật bo tròn cùng một lúc để vẽ hình chữ nhật bo tròn một cách chính xác, ta bấm (click) chuột vào trang bản vẽ

PTIT

CÁC DẠNG HÌNH HỌC CƠ BẢN (PATH AND SHAPE)

Công cụ Ellipse (L)

Công cụ này dùng để vẽ hình ê-líp Trong khi đang vẽ:

•  Nhấn giữ phím Alt để vẽ hình ê-líp xuất phát từ tâm

•  Nhấn giữ phím Shift để vẽ hình tròn

•  Nhấn giữ thanh khoảng trắng (spacebar) để di chuyển hình ê-líp đến một vị trí mới

•  Nhấn phím ~ để vẽ ra nhiều hình chữ nhật bo tròn cùng một lúc để vẽ hình chữ nhật bo tròn một cách chính xác, ta bấm (click) chuột vào trang bản vẽ

PTIT

CÁC DẠNG HÌNH HỌC CƠ BẢN (PATH AND SHAPE)

Công cụ Polygon

Công cụ này dùng để vẽ hình đa giác đều Trong khi đang vẽ:

•  Nhấn giữ phím Shift để cạnh đáy của đa giác nằm ngang

•  Nhấn giữ thanh khoảng trắng (spacebar) để di chuyển đa giác đến một vị trí mới

•  Nhấn giữ phím mũi tên lên / mũi tên xuống để tăng giảm số đỉnh của ngôi sao

•  Nhấn phím ~ để vẽ ra nhiều đa giác cùng một lúc

PTIT

CÁC DẠNG HÌNH HỌC CƠ BẢN (PATH AND SHAPE)

Công cụ này dùng để tạo ra các đốm sáng bao gồm: 1 tâm (center), 1 quầng sáng (halo), các tia (rays) và các vòng (rings) Sử dụng công cụ này để tạo ra hiệu ứnng lens flare như trong nhiếp ảnh

Để tạo đốm sáng ta chọn công cụ rồi bấm (click) chuột vào trang bạn vẽ để định tâm, rồi kéo (drag) chuột để xác định độ lớn của quầng sáng halo và quay các tia

Trong khi kéo chuột:

•  Nhấn giữ phím Shift để cố định góc của các tia

•  Nhấn giữ Ctrl để giữ bán kính trong của halo không thay đổi

•  Nhấn giữ phím mũi tên lên/ mũi tên xuống để tăng giảm số tia

•  Sau đó dùng chuột để xác định điểm cuối của các đốm sáng

PTIT

MÀU SẮC

• 

PTIT

MÀU SẮC

PTIT

Cách 3: Chọn đối tượng, rồi

Để định điểm đầu, điểm cuối và hướng

của tô chuyển, ta

· Cách định màu cho stroke cũng giống

như định màu cho fill Tuy

· Để định độ dày và kiểu của stroke ta

chọn Window > Stroke (F10)

MÀU SẮC

PTIT

THAO TÁC VỚI ĐỐI TƯỢNG

PTIT

THAO TÁC VỚI ĐỐI TƯỢNG

w  

w  

w  

PTIT

•  Các thuộc tính fill: kiểu tô (fill type), màu

THAO TÁC VỚI ĐỐI TƯỢNG

PTIT

Sắp xếp vị trí các đối tượng

•  Chọn các đối tượng cần sắp xếp vị trí

•  Chọn Window > Align (Shift+F7) để hiển thị Align Palette

THAO TÁC VỚI ĐỐI TƯỢNG

• 

• 

• 

PTIT

LÀM VIỆC VỚI CÔNG CỤ PEN

PTIT

THAO TÁC VỚI VĂN BẢN (TEXT)

PTIT

Cho khối văn bản chạy xung quanh một path với một khoảng

-­‐Điều kiện: path phải nằm bên trên khối văn bản

- Chọn Object > Text Wrap> Release Text Wrap để tách rờikhối văn bản và path

ra trở lại như ban đầu

chữ đ

và thay thế font

THAO TÁC VỚI VĂN BẢN (TEXT)

PTIT

Khử Văn bản “rỗng” trong mẫu vẽ

Tạo VB uốn theo đường:

Nhập v

-­‐ Nhập vào trong bản vẽ đang mở: File

> Place… click Place.

Xuất văn bản:

- Tạo văn bản phủ xung quanh cac

đối tượng (Wrapping text around

objects)

Chọn đối tượng ta muốn text to wrap

-­‐ Trong Layers palette, đưa Wrap object

THAO TÁC VỚI VĂN BẢN (TEXT)

PTIT

(Along a path)

Di chuyển hoặc lật văn bản theo path

-­‐Chọn đối tượng văn bản (type object.)

THAO TÁC VỚI VĂN BẢN (TEXT)

PTIT

BỘ LỌC

Dùng để tăng/ giảm các thành phần màu cho thuộc tính fill/

stroke của một đối tượng h.nh dọc hoặc một h.nh ảnh lưới

điểm (không

Có tác dụng gần giống như lệnh Blend (hoặc công cụ Blend),

nhưng không làm phát sinh các đối tượng mới mà chỉ làm

CHƯƠNG 3: ĐỒ HỌA BITMAP

PTIT

Làm quen với môi trường làm việc trên

Adobe Photoshop

PTIT

Khái niệm về Adobe Photoshop

Adobe photoshop là một phần mềm chỉnh sửa ảnh kĩ thuật số, dùng cho việc trang trí, minh họa ứng dụng và phổ biết được áp dụng trong công nghệ thiết kế quảng cáo, tạo mẫu, thiết kế ảnh cho web

PTIT

LÀM QUEN VỚI GIAO DIỆN ADOBE PHOTOSHOP

PTIT

3.1.3 Giới thiệu thanh công cụ

Giới thiệu thanh công cụ

LÀM QUEN VỚI GIAO DIỆN ADOBE PHOTOSHOP

PTIT

LÀM QUEN VỚI GIAO DIỆN ADOBE PHOTOSHOP

PTIT

LÀM QUEN VỚI GIAO DIỆN ADOBE PHOTOSHOP

PTIT

LÀM QUEN VỚI GIAO DIỆN ADOBE PHOTOSHOP

PTIT

LÀM QUEN VỚI GIAO DIỆN ADOBE PHOTOSHOP

PTIT

GIỚI THIỆU CÁC NHÓM BẢNG

PTIT

THANH TÙY BIẾN CÔNG CỤ

PTIT

Vd: thanh tùy biến công cụ Brush

Hầu hết các công cụ đều có các tùy chọn được hiển thị trên thanh tùy biến công cụ

Để hiện thị thành tùy biến công cụ, Window > Show option hoặc chọn 1 công cụ bất kì trong thanh công cụ PTIT

MỘT SỐ THAO TÁC VỚI VÙNG LỰA CHỌN

PTIT

Khái niệm vùng chọn

Là tập hợp các điểm ảnh (pixels) chịu tác động của các thao tác đang thực hiện

Một số thao tác với vùng lựa chọn

Rectangular marquee tool: tạo vùng lựa chọn hình vuông

hoặc hình chữ nhật

Elliptical marquee tool: tạo vùng lựa chọn hình elip hoặc tròn

Single row marquee tool: tạo vùng lựa chọn là dòng 1 pixel Single column marquee tool: tạo vùng lựa chọn là cột 1 pixel

PTIT

Thanh tùy biến công cụ

A New selection: tạo vùng chọn mới

B Add to selection: thêm vùng chọn vào vùng chọn đang thao tác

C Subtract from selection: trừ bớt vùng chọn đang thao tác

D Intersect with selection: lấy phần giao nhau giữa 2 vùng

chọn

Một số thao tác với vùng lựa chọn

PTIT

Move Tool : di chuyển các đối tượng, lớp, vùng lựa chọn

Lasso tool: tạo vùng lựa chọn tự do theo ý muốn

Polygonal lasso tool: tạo vùng lựa chọn tùy ý bằng các đường

thằng liên tiếp nhau

Magnetic lasso tool: hỗ trợ tạo vùng lựa chọn với biên bám vào

biên của đối tượng cần chọn

Một số thao tác với vùng lựa chọn

PTIT

Magic wand tool: tạo vùng chọn có màu đồng nhất Quick selection tool: tự tìm nét để tạo vùng lựa chọn

Một số thao tác với vùng lựa chọn

PTIT

Magic Wand Tool cũng có các chức năng chính là:

•  New Selection,

•  Add to Selection,

•  Subtract from Selection,

•  Intersect with Selection

Tolerance: xác định khoảng màu cần chọn Giá

trị Tolerance thấp, vùng chọn gần trùng màu với vùng đã

nhấp chuột Ngược lại nếu giá trị này cao sẽ tạo vùng chọn rộng hơn, khoảng xác định màu có giá trị từ 0 -255

Một số thao tác với vùng lựa chọn

PTIT

MÀU SẮC

PTIT

MÀU SẮC

PTIT

MÀU SẮC

PTIT

LÀM VIỆC VỚI LAYER

PTIT

Khái quát về layer:

Trong photoshop, layer là tính năng quan trọng nhất vì nó cho phép chúng

ta làm việc trên một phần tử của một hình ảnh mà không làm ảnh hưởng đến hình ảnh khác

LÀM VIỆC VỚI LAYER

PTIT

1: Chế độ hòa trộn 2: Độ trong mờ của lớp 3: Độ trong mờ phần trong của lớp 4: Liên kết của lớp

5: Ẩn/ hiện lớp 6: Mặt nạ của lớp( layer mask) 7: Thêm dạng của lớp

8: Thêm mặt nạ cho lớp 9: Tạo mới 1 Fills hoặc Adjustment layer

10: Tạo nhóm lớp 11: Tạo lớp mới 12: Xóa bỏ layer

Layer palette

Làm việc với Layer

PTIT

Các chế độ hòa trộn của Photoshop được chia làm 5 nhóm

Darkening (làm tối hình ảnh hoặc dùng để sửa những bức

Normal: mặc định, đơn giản là layer này chồng lên layer kia,

cái nào ở trên sẽ che lấp hết các pixel của các layer dưới

Dissolve: chỉ hoạt động khi layer có những pixel bán trong

suốt, nghĩa là những pixel này vẫn có mà nhưng vẫn có thể nhìn xuyên qua những pixel đó Pixel bán trong suốt có được khi bàn dùng brush với hardness < 100% hoặc áp dụng bộ lọc blur hay độ trong mờ của layer dưới 100%

Làm việc với Layer

PTIT

Làm việc với công cụ tô vẽ

PTIT

Công cụ Airbrush (J)

Healing Brush: chỉnh sửa những vùng chưa hoàn thiện của một file ảnh, làm cho

chúng hòa lẫn vào vùng ảnh xung quanh một cách tự nhiên

Spot Healing Brush: tương tự với Healing Brush nhưng sẽ tự động lấy màu Patch Tool: chỉnh sửa những vùng chưa hoàn thiện của một file ảnh nhưng hoạt

động như một công cụ tạo vùng lựa chọn

Red Eye Tool: dùng để khắc phục lỗi mắt đỏ trong ảnh

Làm việc với công cụ tô vẽ

PTIT

Công cụ Pattern Stamp Tool

Clone Stamp Tool: lấy một phần ảnh từ vị trí này tô lên vị trí khác

Pattern Stamp Tool: cũng là một công cụ nhân bản nhưng không có thao tác lấy mẫu mà lấy trực tiếp pattern trên thanh tùy chọn để tô vào ảnh

Làm việc với công cụ tô vẽ

PTIT

Công cụ Eraser Tool

Eraser Tool: xóa pixel và phục hồi các phần của một hình ảnh vào một trạng thái

đã lưu trước đó

Background Eraser Tool: Công cụ này sẽ xóa pixels trên một layer, vùng xóa trở

thành trong suốt

Magic Eraser Tool: khi bạn kích chọn vào một layer bằng công cụ này, sẽ tự

động làm thay đổi tất cả các pixel có màu tương tự căn cứ vào thông số

Tolerance

Làm việc với công cụ tô vẽ

PTIT

Công cụ Pen Tool

Pen Tool: Tạo đường path bằng các điểm neo

Freeform Pen Tool: Tạo đường path theo ý thích

Add Anchor Point Tool: thêm điểm neo vào đường path Delete Anchor Point Tool: bỏ điểm neo khỏi đường path Convert Point Tool: tùy chỉnh điểm neo

Làm việc với công cụ tô vẽ

PTIT

Công cụ Crop Tool

Crop Tool: cắt tỉa hình ảnh theo ý muốn

Slice Tool: tạo ra các lát cắt cho phép bạn phân chia hình ảnh thành các thành

phần nhỏ hơn phù hợp với nhau

Slice Select Tool: cho phép bạn lựa chọn và thay đổi lát hiện có

Làm việc với công cụ tô vẽ

PTIT

Công cụ Paint Bucket Tool

Gradient Tool: tạo dải màu chuyển tiếp cho hình ảnh hoặc vùng được lựa chọn Paint Bucket Tool: là một dạng đơn giản của painting tool, dùng để tô một vùng

Công cụ Burn tool

Dodge Tool: làm sáng những pixel khi bạn vẽ

Burn Tool: làm tối những pixel khi bạn vẽ

Sponge Tool: làm tăng giảm độ bão hòa màu sponge

Làm việc với công cụ tô vẽ

PTIT

CÁC HIỆU ỨNG FILTERS

PTIT

Artistic: tạo một hiệu ứng hội họa hoặc đặc

biệt cho bức ảnh

Brush Strokes: tạo cho bức ảnh hiệu ứng khác

sử dụng bằng cách sử dụng các brush và hiệu ứng stroke khác nhau

Distort: bóp méo hình ảnh, tạo hiệu ứng 3D

hoặc định hình khác

Sketch: thêm texture cho bức ảnh, thường

được sử dụng trong việc tạo ra một bức tranh

vẽ tay

Stylize: tạo ra hiệu ứng tranh vẽ hoặc trường

phái ấn tượng lên một đối tượng bằng cách thay pixel và bằng cách tìm và nâng cao độ tương phản trong một hình ảnh

Texture: để mô phỏng sự độ sâu của quang

cảnh hoặc nội dung

Filter > Filter galery

CÁC HIỆU ỨNG FILTERS

PTIT

Blur Filters: làm mềm vùng được chọn hoặc

toàn bộ hình ảnh, có ích cho việc chỉnh sửa ảnh

Noise Filters: thêm hoặc loại bỏ noise, hoặc

điểm ảnh với mức độ màu sắc phân phôi ngẫu nhiên

Pixelate Filters: kết tụ điểm ảnh của các giá

trị màu sắc tương tự

Render Filters: tạo ra hình dạng 3D, pattern

mây, khúc xạ, và phản xạ ánh sáng được mô phỏng trong một hình ảnh

Sharpen Filters: tập chung vào ảnh mờ bằng

cách tăng độ tương phản của pixel gần kề

CÁC HIỆU ỨNG FILTERS

PTIT