위 이미지를 보면 작은 이미지로 나오지만 확대 스크롤을 우측으로 이동하면 이미지가 확대됩니다. 그러면서 이미지도 선명해지죠. 이 사진은 원래 2560X1600픽셀의 고해상도의 이미지입니다. 확대를 해도 이미지가 깨지지않고 고해상도를 유지할 수 있는 것은 포토샵의 Zoomify라는 툴을 이용해서 이미지를 수십개로 잘라서 플래시와 연동하여 원하는 크기의 사이즈로 프레임을 만든 것입니다. 인터넷에서는 가능하면 작은 사이즈의 이미지를 올려야 로딩속도가 빨라집니다. 그런데 어떤 상황에서는 사진 이미지를 원본대로 올려서 세부적인 이미지의 일부분이라도 고해상도로 보여줘야 할때가 있습니다. 예를 들면 상품을 소개한다고 했을때 고해상도 이미지가 필요하기도 합니다. 포토샵의 Zoomify툴을 이용하면 간단하게 처리되는데 이미지를 자동으로 슬라이스해서 잘라주고 플래시파일인 swf와 xml파일, index.html파일까지 자동으로 만들어줍니다.
이 기능은 포토샵 CS3부터 사용이 가능합니다. 편집할 고해상도의 사진을 포토샵에 열고 메뉴에서 파일-내보내기(Export)-Zoomify를 선택하면 창이 나옵니다.
1을 클릭하면 이미지 프레임 주위의 배경색상을 선택할 수 있습니다. 내비게이터는 좌측상단의 작게 나오는 이미지로 파란색의 박스가 보입니다. 큰 이미지 중에서 사진 프레임에 나오는 부분을 표시해줍니다.
2의 폴더버튼을 클릭하여 저장할 폴더를 선택합니다.
3의 베이스 네임은 저장하게 되면 이미지파일과 swf, xml파일이 이 생성되는데 이미지파일은 조각내서 저장하게 되며 하나의 폴더에 저장됩니다. 이 폴더를 만들어주는 이름입니다. 이 폴더의 이름은 html파일이 생성되면서 경로를 만들어주기 때문에 필요하게 됩니다.
4에서 이미지파일의 품질을 선택합니다. JPEG파일로 저장되므로 최대 12로 설정할 수 있습니다.
5의 브라우즈 옵션에서 가로세로 사이즈를 지정합니다. 6에 체크하고 OK클릭하면 모든 파일들이 지정된 폴더에 저장되면서 웹브라우저에 자동으로 이미지가 나오게 됩니다.
배경을 회색으로 했기때문에 1의 배경색상이 회색입니다. 내비게이션 옵션을 제외했으니 좌측 상단에 내비게이션이 안나옵니다. 확대 축소 스크롤바를 이동해서 크기를 조정해서 볼 수 있고 마우스로 클릭드래그하거나 4의 방향키를 클릭하면 화면이동할 수 있습니다. 5의 아이콘은 크게 확대한 경우 최소크기로 리셋하는 버튼입니다. 이미지에 클릭만으로도 확대를 할 수 있고 마우스 스크롤로 크기를 변경할 수는 있지만 전체페이지가 모니터화면보다 크면 화면이 스크롤 되면서 프레임의 사진도 크기가 변하게 됩니다.
여기까지 하면 아주 쉬운 작업이죠. 웹페이지에 어떻게 심느냐(Implement)가 문제입니다.
저장한 폴더에 가보면 폴더 하나와 html파일이 있습니다. 서버에서 디렉토리를 하나 만들고 이 두개를 업로드한 다음 인터넷 주소를 경로에 맞추어 입력 엔터하면 바로 나오지만 큰 화면에 이미지만 덩그러니 나오게 됩니다. 이것을 이 글의 첫 이미지처럼 웹페이지의 일부분으로 포함시키려면 <OBJECT> </OBJECT>를 전체를 복사해서 삽입하면 됩니다. 그전에 안에 있는 경로를 수정해줘야겠죠. 경로 수정은 1과 2부분을 해주면 됩니다. 제 경우는 다른 서버에 디렉토리를 ZOOMIFY로 만들어서 전체를 업로드하고 그 경로를 수정했습니다. 그런다음 오브젝트 태그부분만 복사해서 블로그 글에 첨부한 것입니다.
이 방법을 사용하면 처음에는 640픽셀의 크기로 로딩이 되어 웹페이지가 보이고 필요할때 이미지의 크기를 변경하면 플래시로 확대를 하게 되므로 전체크기의 이미지가 로딩되지는 않으니 부담도 없습니다.
더보기
'포토샵/사진편집' 카테고리 관련글
