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 …
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 Bài 10 TỔNG QUAN VỀ PHOTOSHOP CS I Cài đặt chương trình Photoshop 11 I.1 Độ phân giải 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 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 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 số ảnh 18 Bài 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 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 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ọ 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 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 …………………………………………………………………………………………………………………… ……….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ự Layer 55 I.3.1 Cách 55 I.3.2 Cách 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 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 nút Layer Style 68 II.1.1 Bước .68 II.1.2 Bước .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 .68 II.1.4 Bước .69 III Layer Mask (mặt nạ lớp) 70 III.1.1 Cách .71 III.1.2 Cách .71 Bài 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 hộp thoại 77 II.3 Gỡ bỏ uốn chữ 77 Bài ………………………………………………………………………………………………… 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 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 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 .99 II.1.2 Bước .99 III Tween frame 100 Bài .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 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 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/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 nhập văn 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 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/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 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/117 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/117 Tài liệu hướng dẫn giảng dạy Tại cuối bảng Animation, nút Forward background cho phép bạn di chyển tới, lui chuỗi frame Nút First frame cho phép bạn chọn frame chuỗi 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 toàn phim Học phần II - Photoshop Trang 115/117 Tài liệu hướng dẫn giảng dạy Khi hoà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/117 Tài liệu hướng dẫn giảng dạy Học phần II - Photoshop Trang 115/117 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 Học viên tạo trang tổng hợp gồm thành phần: Banner, ảnh minh họa, hoạt hình cho trang Web Các mục Bài tập Mục Mục Mục … 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ứ 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, cịn 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/117 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/117 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), 4Up (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: Học phần II - Photoshop Trang 115/117 Tài liệu hướng dẫn giảng dạy Chọn khung xem muốn áp dụng xác lập tối ưu hóa 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/117 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/117 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/117 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/117 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/117 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/117 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 hoà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/117 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/117 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 vuông 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/117 ... 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/117 Tài liệu hướng dẫn giảng dạy HƯỚNG... 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 trình biên soạn tài liệu hướng. .. – 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 nhập văn xếp bố cục cho trang web 113 Bài tập 2: .113 Học phần II – Thiết kế