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

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.
Hình 32

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
Mục đích của Outer Glow là tạo ra một lớp phủ ngoài các chi tiết ở rìa
của Logo nhằm tạo ra sử chuyển tiếp nhẹ nhàng hơn cho logo.
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