Photoshop을 실행하고 이미지 맵으로 변환하려는 이미지를 엽니다. "자르기" 도구를 길게 클릭하면 다른 도구가 포함된 메뉴가 표시됩니다. "슬라이스" 도구를 클릭하여 선택합니다.
이미지 내부의 한 점을 클릭하고 슬라이스 도구를 끌어 이미지에서 클릭 가능하게 만들 부분 주위에 경계 상자를 그립니다. Photoshop은 이미지의 다른 부분 주위에 추가 "자동 슬라이스"를 그립니다. 이러한 자동 슬라이스는 이미지의 모든 부분이 슬라이스에 포함되도록 합니다.
생성한 슬라이스 내부를 마우스 오른쪽 버튼으로 클릭하고 "슬라이스 옵션 편집"을 선택하여 슬라이스 옵션 창을 엽니다. 슬라이스와 연결할 URL을 입력합니다. "이름" 텍스트 상자에 새 이름을 입력하여 Photoshop에서 슬라이스에 부여한 기본 이름을 바꿀 수도 있습니다.
"확인"을 클릭하여 슬라이스 옵션 창을 닫고 이미지로 돌아갑니다. 이미지 내부의 다른 지점을 클릭하고 슬라이스 도구를 드래그하여 필요에 따라 추가 슬라이스를 만듭니다.
도구 모음에서 "슬라이스 선택 도구"를 선택하고 이동하려는 슬라이스 내부를 클릭합니다.
마우스 왼쪽 버튼을 누른 상태에서 슬라이스를 새 위치로 끕니다.
슬라이스의 가장자리 중 하나 위에 마우스 커서를 놓으면 각 끝에 화살표가 있는 선이 나타납니다. 슬라이스를 더 크게 또는 더 작게 만들어야 하는 경우 해당 선을 클릭하고 마우스 왼쪽 버튼을 누른 상태에서 마우스를 끕니다.
"파일"을 클릭한 다음 "웹용으로 저장"을 클릭하여 웹용으로 저장 창을 엽니다.
"사전 설정"을 클릭하고 나타나는 파일 형식 옵션 중 하나를 선택합니다. GIF 128 Dithered, JPEG High 및 PNG-24 중에서 선택할 수 있습니다.
"저장"을 클릭하여 하드 드라이브의 파일 및 폴더를 표시하는 창을 엽니다. 이미지 맵 파일을 저장할 폴더를 찾아 파일 이름 텍스트 상자에 이미지 맵의 이름을 입력합니다.
"형식" 드롭다운 메뉴를 클릭하고 "HTML 및 이미지"를 선택합니다. "저장"을 클릭하여 지정한 폴더에 모든 파일을 저장합니다.
Photoshop은 각 슬라이스를 이미지 폴더에 별도의 이미지로 저장합니다. 프로그램은 또한 "파일 이름" 텍스트 상자에 입력한 이름과 동일한 이름을 가진 HTML 문서를 저장합니다. 파일 탐색기에서 해당 HTML 파일을 찾고 파일을 두 번 클릭하면 브라우저가 열리고 이미지 맵이 표시됩니다. 이미지 맵의 다른 부분을 클릭하여 슬라이스에 할당한 URL로 이동합니다. 예를 들어, 각 주에 대한 슬라이스를 만들어 미국 지도를 여러 주로 나눈 경우 주를 클릭하면 해당 주의 슬라이스에 할당된 URL로 이동할 수 있습니다.
슬라이스에 의미 있는 이름을 지정하면 Photoshop에서 생성한 HTML 코드를 수정하려는 경우 더 쉽게 식별할 수 있습니다. 예를 들어, 아이오와 주를 둘러싸는 조각을 만든 경우 조각 이름을 아이오와로 지정할 수 있습니다.
이미지 맵 이미지를 원본 이미지와 동일한 형식으로 저장하고 싶을 것입니다. 예를 들어 JPEG인 경우 웹용으로 저장 창의 사전 설정 드롭다운 메뉴에서 JPEG 옵션 중 하나를 선택합니다. 예를 들어 "JPEG Low"를 선택하면 Photoshop에서 저품질 JPEG 이미지를 생성합니다. 이미지 품질이 낮을수록 웹 브라우저에서 더 빨리 로드됩니다.
이 글은 Adobe Photoshop CC 2014 버전에 적용됩니다. 일부 정보는 소프트웨어의 다른 버전에서 다를 수 있습니다.
