포토샵으로 만든 이미지 슬라이스툴로 잘라서 자동 HTML 코딩하기

1. 아래와 같은 메인페이지를 만들었다고 가정합니다

이 이미지를 슬라이스툴을 원하는 부분만 자르고 저장과 동시에 자동으로 HTML 코딩까지하는 방법을 간략하게 설명 드립니다

 

이 이미지파일의 이름은 main.psd 입니다

 

 

2. 먼저 메뉴바의 View->Ruler 를 선택하여 가로세로 줄자를 보이게 합니다

 

 

3. 그 다음, 위쪽줄자를 클릭드래그하여 가이드선을 원하는 위치로 표시합니다

왼쪽줄자도 마찬가지로 클릭드래그하여 원하는 위치로 표시하면 대충 다음그림과 같은 가이드선이 나타납니다

이 가이드선은 실제 이미지에 적용되는것이 아니며, Ctrl+; 을 눌러 숨기고 나타나게 할수 있습니다

 

 

4. 가이드선으로 자를곳을 표시하였으면 이제 슬라이스툴을 선택합니다

 

 

5. 그다음, 위쪽 옵션바에서 Slices From Guides 버튼을 클릭합니다

이 버튼은 현재 그어진 가이드선대로 이미지를 정확하게 나눌수(Slice) 있습니다

 

 

 

6. 그러면 아래의 모양과 같이 슬라이스되었다는 파란 선이 보여집니다

각각의 슬라이스엔 숫자가 매겨져 있습니다

(여기서 다시 Ctrl+; 를 눌러 가이드선을 숨겨도 됩니다)

 

 

7. 이제 불필요하게 잘라진 슬라이스를 합치기위해 Slice Select Tool 을 선택합니다

이 상태에서는 나누어진 슬라이스를 다시 나누거나, 합칠수 있습니다

 

 

8. 아래 4,5,6 번 슬라이스를 합치기위해 Shift 키를 누른채 각각 클릭하여 선택합니다

 

 

9. 마우스오른쪽 버튼을 클릭하여 Combine Slices 를 클릭합니다

(그 아래쪽을 보면 Divide Slices 도 보이네요. 슬라이스를 나누는 명령입니다)

 

 

10. 처음 4,5,6 번이던 슬라이스를 합쳐주니까 4번 슬라이스 한개로 합쳐졌습니다

나머지 슬라이스들의 번호도 새로 매겨졌지요?

이제 이 이미지들은 각각 main01.gif,main02.gif ... 등으로 각각 파일명이 붙여지고 저장되게됩니다

물론 이름을 다르게 주고싶다면 언제든 마우스 우측버튼을 클릭하여 원하는 슬라이스만 이름을 변경할 수 있습니다

 

 

11. 첫번째 슬라이스를 선택하고 마우스우측버튼을 클릭해 볼까요?

그 슬라이스의 속성이 나타납니다

이름을 바꾸고, 나중에 그 슬라이스를 클릭했을때 이동될 URL 도 설정할 수 잇습니다

가로세로 크기도 알 수 있는데 여기서 수정은 가급적 안하는것이 좋습니다

뒤에 HTML 코딩을 수정할때 참고용으로만 활용하세요

 

 

 

 

12. 자 이제 마지막으로 지금까지의 작업과정을 실행시키는 단계입니다

File->Save for Web & Devices 를 클릭합니다

(CS2 까지의 버전에서는 이 명령을 이미지레디에서 대신하였습니다)

 

 

13. 그러면 새로운 창이 뜨면서 이미지와 함께 오른쪽에 다음과 같은 메뉴들이 보입니다

노란색부분을 클릭하면 여러가지 옵션들을 설정할 수 있지만, 지금은 생략합니다

(참고로 그 옵션에서는 코딩과 네이밍등을 어떤방식으로 할건지에 대한 세부설정을 할 수 있습니다)

위쪽 Save 버튼을 클릭합니다

 

 

14. 그러면 Save Optimized as 라는 저장창이 뜹니다

아래쪽에서 몇가지를 선택할 수 있습니다

 

파일이름은 자동부여됩니다

전체 이미지파일의 이름이 main.psd 였으므로, 자동으로 main.html 이 붙여졌습니다.

바꿀수 있지만, 연습이므로 그냥둡니다

이 이름은 아래쪽 파일형식 설정부분에서 Images only 를 선택하면 main.gif 로 바뀝니다

 

파일형식은 3가지로 설정할수 있습니다

HTML 과 이미지를 함께 만들것인지,

이미지만 만들것인지

HTML 코딩문서만 만들것인지를 선택할수 있습니다

 

우리는 HTML and Images 를 선택하여 자동으로 HTML 문서까지 만들어봅니다

 

 

아래쪽 Slice 에서도 3가지 옵션이 있습니다

모든슬라이스를 다 이미지파일로 생성할것인지

사용자가 직접만든 슬라이스만 만들것인지

선택한 슬라이스만 만들것인지를 선택합니다

 

우리는 All Slices 를 선택한 후 저장버튼을 클릭합니다

그러면 포토샵이 스스로 이미지를 자르고 HTML 코딩문서까지 만들어줍니다

 

 

15. 지금까지 작업한 내용은 어디에 저장되어있나요?

이 이미지 원본(main.psd)이 저장된 폴더에 있습니다

 

이 이미지의 위치가 C:\MyDocument\연습\ 폴더에 있다면

C:\MyDocument\연습\ 이곳에 main.html 파일이 만들어지고 

C:\MyDocument\연습\images\ 에 슬라이스된 조각이미지파일들이 잇습니다

 

아래는 나뉘어진 조각그림(슬라이스 이미지)과 html 문서입니다

 

 

 

16. 그럼, 이제 HTML 문서를 웹브라우저에서 불러와 테스트 해 봅니다

아래 그림과 같이 예상했던 원본 이미지의 모양 그대로 보이나요?

 

그럼, 차근히 따라해 보시고 멋진 홈페이지 만드시길 바랍니다..^^