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