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

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

Thêm vào BST

Báo xấu

102
lượt xem 11
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 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).

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

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