Tin tức

Sử dụng ảnh PNG trong thiết kế web

06/11/2012

Về cơ bản, định dạng PNG đem lại cho ta những ưu thế vượt trội hơn so với các định dạng phổ thông khác hiện này như JPG, GIF, BMP.. Những ưu thế này tỏ rõ sức mạnh hơn khi được sử dụng trong môi trường thiết kế web:

Định dạng ảnh PNG?
PNG là từ viết tắt bởi 3 ký tự đầu trong cụm từ Portable Network Graphics. Bản thân tên của định dạng ảnh PNG đã cho ta thấy mục đích của nó khi ra đời là tạo nên một chuẩn mực mới cho ảnh sử dụng trong xây dựng website giới thiệu sản phẩm. Cho tới nay, định dạng ảnh PNG đã được các nhà thiết kế web coi như một lựa chọn số 1, bởi những tính năng mạnh mẽ của nó. Sau khi trình duyệt IE7 ra đời hỗ trợ thì định dạng PNG càng trở nên phổ thông hơn hết, cùng với các thủ thuật được tạo ra bởi Java Script và CSS thì sự phổ biến của định dạng này càng phát huy sức mạnh vốn có của mình.

Về cơ bản, định dạng PNG đem lại cho ta những ưu thế vượt trội hơn so với các định dạng phổ thông khác hiện này như JPG, GIF, BMP.. Những ưu thế này tỏ rõ sức mạnh hơn khi được sử dụng trong môi trường thiết kế website:

Độ sâu của mầu: Ảnh PNG hỗ trợ đến true color 48bit màu. Trong khi đó ảnh gif chỉ ở mức 256 màu.

Giảm thiểu dung lượng: Trong tất cả các định dạng ảnh phổ thông hiện nay thì ảnh PNG có thể coi là có dụng lượng nhỏ nhất. Điều này rất quan trọng khi sử dụng PNG trong môi trường web

Tùy biến kênh Alpha: Bạn hoàn toàn có thể kiểm soát đựoc mức độ trong suốt trên định dạng PNG.

Sau đây là một ví dụ rất rõ ràng về việc sử dụng sức mạnh của PNG để giảm thiểu công đọan rườm rà khi mô tả tình trạng thời tiết trên 49abcnews.com

anh 49abcnews Sử dụng ảnh PNG trong thiết kế web

Trong khi ta phải cung lúc làm nhiều bức ảnh để mô tả các tình trạng khác nhau thì với PNG ta chỉ phải thay đổi background cho phù hợp với nội dung.

anh 49abcnews2 Sử dụng ảnh PNG trong thiết kế web

Chỉ với một đọan CSS ngắn ta có thể dễ dàng tạo ra những bức ảnh có nội dung khác nhau khi sử dụng ảnh PNG.

Ta cũng có thể dễ dàng tạo ra một lớp mặt nạ để sử dụng như một layer trên bề mặt của tấm hình background.

Tạo một ảnh PNG như 1 Layer Mask trong Photoshop

mat na Sử dụng ảnh PNG trong thiết kế web

Lớp mặt nạ có phần logo trong suốt

Đặt lớp mặt nạ đè lên tấm hình nền.

mat na2 Sử dụng ảnh PNG trong thiết kế web

Dịch vụ tại ESVN:  Dịch vụ SEO - Thiết kế website - Thiet ke webThiết kế web chuyên nghiệp , Website giá rẻ , Web mien phi - Đang ky ten mienMua tên miềnTen mien mien phi - Máy chủ ảothuê VPS

Xây dựng website bán hàng

Xây dựng website giới thiệu sản phẩm

Cách xây dựng website