TÀI LIỆU HƯỚNG DẪN GIẢNG DẠY THIẾT KẾ WEB VỚI PHOTOSHOP ppt

TRUNG TÂM TIN HỌC – ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM
227 Nguyễn Văn Cừ - Quận 5- Tp.Hồ Chí Minh
Tel: 8351056 – Fax 8324466 – Email:
TÀI LIỆU HƯỚNG DẪN
GIẢNG DẠY
CHƯƠNG TRÌNH KỸ
THUẬT VIÊN
NGÀNH CÔNG NGHỆ
WEB
Học phần II
THIẾT KẾ WEB VỚI PHOTOSHOP
Mã tài liệu: DT_NCM_ĐH_TLGD_<THIẾT KẾ WEB VỚI PHOTOSHOP>
Phiên bản 1.0 – Tháng 09/2006
Tài liệu hướng dẫn giảng dạy
MỤC LỤC
TỔNG QUAN VỀ PHOTOSHOP CS 9
I.Cài đặt chương trình Photoshop 10
I.1.Độ phân giải màn hình 10
I.2.Ảnh vectơ 11
I.3.Cấu hình cho Photoshop 11
I.4.Thanh tiêu đề 11
I.5.Thanh Menu Bar 11
I.6.Thanh Option (Menu Window Option) 12
I.7.Thanh công cụ Toolbox 12
II.Chế độ xem ảnh 13
III.Chế độ cuộn hình ảnh 13
IV.Làm việc với cửa sổ Palette 13
V.Quản lý File 14
V.1.Tạo mới một tập tin 14
V.2.Lưu tập tin 15
V.3.Mở tập tin 16

V.4.Đóng tập tin 16
VI.Tổng quan ảnh trong trang Web 16
VI.1.Kiểu tập tin ảnh: 16
VI.2.Thiết kế thành công ảnh cho trang web 17
VI.3.Kích thước một số ảnh 17
KHÁI NIỆM VỀ VÙNG CHỌN 18
I.Sử dụng thước đo 18
II.Công cụ tạo vùng chọn 19
II.1.Bộ công cụ Marquee 19
II.1.1.Rectangular và Ellip Marquee 19
II.1.2.Single row marquee: 20
II.1.3.Single column marquee: 20
II.2.Bộ công cụ Lasso 20
II.2.1.Lasso: 20
II.2.2.Polygon Lasso: 20
II.2.3.Magnetic Lasso: 21
II.3.Magic Wand 21
II.4.Crop 21
II.5.Công cụ Move 22
III.Lệnh tạo viền cho vùng chọn 22
IV.Một số lệnh liên quan với vùng chọn (Menu select) 23
V.Bảng biến đổi đối tượng 25
CÔNG CỤ CỌ BRUSH – MÀU SẮC – HIỆU CHỈNH MÀU 27
I.Hộp thoại cọ (Brush) 28
I.1.Các dạng cọ mặc định 28
I.2.Thư viện lưu trữ các cọ vẽ 28
Học phần II – Thiết kế Web với Photoshop Trang 1/113
Tài liệu hướng dẫn giảng dạy
I.3.Tự tạo nét cọ mới: 28
I.4.Các lệnh trong Menu Brush Palette 29

II.Nhóm cọ Brush 31
II.1.Brush () 31
II.2.Pencil () 31
II.3.Eraser 31
II.3.1.Eraser 32
II.3.2.Background Eraser Tool: 32
II.3.3.Background Swatch: 32
II.3.4.Magic Eraser Tool: 32
II.4.History : 32
II.5.Art History 33
III.Các phương pháp tô màu 33
III.1.Làm việc với Bảng Color palette 34
III.2.Chọn lựa màu foreground, Background 34
III.3.Các công cụ tô màu 34
III.3.1.Paint Bucket () 34
III.3.2.Gradient () 35
III.3.3.Eyedropper () 37
III.3.4.Color Sampler Tool : 37
III.3.5.Measure () 38
III.4.Tô màu theo mẫu tô Pattern 38
III.4.1.Cách tạo mẫu tô Pattern 38
III.4.2.Tô màu theo mẫu tô 38
IV.Các lệnh liên quan để hiệu chỉnh 39
IV.1.Lệnh Levels 39
IV.2.Lệnh Auto Level 40
IV.3.Lệnh Auto Contrast 40
IV.4.Lệnh Curves 40
IV.5.Lệnh Brightness\ Contrast 41
IV.6.Lệnh Color Balance 41
IV.7.Lệnh Hue\Saturation 42

IV.8.Auto color: 42
IV.9.Lệnh Desaturate 42
IV.10.Lệnh Replace Color 42
IV.11.Lệnh Selective Color 43
IV.12.Lệnh Channel Mixer 44
IV.13.Gradient Map: 44
IV.14.Lệnh Invert 45
IV.15.Lệnh Equalize 45
IV.16.Lệnh Variations 46
V. Nhóm công cụ chỉnh sửa hình ảnh 46
V.1.Clone Stamp () 46
V.2.Healing Brush (): 47
V.3.Patch (): 47
V.4.Blur () 47
V.5.Sharpen () 48
V.6.Smudge () 48
V.7.Dodge () 48
V.8.Burn (): 49
V.9.Sponge () 49
LAYERS – LAYERMASK - LAYERSTYLES 51
Học phần II – Thiết kế Web với Photoshop Trang 1/113
Tài liệu hướng dẫn giảng dạy
I.Lớp (Layer) 52
I.1.Các chế độ hòa trộn lớp (Blending Mode) 53
I.1.1.Normal 53
I.1.2.Dissolve 53
I.1.3.Darken 54
I.1.4.Multiply 54
I.1.5.Color Burn 54
I.1.6.Linear Burn 54

I.1.7.Lighten 54
I.1.8.Screen 54
I.1.9.Color Dodge 54
I.1.10.Linear Dodge 54
I.1.11.Overlay 54
I.1.12.Soft Light 54
I.1.13.Hard Light 54
I.1.14.Vivid Light 54
I.1.15.Linear Light 54
I.1.16.Pin Light 54
I.1.17.Difference 54
I.1.18.Exclusion 54
I.1.19.Hue 55
I.1.20.Saturation 55
I.1.21.Color 55
I.1.22.Luminosity 55
I.2.Các phương pháp chọn Layer 55
I.3.Sắp xếp thứ tự trên dưới của các Layer 55
I.3.1.Cách 1: 55
I.3.2.Cách 2: 55
I.4.Layer Properties 55
I.5.Canh hàng giữa các Layers 55
I.6.Phân phối đều khoảng cách giữa các Layers (Distribute): 56
I.7.Các trường hợp phát sinh Layers 56
I.8.Các chức năng của menu Palete Layer 57
I.9.Layer style 57
I.9.1.Drop shadow 58
I.9.2.Inner shadow 58
I.9.3.Outer Glow 59
I.9.4.Inner Glow 60

I.9.5.Bevel and Emboss 60
I.9.6.Satin: 62
I.9.7.Color Overlay: 63
I.9.8.Gradient Overlay: 63
I.9.9.Pattern Overlay: 65
I.9.10.Stroke 65
II.MỘT SỐ HIỆU ỨNG CHỮ ĐẶC BIỆT 67
II.1.Tạo bộ nút bằng Layerstyles 68
II.1.1.Bước 1: 68
II.1.2.Bước 2: 68
II.1.3.Bước 3: 68
II.1.4.Bước 4: 69
III.Layer mask (mặt nạ lớp) 70
Học phần II – Thiết kế Web với Photoshop Trang 1/113
Tài liệu hướng dẫn giảng dạy
III.1.1.Cách 1: 70
III.1.2.Cách 2: 70
TEXT – WRAPED TEXT – PALETTE CHARACTER AND PARAGRAPH 73
I.Text (văn bản) 74
I.1.Horizontal Type Tool: 74
I.2.Vertical Type Tool: 74
I.3.Horizontal Type Mask Tool: 76
I.4.Vertical Type Mask Tool: 76
II.CÁC LOẠI CHỮ UỐN CONG 76
II.1.Uốn cong chữ 76
II.2.Các tùy chọn trong hộp thoại 76
II.3.Gỡ bỏ Uốn chữ 77
SỬ DỤNG CÔNG CỤ PEN – NHÓM CÔNG CỤ VẼ THEO HÌNH DẠNG - FILTER 78
I. Công cụ vẽ Path 79
I.1.Khái niệm về Path 79

I.2.Công cụ Pen: 79
I.2.1.Pen Tool: 79
I.2.2.Freeform Pen Tool: 83
I.2.3.Add Anchor Point Tool: 83
I.2.4.Delete Anchor Point Tool: 83
I.2.5.Convert Point Tool: 84
I.2.6.Công cụ Path Selection Tool (A): 84
I.2.7.Công cụ Direct Selection Tool (A): 84
I.3.Làm việc với Path Palette 84
I.3.1.Rectangle 85
I.3.2.Rounded Rectangle 85
I.3.3.Ellipse 85
I.3.4.Polygon 85
I.3.5.Line86
I.3.6.Custom Shape 86
II.HIỆU ỨNG ĐẶC BIỆT (FILTER) 86
II.1.NHÓM BLUR 86
II.1.1.Blur 86
II.1.2.Blur More 86
II.1.3.Gaussian Blur 86
II.1.4.Motion Blur 87
II.1.5.Radial Blur 87
II.1.6.Smart Blur 88
II.2.NHÓM DISTORT 88
II.2.1.Diffuse Glow 89
II.2.2.Displace 89
II.2.3.Glass 89
II.2.4.Ocean Ripple 90
II.2.5.Pinch 90
II.2.6.Polar Coordinates 90

II.2.7.Ripple 91
II.2.8.Shear 91
II.2.9.Spherize 91
Học phần II – Thiết kế Web với Photoshop Trang 1/113
Tài liệu hướng dẫn giảng dạy
II.2.10.Twirl 92
II.2.11.Wave 92
II.2.12.Zigzag 92
II.3.NHÓM TEXTURE 93
II.3.1.Craquelure 93
II.3.2.Grain 93
II.3.3.Mosaic Tiles 94
II.3.4.Patch Work 94
II.3.5.Stained Glass 94
II.3.6.Texturizer 95
II.4.NHÓM RENDER 95
II.4.1.3D Transform 95
II.4.2.Clouds 95
II.4.3.Difference Clouds 95
II.4.4.Lens Flare 95
II.4.5.Lighting Effects 96
TỐI ƯU HÓA HÌNH ẢNH CHO TRANG WEB – SỬ DỤNG SLICE 99
I.Giới thiệu 99
II.Các thao tác tạo hoạt hình 99
II.1.1.Bước 1: 99
II.1.2.Bước 2: 99
III.Tween các frame 100
TẠO ẢNH ĐỘNG BẰNG IMAGEREADY – BÀI TẬP TỔNG HỢP 104
I.Đặc điểm 104
I.1.Màu an toàn trình duyệt: 104

I.2.Độ phân giải màn hình 104
I.3.Gamma 104
II.Slice 104
II.1.Tìm hiểu về Slice: 104
II.2.Tạo một User Slice 105
II.3.Tạo các Slice từ lớp (Layer): 105
II.4.Chuyển đổi Auto slice thành user slice: 105
III.Chuẩn bị ảnh cho Web 106
III.1.Tối ưu hóa ảnh cho Web: 106
III.2.Tối ưu dạng GIF theo màu 107
III.3.Tối ưu dạng PNG-24 107
III.4.Tối ưu dạng JPEG 108
III.5.Nhập tên file và vị trí cần lưu file 108
III.5.1.Chọn một tùy chọn Format: 108
III.5.2.Cài đặt các tùy chọn xuất: 109
III.6.Các trang Web về HTML và Templates 109
III.6.1.Tham khảo các trang Web 109
III.6.2.Tham khảo các trang Web 110
III.7.BÀI TẬP THAM KHẢO 112
III.7.1.Bài tập 1: 112
III.7.2.Bước 1: tạo phần baner 112
III.7.3.Bước 2: tạo logo trung tâm tin học 112
III.7.4.Bước 3: tạo bộ nút trung tâm tin học 112
Học phần II – Thiết kế Web với Photoshop Trang 1/113
Tài liệu hướng dẫn giảng dạy
III.7.5.Bước 4: tạo khung nền nhập văn bản và sắp xếp bốc cục cho trang web 112
III.7.6.Bài tập 2: 113
Học phần II – Thiết kế Web với Photoshop Trang 1/113
Tài liệu hướng dẫn giảng dạy
GIỚI THIỆU

Sau khi hoàn thành khóa học này, học viên sẽ có các khả năng:
 Nắm vững cách tạo bố cục, hình ảnh cho trang Web
 Thiết kế được giao diện trang Web
 Tối ưu hóa ảnh cho Web
 Tạo các diễn hoạt để làm quảng cáo trên Web
Với thời lượng là 15 tiết LT và 27 tiết TH được phân bổ như sau:
STT Bài học Số tiết LT Số tiết TH
1 Giới thiệu – Phân biệt ảnh cho Web 1 1
2 Tools (Selection) 2 2
3 Công cụ cọ Brush – Màu sắc – Hiệu chỉnh màu 3 5
4 Layers – LayerMask - LayerStyles 2 6
5 Text – Wraped – Palette Character và Paragraph 2 3
6
Sử dụng công cụ Pen – Nhóm công cụ vẽ theo hình dạng –
Filter (Blur hoặc Distort, Texture)
2 3
7 Tối ưu hóa ảnh cho Web – Sử dụng Slice 1 2
8 Tạo ảnh động bằng ImageReady – Bài tập tổng hợp 2 5
Tổng số tiết: 15 27
Học phần II – Thiết kế Web với Photoshop Trang 1/113
Tài liệu hướng dẫn giảng dạy
GIÁO TRÌNH LÝ THUYẾT
THIẾT KẾ WEB VỚI PHOTOSHOP tác giả phòng chuyên môn
TÀI LIỆU THAM KHẢO
Trong quá trình biên soạn tài liệu hướng dẫn giảng dạy và giáo trình, chúng tôi có tham khảo một số tài liệu
sau:
1. Tài liệu 1
2. Tài liệu 2
3. Tài liệu 3
4. Tài liệu 4

5. …
Học phần II – Thiết kế Web với Photoshop Trang 1/113
Tài liệu hướng dẫn giảng dạy
HƯỚNG DẪN PHẦN LÝ THUYẾT
Bài 1
TỔNG QUAN VỀ PHOTOSHOP CS
Tóm tắt
Lý thuyết 1 tiết - Thực hành 1 tiết
Mục tiêu Các mục chính Bài tập
Trình bày các kiến thực cơ bản về xử lý
ảnh cho Web và việc tối ưu hóa hình ảnh
cho Web. Học viên được cung cấp các
kiến thức về thết kế bố cục cho trang
Web …
Cài đặt chương trình Photoshop
Chế độ xem ảnh
Chế độ cuộn hình ảnh
Làm việc với cửa sổ Palette
Quản lý file
Học phần II – Thiết kế Web với Photoshop Trang 1/113
Tài liệu hướng dẫn giảng dạy
Adobe Photoshop CS là một chương trình xử lý ảnh cực mạnh, các công cụ chỉnh sửa của nó đã trở thành
chuyên nghiệp giúp cho các nhà thiết kế web tạo những ứng dụng cho web. Đồng hành với Adobe photoshop
CS là chương trình Adobe ImageReady cung cấp các công cụ cho web như: tối ưu và xem ảnh trước, xử lý
hàng loạt ảnh đồng thời bằng cách drag - thả từ bảng Action, tạo các file GIF hoạt hình. Photoshop và
ImageReady kết hợp với nhau sẽ tạo ra môi trường hoàn hảo cho việc thiết kế đồ họa cho Web.
I. Cài đặt chương trình Photoshop
Muốn cài đặt chương trình Photoshop cần mua đĩa CD chứa chương trình Photoshop theo các bước sau:
Start\ Run chọn ổ đĩa CD E:\Setup.exe (Photoshop)  OK (có những đĩa CD có Auto Run thì không cần thao
tác này). Xem thông báo cài đặt về đường dẫn, số Serial Number.

Đối với những hiệu ứng phải cài đặt Photoshop trước. Khi cài đặt Effect, phải đặt ở đường dẫn C:\Adobe\
Photoshop CS\ Plug-Ins\ Filter.
Sau khi cài đặt xong, chương trình được lưu trong máy.
Khởi động chương trình: Start -> Programs -> Adobe Photoshop CS (hoặc double-click vào biểu tượng
Photoshop CS trên màn hình).
I.1. Độ phân giải màn hình
Đó là số lượng điểm ảnh hiển thị trong một đơn vị chiều dài của màn hình, thường được tính bằng dotperinch
(dpi). Độ phân giải màn hình phụ thuộc vào kích thước màn hình và số pixel phân bố trên màn hình. Độ phân
giải tiêu biểu của một màn hình PC là 96 dpi, còn màn hình Max OS là 72 dpi.
Photoshop chuyển đổi trực tiếp số pixel của tập tin ảnh ra số pixel trên màn hình, do đó khi tập ảnh có độ phân
giải cao hơn độ phân giải của màn hình thì số pixel của tập ảnh lớn hơn số pixel của màn hình, cho nên màn
hình sẽ hiển thị tập ảnh đó lớn hơn kích thước của nó.
Ví dụ:
Khi hiển thị tập ảnh 1x1 inch có độ phân giải là 144 ppi trên màn hình 72 dpi thì nó sẽ xuất hiện trên màn
hình với kích cỡ là 2x2 inch. Bởi vì màn hình chỉ có thể hiển thị 72dpi trong chiều dài một inch nên nó phải sử
dụng đúng hai inch để hiển thị 144 dpi.
Học phần II – Thiết kế Web với Photoshop Trang 1/113
Tài liệu hướng dẫn giảng dạy
I.2. Ảnh vectơ
Các ảnh đồ họa vector được tạo ra bởi các nét thẳng và các nét cong điều chỉnh bằng các vector (toán học).
Các vector diễn tả hình ảnh bằng hình học, khi di chuyển phóng to thu nhỏ hoặc thay đổi màu sắc không làm
mất đi nét vẽ trong hình ảnh.
Các tập ảnh đồ họa vector thì không phụ thuộc độ phân giải nghĩa là chúng có thể chỉnh sửa kích cỡ khi hiển
thị màn hình. Các ảnh vector được dùng để thiết kế các đường nét sinh động được in ra và hiển thị ở độ phân
giải bất kỳ và không bị hư hao về đường nét, đó là sự chọn lựa tốt nhất cho việc thiết kế ký tự.
I.3. Cấu hình cho Photoshop
Photoshop cần cấu hình máy tính đủ mạnh để xử lý những hình ảnh ở độ phân giải cao. Cấu hình tối thiểu:
 CPU: Pentium III
 RAM: 256 MB
 Card màn hình: 24 bit

 Màn hình: 15 - 21 inch
 Ổ đĩa cứng: 40GB
 Ổ đĩa CD – ROM
Giao diện photoshop
I.4. Thanh tiêu đề
Là thanh thứ nhất chứa tên chương trình (Application Name Adobe Photoshop)
 Cực tiểu (Minimize): thu màn hình nhỏ lại trong biểu tượng Adobe Photoshop
 Cực đại (Maximize)
 Đóng chương trình (Close)
I.5. Thanh Menu Bar
Học phần II – Thiết kế Web với Photoshop Trang 1/113
Tài liệu hướng dẫn giảng dạy
Thanh trình đơn (Menu bar) chứa các trình đơn dropdown (sổ xuống) là thanh thứ hai trên màn hình chứa các
trình đơn trong Photoshop.
I.6. Thanh Option (Menu Window Option)
Là thanh thứ ba luôn luôn thay đổi lệnh mỗi khi thay đổi việc chọn công cụ. Thanh này chứa những lệnh hỗ trợ
cho công cụ làm việc.
Ví dụ:
Khi chọn công cụ Rectangular Marquee thì trên thanh này xuất hiện Option Rectangular Marquee.
I.7. Thanh công cụ Toolbox
Là thanh chứa các công cụ trong Photoshop, xuất hiện ở bên trái màn hình. Một số công cụ trong hộp này có
các tùy chọn xuất hiện trên thanh Options. Những công cụ này giúp bạn tạo vùng chọn, nhập văn bản, tô vẽ,
hiệu chỉnh, di chuyển chú thích và xem hình ảnh. Số còn lại cho phép thay đổi màu tiền cảnh (foreground),
màu nền (Background) và sự chuyển đổi qua lại giữa chương trình Photoshop và ImageReady là một chương
trình hỗ trợ cho việc thiết kế ảnh động.
Để chọn công cụ trong Photoshop ta có thể nhấp chọn trực tiếp công cụ đó trên thanh công cụ hoặc có thể
chọn bằng phím tắt của công cụ đó trên bàn phím. Để hiển thị tên và phím tắt của bất kỳ công cụ nào ta chỉ cần
đặt trỏ chuột lên trên công cụ đó cho đến khi tên phím tắt đó hiển thị.
Một số công cụ trong thanh công cụ hiển thị hình tam giác nhỏ ở góc phải bên dưới để báo cho biết nó có chứa
thêm vài công cụ ẩn. Để chọn các công cụ ẩn này có các cách sau:

Học phần II – Thiết kế Web với Photoshop Trang 1/113
Tài liệu hướng dẫn giảng dạy
 Nhấn giữ trỏ chuột vào công cụ có chứa công cụ ẩn kéo rê chuột tới công cụ cần chọn và thả
chuột. Nhấn giữ Alt và nhấp vào công cụ cần chọn trong thanh công cụ. Mỗi lần nhấp công cụ
theo trong chuỗi công cụ ẩn sẽ được chọn.
 Nhấn giữ Shift đồng thời nhấn phím tắt của công cụ đó và lặp lại cho đến khi công cụ bạn muốn
chọn.
II. Chế độ xem ảnh
Photoshop cho phép bạn xem hình ảnh từ 0,15% đến 1.600%
Sử dụng phím tắt:
 Để phóng to: Ctrl + (phím +)
 Để thu nhỏ: Ctrl + (phím -)
 Nhấn Ctrl + Alt + (phím +) hoặc (phím -) để phóng to thu nhỏ cả hình ảnh và cửa sổ chứa hình
ảnh đó.
 Nhấn Ctrl + Alt + (phím số 0) để đưa hình ảnh về tỉ lệ 100%.
Sử dụng công cụ zoom: Để xác định chính xác phần hình ảnh mà muốn phóng to hoặc thu nhỏ: Chọn công cụ
Zoom (+) sau đó đặt trỏ công cụ lên trên phần hình ảnh đó và nhấp chuột. Hoặc Ctrl + SpaceBar và drag
mouse để phóng to một khu vực.
Sử dụng menu lệnh: Nhấp chọn Menu Window > Navigator. Bấm kéo thanh trượt qua trái, phải hoặc nhập
thông số cụ thể trong ô giá trị.
III. Chế độ cuộn hình ảnh
Để cuộn xem hình ảnh mà kích thước hình ảnh lớn hơn cửa sổ hiển thị nó: dùng công cụ Hand (H).
Khi đang kích hoạt bất kỳ công cụ nào mà muốn trở về công cụ Hand: ta nhấn phím H hoặc thanh Space bar
trên bàn phím.
IV. Làm việc với cửa sổ Palette
Hiển thị các Palette: Menu Window\ tên Palette
Giấu các Palette: Menu Window \tên Palette
Để mở hoặc giấu các thanh Palette và công cụ: Nhấn phím Tab
Học phần II – Thiết kế Web với Photoshop Trang 1/113
Tài liệu hướng dẫn giảng dạy

Để giấu hoặc mở tất cả các thanh Palette (không ảnh hưởng tới hộp công cụ: Nhấn Shift + Tab)
Để di chuyển một thanh Palette nào đó ra khỏi nhóm (hoặc trở lại nhóm đó): nhấp chuột vào palette và kéo
thanh Palette đó ra khỏi nhóm (hoặc kéo vào trong nhóm).
V. Quản lý File
V.1. Tạo mới một tập tin
Chọn File\ New: tạo tập tin mới.
Hộp thoại New xuất hiện:
Ta nên xác lập các giá trị cho tập tin mới như sau:
 Name : tên tập tin
 Width : chiều rộng (đơn vị tính)
Học phần II – Thiết kế Web với Photoshop Trang 1/113
Tài liệu hướng dẫn giảng dạy
 Height : chiều cao (đơn vị tính)
 Resolution : độ phân giải (pixel\inch)
 Mode : chế độ màu
 Grayscale : thang độ xám
 RGB color : hệ 3 màu
 CMYK : hệ 4 màu
 Contents : nền của tập tin
 White : màu trắng
 Background Color : nền mang màu background hiện hành
 Transparent: nền trong suốt.
 Image size : kích thước ảnh
 Save Present :Tạo lưu kích thước đã khai báo trong bảng Document Present
V.2. Lưu tập tin
Chọn File > Save lưu tập tin đầu tiên (hoặc save as với một phần mở rộng khác, một nơi khác).
Xác định đường dẫn để lưu giữ tập tin
 Save in: chọn ổ đĩa trong vùng nhãn xuất hiện nhiều thư mục bên dưới.
 File name: đặt tên tập tin
 Format: chọn đuôi file photoshop *.PSD

 Chọn nút Save
Ta nên lưu thường xuyên trong suốt quá trình làm việc để tránh tình trạng hỏng tập tin khi có sự cố bất ngờ
xảy ra như treo máy, cúp điện…
Học phần II – Thiết kế Web với Photoshop Trang 1/113
Tài liệu hướng dẫn giảng dạy
Chọn File > Save for web: Lưu hình ảnh với chức năng tối ưu hóa sử dụng cho Web (VD: *.gif, *.jpg, *.png,
…)
Chọn File > Open: cho phép mở tập tin hình ảnh bất kỳ
V.3. Mở tập tin
 Look in: chọn thư mục, ổ đĩa
 File name: tên tập tin muốn mở
 File of Type: kiểu tập tin mở rộng
 Open: để mở tập tin, tập tin hình ảnh sẽ hiện trên màn hình Photoshop.
 Open As: Chỉ cho phép mở một tập tin dạng *.PSD
V.4. Đóng tập tin
 Chọn File> Close: đóng tập tin file
 Chọn File> Revert: trả lại tập tin đã lưu lần cuối cùng.
 Chọn File> Exit: thoát khỏi chương trình Photoshop.
VI. Tổng quan ảnh trong trang Web
Ảnh là một thành phần giúp thêm phần hấp dẫn, đầy màu sắc cho trang Web. Ảnh được sử dụng nhiều trong
trang trí, bố cục trang. Ngoài ra một số ảnh rất quan trọng như Logo, Banner, ảnh nút liên kết… Một ảnh minh
họa phù hợp có thể thay thế cho những dòng văn bản giải thích, mô tả dài dòng.
Ảnh cần nhiều thời gian hơn khi hiển thị trên trình duyệt, nên khi quyết định chèn ảnh vào trang, ảnh đó phải
mang một nội dung, một ý nghiã nhất định. Không tự tiện chèn ảnh, cố làm đầy trang bằng những ảnh to quá
cỡ.
VI.1. Kiểu tập tin ảnh:
Hiện nay, các dạng tập tin GIF, JPG, PNG được hổ trợ đầy đủ bởi hầu hết các trình duyệt
Dạng thức GIF (Graphic Interchange Format): Là dạng thường được sử dụng nhất với nhiều ưu điểm, như ảnh
trong suốt, số màu đếm được, kích thước tập tin nhỏ…và còn có thể là ảnh động .GIF. Nhưng số màu tối đa
256 màu.

Dạng thức JPEG (Joint Photographic Experts Group): Là ảnh chụp cao cấp với số màu lên đến 16 triệu màu.
Tập tin JPG (dạng thức JPEG) thường có số bytes lớn so tập tin dạng.GIF. Nhưng tập tin JPG có khả năng tự
nén dữ liệu, bạn có quyền ấn định mức độ nén và kiểm soát mức độ trung thực của ảnh.
Học phần II – Thiết kế Web với Photoshop Trang 1/113
Tài liệu hướng dẫn giảng dạy
Dạng thức PNG (Portable Network Group): Là dạng thay thế cho GIF của Macromedia Fireworks, nó hổ trợ
bảng màu Index, Grayscale, RGB và kênh Alpha điều khiển độ trong suốt ảnh.
VI.2. Thiết kế thành công ảnh cho trang web
Trên trình duyệt, tốc độ hiển thị ảnh tùy thuộc vào số kilobyte (Kb) của tập tin ảnh. Nêú muốn thiết kế thành
công thì bạn cố gắng tìm đủ mọi cách giảm số Kb của ảnh xuống thấp nhất mà nó vẫn còn trung thực và chấp
nhận được.
Sau đây là 4 yếu tố, bạn cần quan tâm:
 Dạng thức Format:
Nên chọn GIF, JPG, PNG là tùy thuộc vào kinh nghiệm, ví dụ ảnh Logo không quá 4 màu chọn .GIF được ưu
tiên, ảnh chụp JPG nên nén mức độ nào là phù hợp. Ảnh PNG cần lưu hiệu ứng đi kèm, số lớp, hệ màu…hay
không. Hãy tích lũy kinh nghiệm bằng cách xuất ảnh theo các dạng thức khác nhau, rồi đánh giá cân bằng giữa
chất lượng ảnh và kích thước tập tin.
 Kích thước Size:
Kích thước ảnh tỉ lệ thuận với số Kb cần lưu trữ. Không phóng lớn, thu nhỏ ảnh trong thiết kế, mà nên chọn
hoặc phải xử lý để ảnh có kích thước chính xác như mong muốn. Với những Website chuyên nghiệp, để quảng
cáo một số sản phẩm cần ảnh rõ ràng, chất lượng cao, họ luôn tạo Album ảnh đại diện có kích thước nhỏ, mỗi
ảnh liên kết một trang chứa ảnh gốc đúng kích thước.
 Độ phân giải Resolution:
Trang Web được xem trên màn hình máy tính, mà độ phân giải màn hình là 72dpi, nên ảnh thích hợp nhất là
72 dpi. Nếu ảnh quá nhỏ có thể tăng độ phân giải lên 96 dpi, nếu nền thuần màu ảnh trang trí…có thể giảm độ
phân giải xuống 36 hoặc 24 dpi
 Số màu trong ảnh Color depth:
Với những ảnh có số màu đếm được, thì hãy cố giảm từ 256 màu xuống 128, 64, 16, 8, 4 màu, giảm cho tới
khi độ trung thực ảnh vẫn gần với màu ảnh gốc.
VI.3. Kích thước một số ảnh

Tùy thuộc vào màn hình hiển thị, loại ảnh, ảnh nền… mà bạn chọn hoặc xử lý hình ảnh để có kích thước phù
hợp.
Màn hình hiển thị: Một số kích thước màn hình
 Ngang 640 pixels x cao 480 pixels
 Ngang 800 pixels x cao 600 pixels
 Ngang 1024 pixels x cao 768 pixels
Kích thước các thành phần trang web:
 Logo: Biểu tượng công ty, cơ quan thường nằm góc trên trái màn hình, tùy theo mẫu có kích
thước giao động 72 pixel, 100 pixel, 120 pixel
 Banner: Cao: 72, 100, 120 pixel - Ngang : 480, 600, 1024 pixel
 Nút: Ngang: 120, 130, 140 pixel - Cao: 19, 22, 25 pixel
 Icon: Nút chức năng 30 pixel, 50 pixel, 64 pixel
 Picture: Tùy thuộc vào chủ đề, minh họa, có kích cở riêng.
 Mẫu nền: 50 pixel x 50 pixel
Học phần II – Thiết kế Web với Photoshop Trang 1/113
Tài liệu hướng dẫn giảng dạy
 Bờ lề: 1024 pixel x 30 pixel
Học phần II – Thiết kế Web với Photoshop Trang 1/113
Tài liệu hướng dẫn giảng dạy
Bài 2
KHÁI NIỆM VỀ VÙNG CHỌN
Tóm tắt
Lý thuyết 2 tiết - Thực hành 2 tiết
Mục tiêu Các mục chính Bài tập
Trình bày các kiến thực cơ bản về công
cụ giúp học viên làm quen và thực hiện
các chức năng lắp ghép. …
Sử dụng thước đo
Công cụ tạo vùng chọn
Lệnh tạo viền cho vùng chọn

Một số lệnh liên quan với vùng chọn
Bảng biến đổi đối tượng

Khi tiến hành hiệu chỉnh hình ảnh trên Photoshop bước khởi đầu thường phải tạo vùng chọn cho hình ảnh, có
vùng chọn ta mới tiến hành chỉnh sửa màu sắc, tạo hiệu ứng cùng với các thao tác liên quan. Như vậy cách tạo
vùng chọn như thế nào cho phù hợp hiệu chỉnh, ta nên tìm hiểu cụ thể nhóm công cụ tạo vùng chọn và sử dụng
thước đo dưới đây. (Nếu không chọn vùng chọn để thao tác thì khi hiệu chỉnh sẽ tác động toàn bộ hình ảnh).
I. Sử dụng thước đo
Photoshop có thể hiển thị hai thanh thước, thước phía trên và bên trái cửa sổ tài liệu.
 Menu View\ Rulers: ẩn\ hiện thước đo (Ctrl + R)
 Menu Edit\ Preferences\ chọn Unit & Rulers (hoặc double click vào thanh thước) để thay đổi đơn
vị đo từ inch sang cm (hoặc chọn đơn vị khác)
 Ruler: chọn đơn vị (cm)
 Type: đơn vị cho chữ (point)
 Column Size với Width: độ rộng, Gutter: lề
Cách thay đổi vị trí Zero (0) của thước đo: Đưa chuột đến ô giao tiếp (góc trên bên trái) của hai cây thước,
nhấn giữ nút trái chuột và rê chuột đến vị trí bất kỳ trong tập ảnh (hai đường kẻ vuông góc xuất hiện) rồi nhả
chuột ra để tạo hai điểm gốc (giá trị 0) mới trên thanh thước.
Học phần II - Photoshop Trang 26/113
Tài liệu hướng dẫn giảng dạy
II. Công cụ tạo vùng chọn
II.1. Bộ công cụ Marquee
II.1.1. Rectangular và Ellip Marquee
Chọn vùng hình ảnh theo dạng hình chữ nhật và hình ellip hay hình tròn.
Thao tác thực hiện: Chọn công cụ Marquee kích xác định một điểm trên ảnh và rê chuột, kết thúc bằng cách
nhả chuột tạo được một vùng chọn hình ellip hoặc hình chữ nhật.
 Kết hợp giữ phím shift trên bàn phím trong khi thao tác dùng để chọn một vùng chọn hình tròn,
hình vuông.
 Kết hợp giữ phím Alt trong khi thao tác để tạo vùng chọn từ tâm.
Kết quả: một khung viền chọn nhấp nháy

Mọi thao tác xử lý lúc này chỉ có tác dụng bên trong khung viền đó.

Thuộc tính công cụ: Ngoài ra, ta còn có thể cộng thêm vùng chọn bằng phím Shift và trừ bớt vùng chọn bằng
phím Alt trong khi thao tác.
 Normal: kéo chuột theo đường chéo để tạo vùng chọn bình thường
Học phần II - Photoshop Trang 26/113
Tài liệu hướng dẫn giảng dạy

 Fixed Aspect Ratio: tạo vùng chọn theo tỉ lệ
 Fixed Size: tạo vùng chọn theo kích thước (ví dụ W =140 px H =25 px)

II.1.2. Single row marquee:
Tạo vùng chọn một dòng ngang bằng một pixel.
Điều kiện: Feather = 0
II.1.3. Single column marquee:
Tạo vùng chọn một cột dọc bằng một pixel.
Điều kiện: Feather = 0
II.2. Bộ công cụ Lasso
II.2.1. Lasso:
Lasso: Là công cụ chọn vùng tự do.
Thao tác thực hiện:
 Chọn công cụ Lasso
 Kích và kéo rê chuột sao cho đường viền chọn chạy theo chu vi của một đối tượng. Muốn kết thúc
ta chỉ cần nhả chuột.
 Kết quả: đường viền chọn bao quanh đối tượng theo đường chu vi.
II.2.2. Polygon Lasso:
Polygon Lasso: Là công cụ chọn vùng chọn dạng đa giác
Thao tác thực hiện:
 Chọn công Polygon Lasso
 Ta kích từng điểm để tạo khung viền chọn trên hình ảnh. Kích lại điểm đầu tiên hoặc kích kép để

kết thúc.
 Xóa từng điểm chọn sai bằng phím Delete
Học phần II - Photoshop Trang 26/113
Tài liệu hướng dẫn giảng dạy
II.2.3. Magnetic Lasso:
Magnetic Lasso: Là công cụ Lasso từ tính, vùng chọn luôn bám vào biên của hình ảnh thích hợp cho những
đối tượng có độ tương phản cao về màu sắc giữa biên đối tượng với nền.
Thao tác thực hiện:
 Chọn công cụ Magnectic Lasso
 Kích xác định điểm đầu tiên, nhả chuột di chuyển chuột dọc biên đối tượng, kích lại điểm đầu tiên
hoặc double click để kết thúc.
 Trong quá trình di chuyển chuột quanh chu vi đối tượng, ta có thể kích để cưỡng chế vùng chọn đi
đúng hướng (nếu chế độ tự động không chính xác). Xóa từng điểm chọn sai bằng phím Delete.
Thuộc tính (Options):
 Width: khoảng cách lớn nhất mà đường Lasso di chuyển (10px).
 Frequency: tần số xuất hiện các điểm chốt, nếu tần số càng cao thì xuất hiện càng dày điểm chốt.
 Edge Contrast: độ nét của biên màu, khi biên màu bị nhoè thì mới tăng Contrast.
II.3. Magic Wand
Magic Wand: Là công cụ chọn vùng theo vùng màu tương đồng.
Thao tác thực hiện:
 Chọn công cụ Magic Wand
 Kích vào một màu trên hình ảnh, một vùng màu tương ứng được chọn. Độ rộng của vùng chọn tùy
thuộc vào giá trị Tolerance trên thanh Options.
Thuộc tính:
 Tolerance: Dung sai của vùng chọn, dung sai càng lớn thì vùng chọn càng rộng.
 Anti – Alias: Khử răng cưa
 Contiguous: Chọn màu cục bộ - màu được giới hạn bởi những vùng màu lân cận. (Nếu không
được kiểm nhận thì sẽ chọn trên toàn file)
 Use All Layers: Chọn trên tất cả các Layer, không phân biệt Layer hiện hành hay những Layer
khác.

II.4. Crop
Cắt xén hình ảnh. Công cụ này có khả năng đặc biệt hơn. Khi tạo khung viền chọn, ta sẽ thấy trên khung viền
có tám nốt vuông (bốn nốt vuông nằm ở bốn góc và bốn nốt vuông nằm ở trung điểm của các cạnh). Ta được
quyền phóng to để thu hẹp khung viền bằng cách kích và rê các nốt vuông. Ngoài ra còn có thể xoay khung
viền bằng cách đưa con trỏ ra ngoài góc đường viền và rê chuột. Nếu muốn di chuyển khung viền chọn, ta chỉ
cần đưa trỏ vào bên trong khung viền và rê sang vị trí khác. Cuối cùng, nhấn Enter hoàn tất phần xén ảnh.
Học phần II - Photoshop Trang 26/113
Tài liệu hướng dẫn giảng dạy
II.5. Công cụ Move
Là công cụ chọn dùng để di chuyển đối tượng và gióng hàng các đối tượng trên các Layer
 Di chuyển đối tượng
 Di chuyển vùng chọn
 Sao chép vùng chọn (Alt + Drag chuột)
Thuộc tính:
 Auto Select Layer: Tự chọn Layer
 Show Bounding Box: Hiển thị tám nốt xung quanh đối tượng, ta có thể xoay, co giãn,…
 Nhóm Align : Dùng để gióng hàng các Layer được liên kết (link) với nhau.
 Nhóm Distribute : Dùng để phân phối đều các đối tượng được liên kết với nhau.
III. Lệnh tạo viền cho vùng chọn
Chọn đối tượng với vùng chọn xác định
Menu Edit \ Stroke, hiển thị hộp thoại Stroke. Thay đổi các thuộc tính trong hộp thoại Stroke.
 Width: Độ dày của đường viền.
 Color: màu của đường viền.
 Inside: tạo viền bên trong
 Outside: tạo viền bên ngoài
 Center: tạo viền trọng tâm (Kể từ biên vùng chọn)
 Opacity: độ mờ của đường viền.
 Mode: Chế độ hòa trộn.
Học phần II - Photoshop Trang 26/113
Tài liệu hướng dẫn giảng dạy

IV. Một số lệnh liên quan với vùng chọn (Menu select)
 Lệnh Select All (Ctrl + A): Tạo vùng chọn bao kín toàn bộ hình ảnh.
 Lệnh Deselect (Ctrl + D): Hủy vùng chọn. Nếu chưa hài lòng với thao tác, ta có thể hủy bỏ vùng
chọn bằng lệnh trên.
 Lệnh Reselect (Ctrl + Shift + D): Lấy lại vùng chọn đã hủy.
 Lệnh Inverse (Ctrl + Shift + I): Nghịch đảo vùng chọn.
 Color Range: Công dụng tương tự như Magic Wand nhưng có ưu điểm hơn nhờ có chức năng
Fuzziness để tăng giảm lượng màu tương ứng.
- Selection: Ô preview chỉ hiển thị hình ảnh
dưới dạng màu trắng, đen. Vùng có màu trắng là vùng được chọn, vùng màu đen là vùng
không được chọn.
- Image: Ô Preview hiển thị dạng ảnh màu.
 Feather (Ctrl + Alt + D): Làm mờ biên vùng chọn
Học phần II - Photoshop Trang 26/113