Tài liệu hướng dẫn giảng dạy thiết kế wed với photoshop
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (7.4 MB, 118 trang )
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
Bài 1...........................................................................................................10
TỔNG QUAN VỀ PHOTOSHOP CS
I. Cài đặt chương trình Photoshop............................................................................... 11
I.1. Độ phân giải màn hình............................................................................................. 11
I.2. Ảnh vectơ................................................................................................................. 12
I.3. Cấu hình cho Photoshop.......................................................................................... 12
I.4. Thanh tiêu đề........................................................................................................... 12
I.5. Thanh Menu Bar....................................................................................................... 13
I.6. Thanh Option (Menu Window Option)......................................................................13
I.7. Thanh công cụ Toolbox............................................................................................. 13
II. Chế độ xem ảnh....................................................................................................... 14
III. Chế độ cuộn hình ảnh.............................................................................................. 14
IV. Làm việc với cửa sổ Palette...................................................................................... 14
V. Quản lý File.............................................................................................................. 15
V.1. Tạo mới một tập tin.................................................................................................. 15
V.2. Lưu tập tin................................................................................................................ 16
V.3. Mở tập tin................................................................................................................. 17
V.4. Đóng tập tin............................................................................................................. 17
VI. Tổng quan ảnh trong trang Web.............................................................................. 17
VI.1.
Kiểu tập tin ảnh:.............................................................................................. 17
VI.2.
Thiết kế thành cơng ảnh cho trang web...........................................................18
VI.3.
Kích thước một số ảnh..................................................................................... 18
Bài 2...........................................................................................................18
KHÁI NIỆM VỀ VÙNG CHỌN
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:...................................................................................21
II.2.3.
Magnetic Lasso:.................................................................................21
II.3. Magic Wand.............................................................................................................. 21
II.4. Crop ........................................................................................................................ 22
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
Bài 3...........................................................................................................27
CÔNG CỤ CỌ BRUSH – MÀU SẮC – HIỆU CHỈNH MÀU
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
I.3. Tự tạo nét cọ mới:.................................................................................................... 28
Học phần II – Thiết kế Web với Photoshop
Trang 18/117
Tài liệu hướng dẫn giảng dạy
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......................................................................................... 35
III.3.1. Paint Bucket ......................................................................................35
III.3.2. Gradient............................................................................................35
III.3.3. Eyedropper........................................................................................37
III.3.4. Color Sampler Tool..............................................................................38
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 Levels.............................................................................................. 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.
Lệnh Auto Color............................................................................................... 43
IV.9.
Lệnh Desaturate.............................................................................................. 43
IV.10.
Lệnh Replace Color.......................................................................................... 43
IV.11.
Lệnh Selective Color........................................................................................ 43
IV.12.
Lệnh Channel Mixer......................................................................................... 44
IV.13.
Lệnh Gradient Map........................................................................................... 45
IV.14.
Lệnh Invert....................................................................................................... 45
IV.15.
Lệnh Equalize................................................................................................... 46
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 ........................................................................................................................ 48
V.5. Sharpen .................................................................................................................. 48
V.6. Smudge ................................................................................................................... 49
V.7. Dodge ..................................................................................................................... 49
V.8. Burn ............................................................................................................................
49
V.9. Sponge .................................................................................................................... 50
Học phần II – Thiết kế Web với Photoshop
Trang 18/117
Tài liệu hướng dẫn giảng dạy
Bài 4
……………………………………………………………………………………………………………………
……….51
LAYERS – LAYERMASK - LAYERSTYLES
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...................................................................................... 56
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 Layer Style.................................................................................... 68
II.1.1.
Bước 1...............................................................................................68
II.1.2.
Bước 2...............................................................................................68
Học phần II – Thiết kế Web với Photoshop
Trang 18/117
Tài liệu hướng dẫn giảng dạy
II.1.3.
Bước 3...............................................................................................68
II.1.4.
Bước 4...............................................................................................69
III. Layer Mask (mặt nạ lớp).......................................................................................... 70
III.1.1. Cách 1...............................................................................................71
III.1.2. Cách 2...............................................................................................71
Bài 5...........................................................................................................73
TEXT – WRAPED TEXT – PALETTE CHARACTER AND PARAGRAPH
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................................................................................... 77
II.3. Gỡ bỏ uốn chữ.......................................................................................................... 77
Bài 6
…………………………………………………………………………………………………..78
SỬ DỤNG CƠNG CỤ PEN – NHĨM CƠNG CỤ VẼ THEO HÌNH DẠNG - FILTER
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. Line........................................................................................................86
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
Học phần II – Thiết kế Web với Photoshop
Trang 18/117
Tài liệu hướng dẫn giảng dạy
II.2.8.
Shear................................................................................................91
II.2.9.
Spherize............................................................................................91
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
Bài 7...........................................................................................................99
TỐI ƯU HĨA HÌNH ẢNH CHO TRANG WEB – SỬ DỤNG SLICE
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
Bài 8.........................................................................................................104
TẠO ẢNH ĐỘNG BẰNG IMAGEREADY – BÀI TẬP TỔNG HỢP
I. Đặc điểm................................................................................................................ 104
I.1. Màu an tồn trình duyệt:........................................................................................ 104
I.2. Độ phân giải màn hình........................................................................................... 104
I.3. Gamma.................................................................................................................. 104
II. Slice....................................................................................................................... 105
II.1. Tìm hiểu về Slice.................................................................................................... 105
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..................................................................106
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...................................................................109
III.5.1. Chọn một tùy chọn Format................................................................109
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...........................................................110
III.6.1. Tham khảo các trang Web.................................................................110
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..................................................113
Học phần II – Thiết kế Web với Photoshop
Trang 18/117
Tài liệu hướng dẫn giảng dạy
III.7.5.
III.7.6.
Bước 4: tạo khung nền nhập văn bản và sắp xếp bố cục cho trang web. 113
Bài tập 2:.........................................................................................113
Học phần II – Thiết kế Web với Photoshop
Trang 18/117
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
15
27
Tổng số tiết:
Học phần II – Thiết kế Web với Photoshop
Trang 18/117
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 chun 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 18/117
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
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ác mục chính
Bài tập
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 18/117
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 hồ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 18/117
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)
Học phần II – Thiết kế Web với Photoshop
Trang 18/117
Tài liệu hướng dẫn giảng dạy
I.5. Thanh Menu Bar
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ị.
Học phần II – Thiết kế Web với Photoshop
Trang 18/117
Tài liệu hướng dẫn giảng dạy
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:
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 18/117
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
Học phần II – Thiết kế Web với Photoshop
Trang 18/117
Tài liệu hướng dẫn giảng dạy
Width
: chiều rộng (đơn vị tính)
Height
: chiều cao (đơn vị tính)
Resolution
Mode
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
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
: độ phân giải (pixel\inch)
: chế độ màu
: nền mang màu background hiện hành
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
Học phần II – Thiết kế Web với Photoshop
Trang 18/117
Tài liệu hướng dẫn giảng dạy
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…
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: thố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
Học phần II – Thiết kế Web với Photoshop
Trang 18/117
Tài liệu hướng dẫn giảng dạy
sử dụng nhiều trong trang trí, bố cục trang. Ngồ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.
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:
Học phần II – Thiết kế Web với Photoshop
Trang 18/117
Tài liệu hướng dẫn giảng dạy
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
Bờ lề: 1024 pixel x 30 pixel
Học phần II – Thiết kế Web với Photoshop
Trang 18/117
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
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. …
Các mục chính
Bài tậ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 tồ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ề
Học phần II - Photoshop
Trang 26/116
Tài liệu hướng dẫn giảng dạy
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ẻ vng 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.
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 vng.
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ụ: Ngồ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.
Học phần II - Photoshop
Trang 26/116
Tài liệu hướng dẫn giảng dạy
Normal: kéo chuột theo đường chéo để tạo vùng chọn bình thường
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.
Học phần II - Photoshop
Trang 26/116
Tài liệu hướng dẫn giảng dạy
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
II.2.3.
Magnetic Lasso:
Magnetic Lasso: Là cơng cụ Lasso từ tính, vùng chọn ln 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:
Học phần II - Photoshop
Trang 26/116
Tài liệu hướng dẫn giảng dạy
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 tồ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 vng (bốn nốt vng 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 vng. Ngồi ra cịn có thể xoay khung viền bằng cách đưa con
trỏ ra ngồ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 hồn
tất phần xén ảnh.
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
nhau.
Nhóm Distribute
với nhau.
Học phần II - Photoshop
: Dùng để gióng hàng các Layer được liên kết (link) với
: Dùng để phân phối đều các đối tượng được liên kết
Trang 26/116
Tài liệu hướng dẫn giảng dạy
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.
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 tồ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.
Học phần II - Photoshop
Trang 26/116
