포토샵+이미지레디로 이미지맵 작성하기

홈페이지나 배너를 만들다보면 ‘이미지맵’이란 걸 작성해야 할 때가 있습니다. 이미지맵(image map)이란 말 그대로 이미지 위에 지도를 그리는 것입니다. 그러니까 이미지의 특정 위치를 지정해서 그곳에만 해당하는 링크를 걸 수 있는 것이지요.

[#M_이미지맵에 대한 조금 더 자세한 이야기 (클릭!)|닫기| 여기서 잠깐 w3c의 html 4.0.1 문서가 정의하고 있는 이미지맵을 잠시 살펴보면요,

이미지맵은 제작자로 하여금 이미지 또는 오브젝트의 지역을 지정하고, 각 지역에 (문서를 읽고 표현, 프로그램을 돌림 등) 특정 작용을 지정하여, 사용자가 지역을 활성화 시켰을 때 작동이 되도록 하는 것이다. (이미지맵 – html 4.0.1 규격 한글 번역문)
mage maps allow authors to specify regions of an image or object and assign a
specific action to each region (e.g., retrieve a document, run a program, etc.)
When the region is activated by the user, the action is executed. (Image Map – HTML 4.01 Specification)

이 글만 봐서는 무슨 말인지 알아먹기 좀 힘들지만, 그래도 링크를 따라가서 이미지맵 사용방법, 구성요소 등에 대해서 공부를 해보시는 것도 좋겠지요. 아래에 이미지맵 사용법을 간단히 설명해보았습니다.

1. 이미지맵 적용: 이미지맵은 ‘img’, ”object’, ‘input’ 등의 엘레멘트에 사용할 수 있습니다. 아래는 이미지맵이 적용된 이미지 엘레멘트 소스입니다. ‘usemap’ 애트리뷰트를 추가하고 “#이미지맵아이디”를 씁니다.

2. 이미지맵 소스: “name”에 위의 “이미지맵아이디”를 넣어줍니다. shape는 네모, 원형, 다각형 등 형태를 지정하고, “alt”는 대체텍스트를, “coords”는 좌표를 기록합니다.

이미지맵 소스는 꼭 적용될 엘레멘트에 바로 이어서 작성하지 않아도 됩니다. 여러개의 이미지맵이 동시에 적용될 경우를 대비해 이미지맵 소스만 특정 파일에 따로 묶어 관리하는 것도 좋은 방법입니다._M#]
보통 이미지맵을 작성할때는 드림위버나 나모 웹에디터 같은 저작툴을 쓰는 편이 유용하지만, 포토샵으로 이미지를 제작한 경우 이미지레디를 사용하면 이미지맵만을 위해 용량이 큰 별도의 에디터를 실행하는 수고를 줄일 수 있습니다. 오늘은 그 방법을 소개하려고 해요. (버전: Adobe Photoshop 7.0)

참고로, 사각형으로 지정된 rect 모드에서 좌표에 해당하는 coords 는 “왼쪽위 X, 왼쪽위 Y, 오른쪽 아래 X, 오른쪽
아래 Y”로 구성됩니다. 포토샵을 포함해 주요 이미지 편집 툴에서는 좌표를 읽을 수 있는 기능이 있으므로 능숙한 분들은 에디터도
이미지레디도 사용하지 않고 곧바로 좌표를 입력해 이미지맵을 작성할 수도 있겠지요. 하지만 그건, 아무래도 눈이 피로한 작업이긴 해서 말입니다^^

포토샵+이미지레디로 이미지맵 작성하기

1. 포토샵에서 이미지 불러오기

포토샵에서 이미지를 제작하거나, 제작된 이미지를 불러옵니다. (이미 제작된 이미지가 있는 경우, 곧바로 이미지레디에서 불러오면 이 과정을 생략할 수도 있습니다.)

2. 이미지레디로 이동하기

다음 세가지 방법 중 하나를 써서 이미지레디로 이동합니다.

포토샵 왼쪽 툴박스 제일 아래쪽에 위치한 ‘Jump to ImageReady’ 아이콘을 클릭합니다.
상단 메뉴 중 File-Jump to-Image Ready를 찾아 클릭합니다.
단축키 Ctrl + Shift + M 을 사용합니다.

[#M_2-1. 이미지파일이 gif인 경우, RGB로 변환하는 과정이 필요합니다. (클릭!)|닫기|_M#]
3. Image Map Tool 선택하기

이미지레디로 이동한 상태에서 왼쪽 툴 중 위에서 세번째, 왼쪽에 위치한 “Image Map Tool”을 클릭합니다. 기본형은 사각형으로 설정되어 있습니다. 다른 모양의 이미지맵을 작성하려면 아이콘을 클릭한 상태에서 마우스를 떼지 않고 오른쪽 하단의 작은 화살표를 가리켜보세요. 원형, 다각형 등을 선택할 수 있습니다.

4. 원하는 영역 선택하기

마우스를 드래그하여 이미지맵을 작성할 영역을 선택합니다. 마우스를 떼면 선택한 영역이 표시됩니다. 그리고나서 아래쪽 속성 창의 탭 중에서 두번째에 있는 “Image Map”을 클릭합니다. 선택한 영역의 좌표와 속성창이 나타나면 속성창의 내용을 입력합니다.
속성창에는 이미지맵에 필요한 속성을 입력할 수 있습니다. 각 속성은 아래와 같습니다.