png 파일 IE6 에서도 투명영역사용하자!!Total 1725 : Today 10 : Yesterday 7
(gif 이미지와 똑같아지는군요 ㅠ, 디자인전공이 아닌지라 그것까진 생각 못했넹..ㅋㅋ)
투명영역이 있는 png 파일을 IE6 브라우져에서 보면 투명영역이 회색으로 나타나게 됩니다.
이것은 이미지의 color 모드때문에 그런것인데 아래의 샘플을 잘 보세요..(IE6 브라우져에서 확인하세요)
이문제를 해결하기위해 파일 저장시 color mode indexed 로 변경 후 저장하면 해결 할 수 있습니다.
 gif 이미지 IE,FF 브라우져에서 투명영역처리가 잘 적용된다. |  png(Color Mode Indexed) 이미지 IE,FF 브라우져에서 투명영역처리가 잘 적용된다. |  png(Color Mode RGB) 이미지 IE6 브라우져에서 투명영역이 회색으로 보인다. |
자. 그럼 IE6 브라우져에서도 png 파일의 투명영역이 적용되기 위해 png 파일 저장 방법을 알아보자.
1. 포토샵에서 png 파일 저장시 color mode 는 indexed color를 선택하고
3. 이제 저장만 하면 IE6 에서도 PNG 파일의 투명영역을 사용할 수 있습니다.
덧.. 파일의 용량이 gif 보다는 커지므로 옵션을 적절히 설정하여 저장하세요
이 방법 외에도 IE style filter 효과를 주어 사용하는 경우도 있는데 그 방법은 브라우져의 리소스를 잡아먹어 비추(비추천)합니다.
TRACKBACK :: http://blueb.net/blog/trackback/912
-
투명처리 가능하고 압축률 우수한 PNG 쓰세요..
: 녹차 프린스 2008/12/09 15:38 DeleteDigital Web magazine 에서 [ Creative Use of PNG Transparency in Web Design ] 이란 내용이 있어 요약합니다. 웹 디자인시에 이미지의 형식은 GIF, JPEG, PNG를 사용하고 있습니다. 색상표현은 약하지만 압축률이 좋고(이미지 용량이 작고) 투명 처리가 가능하기 때문에 GIF 형식을 많이 사용하고 있으며, 사진 형태는 색상표현이 높은 JPEG을 사용하고 있습니다. 그러나 PNG 형식은 우수함을..
맙소사~맥북이라 아직 테스트는 못해봤는데 핵을 사용안하고 png를 사용할 수 있는 방법을 찾아내시다니 훌륭합니다~~
항상 좋은 정보 정말 감사합니다. 복받으실거에요 ^_________^
ㅎㅎ 어찌하다 보니 저도 좋은 발견하게 되었어요... 행복하세요!!!
좋은 방법이군요 ^^ 헌데 빈공간 투명은 가능 하지만 그림자 부분 처리나 반투명등의 효과가 적용되지 않으므로 gif와 다를점은 없는것 아닌지요
png 이미지 장점은 반투명 효과인데 indexed color를 사용하용함으로써 gif와 별반다를게 없어지다니 위의 팁은 쓸모없어지게 되는군요.. ㅎㅎ 일모리님의 칼같은 지적 감사합니다..
그래서 좀더 알아봤는데 포토샵의 경우 png-8,png-24(bit) 로 저장이 가능한데 png-8(bit) 역시 컬러 지원의 한개가 있어서 그런지 반투명 효과가 안되더군요..... IE6에서는 IE용 필터를 사용하는 수 밖에 없을거같네요 ㅠ.ㅠ