Thông tin tài liệu
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: ttth@hcmuns.edu.vn
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
[...]... 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 Trình bày các kiến thực 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.. .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... 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 đại (Maximize) I.5 Cực tiểu (Minimize): thu màn hình nhỏ lại trong biểu tượng Adobe Photoshop Đóng chương trình (Close) 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... 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ụ:... 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. .. 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 ... 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... 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... 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 . 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. 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. ttth@hcmuns.edu.vn 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& gt; Phiên
Ngày đăng: 29/03/2014, 16:20
Xem thêm: TÀI LIỆU HƯỚNG DẪN GIẢNG DẠY THIẾT KẾ WEB VỚI PHOTOSHOP ppt