WD2S, Slicing

WebDesign to Site conversion processes, Slicing

포토샵에서 한개의 이미지 파일로 작성된 Webpage Mockup을 웹 사이트에 적용하기 위해서는 여러개의 이미지로 구분해 주어야 한다
포토샵의 Slicing Tool을 이용하여 잘라진 각 부분들은 File > Save for Web & Device... 를 선택하여 HTML이나 Image Only 으로 저장할 때 한개의 이미지 파일로 저장된다. 특히 HTML 포맷으로 저장하면 잘라진 각 부분들은 웹페이지의 각 이미지로 등록되어 웹브라우저로 HTML을 열어 볼 때와 포토샵에서 Webpage Mockup을 볼 때와 동일한 레이아웃으로 보이게 된다.

Slice Tool의 선택

Slice Tool을 이용하여 한개의 이미지를 여러개의 이미지로 구분한 예

구분된 각 영역에 이름을 붙여준다

Slice Options 창에서 이름을 입력하면 HTML으로 저장시 해당영역의 이미지 파일 이름으로 사용된다

구분된 각 영역을 이미지로 저장할 때 최적화하는 절차

File > Save for Web & Devices... 를 선택하면 구분된 각 영역을 이미지 파일로 저장하기 위해 이미지 포맷을 최적화하는 창이 나타난다. 이곳에서는 파일 포맷(GIF, PNG, JPG)을 선택할 수도 있고 이미지의 Quality를 설정할 수도 있으며 설정한 이미지 포맷의 사이즈가 얼마나 되는지 확인하면서 구분된 이미지를 최적화할 수 있다.
이 창에서는 앞서 Slice Tool을 사용해서 선택한 각 영역을 클릭하여 별도의 이미지로 저장할 때 적절한 포맷과 파일 사이즈로 최적화할 수 있으며 2 ~ 4개의 창으로 나누어 설정한 각 포맷을 비교하면서 이미지의 품질과 사이즈를 대조하여 최적의 이미지 포맷을 찾을 수가 있다. 각 이미지 창에서 특정 사각영역을 선택할 때마다 우측의 속성창에서는 파일포맷과 색상수, Quality 등을 지정할 수가 있다.

Slice Tool에 의해서 구분된 각 영역을 선택하면서 우측에서 이미지 포맷과 Quality를 지정하면 하단 창에 최적화된 이미지의 상태가 나타난다. 이런 방법으로 모든 구분된 영역을 순차적으로 지정한 후에 하단의 [Save]버튼을 누른다

저장할 때 HTML과 이미지를 함께 저장하면 포토샵으로부터 웹페이지를 얻을 수 있다

저장이 완료되면 생성된 HTML 파일과 images폴더 안에 잘려진 모든 이미지가 확인된다. 웹브라우저에서 확인할 수 있다