작성일자
카테고리 포토샵/사진편집


위 이미지를 보면 작은 이미지로 나오지만 확대 스크롤을 우측으로 이동하면 이미지가 확대됩니다. 그러면서 이미지도 선명해지죠. 이 사진은 원래 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픽셀의 크기로 로딩이 되어 웹페이지가 보이고 필요할때 이미지의 크기를 변경하면 플래시로 확대를 하게 되므로 전체크기의 이미지가 로딩되지는 않으니 부담도 없습니다.

 
저작자 표시 비영리 변경 금지
신고
BlogIcon Christian Louboutin

관리자의 승인을 기다리고 있는 댓글입니다

아마추어

정말 많은 것을 하고 있군요. 포토샵은..

근데.. 저 같은 경우, 메뉴는 있는데 활성화가 되지 않는데 원인이 뭔지 모르겠습니다. (환경은 윈도우7, 포토샵CS6 입니다)

BlogIcon 베누시안

메뉴에서 이미지-모드를 클릭해보세요. 8비트 RGB 컬러가 아니면 안된답니다. 그 외에는 알 수가 없네요.

아마추어

아.. 감사합니다. 해결되었습니다.

Camera Raw 에서 설정한 것때문에 이미지가 계속 16비트로 열렸었습니다. ^^;;;;;

BlogIcon 기광호

정말 대단하군요.. 고맙습니다.
서버는 N드라이브도 가능한지요?

BlogIcon 베누시안

N 드라이브는 접속시 비번이 필요하고 아마 URL을 허용하지 않을 텐데요.

정성훈

좋은 정보 정말 감사합니다
많은 공부 되고 있습니다. 끝이 없는게 디자인거 같네요

유한

안녕하세요.
블러그나,카폐에는 올리수 없나요.
올리수 잇는 방법좀 부탁드립니다.

티스토리 툴바