zunia.vn

Tuyển sinh 2024 dành cho Gen-Z

zunia.vn

» Công Nghệ Thông Tin

» Đồ họa - Thiết kế - Flash

Tài liệu hướng dẫn giảng dạy thiết kế wed với photoshop

Chia sẻ: DOAN NGOC THANG | Ngày: | Loại File: DOC | Số trang:114

Báo xấu

752
lượt xem 459
download

Download Vui lòng tải xuống để xem tài liệu đầ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 …

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Tài liệu hướng dẫn giảng dạy thiết kế wed với photoshop

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 TAØI LIEÄU HÖÔÙNG DAÃN GIAÛNG DAÏY CHÖÔNG TRÌNH KYÕ THUAÄT VIEÂN NGAØNH COÂNG NGHEÄ WEB Hoïc phaàn II THIEÁT KEÁ WEB VÔÙI PHOTOSHOP Mã tài liệu: DT_NCM_ĐH_TLGD_ 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 ..................................................................................... 10 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ơ .................................................................................................................................... 13 I.3.Cấu hình cho Photoshop ............................................................................................................. 13 I.4.Thanh tiêu đề .............................................................................................................................. 13 I.5.Thanh Menu Bar ......................................................................................................................... 14 I.6.Thanh Option (Menu Window Option) ......................................................................................... 14 I.7.Thanh công cụ Toolbox ............................................................................................................... 14 II.Chế độ xem ảnh ............................................................................................................................ 15 III.Chế độ cuộn hình ảnh .................................................................................................................. 16 IV.Làm việc với cửa sổ Palette ......................................................................................................... 16 V.Quản lý File ................................................................................................................................... 17 V.1.Tạo mới một tập tin ................................................................................................................... 17 V.2.Lưu tập tin .................................................................................................................................. 18 V.3.Mở tập tin ................................................................................................................................... 18 V.4.Đóng tập tin ............................................................................................................................... 19 VI.Tổng quan ảnh trong trang Web .................................................................................................. 19 VI.1.Kiểu tập tin ảnh: ........................................................................................................................ 19 VI.2.Thiết kế thành công ảnh cho trang web .................................................................................... 20 VI.3.Kích thước một số ảnh .............................................................................................................. 20 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 ....................................................................................................................... 21 II.2.1.Lasso: .................................................................................................................... 21 II.2.2.Polygon Lasso: ...................................................................................................... 21 II.2.3.Magnetic Lasso: .................................................................................................... 21 II.3.Magic Wand .............................................................................................................................. 22 II.4.Crop 22 II.5.Công cụ Move ........................................................................................................................... 22 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.Lệnh tạo viền cho vùng chọn ...................................................................................................... 23 IV.Một số lệnh liên quan với vùng chọn (Menu select) ..................................................................... 24 V.Bảng biến đổi đối tượng ................................................................................................................ 26 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 I.3.Tự tạo nét cọ mới: ....................................................................................................................... 28 I.4.Các lệnh trong Menu Brush Palette ............................................................................................ 30 II.Nhóm cọ Brush ............................................................................................................................. 33 II.1.Brush () ..................................................................................................................................... 33 II.2.Pencil () ..................................................................................................................................... 33 II.3.Eraser ....................................................................................................................................... 33 II.3.1.Eraser ..................................................................................................................... 34 II.3.2.Background Eraser Tool: ...................................................................................... 34 II.3.3.Background Swatch: ............................................................................................. 34 II.3.4.Magic Eraser Tool: ................................................................................................ 34 II.4.History : ..................................................................................................................................... 34 II.5.Art History ................................................................................................................................. 35 III.Các phương pháp tô màu ............................................................................................................ 36 III.1.Làm việc với Bảng Color palette ............................................................................................... 36 III.2.Chọn lựa màu foreground, Background .................................................................................... 36 III.3.Các công cụ tô màu ................................................................................................................. 37 III.3.1.Paint Bucket () ...................................................................................................... 37 III.3.2.Gradient () ............................................................................................................. 37 III.3.3.Eyedropper () ....................................................................................................... 40 III.3.4.Color Sampler Tool : ............................................................................................ 40 III.3.5.Measure () ............................................................................................................ 40 III.4.Tô màu theo mẫu tô Pattern ...................................................................................................... 41 III.4.1.Cách tạo mẫu tô Pattern ...................................................................................... 41 III.4.2.Tô màu theo mẫu tô .............................................................................................. 41 IV.Các lệnh liên quan để hiệu chỉnh ................................................................................................ 42 IV.1.Lệnh Levels ............................................................................................................................. 42 IV.2.Lệnh Auto Level ....................................................................................................................... 43 IV.3.Lệnh Auto Contrast .................................................................................................................. 43 IV.4.Lệnh Curves ............................................................................................................................ 43 IV.5.Lệnh Brightness\ Contrast ........................................................................................................ 44 IV.6.Lệnh Color Balance ................................................................................................................. 44 IV.7.Lệnh Hue\Saturation ................................................................................................................ 45 IV.8.Auto color: ................................................................................................................................ 46 IV.9.Lệnh Desaturate ...................................................................................................................... 46 IV.10.Lệnh Replace Color ............................................................................................................... 46 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 IV.11.Lệnh Selective Color .............................................................................................................. 47 IV.12.Lệnh Channel Mixer ............................................................................................................... 48 IV.13.Gradient Map: ........................................................................................................................ 49 IV.14.Lệnh Invert ............................................................................................................................. 49 IV.15.Lệnh Equalize ........................................................................................................................ 50 IV.16.Lệnh Variations ...................................................................................................................... 50 V. Nhóm công cụ chỉnh sửa hình ảnh ............................................................................................ 51 V.1.Clone Stamp () .......................................................................................................................... 51 V.2.Healing Brush (): ....................................................................................................................... 51 V.3.Patch (): .................................................................................................................................... 52 V.4.Blur () ........................................................................................................................................ 52 V.5.Sharpen () ................................................................................................................................. 53 V.6.Smudge () .................................................................................................................................. 53 V.7.Dodge () .................................................................................................................................... 54 V.8.Burn (): ...................................................................................................................................... 54 V.9.Sponge () .................................................................................................................................. 54 LAYERS – LAYERMASK LAYERSTYLES ........................................................................ 51 I.Lớp (Layer) ..................................................................................................................................... 52 I.1.Các chế độ hòa trộn lớp (Blending Mode) ................................................................................... 53 I.1.1.Normal ..................................................................................................................... 54 I.1.2.Dissolve ................................................................................................................... 54 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 ........................................................................................................... 55 I.1.16.Pin Light ................................................................................................................ 55 I.1.17.Difference .............................................................................................................. 55 I.1.18.Exclusion ............................................................................................................... 55 I.1.19.Hue ........................................................................................................................ 55 I.1.20.Saturation .............................................................................................................. 55 I.1.21.Color ...................................................................................................................... 55 I.1.22.Luminosity ............................................................................................................. 55 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.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 .......................................................................................................................... 56 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 ................................................................................................. 57 I.8.Các chức năng của menu Palete Layer ....................................................................................... 57 I.9.Layer style ................................................................................................................................... 58 I.9.1.Drop shadow ........................................................................................................... 59 I.9.2.Inner shadow .......................................................................................................... 59 I.9.3.Outer Glow ............................................................................................................. 61 I.9.4.Inner Glow .............................................................................................................. 62 I.9.5.Bevel and Emboss ................................................................................................. 62 I.9.6.Satin: ...................................................................................................................... 64 I.9.7.Color Overlay: ........................................................................................................ 65 I.9.8.Gradient Overlay: ................................................................................................... 66 I.9.9.Pattern Overlay: ..................................................................................................... 67 I.9.10.Stroke .................................................................................................................... 67 II.MỘT SỐ HIỆU ỨNG CHỮ ĐẶC BIỆT ........................................................................................... 69 II.1.Tạo bộ nút bằng Layerstyles ...................................................................................................... 70 II.1.1.Bước 1: ................................................................................................................... 70 II.1.2.Bước 2: ................................................................................................................... 70 II.1.3.Bước 3: ................................................................................................................... 70 II.1.4.Bước 4: ................................................................................................................... 71 III.Layer mask (mặt nạ lớp) .............................................................................................................. 72 III.1.1.Cách 1: .................................................................................................................. 73 III.1.2.Cách 2: ................................................................................................................. 73 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 ........................................................................................................ 77 II.1.Uốn cong chữ ............................................................................................................................. 77 II.2.Các tùy chọn trong hộp thoại ...................................................................................................... 77 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 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. 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: ...................................................................................... 84 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 ........................................................................................................... 85 I.3.1.Rectangle ............................................................................................................... 85 I.3.2.Rounded Rectangle ................................................................................................ 85 I.3.3.Ellipse ..................................................................................................................... 86 I.3.4.Polygon .................................................................................................................. 86 I.3.5.Line ......................................................................................................................... 87 I.3.6.Custom Shape ....................................................................................................... 87 II.HIỆU ỨNG ĐẶC BIỆT (FILTER) ................................................................................................... 87 II.1.NHÓM BLUR .............................................................................................................................. 87 II.1.1.Blur ........................................................................................................................ 87 II.1.2.Blur More ............................................................................................................... 87 II.1.3.Gaussian Blur ........................................................................................................ 87 II.1.4.Motion Blur ............................................................................................................ 88 II.1.5.Radial Blur ............................................................................................................. 88 II.1.6.Smart Blur ............................................................................................................. 89 II.2.NHÓM DISTORT ....................................................................................................................... 89 II.2.1.Diffuse Glow .......................................................................................................... 90 II.2.2.Displace ................................................................................................................ 90 II.2.3.Glass ..................................................................................................................... 90 II.2.4.Ocean Ripple ........................................................................................................ 91 II.2.5.Pinch ...................................................................................................................... 91 II.2.6.Polar Coordinates ................................................................................................. 91 II.2.7.Ripple .................................................................................................................... 92 II.2.8.Shear ...................................................................................................................... 92 II.2.9.Spherize ................................................................................................................ 92 II.2.10.Twirl ..................................................................................................................... 93 II.2.11.Wave ................................................................................................................... 93 II.2.12.Zigzag ................................................................................................................. 93 II.3.NHÓM TEXTURE ...................................................................................................................... 94 II.3.1.Craquelure ............................................................................................................ 94 II.3.2.Grain ..................................................................................................................... 94 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.3.3.Mosaic Tiles .......................................................................................................... 95 II.3.4.Patch Work ............................................................................................................ 95 II.3.5.Stained Glass ........................................................................................................ 95 II.3.6.Texturizer .............................................................................................................. 96 II.4.NHÓM RENDER ........................................................................................................................ 96 II.4.1.3D Transform ........................................................................................................ 96 II.4.2.Clouds ................................................................................................................... 96 II.4.3.Difference Clouds ................................................................................................. 97 II.4.4.Lens Flare ............................................................................................................. 97 II.4.5.Lighting Effects ...................................................................................................... 97 TỐI ƯU HÓA HÌNH ẢNH CHO TRANG WEB – SỬ DỤNG SLICE .................................... 100 I.Giới thiệu ..................................................................................................................................... 100 II.Các thao tác tạo hoạt hình .......................................................................................................... 100 II.1.1.Bước 1: ................................................................................................................. 100 II.1.2.Bước 2: ................................................................................................................. 101 III.Tween các frame ....................................................................................................................... 101 TẠO ẢNH ĐỘNG BẰNG IMAGEREADY – BÀI TẬP TỔNG HỢP .................................... 105 I.Đặc điểm ...................................................................................................................................... 105 I.1.Màu an toàn trình duyệt: ........................................................................................................... 105 I.2.Độ phân giải màn hình .............................................................................................................. 105 I.3.Gamma ..................................................................................................................................... 106 II.Slice ............................................................................................................................................ 106 II.1.Tìm hiểu về Slice: ..................................................................................................................... 106 II.2.Tạo một User Slice ................................................................................................................... 106 II.3.Tạo các Slice từ lớp (Layer): ..................................................................................................... 107 II.4.Chuyển đổi Auto slice thành user slice: .................................................................................... 107 III.Chuẩn bị ảnh cho Web ............................................................................................................... 107 III.1.Tối ưu hóa ảnh cho Web: ....................................................................................................... 107 III.2.Tối ưu dạng GIF theo màu ...................................................................................................... 108 III.3.Tối ưu dạng PNG24 .............................................................................................................. 109 III.4.Tối ưu dạng JPEG .................................................................................................................. 110 III.5.Nhập tên file và vị trí cần lưu file. ............................................................................................. 110 III.5.1.Chọn một tùy chọn Format: ................................................................................ 110 III.5.2.Cài đặt các tùy chọn xuất: .................................................................................. 111 III.6.Các trang Web về HTML và Templates ................................................................................... 111 III.6.1.Tham khảo các trang Web .................................................................................. 111 III.6.2.Tham khảo các trang Web .................................................................................. 112 III.7.BÀI TẬP THAM KHẢO ............................................................................................................ 114 III.7.1.Bài tập 1: ............................................................................................................. 114 III.7.2.Bước 1: tạo phần baner ...................................................................................... 114 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.3.Bước 2: tạo logo trung tâm tin học ...................................................................... 114 III.7.4.Bước 3: tạo bộ nút trung tâm tin học ................................................................... 114 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. ........ 115 III.7.6.Bài tập 2: ............................................................................................................. 115 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 Sử dụng công cụ Pen – Nhóm công cụ vẽ theo hình 6 2 3 dạng – Filter (Blur hoặc Distort, Texture) 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 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 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 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 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ử Cài đặt chương trình Photoshop lý ảnh cho Web và việc tối ưu hóa Chế độ xem ảnh hình ảnh cho Web. Học viên được Chế độ cuộn hình ảnh cung cấp các kiến thức về thết kế bố Làm việc với cửa sổ Palette cục cho trang Web … 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 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\ PlugIns\ 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 doubleclick 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ụ: 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 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 đề 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 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 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. 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 Để 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:  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ỏ: 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 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 Để 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) 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 Để 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)  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 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  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… 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ở 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  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 Học phần II – Thiết kế Web với Photoshop Trang 18/117

CÓ THỂ BẠN MUỐN DOWNLOAD

THÔNG TIN

TRỢ GIÚP

HỖ TRỢ KHÁCH HÀNG

Theo dõi chúng tôi

Chịu trách nhiệm nội dung:

Nguyễn Công Hà - Giám đốc Công ty TNHH TÀI LIỆU TRỰC TUYẾN VI NA

LIÊN HỆ

Địa chỉ: P402, 54A Nơ Trang Long, Phường 14, Q.Bình Thạnh, TP.HCM

Hotline: 093 303 0098

Email: support@tailieu.vn

Giấy phép Mạng Xã Hội số: 670/GP-BTTTT cấp ngày 30/11/2015 Copyright © 2022-2032 TaiLieu.VN. All rights reserved.