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

Công việc của bạn như trong phần 2 là lựa chọn các thông số trong bảng Optimize để có kích thước file nhỏ nhất và thời gian load nhanh nhất với chất lượng ảnh như bạn mong muốn.. Bạn tíc

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

Phần 3:

Tiếp theo, chúng ta sẽ tối ưu hóa một hình gif với nền transparency

Trở lại với cái Logo, FF tạo ra cái logo với nền trong suốt (transparent

background)

Bạn hãy xem trong hình 28

Ấn Ctrl + Shift + M để chuyển sang IR

Trong IR, chọn 2-Up bạn sẽ thấy là cái hình được Optimize có nhiều vết

răng cưa Như hình 29 bạn thấy

Nhiệm vụ của chúng ta là làm giảm răng cưa đi để cái logo nhìn trong

trình duyệt được đẹp nhất

Công việc của bạn như trong phần 2 là lựa chọn các thông số trong bảng Optimize để có kích thước file nhỏ nhất và thời gian load nhanh nhất với chất lượng ảnh như bạn mong muốn

HÌnh 30

Bây giờ, hãy xem trước sản phẩm của bạn trong trình duyệt hiển thị thế nào Từ File > Outphut settings > HTML Như hình 31

Của sổ của tùy chọn Output xuất hiện

Bạn chú ý vào các điểm, như sau:

1 Bạn tích chọn Image, nghĩa là Logo sẽ là một hình ảnh của web

2 Bạn tích chọn Background, nghĩa là logo của bạn sẽ là hình nền của web, background

3 BG color là màu nền, FF chọn màu nền là màu xanh nhạt sang như bạn thấy

4 Bạn cũng có thể chọn hình nền theo ý bạn trong phần background

Image Ở đây FF không chọn, mà chỉ chọn logo FF tạo là một đối tượng trên trang web

Sau khi đã xong, bạn click Ok

Click vào cái hình IE như hình 33 để xem trước hình của bạn hiển thị như thế nào

Hình 33

Và kết quả bạn thấy trong hình 34

Nó có thêm các thông tin, đoạn code, … như bạn thấy

Nhưng hình ảnh thì xấu quá Quá tệ phải không

Chúng ta sẽ cải thiện nó, như lúc trước FF nói, chúng ta sẽ cần “Matte”

trong Optimize Pallete

Bây giờ, bạn hãy chọn cho bạn màu của Foreground là màu của màu nền

trong khi bạn chọn màu nền cho trang web Ở đây, FF chọn màu nền là

màu xanh sang nhạt, CCFFCC Bạn có nhiều cách chọn màu, cái đó phụ

thuộc vào bạn, FF chọn cách đổi màu foreground cho hợp với màu nền

của trang web

Trong Optimize palette, di chuột đến Matte và chọn Foreground

Hình 35

Bạn nhìn thấy logo trở nên mịn hơn rất nhiều ở viền

FF phóng to để bạn nhìn cho rõ, hãy để ý là xung quanh viền chi tiết có màu foreground bao phủ Hình 36

So sánh với nó khi không qua bước “Matte”, ở hình 37

Và hãy xem thử kết quả của bạn trong trình duyệt xem bây giờ logo của bạn hiển thị thế nào

Hình 38

So sánh với hình ban nãy không qua Matte xem nhé,

Hình 34

Bạn đã có một kết quả rất tuyệt

Nhưng, hãy thử cải thiện thêm chút xíu bằng cách bổ sung thêm một màu đệm trước cho các chi tiết của Logo, bạn sẽ còn thu được kết quả ấn tượng hơn Cái này phụ thuộc vào bạn

Bây giờ, FF sử dụng Outer Glow trong Layer Style, hình 39

Nhưng trước khi thao tác với nó, hãy trả lại tùy chọn Matte là None

Kết quả của FF sau khi thao tác với Outer Glow, hình 40

Bạn sẽ thấy có một lớp màu xanh bao bọc ngoài

Công việc tiếp thao là chọn lại Matte với màu là màu hồi nãy, nếu bạn không thay đổi gì, đó là màu Foreground Màu FF đã chọn là CCFFCC Kết quả bạn thấy sau khi Matte là:

Hình 41

Đừng lo gì cả nếu bạn nhìn cái logo của bạn như thế, giờ hãy xem kết quả trong trình duyệt

Hình 42:

Quá tuyệt, bạn đã có một logo cực đẹp

-

Bây giờ hãy xem FF thao tác lại chút xíu với bước Outer Glow nhé Chọn lại màu và tăng size trong Outer Glow Bạn thấy Logo có thêm một màu vàng nhạt khá đẹp Hình 43

-

Công việc cuối cùng là save nó lại, hãy chọn Save optimized As, và chọn html and Image (HTML) Như hình 44

Và bạn hãy xem là có một folder với một trang web đã xuất hiện, hãy mở

và xem kết quả của bạn

Hình 45