• Increase font size
  • Default font size
  • Decrease font size
  • leftlayout
  • rightlayout
Sử dụng ảnh định dạng PNG trong thiết kế web PDF. In Email
Được viết bởi Administrator   
Thứ bảy, 10 Tháng 5 2008 01:42

Sử dụng ảnh PNG trong thiết kế webPNG 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 đồ họa web. Cho tới nay, định dạng ảnh PNG đã được các nhà thiết kế đồ họa 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 đồ họa web:

  • 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
  • Độ 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.
  • 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

Sử dụng ảnh PNG trong thiết kế website đẹp

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.

Chọn ảnh PNG

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 nạ ảnh

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

Ảnh trong photoshop

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

ảnh thiết kế giao diện web
 
Cập nhật lần cuối lúc Chủ nhật, 17 Tháng 5 2009 00:32
 

Hỗ trợ trực tuyến

My status
ĐT:  04 - 6674.6520
In ấn: 0976.568.357
Web: 0904.103.345

QC

thiet bi ve sinh inox