2. 파일저장
파일을 저장할 때, 3가지 방식이 있습니다.
첫째는 Save를 사용하는 방법으로, 원본 이미지와 같은 파일형식으로 저장하거나, 포토 샵 기본 형식인 PSD로 저장합니다. 두번째는 Save as를 사용하는 방법으로, 다른 형식 또는 다른 이름으로 저장하는 것입니다. 앞장에서 Crop한 이미지를 저장할 때 Save as 를 사용했습니다. 마지막으로 Save for Web를 사용하는 방법으로, 웹에 최적화해서 저 장하는 것입니다. 원래 Image Ready라는 프로그램의 저장 기능인데, 포토샵에서 Plug- in으로 불러와서 이용하는 것입니다. 웹 작업을 할 때는 특히 이 기능을 많이 사용하게 됩니다.
2-1. Save for web
Save와 Save as는 파일 이름과 형식을 선택하는 옵션만 있으므로 특별히 알아야 할 것 이 없습니다. 그런데 Save for web에는 많은 선택과 기능이 포함되어 있습니다. 일단, Save for Web을 선택하면, 하나의 새로운 프로그램이 실행됩니다. 이 프로그램은 크게 3게 영역으로 구성됩니다. 첫째는 가운데에 있는 미리보기 창이고, 둘째는 좌측에 있는 도구선택 창, 마지막은 우측의 옵션설정 창입니다.
첫번째인 미리보기 창은 실제 저장될 파일의 이미지 품질을 살펴보는 창입니다. 원본 파일이 표기되는 Original탭과 최적화된 이미지를 표기하는 Optimized 그리고 여러 옵 션별로 화질을 비교할 수 있는 2-up과 4-up이 있습니다. 두번째 옵션설정 창은 저장될 이미지의 형식과 화질을 선택하는 창입니다. 이미지 형식은 JPEG, GIF, PNG를 선택할 수 있으며, 각 형식에 따라 이미지 화질을 선택할 수 있습니다. 이중 주의할 사항은 GIF와 PNG는 투명영역을 설정할 수 있습니다. 설정방법은 간단한데, Color table에서 투명으로 처리할 색상을 선택한 후 투명 버튼 누르면 됩니다. 세번째인 도구선택 창은
“이동, 선택, 확대”등, Save for Web에 필요한 간단한 도구입니다. 먼저 확대 도구는 돋 보기 모양의 아이콘으로 이미지의 품질을 확인하기 위해서 이미지를 확대해서 살펴보 는 것이 필수적이므로 꼭 필요한 도구입니다. 그리고 이동 도구는 손바닥 모양의 아이 콘으로, 미리보기 창이 쫍아서 확대된 이미지 또는 전체 이미지를 표기할 수 없으므로 역시 꼭 필요한 도구 입니다. 마지막으로 선택도구는 슬라이스 툴로 구분해놓은 이미 지를 선택할 수 있는 도구 입니다. 옵션 창의 설정은 전체 이미지에 적용도 가능하며, 선택한 이미지에 대해서 각각 설정도 가능합니다. 따라서 전체는 GIF로 저장하더라도 사진 부분만 JPG로 저장하는 등의 설정이 가능합니다. 이렇게 설정한 후에 Save버튼을 누르면 폴더 선택 후 저장이 됩니다.
2-2. HTML소스
Save for Web으로 저장한 폴더를 열어보면 파일과 폴더가 하나씩 생성되었습니다. 파 일은 HTML확장자이고, 폴더에는 슬라이스 툴로 선택한 순서대로 이미지가 생성됩니다.
HTML파일을 웹 브라우저에서 열어보면 이상 없이 표기됩니다. 웹 브라우저의 상단 메 뉴의 보기에서 소스메뉴를 선택해서 표시된 페이지의 소스를 열어보면 HTML의 내용을 볼 수 있습니다. HTML분법은 모르지만 자세히 보시면 비슷한 패턴을 찾을 수 있을 겁 니다. 모든 내용이 부등호 모양의 ‘꺽쇠 괄호’로 쌓인 특정단어가 반복됩니다. 이 꺽쇠 괄호와 단어를 합쳐서 태그라고 부릅니다.
태그는 소스에 한번만 표시되는 <HEAD>, <TITLE>, <BODY>와 <TABLE>, <TR>, <TD>,
<IMG>, <A href>등 여러 번 반복되는 태그가 있습니다. 이 태그 하나 하나가 웹 페이 지의 요소 하나하나로 표시되는 것입니다. 그리고 꺽쇠 괄호 안에는 태그 이름 외에도 속성 값이 함께 들어있습니다. <IMG>태그에는 IMG라는 태그 이름과 SRC라는 속성 부 분이 있습니다. 또 이미지의 넓이, 높이. 그리고 여기 주석 값까지 IMG 태그에 포함될 수 있습니다. HTML에 관한 내용은 이 책의 범위를 벗어 나는 것이므로 여기서는 간단 하게 열어보는 정도까지만 설명 드리고 마칩니다. HTML소스는 암호처럼 참 복잡합니 다. 그런데 프로그래머는 이 소스를 보며 정확한 위치를 찾아서 게시판이나 또는 팝업
이나 링크를 프로그래밍합니다. 따라서 디자이너는 프로그래머가 조금이라도 쉽게 위 치를 보고 파악할 수 있도록 소스를 생성해 주어야 합니다. Save For Web의 옵션에 이 런 설정이 있습니다. 이런 옵션을 정확히 설정하면 디자인 실력과 관계없이 프로그래 머에게 인정받는 디자이너가 됩니다. 디자이너가 아니라도 웹 마스터 또는 내 개인홈 페이지를 만든다면 결국 내가 HTML소스에 게시판을 붙이고, 베너를 달아야 하기 때문 에 필요한 내용입니다. 이 옵션은 Output Settings에서 설정할 수 있습니다.
실습) ‘슬라이스 툴’로 이미지 슬라이싱
1. 슬라이스 툴(Slice Tool) 선택
2. 학교로고 부분선택
3. 메뉴 부분선택
4. 그 외 부분선택
5. Save for Web
6. Save for Web 팝업창(Image Ready)
7. Save for Web 팝업창 옵션
8. GIF로 변경
9. 파일이름 변경
10. Image Only로 변경
11. 저장 파일 확인
12. Images 폴더
