Tạo thiết lập cho hình ảnh trang web. Lưu hình ảnh để sử dụng trên web.

1. Bài 8
TẠO ẢNH CHO TRANG WEB

2. 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

3. 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

4. GIAO DIỆN TRANG WEB
Giao diện hoàn thành:
Slide 8 – Tạo ảnh cho trang web 4

5. 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

6. 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

7. TẠO TRANG WEB
Mở tập tin ảnh nền
Slide 8 – Tạo ảnh cho trang web 7

8. 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

9. 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

10. 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

11. 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.
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

12. CẮT ẢNH TRANG WEB
Mẫu cắt: (Ví dụ)
Slide 8 – Tạo ảnh cho trang web 12

13. 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 năng snap: Chọn menu View > Snap
Nhấn chuột vào thước ngang. Giữ và kéo chuột xuống
hình ảnh.
Nhả chuột ở vị trí thích
hợp.
Thực hiện:
Hiển thị thước đo (Rulers): Chọn menu View > Rulers
Tắt tính năng snap: Chọn menu View > Snap
Nhấn chuột vào thước ngang. Giữ 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

14. 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

15. 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

16. KẾ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

17. 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

18. 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

19. 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.
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
Các thuộc tí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

20. 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

21. 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:
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 – Tạo ảnh cho trang web 21

22. SAVE FOR WEB & DEVICES
Slide 8 – Tạo ảnh cho trang web 22

23. 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
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

24. 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:
Hỗ trợ khoảng màu rộng.
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.
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:
Hỗ trợ khoảng màu rộng.
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

25. 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

26. 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

27. 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.
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

28. 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.
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