티스토리 툴바

Daum
Tistory
로그인

깨끗하게 맑게 자신있게! 이미지를 투명화 시키는 방법!

2007/12/02 18:06 | DesignStudy/CSS&XHTML

7개의 댓글

이미지를 수정하다보면 이미지 바탕이 투명해야할 경우가 있습니다. 예를들어 배경에다가 로고이미지를 글씨만
써서 투명화 시킨다음에 올려논다던가 레이어위에 이미지를 떠다니게 해야하는경우 등 생활의(?) 여러면에서
필요성을 느끼실 겁니다. 하지만 이미지툴에 큰 관심이 없으신 분들은 잘 알지 못하셔서 포기하시는 경우가
있으신데요 이제는 노 프라블럼! 디자이니아가 함께합니다 :)

이미지에는 여러종류의 포맷이 있습니다. jpg,bmp,gif,png...등등 하지만 이 모든 포맷들이 투명을 지원하는 것이
아닙니다. 투명을 지원하는 포맷은 Gif,와 Png-24포맷 뿐입니다. 이 정도의 문제에 대해 접하신분은 적어도
포토샵이나 기타 수정이 용이한 이미지툴이 있으리라 믿습니다. 저는 포토샵을 이용해 설명하도록 하겠습니다.

Gif와 Png-24포맷 도대체 무엇이 다를까요? 바로 하단의 이미지를 보시면 한눈에 비교가능 합니다.

흰 바탕에 놓고 봤을 때는 그렇게 많은 차이가 보이지 않습니다. 근데 왼쪽의 이미지가 좀 색감이 떨어집니다.

Gif format(Left)-Png24 format(Right)
자 이제 정말 큰 차이가 눈으로 보이시죠? 왼쪽의 이미지는 투명이 깨끗하게 지원되지 않고 흰색 테두리가 조금
생겨난것을 볼 수 있습니다. 반면 오른쪽의 이미지는 원본의 그대로 컬러와 깨끗한 배경처리가 되있습니다.
이것이 바로 이 둘의 차이점입니다. Gif는 256색이 최고 한계치입니다. 색을 표현하는 능력이 좀 떨어지긴 해도
로딩이 무척빨라 웹에서 사랑받는 포맷입니다. Png24포맷은 색상의 채널을 더해서 투명처리가 저렇게 말끔하게
되면서도 원본의 색상을 그대로 살려내는 것이 가능합니다.

그렇다고 해서 Png가 절대적으로 좋다는 것은 아닙니다. 흰 색 바탕에 사용할경우 Gif는 그렇게 큰 문제를
발생하지 않습니다. 세부 투명옵션 조절을 통해서 더욱 깨끗하게 처리할수도 있습니다. (한계는 있지만)
png포맷이 아직까지 큰 사용률을 보이지 못하는것은 ie6의 미지원입니다. 실질적인 브라우저 점유율을 놓고
봤을때 Ie6의 사용률이 가장 높습니다. ie6 이 절대로 표준을 잘 지키는 브라우저가 아니지만 대중적인
면에 있어서는 표준이나 다름없이 쓰이고 있습니다. 저도 크로스 브라우징 테스트를 할 때 가장 신경쓰는 부분이
ie6에서 어떻게 랜더링이 되는지에 있습니다. 스타일시트를 통해 png파일을 투명처리 할 수 있지만 이 경우
연산에서 조금의 시간이 걸린다고 들었습니다. 상황에 따라서 두 포맷을 절충해서 사용하면 적당합니다.
(저는 아무리 그래도 png포맷을 사랑합니다!! 깨끗하니까 ! )

포토샵을 통해 어떻게 투명이미지로 저장하는지 알아보겠습니다. 먼저 작업한 레이어창을 불러옵니다.


이렇게 작업을 한상태라고 칩시다. 처음에 이미지를 만들때 바탕을 만들어 놨다면 저렇게 뜰 것입니다. 하지만
우리는 투명화 작업을 위해서 배경을 날려야 됩니다. Background레이어를 더블클릭하면 일반 레이어로 전환
시킬것인지 질문합니다. 예를 눌러서 일반레이어로 전환시킨뒤 휴지통버튼을 눌러 삭제해줍시다. 그럼 작업한
창이 다음과 같이 투명상태로 변환됩니다.



포토샵에서 저렇게 뒤에가 타일무늬로 나오는것은 그 부분은 투명이란 뜻입니다. 따라서 현재 바탕이 투명화
되었다는걸 볼 수 있습니다. 가장 중요한 포맷을 선택하고 저장하는 부분이 남았습니다.
Save->Save for web&Devices 를 눌러줍니다. 버전마다 살짝 다른 부분이 있겠지만 잘 선택할수 있습니다.
그럼 다음과 같은 창이 뜹니다. 우측을 주목해주세요

프리셋란을 살펴보시면 저런 리스트가 있습니다. Gif다음에 숫자가 나오는것은 색상 컬러의 수입니다.
Gif로 설정할 시에는 컬러는 최대로 높여주세요. 그리고 Gif로 저장할때 Transparency에 체크가 되있나 확인!
그 밑부분엔 투명옵션을 조절할수 있습니다. 골라잡아~ 골라잡아~ (이런 무책임한 놈....)
또 다른 포맷방법인 Png24로의 저장방법은 무척 간단합니다. Png-24를 선택한다음 그냥 세이브 해주심 끝!

이제 마지막관문인 이미지 적용이 남았네요. Gif의 경우는 자체적으로 투명기능이 활성화 되니 따로 손댈필요
없이 원하는 부분에 삽입하면 한 큐에 끝납니다만... 우리의 문제아 ie6을 위해 Png는 설정을 좀 해줘야 됩니다.
Png 파일을 삽입할 파일을 열어 <head>~</head> 사이에 다음과 같은 소스를 추가 해봅시다.

 마우스 제한 임시 풀기

자, 이제 마무리 단계입니다. 이미지를 삽입하는 태그가 <img src="주소" ...기타 주절주절 /> 대충 이런
기본형식으로 되있을 겁니다. 여기에 Class값을 추가해줍시다. <img src="주소" class="png24" ..주절/>
이런식으로 하면 위에서 적용시킨 스타일시트값이 그 이미지에 적용되므로써 Png이미지도 ie6에서 투명하게
보입니다. 이것을 이용하면 불투명하게 만들수도 있습니다. 포토샵작업을 할 때 배경레이어의 Opacity를 낮춰
줌으로써 불투명한 이미지도 효과를 낼 수 있습니다.

간단한 내용인데 이거저거 예제를 들고 보여드리느냐 무척 길어졌네요:) 무척 힘들여썼는데 이해가 잘되셨으면
좋겠습니다:) 이제 투명이미지 여러분도 만드실수 있겠죠?

Comments

« prev 1 ... 44 45 46 47 48 49 50 51 52 ... 61 next »