Tối ưu hình ảnh cho trong thiết kế web ( phần 1 )

Chia sẻ: GfAFAD EYTRY | Ngày: | Loại File: PDF | Số trang:9

Thêm vào BST

Báo xấu

88
lượt xem 10
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Tối ưu hình ảnh cho trong thiết kế web ( phần 1 ) Phần 1: Tối ưu hóa hình ảnh định dạng JPEG trong Photoshop FF mở bức ảnh này

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Tối ưu hình ảnh cho trong thiết kế web ( phần 1 )

Tối ưu hình ảnh cho trong thiết kế web ( phần 1 ) Phần 1: Tối ưu hóa hình ảnh định dạng JPEG trong Photoshop FF mở bức ảnh này Bạn chọn File > Save for web, như hình 1 Bạn thấy là hình ảnh của bạn trông rất xấu vì mặc định của PTS là tối ưu định dạng .gif. Bạn hãy đổi thành jpeg như hình 2
Bạn có thể thay đổi để chọn 2-up hay 4 -up, hình 3 là FF chọn 4-up. Bạn hãy để ý một chút về các thông số bao gồm: ở hình gốc chỉ có kích thước file, các hình còn lại có: định dạng ảnh, kích thước file, thời gian tải (mặc định cho tốc độ 28.8kbps) và bên góc phải là chất lượng file sau khi tối ưu (Optimize). Bạn cũng sẽ có vài cách để optimize, bạn sẽ theo dõi sau đây 2 phương pháp. Tùy từng loại ảnh, bạn sẽ chọn phương pháp phù hợp. Phương pháp 1: Việc tối ưu là làm giảm thời gian load, và đảm bảo chất lượng ảnh như bạn mong muốn. Bây giờ, trong hình 4, bạn sẽ để ý thấy một số thông số như Quality: bạn sẽ thay đổi được từ 0 – 100 và quality càng thấp, kích
thước file càng nhỏ, load càng nhanh nhưng chất lượng càng kém, thông số thứ 2 là Blur, Blur càng lớn, ảnh càng mờ nhưng thoài gian load càng nhanh. Công việc của bạn là điều chỉnh Quality và Blur để đạt chất lượng ảnh Jpeg như mong muốn với thời gian tải là nhỏ nhất. Với tấm hình này, FF chọn các thông số như hình 5, và b ạn có thể so sánh kết quả trước và sau trong hình 6.
Như vậy là tạm chấp nhận được, khi so sánh một bức hình 829Kb còn lại 39Kb. Nếu bạn đã hài long, click vào nút Done. Tuy nhiên, nếu bạn không hài long vì thời gian load còn cao, hãy giảm chất lượng đi chút ít của ảnh gốc, ví dụ chỉnh lại Brighness/Contrast và Hue/Satuation. Ví dụ sau khi FF chỉnh lại một vài thông số của ảnh gốc. FF giảm Satuation và giảm Contrast. (Cái này là để giảm chất lượng ảnh gốc thôi). Các công cụ này nằm trong Image > Adjustment. Kết quả là FF giảm thời gian load còn 13s. Như trong hình 7. Click Done nếu bạn thấy hài lòng. Hoặc Save lại nếu bạn muốn sử dụng sau.
Chú ý: H ình mà FF mở là hình có màu sắc tươi sáng nên kích thước file khó giảm nhiều, tuy nhiên với các hình ảnh màu sắc thấp độ tương phản, bạn có thể tăng hơn thời gian load mà vẫn đảm bảo chất lượng, bạn hãy nhìn vào những quả nho xanh, sẽ thấy gần như chất lượng không thay đổi nhiều, trong khi các quả nho tím, lại giảm hẳn chất lượng hình ảnh. Phương pháp 2: Bạn mở hình mẫu 2, đây là một hình có màu nền có một mảng màu tối, do đó sẽ thích hợp cho bạn sử dụng Alpha Chanel để tối ưu.
Các bạn xem hình FF đ ã tạo, có 2 vùng rõ ràng như trong hình 8. Bây giờ, hãy giữ Ctrl và click chuột trái vào Layer dưới, có chứa hình hoa và con bướm. Một vùng chọn hình thành như hình 9.
Chọn Select > Save Selection (hình 10) và đ ặt tên, FF đ ặt là Optimize1. Như hình 11.
Hãy kiểm tra trong Chanel Pallet, đã có thêm một chanel mới có tên Optimize1 (hình 12). Ấn Ctrl + D để bỏ vùng chọn, chọn File > Save for web. Bạn thấy là các thông số đ ã được lưu như lần trước. Giờ hãy tăng Quality lên làm cho ảnh đẹp hơn tý. FF chọn Quality là 50, Blur là 0.1 và chất lượng thu được khá tốt, nhìn đôi cánh con bướm là biết, thời gian load là 21s và kích thước file là 57kb. Bây giờ, bạn click vào cái ô nhỏ tròn bên cạnh Quality, như hình 13, Chọn Chanel là cái bạn mới lưu hồi nãy (hình 14), Optimize1. Bạn sẽ thấy có 2 con trượt để bạn điều chỉnh Quality, như hình 15.
Hãy điều chỉnh một cách khéo léo, sau khi đã hài long, click OK và theme chút Blur nữa và kết quả của FF như hình 16. Thời gian load bây giờ là 16s và kích thước file là 45kb.