Có bao nhiêu định dạng trong PNG? Các đặc điểm là gì? Các định dạng PNG thường được sử dụng cho PC thiết kế web là gì? Định dạng PNG phù hợp nhất cho điện thoại di động thiết kế web là gì?
Nếu bạn có câu hỏi về những câu hỏi này, thì tôi rất muốn nói với bạn rằng đây là câu trả lời bạn cần.
định dạng PNG và độ trong suốt
png có 3 định dạng có độ sâu khác nhau: PNG8, PNG24 và PNG32.
Có ba định dạng: mờ đục, màu trong suốt và trong suốt Alpha.
png8:
8 bit PNG hỗ trợ lên tới 256 (2 đến công suất của 8), trong khi PNG 8 bit thực sự hỗ trợ độ mờ, độ trong suốt của chỉ số và độ trong suốt của alpha.
png24:
hỗ trợ 24 màu và mờ đục.
png32:
Nó hỗ trợ màu 2 đến 32 công suất và 32 bit là định dạng được sử dụng phổ biến nhất. Nó bổ sung thông tin minh bạch 8 bit trên cơ sở PNG 24 bit, hỗ trợ các mức độ khác nhau của các hiệu ứng mờ.
Trên thực tế, ba định dạng của PNG8 là mờ đục, chỉ số trong suốt và Alpha trong suốt. Điều này chỉ phân loại tất cả các định dạng của png:
[/h 『png chỉ số trong suốt” định dạng
Các định dạng bao gồm: “PNG8opaque” và PNG24 ‘”. hình
Mở Photoshop, mở tệp PSD với độ trong suốt bất cứ lúc nào và lưu nó ở tất cả các định dạng web (Ctrl+Shift+Alt+S), như trong bảng điều khiển sau:
Màu trắng mặc định
Độ sâu hình ảnh PNG đã xuất là 24 bit và hình ảnh mờ đục, tương tự như hình ảnh JPG
</p Chúng tôi đã học được rằng độ sâu của PNG24 thực sự là 24 bit. Sau đó kiểm tra kênh ALHPA 8 bit ở trên, có nghĩa là "png32" = "png24+alpha". Đây có thể là lý do tại sao các nhà phát triển phần mềm Photoshop không thêm định dạng PNG32-bit. Hình ảnh sau đây là một lựa chọn các định dạng hình ảnh được lưu trữ dưới dạng giao diện web trong Photoshop, nhưng không có PNG32.
[/h 『PNG INDEX PRENCARY” 256)
2. Cấu hình Trong hình bên dưới, bạn có thể xuất trình minh bạch PNG8 chỉ số
Lưu ý: Hiệu quả của việc xuất “Độ trong suốt của chỉ số PNG8” trên PS tốt hơn pháo hoa. Cạnh:
[/h 『chỉ số PNG8 trong suốt chỉ có màu chỉ số trong suốt, không có màu chỉ số mờ. Phía bên trái của hình ảnh dưới đây là một pixel mờ, và sẽ không có sự lởm chởm ở trình duyệt khi mở trong trình duyệt. Phía bên phải là một pixel hoàn toàn trong suốt hoặc mờ đục, và sẽ bị lởm chởm ở trình duyệt khi mở trong trình duyệt.
Làm thế nào để tránh các cạnh răng cưa của “chỉ số PNG8 trong suốt”?
Phương pháp: Đặt màu của tua để phù hợp với màu nền để đạt được độ trong suốt thị giác.
Tôi tin rằng không khó để hiểu rằng sử dụng cùng màu nền như tua có thể thỏa mãn độ trong suốt thị giác. Nhược điểm là nó chỉ có thể thích nghi với một màu nền và các màu nền khác cũng sẽ tạo ra các sọc.
Làm thế nào để đặt nó? Mở Photoshop và “Thay thế”Lưu dưới dạng bảng định dạng web để thực hiện như sau. Chọn màu phù hợp với màu nền trong tùy chọn cạnh linh tinh. Phần mềm xuất khẩu là pháo hoa. Các đặc điểm của nó được tóm tắt như sau:
1. Kênh thang độ xám 8 bit, ghi lại thông tin minh bạch trong hình ảnh ở mức 256 mức độ Grays và xác định các khu vực trong suốt, mờ đục và mờ
2. Hỗ trợ tính minh bạch và mờ đầy đủ
3. Tệp “PNG8alpha trong suốt” rất nhỏ
4. “PNG8alpha trong suốt” có trục trặc trong IE6
5. Làm thế nào để xuất “Tính minh bạch PNG8alpha” bằng cách sử dụng pháo hoa
6. Trong pháo hoa, trong bảng tối ưu hóa, độ trong suốt của PNG8alpha có thể được xuất theo cấu hình đường viền màu đỏ trong hình dưới đây.
Lưu ý: Firewoks hỗ trợ xuất khẩu độ trong suốt của PNG8alpha, Photoshop không hỗ trợ xuất khẩu PNG8alpha Minh bạch
ps hướng dẫn: Sử dụng mặt nạ để cắt thông qua các cạnh phức tạp
<
Khi nói đến điện thoại di động, điều cần thiết là phải xem xét lưu lượng truy cập. PNG được chọn cần phải đáp ứng các yêu cầu về kích thước nhỏ và hiệu ứng hình ảnh tốt. Vậy định dạng PNG nào đáp ứng hai yêu cầu này? Thực hiện một thử nghiệm ~
Kiểm tra các định dạng PNG khác nhau
Nền tảng thử nghiệm: Trình duyệt iOS & Androidwebkit
Hình ảnh thử nghiệm: Hình ảnh elf đầy màu sắc 1230*82
Học sinh cần học phần mềm có thể tìm kiếm câu lạc bộ vàng trên Baidu và tải xuống nhiều tài nguyên học tập hơn từ blog Gold Club! Nếu bạn muốn biết tôi, xin vui lòng tìm kiếm Luo Jin trên Baidu. Chào mừng bạn đến để tìm hiểu thêm về con đường thiết kế của tôi!
Kết quả kiểm tra:
Tuy nhiên, sau khi tác giả sử dụng một số sprites để kiểm tra “png8alpha” được xuất khẩu bằng pháo hoa, nó có hỗ trợ tốt hơn trên điện thoại di động. Không chỉ kích thước tệp nhỏ mà còn tiết kiệm lưu lượng và hiệu ứng mờ là tốt. Do đó, thiết bị đầu cuối di động áp dụng “png8alpha trong suốt” và tôi tin rằng “png8alpha trong suốt” là một xu hướng trong tương lai ~
png nào để chọn từ PC
loại PC nào được sử dụng?PNG? Trong thực tế, chủ đề này đã được kết thúc từ lâu. Hãy để tôi giới thiệu ngắn gọn dưới đây.
Sơ đồ sử dụng png8:
Lưu ý: Tại sao sử dụng PNG32 thay vì “tính minh bạch của Xianpng8alpha”? Bởi vì hầu hết tốc độ Internet của PC đều tốt, nên sử dụng hình ảnh PNG với hiệu suất tốt hơn. Rõ ràng, PNG32 là phù hợp nhất. Tất nhiên, bạn cũng có thể sử dụng “PNG8alpha trong suốt”, nhưng chất lượng trong màn hình độ phân giải cao không tốt bằng PNG32
. BG {
phụ trợ: url (Global.png? V = 20130530) không lặp lại;
_background: url (Global_png8.png? V = 20130530) không lặp lại; // IE6 Hình ảnh nền được sử dụng
}
Giải pháp sử dụng các bộ lọc IE:
tiêu tốn nhiều hiệu suất hơn và có nhược điểm như không hỗ trợ ốp nền, dẫn đến lỗi liên kết. Giải pháp này không được khuyến khích, don lồng làm cho bạn trông giống như IE vì lợi ích của IE ~. nó BG {Filter: Progid: Dimxagetransform. Microsoft.Alphaimageloader (src = “img.png”, định cỡ phương thức = “scale”);}
Ngoài ra còn có các phương thức vá và vá, vì vậy tôi sẽ không giới thiệu chúng ở đây. Nếu bạn quan tâm, bạn có thể tải xuống trên Baidu: IE6 hỗ trợ PNG24
Nhìn thoáng qua định dạng, loại màu, số, độ trong suốt và hỗ trợ trình duyệt của PNG
