Bài 8 TẠO ẢNH CHO TRANG WEB TÓM TẮT BÀI TRƯỚC Mở tấm hình dưới dạng Smart Object. Chuyển đổi layer sang Smart Object. Chỉnh sửa đối tượng Smart Object. Thay thế nội dung của một Smart Object layer. Làm việc với các filter. Sử dụng Filter Gallery. Tính năng của SmartFilter. Sử dụng Vanishing Point. Mở tấm hình dưới dạng Smart Object. Chuyển đổi layer sang Smart Object. Chỉnh sửa đối tượng Smart Object. Thay thế nội dung của một Smart Object layer. Làm việc với các filter. Sử dụng Filter Gallery. Tính năng của SmartFilter. Sử dụng Vanishing Point. Slide 8 – Tạo ảnh cho trang web 2 NỘI DUNG BÀI HỌC Tạo thiết lập cho hình ảnh trang web. Lưu hình ảnh để sử dụng trên web. Slide 8 – Tạo ảnh cho trang web 3 GIAO DIỆN TRANG WEB Giao diện hoàn thành: Slide 8 – Tạo ảnh cho trang web 4 KÍCH THƯỚC ẢNH CHO TRANG WEB Hầu hết màn hình ở độ phân giải 800x600 pixels. Chia nhỏ tổng số pixel màn hình thành các vùng. Slide 8 – Tạo ảnh cho trang web 5 THAY ĐỔI ĐƠN VỊ ĐO Chọn menu Edit > Preferences > Unit & Rulers. Thiết lập tùy chọn Pixels Slide 8 – Tạo ảnh cho trang web 6 TẠO TRANG WEB Mở tập tin ảnh nền Slide 8 – Tạo ảnh cho trang web 7 TẠO TRANG WEB Tiêu đề trang web: Chọn công cụ Type Chọn phông chữ, kích thước, màu sắc Nhập nội dung Có thể dùng Wrap Text để tạo hiệu ứng uốn cong. Tiêu đề trang web: Chọn công cụ Type Chọn phông chữ, kích thước, màu sắc Nhập nội dung Có thể dùng Wrap Text để tạo hiệu ứng uốn cong. Slide 8 – Tạo ảnh cho trang web 8 TẠO TRANG WEB Thiết lập style cho tiêu đề: Chọn chế độ pha trộn màu (Blend): normal Tạo layer style. Lựa chọn kiểu Outer Glow Thiết lập các thông số Kết quả: Thiết lập style cho tiêu đề: Chọn chế độ pha trộn màu (Blend): normal Tạo layer style. Lựa chọn kiểu Outer Glow Thiết lập các thông số Kết quả: Slide 8 – Tạo ảnh cho trang web 9 TẠO TRANG WEB Tạo menu cho trang web: Chọn công cụ Type, nhập nội dung. Di chuyển vị trí bằng công cụ Move. Slide 8 – Tạo ảnh cho trang web 10 [...]... vào mảnh cắt để lựa chọn Slide 8 – Tạo ảnh cho trang web 16 KẾT HỢP CÁC MẢNH CẮT Chọn thêm các mảnh: Giữ phím Shift và nhấn chuột vào mảnh cần thêm Slide 8 – Tạo ảnh cho trang web 17 KẾT HỢP CÁC MẢNH CẮT Kết hợp các mảnh: Nhấn chuột phải và chọn menu Combine slices Slide 8 – Tạo ảnh cho trang web 18 THIẾT LẬP THUỘC TÍNH CHO CÁC MẢNH Các thuộc tính: URL: Liên kết đến trang web khác Alt: Ghi chú cho ảnh. .. và kéo chuột xuống hình ảnh Nhả chuột ở vị trí thích hợp Slide 8 – Tạo ảnh cho trang web 13 CẮT ẢNH TRANG WEB Tiếp tục tạo các đường gióng theo chiều dọc và ngang Slide 8 – Tạo ảnh cho trang web 14 CẮT ẢNH TRANG WEB Chọn công cụ Slice Nhấn nút Slices From Guides trên thanh tùy chọn: Hình ảnh được tự động cắt thành các mảnh nhỏ Slide 8 – Tạo ảnh cho trang web 15 KẾT HỢP CÁC MẢNH CẮT Thực hiện: Chọn...CẮT ẢNH TRANG WEB Slice: Được cắt từ một hình ảnh lớn hơn Lợi ích: Tốc độ download nhanh hơn Có thể lưu các mảnh dưới các định dạng khác nhau Slide 8 – Tạo ảnh cho trang web 11 CẮT ẢNH TRANG WEB Mẫu cắt: (Ví dụ) Slide 8 – Tạo ảnh cho trang web 12 CẮT ẢNH TRANG WEB Thực hiện: Hiển thị thước đo (Rulers): Chọn menu View > Rulers Tắt tính... thoại xuất hiện: Slide 8 – Tạo ảnh cho trang web 21 SAVE FOR WEB & DEVICES Slide 8 – Tạo ảnh cho trang web 22 SAVE FOR WEB & DEVICES A Hộp công cụ: Công cụ Zoom, Panning, Slice Select, Sampling Color B Cửa sổ preview C Các thiết lập cho tập tin Slide 8 – Tạo ảnh cho trang web 23 CÁC ĐỊNH DẠNG TẬP TIN GIF: Tối đa 256 màu Hỗ trợ nền trong suốt Hỗ trợ hình ảnh động Làm ảnh logo, mẫu ảnh nhỏ để làm nền JPEG:... biến trên Web Định dạng của các tấm hình chụp Slide 8 – Tạo ảnh cho trang web 24 CÁC ĐỊNH DẠNG TẬP TIN PNG: Cải tiến và thay thế định dạng GIF Hỗ trợ khoảng màu rộng Hỗ trợ ảnh trong suốt Slide 8 – Tạo ảnh cho trang web 25 TỐI ƯU CÁC MẢNH CẮT Thực hiện: Mở hộp thoại Save For Web & Devices Chọn tab Optimizied Lựa chọn các mảnh cắt Chọn thiết lập sẵn từ danh sách Preset Slide 8 – Tạo ảnh cho trang web 26... trang web 26 TỐI ƯU CÁC MẢNH CẮT Chọn trình duyệt để preview Nhấn Save Lựa chọn “Save As Type” là HTML Slide 8 – Tạo ảnh cho trang web 27 TỔNG KẾT Photoshop hỗ trợ nhiều công việc thiết kế giao diện trang web Việc cắt ảnh trang web thành các ảnh nhỏ hơn sẽ đem lại lợi ích: Tốc độ download nhanh hơn Có thể lưu các mảnh dưới các định dạng khác nhau Slide 8 – Tạo ảnh cho trang web 28 ... mảnh cắt Nhấn nút Set options trên thanh tùy chọn Slide 8 – Tạo ảnh cho trang web 19 THIẾT LẬP THUỘC TÍNH CHO CÁC MẢNH Hộp thoại xuất hiện: Thiết lập các thuộc tính Slide 8 – Tạo ảnh cho trang web 20 SAVE FOR WEB & DEVICES Tối ưu hóa: Quá trình tạo tập tin hình ảnh đảm bảo chất lượng tốt với kích thước tập tin nhỏ nhất Thực hiện: Chọn menu File > Save For Web & Devices Hộp thoại xuất hiện: Slide 8 . Point. Slide 8 – Tạo ảnh cho trang web 2 NỘI DUNG BÀI HỌC Tạo thiết lập cho hình ảnh trang web. Lưu hình ảnh để sử dụng trên web. Slide 8 – Tạo ảnh cho trang web 3 GIAO DIỆN TRANG WEB Giao diện. Rulers. Thiết lập tùy chọn Pixels Slide 8 – Tạo ảnh cho trang web 6 TẠO TRANG WEB Mở tập tin ảnh nền Slide 8 – Tạo ảnh cho trang web 7 TẠO TRANG WEB Tiêu đề trang web: Chọn công cụ Type Chọn phông. xuống hình ảnh. Nhả chuột ở vị trí thích hợp. Slide 8 – Tạo ảnh cho trang web 13 CẮT ẢNH TRANG WEB Tiếp tục tạo các đường gióng theo chiều dọc và ngang. Slide 8 – Tạo ảnh cho trang web 14 CẮT ẢNH TRANG