TẠO TRANG WEBTiê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
Trang 1Bài 8
TẠO ẢNH CHO TRANG WEB
Trang 2TÓ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.
Trang 3NỘ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
Trang 4GIAO DIỆN TRANG WEB
Giao diện hoàn thành:
Slide 8 – Tạo ảnh cho trang web 4
Trang 5KÍ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
Trang 6THAY ĐỔ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
Trang 7TẠO TRANG WEB
Mở tập tin ảnh nền
Slide 8 – Tạo ảnh cho trang web 7
Trang 8TẠ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
Trang 9TẠ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
Trang 10TẠ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
Trang 11CẮ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
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
Trang 12CẮT ẢNH TRANG WEB
Mẫu cắt: (Ví dụ)
Slide 8 – Tạo ảnh cho trang web 12
Trang 16KẾT HỢP CÁC MẢNH CẮT
Thực hiện:
Chọn menu View > Clear Guides để xóa các đường
gióng
Lựa chọn công cụ Slice Select
Nhấn chuột vào mảnh cắt để lựa chọn
Slide 8 – Tạo ảnh cho trang web 16
Trang 19THIẾ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
URL: Liên kết đến trang web khác
Alt: Ghi chú cho ảnh
Thực hiện:
Chọn công cụ Slice Select
Chọn 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
Trang 20THIẾ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
Trang 21SAVE 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ốtvớ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:
Tối ưu hóa:
Quá trình tạo tập tin hình ảnh đảm bảo chất lượng tốtvớ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 – Tạo ảnh cho trang web 21
Trang 22SAVE FOR WEB & DEVICES
Slide 8 – Tạo ảnh cho trang web 22
Trang 23SAVE 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
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
Trang 24Không hỗ trợ nền trong suốt.
Phổ biến trên Web
Không hỗ trợ nền trong suốt
Phổ 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
Trang 26Chọn thiết lập sẵn từ danh sách Preset.
Slide 8 – Tạo ảnh cho trang web 26
Trang 27TỐ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
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
Trang 28TỔ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
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
