bài 8 tạo ảnh cho trang web - giáo trình fpt

Bài 8TẠ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.


GIAO DIỆN TRANG WEB

Giao diện hoàn thành:


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.


THAY ĐỔI ĐƠN VỊ ĐO

Chọn menu Edit > Preferences > Unit & Rulers.Thiết lập tùy chọn Pixels


TẠO TRANG WEB

Mở tập tin ảnh nền


TẠO TRANG WEB

Tiêu đề trang web:Chọn công cụ TypeChọn phông chữ, kích thước, màu sắcNhập nội dungCó thể dùng Wrap Text để tạo hiệu ứng uốn cong.

Tiêu đề trang web:Chọn công cụ TypeChọn phông chữ, kích thước, màu sắcNhập nội dungCó thể dùng Wrap Text để tạo hiệu ứng uốn cong.


TẠO TRANG WEB

Thiết lập style cho tiêu đề:Chọn chế độ pha trộn màu (Blend): normalTạo layer style. Lựa chọn kiểu Outer GlowThiế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): normalTạo layer style. Lựa chọn kiểu Outer GlowThiết lập các thông sốKết quả:


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.


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ơnCó 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ơnCó thể lưu các mảnh dưới các định dạng khác nhau.



Mẫu cắt: (Ví dụ)



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

hợp.



Tiếp tục tạo các đường gióng theo chiều dọc vàngang.



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


KẾT HỢP CÁC MẢNH CẮT

Thực hiện:Chọn menu View > Clear Guides để xóa các đườnggióng.Lựa chọn công cụ Slice Select.Nhấn chuột vào mảnh cắt để lựa chọn.



Chọn thêm các mảnh: Giữ phím Shift và nhấn chuộtvào mảnh cần thêm.



Kết hợp các mảnh: Nhấn chuột phải và chọn menuCombine slices.


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


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.


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ố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:



A. Hộp công cụ: Công cụ Zoom, Panning, Slice Select,Sampling ColorB. Cửa sổ previewC. Các thiết lập cho tập tin

A. Hộp công cụ: Công cụ Zoom, Panning, Slice Select,Sampling ColorB. Cửa sổ previewC. Các thiết lập cho tập tin


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.


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.


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.


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.


TỔNG KẾT

Photoshop hỗ trợ nhiều công việc thiết kế giao diệntrang webViệ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ơnCó 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ệntrang webViệ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ơnCó thể lưu các mảnh dưới các định dạng khác nhau.


bài 8 tạo ảnh cho trang web - giáo trình fpt

Documents