앞에서 작업한 버튼 이미지는 기본적으로 왼쪽과 같은 사각형 영역의 그림정보를 갖습니다. 그러므로 홈페이지의
배경이 만약 흰색이 아니라면 흉하게 보일 것입니다. 다른 색의 배경에서도 항상 원형만으로
보여지기 위해서는 버튼의 여백 부분을 투명하게 처리해야 합니다. 여백을 투명하게 처리하는
작업은 Gif 포맷에서만 가능합니다. 방법을 알아봅시다.
위에서
우리가 작업한 색모드는 RGB모드였습니다. 이것을 256컬러 모드로 바꾸어주기 위하여
Image->Mode->Indexed Color를 선택합니다.
레이어를
합칠 것인가를 묻는 확인창이 뜹니다. OK 단추를 누릅니다.
이어서
나타나는 Indexed Color 속성창에서는 기본설정값을 그대로 써보겠습니다. OK 단추를
눌러 다음으로 넘어갑니다.
Indexed
Color 모드가 되면 색상 팔레트가 바뀝니다. 최대 256가지의 색상만을 표현할 수 있는
모드로 현재 이미지 작업에서 사용된 색상만을 추출하여 나타내줍니다. 해상도를 떨어뜨린다는
말이 되겠군요. 해상도를 떨어뜨린다는 것은 그림의 질이 나빠진다는 말도 되지만 용량을
줄여서 홈페이지에서 빨리 뜨게 한다는 말도 됩니다.
그림을
저장하기 위하여
File->Export->GIF89a Export...를 찾아 갑니다.
GIF89a
Export 옵션창에서 버튼 이미지의 여백에 스포이드 툴로 클릭합니다. 즉, 투명하게 만들고
싶은 부분을 찾아 눌러주는 것입니다. 좀더 세밀하게 투명한 부분을 지정하려면 하단의
컬러픽커를 이용하여 색 단계별로 투명영역을 지정할 수 있습니다. 앞서 설명드린대로
Interlace 옵션의 체크 표시는 없애준 상태에서 OK 단추를 누릅니다.
이제
적당한 이름을 주고 파일을 저장하면 됩니다.
<잠깐!
깔끔한 투명 이미지?>
포토샵에서 만든 투명이미지가 항상 깔끔하게 보이는 것은 아닙니다. 자신이 만든 투명이미지의 외곽선이 지저분해 보이는 분들은 이미지를 사용할 웹페이지의 바탕색과 투명이미지의 바탕색을 같은 색으로 통일시켜 주세요. 그러면 여백의 흔적이 남더라도 웹페이지에서 볼 때는 깔끔하게 보입니다.
