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 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_ Phiê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 I.Cài đặt chương trình Photoshop .10 I.1.Độ phân giải 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 12 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 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 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 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 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 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ọ vẽ 28 Học phần II – Thiết kế Web với Photoshop Trang 18/116 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 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 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: 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.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 .47 V.1.Clone Stamp () 47 V.2.Healing Brush (): .47 V.3.Patch (): 48 V.4.Blur () 48 V.5.Sharpen () 48 V.6.Smudge () 49 V.7.Dodge () 49 V.8.Burn (): 49 V.9.Sponge () 50 LAYERS – LAYERMASK - LAYERSTYLES 51 Học phần II – Thiết kế Web với Photoshop Trang 18/116 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 .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 54 I.1.16.Pin Light .54 I.1.17.Difference 54 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 I.2.Các phương pháp chọn Layer .55 I.3.Sắp xếp thứ tự 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 Layers 56 I.6.Phân phối khoảng cách Layers (Distribute): .56 I.7.Các trường hợp phát sinh Layers 56 I.8.Các chức menu Palete Layer 57 I.9.Layer style 57 I.9.1.Drop shadow 59 I.9.2.Inner shadow .59 I.9.3.Outer Glow 60 I.9.4.Inner Glow 61 I.9.5.Bevel and Emboss 61 I.9.6.Satin: 63 I.9.7.Color Overlay: 64 I.9.8.Gradient Overlay: 64 I.9.9.Pattern Overlay: 66 I.9.10.Stroke 66 II.MỘT SỐ HIỆU ỨNG CHỮ ĐẶC BIỆT 68 II.1.Tạo nút Layerstyles 69 II.1.1.Bước II.1.2.Bước II.1.3.Bước II.1.4.Bước 1: .69 2: .69 3: .69 4: .70 III.Layer mask (mặt nạ lớp) .71 Học phần II – Thiết kế Web với Photoshop Trang 18/116 Tài liệu hướng dẫn giảng dạy III.1.1.Cách 1: 72 III.1.2.Cách 2: 72 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 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 I Cơng cụ vẽ Path 79 I.1.Khái niệm 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 18/116 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 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 tồn trình duyệt: 104 I.2.Độ phân giải hình .104 I.3.Gamma 104 II.Slice 105 II.1.Tìm hiểu Slice: 105 II.2.Tạo User Slice 105 II.3.Tạo 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ị trí cần lưu file 109 III.5.1.Chọn tùy chọn Format: 109 III.5.2.Cài đặt tùy chọn xuất: 109 III.6.Các trang Web HTML Templates 110 III.6.1.Tham khảo trang Web 110 III.6.2.Tham khảo 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 nút trung tâm tin học 113 Học phần II – Thiết kế Web với Photoshop Trang 18/116 Tài liệu hướng dẫn giảng dạy III.7.5.Bước 4: tạo khung nhập văn xếp bốc cục cho trang web .113 III.7.6.Bài tập 2: 113 Học phần II – Thiết kế Web với Photoshop Trang 18/116 Tài liệu hướng dẫn giảng dạy GIỚI THIỆU Sau hồn thành khóa học này, học viên có khả năng:  Nắm vững cách tạo bố cục, hình ảnh cho trang Web  Thiết kế giao diện trang Web  Tối ưu hóa ảnh cho Web  Tạo diễn hoạt để làm quảng cáo Web Với thời lượng 15 tiết LT 27 tiết TH phân bổ sau: STT Bài học Số tiết LT Số tiết TH Giới thiệu – Phân biệt ảnh cho Web 1 Tools (Selection) 2 Cơng cụ cọ Brush – Màu sắc – Hiệu chỉnh màu Layers – LayerMask - LayerStyles Text – Wraped – Palette Character Paragraph Sử dụng cơng cụ Pen – Nhóm cơng cụ vẽ theo hình dạng – Filter (Blur Distort, Texture) Tối ưu hóa ảnh cho Web – Sử dụng Slice Tạo ảnh động ImageReady – Bài tập tổng hợp 15 27 Tổng số tiết: Học phần II – Thiết kế Web với Photoshop Trang 18/116 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 q trình biên soạn tài liệu hướng dẫn giảng dạy giáo trình, chúng tơi có tham khảo số tài liệu sau: Tài liệu Tài liệu Tài liệu Tài liệu … Học phần II – Thiết kế Web với Photoshop Trang 18/116 Tài liệu hướng dẫn giảng dạy HƯỚNG DẪN PHẦN LÝ THUYẾT Bài TỔNG QUAN VỀ PHOTOSHOP CS Tóm tắt Lý thuyết tiết - Thực hành tiết Mục tiêu Trình bày kiến thực xử lý ảnh cho Web việc tối ưu hóa hình ảnh cho Web Học viên cung cấp kiến thức thết kế bố cục cho trang Web … Các mục 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/116 Tài liệu hướng dẫn giảng dạy  Bạn chọn vào lệnh Tweens animation frames thay đổi số Frames to Add : nhập số frames chuyển tiếp cho khung hình Hiện lệnh mặc định số frame  Kiểm tra lại kết nhấn vào biểu tượng xem chuyển động khớp với khung hình chưa Nếu khớp chọn tời gian cho khung hình mục bấm chọn vào “0.1 sec” Tức khung hình qui định 0.1 giây Ta thay đổi thơng số tùy theo người tạo hoạt hình Số lớn chuyển động chậm Đây thời gian qui định cho khung hình chuyển động  Nếu cần thiết xác lập lại cho tồn phim, bấm giữ phím SHIFT + chọn khung hình đầu khung hình cuối Chỉnh lại thời gian tồn phim Học phần II - Photoshop Trang 115/116 Tài liệu hướng dẫn giảng dạy  Khi hồn tất đoạn phim tiến lưu tập tin GIF Vào File \ Save Optimized Chọn tên tập tin cần lưu chọn kiểu lưu tập tin  Tại mục Save as type: Images Only(*.gif) lưu tập tin ảnh gif  Tại mục Save as type: HTML and Images Only(*.html) lưu tập tin *.html thư mục “Images” có chứa tập tin ảnh gif  Tại mục Save as type: HTML Only(*.html) lưu tập tin *.html  Tại mục Settings chọn: Default Settings  Khi xem kết tập tin ảnh bạn vào Internet Explore nhấn double click vào tập tin gif Lúc bạn thấy kết duyệt trình Học phần II - Photoshop Trang 115/116 Tài liệu hướng dẫn giảng dạy Học phần II - Photoshop Trang 115/116 Tài liệu hướng dẫn giảng dạy Bài TẠO ẢNH ĐỘNG BẰNG IMAGEREADY – BÀI TẬP TỔNG HỢP Tóm tắt Lý thuyết tiết - Thực hành tiết Mục tiêu Các mục Bài tập Học viên tạo trang Mục tổng hợp gồm thành phần: Mục Banner, ảnh minh họa, hoạt hình cho Mục trang Web … Photoshop cung cấp cơng cụ để tạo xử lý ảnh tĩnh để sử dụng cho Web Ta chia ảnh thành Slice, đưa vào liên kết dạng Text HTML, tối ưu hóa Slice lưu ảnh dạng trang Web I Đặc điểm I.1 Màu an tồn trình duyệt: Hệ thống quản lý màu phần mềm duyệt Web sử dụng dựa bảng 216 màu (chứ khơng phải 256) Những phiên khác hệ điều hành Windows dành 40 màu để hiển thị yếu tố giao diện đồ họa cửa sổ, menu, hình kiểu giấy dán tường, biểu tượng nút, lại 216 màu để hiển thị tất thứ khác Khi thiết kế ảnh Photoshop để đảm bảo màu ảnh xuất tốt trang Web, bạn nên chọn màu chuẩn bảng màu dành cho Web cách đánh dấu mục Only Web Colors bảng chọn màu I.2 Độ phân giải hình Độ phân giải hình số lượng điểm ảnh hình hiển thị vùng định Ảnh trang Web thường bị giới hạn độ phân giải hình máy tính (thường 72 ppi) Khi tạo đồ họa trang Web, nên sử dụng tỉ lệ hiển thị 1:1(1 điểm ảnh ảnh tương đương điểm ảnh hình) I.3 Gamma "Gamma" mức độ tương phản giá trị xám tập trung ảnh Nếu thiết kế Web Windows nên làm tối ảnh tương phản thêm chút, thiết lập Gamma mặc định phiên Windows Photoshop 1.8 Để xem đồ họa bạn ngồi Photoshop trình duyệt Web Windows nào, sử dụng điều khiển gamma Photoshop để tăng gamma hiển thị Photoshop lên 2.5 Học phần II - Photoshop Trang 115/116 Tài liệu hướng dẫn giảng dạy II Slice II.1 Tìm hiểu Slice: Một Slice vùng hình chữ nhật có số thứ tự góc bên trái tạo từ cơng cụ Slice Slice tự động Chúng ta tạo liên kết, hiệu ứng rollover hoạt hình trang Web kết từ Slice Việc phân chia ảnh thành Slice cho phép điều khiển tối ưu hóa kích cỡ file ảnh Các dạng slice:  Auto Slice: Được tạo cách tự động  User Slice: Được tạo cơng cụ slice  Layer - based Slice: Được tạo Palette Layer  Table Slice: Được tạo palette Web content Các kiểu tạo Slice Tỉ lệ Slice Tạo Slice từ đường guides II.2 Tạo User Slice Chúng ta tạo user Slice cơng cụ Slice từ đường dẫn (Guides) Tạo Slice với cơng cụ Slice: Chọn cơng cụ Slice Xác lập giá trị thích hợp options (Normal, Fixed Aspect Ratio hay Fixed size)  Dùng thước kéo theo dòng cột bấm vào đường dóng (chế độ snap to guide)  Ưu tiên cho dòng trước – Cột sau  Lần lượt đến nút, logo, baner  Các icon  Ảnh minh họa  Rê lên vùng muốn tạo Slice  Tạo slice với đường guides:  Kéo thêm đường guide vào vị trí thích hợp  Chọn cơng cụ Slice Nhấp "slice from guides" option Lưu ý: chọn hình thức tạo Slice từ đường dẫn Slice có sẵn bị xóa II.3 Tạo Slice từ lớp (Layer): Chức đặc biệt hữu ích làm việc với hiệu ứng Rollover Một Layer Based Slice cập nhật Layer nguồn chỉnh sửa Chọn Layer Học phần II - Photoshop Trang 115/116 Tài liệu hướng dẫn giảng dạy Menu Layer \ New Layer Based Slice II.4 Chuyển đổi Auto slice thành user slice: Chọn Auto Slice Chọn cơng cụ Slice Select Chọn chức "Romote to User Slice" Options Hoặc kích phải mouse lên Autoslice\ Romote to User Slice Các số thứ tự slice đánh từ trái sang phải từ xuống Hiển thị\ Che giấu đường biên slice: Menu View\ Show\ Slices Hoặc để che giấu, hiển thị với thành phần khác, ta sử dụng lệnh Extras  Khóa tất slice:  Menu View\ Lock Slice  Xóa tất slice:  Menu View\ Clear slices  Tối ưu hóa slice:  Menu File\ Save for Web III Chuẩn bị ảnh cho Web III.1 Tối ưu hóa ảnh cho Web: Tối ưu hóa tiến trình tinh chỉnh chất lượng hiển thị kích cỡ file ảnh để sử dụng Web phương tiện trực tuyến khác Trong Photoshop, ta sử dụng hộp thoại Save for Web để xác lập tùy chọn tối ưu hóa xem trước ảnh tối ưu hóa Menu File > Save for Web Xem trước ảnh: Nhấp tab đầu vùng ảnh để chọn kiểu hiển thị: Original (ảnh gốc), Optimized (ảnh tối ưu hóa): 2-Up (Xem hai phiên nằm cạnh nhau), 4-Up (so sánh bốn phiên nằm cạnh nhau) Xác lập tùy chọn hộp thoại Save for Web:  Chọn khung xem muốn áp dụng xác lập tối ưu hóa Học phần II - Photoshop Trang 115/116 Tài liệu hướng dẫn giảng dạy  Chọn Slice muốn tối ưu hóa (nếu ảnh có nhiều slice)  Chọn hai cách sau đây:  Chọn xác lập tối ưu hóa từ hộp Setting  Chọn kiểu file (Jpg, gif,…) hộp xổ Optimized file Format (tool tip)  Xác lập tùy chọn tối ưu hóa bổ sung tùy thuộc vào dạng file chọn  Quyết định chọn ảnh tối ưu III.2 Tối ưu dạng GIF theo màu Sử dụng cho ảnh có màu đơn giản (ảnh vẽ với màu đơn), ảnh có vùng màu phẳng lớn Vì GIF dạng chuẩn dùng để nén màu phẳng chi tiết cứng line art, logos,… Ta giảm kích cỡ ảnh gif cách giảm số màu file Còn PNG nén hiệu vùng màu đồng giữ lại chi tiết sắc nét Ngồi ra, ta làm giảm kích thước file ảnh Gif cách tăng giá trị Lossy (loại bỏ liệu cách có chọn lọc) III.3 Tối ưu dạng PNG-24 Học phần II - Photoshop Trang 115/116 Tài liệu hướng dẫn giảng dạy PNG - 24 thích hợp cho việc nén file ảnh có tơng màu liên tục Tuy nhiên, tạo file ảnh lớn nhiều so với JPG Ưu điểm: Nó trì lên đến 256 mức độ suốt ảnh Để lưu ảnh có độ suốt đa cấp độ, chọn transparency III.4 Tối ưu dạng JPEG Xác lập tối ưu hóa dựa vào kích cỡ file: Menu File Save for Web Kích menu palette Optimize Học phần II - Photoshop > Optimize to File Size Trang 115/116 Tài liệu hướng dẫn giảng dạy Nhập số trực tiếp vào này, xem dung lượng kết tập tin ảnh tối ưu III.5 Nhập tên file vị trí cần lưu file III.5.1 Chọn tùy chọn Format:  HTML and Image: Lưu file thành trang HTML thư mục Image chứa tất Slice file (mỗi Slice file riêng biệt với tên mặc định = tên file + số thứ tự slice)  Image Only: Chỉ lưu hình ảnh, khơng lưu trang HTML  HTML only: Chỉ lưu trang HTML, khơng lưu hình ảnh  Chọn tùy chọn từ hộp Slice:  All Slices: Lưu tất Slice ảnh  Selected Slices: Chỉ lưu Slice chọn  Save III.5.2 Cài đặt tùy chọn xuất: Khi bạn lưu ảnh tối ưu hóa dạng trang Web, bạn xác định cách định dạng file HTML, cách đặt tên slice, cách đặt tên file cách xử lý ảnh Ta cài đặt tùy chọn hộp Output Settings Mở hộp thoại Output Settings: Có nhiều cách: Trong hộp thoại Save for Web, chọn tùy chọn Other từ hộp Settings Học phần II - Photoshop Trang 115/116 Tài liệu hướng dẫn giảng dạy III.6 Các trang Web HTML Templates III.6.1 Tham khảo trang Web http:\\www.w3schools.com http:\\www.MonsterTemplates.com http:\\www.freetemplate.com http:\\www.freelayout.com http:\\www.echip.com.vn III.6.2 Tham khảo trang Web  Mẫu 1: Tạo đường nét bố cục hình Học phần II - Photoshop Trang 115/116 Tài liệu hướng dẫn giảng dạy  Mẫu 2: Sắp xếp chữ & bố cục hình nằm bên phải trang  Mẫu 3: Bộ nút nằm theo bố cục hình tròn Học phần II - Photoshop Trang 115/116 Tài liệu hướng dẫn giảng dạy  Mẫu 4: Bộ nút nằm theo bố cục hình tròn  Mẫu 5: Sắp xếp chữ bố cục hình nằm bên phải trang III.7 BÀI TẬP THAM KHẢO III.7.1 Bài tập 1: Sử dụng cơng cụ vùng chọn hình chữ nhật tạo trang web theo mẫu sau: Các bước tiến hành tạo thành phần cho trang Web III.7.2 Bước 1: tạo phần baner Dùng vùng chọn hình chữ nhật chọn Fixed size vẽ hình chữ nhật với kích thước ngang: 640 x cao 72 pixels Tơ màu xanh dương vào vùng chọn đánh phần nội dung cho baner III.7.3 Bước 2: tạo logo trung tâm tin học Thực tạo phần logo Trung Tâm Tin Học vẽ vùng chọn với kích thước ngang =200 x cao 80 pixels tơ màu xanh dương vào vùng chọn Học phần II - Photoshop Trang 115/116 Tài liệu hướng dẫn giảng dạy Sử dụng cơng cụ chọn hình chữ nhật để vẽ hình vng màu trắng làm phần cho ký tự ”T,T,T,H” Có thể sử dụng hiệu ứng layer style để làm ký tự Trung Tâm Tin Học tạo độ dầy cho chữ III.7.4 Bước 3: tạo nút trung tâm tin học Vẽ nút: “Trang chủ”, “Học Phần”, “Đăng ký” tơ màu xanh nhạt xanh đậm chọn màu nhập phần nội dung nút Để tạo nút bấm với hai trạng thái người sử dụng nhấn vào thay đổi trạng thái hai nút đậm trạng thái III.7.5 Bước 4: tạo khung nhập văn xếp bốc cục cho trang web Vẽ vùng chọn hình chữ nhật với = 840 x cao 280 pixel tơ màu vàng dùng cơng cụ văn vẽ trang web để tạo phần khung vền cho văn Tiện cho việc canh chỉnh nội dung văn cần canh chỉnh văn nhấn phím CTRL +T vào tab character để canh văn theo bố cục người thiết kế Kết hồn tất mẫu III.7.6 Bài tập 2: Tạo bố cục trang Web Tạo kích thước trang Web với ngang = 768 pixels, cao = 480 pixels tơ trắng Học phần II - Photoshop Trang 115/116 Tài liệu hướng dẫn giảng dạy Dùng cơng cụ pen tool vẽ mảng cong theo gốc trang Web > Ctrl + Enter để đổi đường path thành vùng chọn Dùng cơng cụ vùng chọn kéo vùng chọn sang tập tin ảnh cần cắt dùng cơng cụ di chuyển phần vùng chọn sang trang Web đặt gốc trái Vẽ vùng chọn với kích thước ngang = 768 cao = 1pixel > tơ màu đen vào vùng chọn > dùng vùng chọn cắt tạo đường nét khơng liền cho mẫu tơ pattern > dùng cơng cụ vùng chọn chọn mẫu vào thực đơn> Edit > Define pattern > vẽ lại vùng chọn tơ mẫu vào kết đường viển khơng liền nét Tạo layer  Dùng cơng cụ vùng chọn hình tròn bấm giữ ALT+SHIFT+ kéo chuột tạo vòng tròn từ tâm tơ màu xanh nhạt  Vẫn giữ vùng chọn vào thực đơn Edit\Stroke\width = 2pixels\Outside\Color chọn màu xanh đậm để tạo viền cho vòng tròn  Tương tự thực cho vòng tròn màu trắng để tạo hình tròn nhỏ  Cắt táo đặt hình táo vào vòng tròn trắng  Dùng cơng cụ văn đánh “WELCOME” tơ màu xanh nhạt > xoay 90 > giảm opacity 40% để tạo phần văn mờ nhập số thơng tin địa website xếp lại theo mẫu Học phần II - Photoshop Trang 115/116 Tài liệu hướng dẫn giảng dạy Tạo nút Icon  Chọn cơng cụ Shape tool chọn hình shape cần vẽ để tạo icon với kích thước ngang = cao = 35 pixel vùng chọn vng dùng mẫu pattern tạo trang trí cho nút  Tạo logo cho trang Web dùng Brush tool vẽ dạng táo > nhập văn “AppleSign”  Chọn Opacity: 20% để làm giảm màu chữ “AppleSign” > dùng cơng cụ Move tool đặt vị trí trang Web Học phần II - Photoshop Trang 115/116 [...]...  Ổ đĩ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/116 Tài liệu hướng dẫn giảng dạy I.5 Thanh Menu Bar Thanh trình đơn (Menu bar)... 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/116 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á... (Graphic Interchange Format): Là dạng thường được sử dụng nhất với nhiều ưu Học phần II – Thiết kế Web với Photoshop Trang 18/116 Tài liệu hướng dẫn giảng dạy đ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... liên kết (link) với nhau : Dùng để phân phối đều các đối tượng được liên kết với nhau III Lệnh tạo viền cho vùng chọn Chọn đối tượng với vùng chọn xác định Menu Edit \ Stroke, hiển thị hộp thoại Stroke Thay đổi các thuộc tính trong hộp thoại Stroke  Width: Độ dày của đường viền  Color: màu của đường viền  Inside: tạo viền bên trong Học phần II - Photoshop Trang 26/116 Tài liệu hướng dẫn giảng dạy. .. 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/116 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ụ:... pixel Học phần II – Thiết kế Web với Photoshop Trang 18/116 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.. .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à... 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... 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 Học phần II – Thiết kế Web với Photoshop Trang 18/116 Tài liệu hướng dẫn giảng dạy 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à... 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: Học phần II – Thiết kế Web với Photoshop Trang 18/116 Tài liệu hướng dẫn giảng dạy  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 ... liệu hướng dẫn giảng dạy giáo trình, có tham khảo số tài liệu sau: Tài liệu Tài liệu Tài liệu Tài liệu … Học phần II – Thiết kế Web với Photoshop Trang 18/116 Tài liệu hướng dẫn giảng dạy HƯỚNG DẪN... – Thiết kế Web với Photoshop Trang 18/116 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 trình biên soạn tài liệu. .. 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/116 Tài liệu hướng dẫn giảng dạy Adobe Photoshop