웹 포토 갤러리 만들기

웹 포토 갤러리는 축소판 이미지가 포함된 홈 페이지 및 전체 크기의 이미지가 들어 있는 갤러리 페이지의 기능을 갖고 있습니다. 각 페이지에는 방문자가 사이트를 탐색할 수 있는 링크가 들어 있습니다. 예를 들어, 방문자가 홈 페이지의 축소판 이미지를 클릭하면 연결된 이미지 전체가 갤러리 페이지에 표시됩니다. [웹 포토 갤러리] 명령을 사용하면 일련의 이미지를 가지고 자동으로 웹 포토 갤러리를 만들 수 있습니다.

Photoshop에서는 사용자의 갤러리에 다양한 스타일을 제공합니다. 이 스타일들은 [웹 포토 갤러리] 명령을 사용하면 선택할 수 있습니다. HTML을 알고 있는 고급 사용자의 경우 새로운 스타일을 만들거나 HTML 템플릿 파일 세트를 편집하여 스타일을 사용자 정의할 수 있습니다.

갤러리 스타일에 대한 각 템플릿은 서로 다른 옵션을 가지고 있습니다. 사전 설정 스타일을 사용하는 경우 일부 옵션이 특정 스타일에서 흐리게 표시되거나 사용 불가능할 수 있습니다.

웹 포토 갤러리 만들기

Adobe Bridge를 사용하여 웹 갤러리 만들기

Adobe Bridge는 업데이트된 웹 갤러리 기능을 제공합니다. 자세한 내용은 Adobe Bridge 도움말의 웹 포토 갤러리 만들기 또는 아래 자습서를 참조하십시오.

이전의 선택적 Photoshop 플러그인 사용

색상 일치 확인

ProPhoto RGB나 Adobe RGB와 같이 광범위한 색상 작업 공간에서 사진 작업을 하는 경우 웹 갤러리에서 포함된 색상 프로필을 읽지 못하는 브라우저로 볼 때 이미지 색상이 변할 수 있습니다. 이런 문제가 발생하면 이미지 프로필을 최적화하거나 웹 포토 갤러리에 포함시키기 전에 sRGB(대부분의 브라우저에서 기본값으로 사용)로 변환하십시오. 다음 중 한 가지 방법을 사용하여 sRGB로 변환하십시오. 이 경우 이미지 사본을 가지고 작업하는 것이 좋습니다.

• 하나의 이미지를 변환하려면 편집 > 프로필로 변환을 선택한 다음 [sRGB]를 선택합니다. 색상 프로필 할당 또는 제거(Illustrator, Photoshop)를 참조하십시오.

• 이미지 폴더를 변환하려면 이미지 프로세서를 사용합니다. 파일 > 스크립트 > 이미지 프로세서를 선택합니다. 이미지 프로세서를 사용하여 파일 변환을 참조하십시오.

이미지 프로세서를 사용하는 경우 파일을 원하는 크기의 JPEG 형식으로 직접 저장할 수 있습니다. 그럴 경우 반드시 [큰 이미지] 옵션에서 [이미지 크기 조정]을 꺼야 합니다.

웹 포토 갤러리 옵션

파일 확장자, 인코딩 및 메타데이터에 대한 옵션입니다.

파일 이름 확장자로 .htm 또는 .html을 사용합니다.

UTF-8 인코딩을 사용합니다.

다운로드 시간을 줄일 수 있도록 크기를 지정합니다.

메타데이터 정보를 유지합니다.

갤러리의 각 페이지에 표시되는 배너에 대한 텍스트 옵션입니다. 다음을 각각 입력합니다.

갤러리의 이름입니다.

갤러리의 사진을 제공한 개인이나 기관의 이름입니다.

전화 번호나 주소와 같은 갤러리의 연락처 정보입니다.

갤러리의 각 페이지에 표시되는 날짜입니다. 기본적으로 Photoshop에서는 현재 날짜가 사용됩니다.

(일부 사이트 스타일에 사용 가능) 배너 텍스트에 대한 옵션입니다.

각 갤러리 페이지에 표시되는 기본 이미지에 대한 옵션입니다.

(일부 사이트 스타일에 사용 가능) 각 갤러리 페이지 위쪽에 가로로 실행되는 숫자 시퀀스(1부터 시작하여 갤러리의 총 페이지 수로 끝남)를 추가합니다. 각 번호는 해당 페이지에 대한 링크입니다.

갤러리 페이지에 배치하기 위해 소스 이미지의 크기를 조정합니다. 팝업 메뉴에서 크기를 선택하거나 픽셀 단위로 크기를 입력합니다. [제한]에서 크기를 조정하는 동안 제한할 이미지 치수를 선택합니다. JPEG 품질을 조정하려면 팝업 메뉴에서 옵션을 선택하거나 0-12 사이의 값을 입력하거나, 슬라이더를 드래그합니다. 값이 높으면 이미지 품질이 좋아지는 반면 파일은 커집니다.

이미지 주위의 테두리 폭을 픽셀 단위로 지정합니다.

(일부 사이트 스타일에 사용 가능) 각 이미지 아래에 캡션을 표시하기 위한 옵션을 지정합니다. [파일 이름]을 선택하여 파일 이름을 표시하거나, [설명], [제작진], [제목] 및 [저작권]을 선택하여 파일 정보 대화 상자에서 가져온 설명 텍스트를 표시합니다.

(일부 사이트 스타일에 사용 가능) 캡션의 글꼴 및 크기를 지정합니다.

축소판 이미지 크기 등의 갤러리 홈 페이지에 대한 옵션입니다.

축소판 크기를 지정합니다. 각 축소판의 폭을 팝업 메뉴에서 선택하거나 픽셀 단위로 값을 입력합니다.

홈 페이지에서 축소판을 표시할 열과 행의 수를 지정합니다. 수평 프레임 스타일 또는 수직 프레임 스타일을 사용하는 갤러리에는 이 옵션을 적용할 수 없습니다.

각 축소판 주위의 테두리 폭을 픽셀 단위로 지정합니다.

(일부 사이트 스타일에 사용 가능) 각 축소판 아래에 캡션을 표시하기 위한 옵션을 지정합니다. [파일 이름]을 선택하여 파일 이름을 표시하거나, [설명], [제작진], [제목] 및 [저작권]을 선택하여 파일 정보 대화 상자에서 가져온 설명 텍스트를 표시합니다.

(일부 사이트 스타일에 사용 가능) 캡션의 글꼴 및 크기를 지정합니다.

갤러리 요소의 색상에 대한 옵션입니다. 요소의 색상을 변경하려면 색상 견본을 클릭한 다음 Adobe [색상 피커]에서 새로운 색상을 선택합니다. 각 페이지([배경] 옵션) 및 배너([배너] 옵션)의 배경색을 변경할 수 있습니다.

도난 방지책으로 각 이미지에 텍스트를 표시합니다.

표시될 텍스트를 지정합니다. [사용자 정의 텍스트]를 선택하여 사용자 정의 텍스트를 입력합니다. [파일 정보] 대화 상자에서 가져온 텍스트를 표시하려면 [파일 이름], [설명], [제작진], [제목] 또는 [저작권]을 선택합니다.

캡션의 글꼴, 색상 및 정렬을 지정합니다.

특정 각도로 이미지에 텍스트를 배치합니다.

웹 포토 갤러리 스타일

Photoshop은 다양한 웹 포토 갤러리 스타일을 제공합니다. HTML을 알고 있는 고급 사용자의 경우 새로운 스타일을 만들거나 HTML 템플릿 파일 세트를 편집하여 스타일을 사용자 정의할 수 있습니다.

Photoshop에서 제공되는 웹 포토 갤러리 스타일은 다음 위치에 있는 각각의 폴더에 저장되어 있습니다.

Program Files/Adobe/Adobe Photoshop CS5/사전 설정/웹 포토 갤러리

Adobe Photoshop CS5/사전 설정/웹 포토 갤러리

이 위치에 있는 각 폴더 이름은 [웹 포토 갤러리] 대화 상자의 [스타일] 팝업 메뉴에 옵션으로 표시됩니다. 각 폴더에는 Photoshop에서 갤러리를 만들 때 사용하는 다음과 같은 HTML 템플릿 파일이 들어 있습니다.

홈 페이지에서 각 축소판 아래에 나타나는 캡션의 레이아웃을 결정합니다.

페이지를 표시할 프레임 세트의 레이아웃을 결정합니다.

홈 페이지의 레이아웃을 결정합니다.

전체 크기 이미지의 갤러리 페이지 레이아웃을 결정합니다.

Thumbnail.htm 홈 페이지에 나타나는 축소판의 레이아웃을 결정합니다.

각 템플릿 파일에는 HTML 코드와 토큰이 들어 있습니다. 토큰이란 [웹 포토 갤러리] 대화 상자에서 해당 옵션을 설정하면 Photoshop에서 대체되는 텍스트 문자열입니다. 예를 들어, 템플릿 파일에는 토큰을 괄호 텍스트로 사용하는 다음의 TITLE 요소가 들어 있습니다.

<TITLE>%TITLE%</TITLE>

Photoshop에서 이 템플릿 파일을 사용하여 갤러리를 생성할 때 %TITLE% 토큰은 [웹 포토 갤러리] 대화 상자의 [사이트 이름]에 입력한 텍스트로 바뀝니다.

HTML 편집기를 사용하여 해당 HTML 템플릿 파일을 열어 학습하면 기존 스타일에 대해 훨씬 잘 알 수 있습니다. HTML 문서를 만들 때는 표준 ASCII 문자만 사용해야 하므로 메모장(Windows)이나 TextEdit(Mac OS)와 같은 일반 텍스트 편집기를 사용하여 이러한 문서를 열고, 편집하고, 만들 수 있습니다.

웹 포토 갤러리 스타일 사용자 정의 정보

하나 이상의 HTML 템플릿 파일을 편집하여 기존 웹 포토 갤러리 스타일을 사용자 정의할 수 있습니다. 스타일을 사용자 정의할 때에는 다음의 지침을 따라야 Photoshop에서 정확하게 갤러리를 만들 수 있습니다.

• 스타일 폴더에는 Caption.htm, IndexPage.htm, SubPage.htm, Thumbnail.htm 및 FrameSet.htm 파일이 들어 있어야 합니다.

• 스타일 폴더의 이름은 변경할 수 있지만 해당 폴더의 HTML 템플릿 파일 이름은 변경할 수 없습니다.

• Caption.htm 파일은 비어 있을 수도 있으며, Thumbnail.htm 파일에 캡션 레이아웃을 결정하는 HTML 코드와 캡션 레이아웃을 포함시킬 수 있습니다.

• [웹 포토 갤러리] 대화 상자가 아닌 템플릿 파일을 통해 옵션이 설정되도록 템플릿 파일의 토큰을 적절한 텍스트나 HTML 코드로 바꿀 수 있습니다. 예를 들어 템플릿 파일에는 토큰을 해당 값으로 사용하는 다음과 같은 배경 색상 특성을 가진 BODY 요소가 들어 있습니다.

  bgcolor=%BGCOLOR%

  페이지의 배경색을 빨강으로 설정하려면 %BGCOLOR% 토큰을 “FF0000”으로 대체합니다.

• 템플릿 파일에 HTML 코드와 토큰을 추가할 수 있습니다. 모든 토큰은 대문자여야 하며 퍼센트(%) 기호로 시작하고 끝나야 합니다.

웹 포토 갤러리 스타일 사용자 정의 또는 만들기

웹 포토 갤러리 스타일 토큰

Photoshop에서는 HTML 템플릿 파일의 토큰을 사용하여 기본 웹 포토 갤러리 스타일을 정의하고, 이러한 토큰을 사용하여 웹 포토 갤러리 대화 상자에서 사용자가 입력한 내용을 바탕으로 갤러리를 만들 수 있습니다.

갤러리 스타일을 사용자 정의하거나 만들 때 HTML 템플릿 파일에 어떤 토큰이든지 추가할 수 있습니다. IndexPage.htm 파일에만 나타날 수 있는 %THUMBNAILS%와 %THUMBNAILSROWS%는 예외입니다. 토큰을 추가할 때 해당 토큰을 정확하게 사용할 수 있도록 파일에 HTML 코드를 추가해야 할 수도 있습니다.

HTML 템플릿 파일에서는 다음 토큰을 사용할 수 있습니다.

활성 링크의 색상을 결정합니다.

이미지 파일의 이름을 결정합니다.

인덱스의 시작 위치로 되돌아가지 않고 사용자가 보고 있는 이미지의 축소판으로 되돌아갈 수 있도록 합니다. 이 토큰은 사용자가 [Home] 단추를 클릭할 때 동작합니다.

배너의 색상을 결정합니다.

배너 텍스트의 글꼴을 결정합니다.

배너 텍스트의 글꼴 크기를 결정합니다.

배경색을 결정합니다.

홈 페이지에서 각 축소판 아래의 캡션에 대한 글꼴을 결정합니다.

캡션에 대한 글꼴 크기를 결정합니다.

파일 정보에서 캡션에 대한 문서 제목을 삽입합니다.

각 페이지에서 사용하는 문자 집합을 결정합니다.

전화 번호 및 위치와 같은 갤러리의 연락처 정보를 결정합니다.

"Adobe Photoshop CS5 웹 포토 갤러리"로 확장합니다.

파일 정보에서 캡션에 대한 저작권 정보를 삽입합니다.

파일 정보에서 캡션에 대한 제작진을 삽입합니다.

현재 홈 페이지에 대한 링크를 결정합니다.

subpage.htm에 있으며 첫 번째 인덱스 페이지를 가리킵니다.

배너에 나타나는 날짜를 결정합니다.

갤러리의 전자 우편 주소 연락처 정보를 결정합니다.

캡션에 대한 이미지 파일 정보를 결정합니다.

이미지의 파일 이름을 결정합니다. HTML 텍스트로 나타나는 메타데이터에 이 토큰을 사용합니다.

이미지의 URL 파일 이름을 지정합니다. 이 토큰은 URL 파일 이름에만 사용됩니다.

프레임 세트의 오른쪽 프레임에 나타나는 첫 번째 갤러리에 대한 링크를 지정합니다.

프레임 세트의 왼쪽 프레임에 나타나는 홈 페이지에 대한 링크를 결정합니다.

갤러리의 제목을 결정합니다.

갤러리 페이지에서 전체 크기 이미지의 테두리 크기를 지정합니다.

[이미지의 폭과 높이 특성 추가] 체크 상자를 사용할 수 있도록 설정합니다. 이 토큰을 사용하면 사용자가 특성을 다운로드할 수 있으므로 다운로드 시간이 단축됩니다.

이 토큰은 이미지의 폭을 나타내는 숫자로만 교체됩니다.

갤러리 페이지에 대한 링크를 결정합니다.

[이미지 크기 조정] 상자를 선택한 경우 이 토큰에는 [큰 이미지] 창에서 사용되는 이미지 픽셀 값이 포함됩니다. 이 상자가 선택되지 않았으면 이 토큰에는 빈 문자열이 들어 갑니다. 이 토큰은 생성된 사이트의 모든 이미지에 대해 최대 높이와 폭 값을 표시할 수 있어 템플릿의 JavaScript에 유용합니다.

갤러리 페이지에서 전체 크기 이미지에 대한 URL을 지정합니다.

[이미지의 폭과 높이 특성 추가] 체크 상자를 사용할 수 있도록 설정합니다. 이 토큰을 사용하면 사용자가 특성을 다운로드할 수 있으므로 다운로드 시간이 단축됩니다.

이 토큰은 이미지의 폭을 나타내는 숫자로만 교체됩니다.

링크 색상을 결정합니다.

다음 갤러리 페이지에 대한 링크를 결정합니다.

큰 미리 보기 이미지에서 다음 큰 미리 보기 이미지로 이동하는 링크를 설정합니다.

다음 홈 페이지에 대한 링크를 결정합니다.

모든 큰 미리 보기 이미지에 하위 페이지의 숫자 링크를 삽입합니다.

현재 페이지 위치(예: 3페이지 중 1페이지)를 결정합니다.

갤러리의 사진을 제공한 개인이나 기관의 이름을 결정합니다.

이전 갤러리 페이지에 대한 링크를 결정합니다.

이전 홈 페이지에 대한 링크를 결정합니다.

갤러리의 제목을 결정합니다.

갤러리의 제목을 결정합니다.

텍스트 색상을 결정합니다.

축소판 테두리의 크기를 결정합니다.

[이미지의 폭과 높이 특성 추가] 체크 상자를 사용할 수 있도록 설정합니다. 이 토큰을 사용하면 사용자가 특성을 다운로드할 수 있으므로 다운로드 시간이 단축됩니다.

이 토큰은 축소판의 높이를 나타내는 숫자로만 교체됩니다.

이 토큰은 프레임 스타일에 대한 Thumbnail.htm 파일을 사용하여 축소판으로 바뀝니다. 이 토큰은 HTML 파일에서 독립된 줄에 단어가 잘리지 않도록 지정되어야 합니다.

“축소판” 패널에 있는 축소판 픽셀 값이 저장됩니다. 이 토큰은 생성된 사이트의 모든 축소판에 대해 최대 높이와 폭 값을 표시할 수 있어 템플릿의 JavaScript에 유용합니다.

축소판에 대한 링크를 결정합니다.

이 토큰은 프레임 없는 스타일의 Thumbnail.htm 파일을 사용하는 축소판의 행으로 대체됩니다. 이 토큰은 HTML 파일에서 독립된 줄에 단어가 잘리지 않도록 지정되어야 합니다.

[이미지의 폭과 높이 특성 추가] 체크 상자를 사용할 수 있도록 설정합니다. 이 토큰을 사용하면 사용자가 특성을 다운로드할 수 있으므로 다운로드 시간이 단축됩니다.

이 토큰은 축소판의 폭을 나타내는 숫자로만 교체됩니다.

갤러리의 제목을 결정합니다.

방문한 링크의 색상을 결정합니다.