웹 페이지 분할

분할 영역을 사용하면 이미지가 보다 작은 이미지로 나뉩니다. 이렇게 나뉜 이미지는 HTML 표나 CSS 레이어를 사용하여 웹 페이지에서 재조합됩니다. 이미지를 나누는 방식으로 여러 URL 링크를 할당하여 페이지 탐색을 만들거나 각 이미지 부분을 자체의 최적화 설정으로 최적화할 수 있습니다.

분할된 이미지를 내보내고 최적화하려면 웹용으로 저장 명령을 사용합니다. 이 명령을 실행하면 각 분할 영역이 개별 파일로 저장되고, 분할된 이미지를 표시하는 데 필요한 HTML 또는 CSS 코드가 생성됩니다.

분할 영역을 사용하여 작업할 때는 다음과 같은 기본적인 사항에 유의해야 합니다.

• [분할 영역 도구]를 사용하거나 레이어 기반 분할 영역을 작성하여 분할 영역을 만들 수 있습니다.

• 분할 영역을 만든 다음 [분할 영역 선택 도구] 를 사용하여 해당 분할 영역을 선택한 후 분할 영역을 이동하거나 크기를 조정하거나 다른 분할 영역에 맞춰 정렬할 수 있습니다.

• [분할 영역 옵션] 대화 상자에서 각 분할 영역에 대한 분할 영역 유형, 이름, URL 등의 옵션을 설정할 수 있습니다.

• 웹용으로 저장대화 상자에서 여러 최적화 설정을 사용하여 각 분할 영역을 최적화할 수 있습니다.

분할 영역의 범주는 작성 방법(사용자, 레이어 기반, 자동)과 내용 유형(표, 이미지, 이미지 없음)에 따라 나눠집니다.

[분할 영역 도구]로 만든 분할 영역을 사용자 분할 영역이라고 하고, 레이어에서 만든 분할 영역을 레이어 기반 분할 영역이라고 합니다. 사용자 분할 영역이나 레이어 기반 분할 영역을 새로 만들면 이미지의 나머지 영역에 추가로 자동 분할 영역이 만들어집니다. 다시 말하면 자동 분할 영역은 이미지에서 사용자 분할 영역이나 레이어 기반 분할 영역으로 정의하지 않은 영역을 칠하며, 사용자 분할 영역이나 레이어 기반 분할 영역을 추가하거나 편집할 때마다 다시 만들어집니다. 자동 분할 영역을 사용자 분할 영역으로 변환할 수도 있습니다.

사용자 분할 영역과 레이어 기반 분할 영역은 실선으로, 자동 분할 영역은 점선으로 정의되므로 각각 다르게 보일 수 있습니다. 또한 사용자 분할 영역과 레이어 기반 분할 영역은 서로 다른 아이콘으로 표시됩니다. 자동 분할 영역을 표시하거나 숨기면 사용자 분할 영역과 레이어 기반 분할 영역을 쉽게 볼 수 있습니다.

하위 분할 영역은 오버랩 분할 영역을 만들 때 생성되는 자동 분할 영역의 일종으로, 최적화된 파일을 저장할 때 이미지를 나누는 방법을 나타냅니다. 하위 분할 영역에는 번호가 매겨지고 분할 영역 기호가 표시되지만 이를 밑에 있는 분할 영역과 별도로 선택하거나 편집할 수 없습니다. 분할 영역의 스태킹 순서를 정돈할 때마다 하위 분할 영역이 다시 생성됩니다.

분할 영역은 다음과 같은 여러 가지 방법으로 만들어집니다.

• 자동 분할 영역은 자동으로 생성됩니다.

• 사용자 분할 영역은 [분할 영역 도구]를 사용하여 만들어집니다.

• 레이어 기반 분할 영역은 [레이어] 패널을 사용하여 만들어집니다.

웹 페이지 분할

[분할 영역 도구]를 사용하여 이미지에 직접 분할 영역 선을 그리거나, 레이어를 사용하여 그래픽을 디자인한 다음 레이어 기반의 분할 영역을 만들 수 있습니다.

분할 영역 도구를 사용하여 분할 영역 만들기

안내선에서 분할 영역 만들기

레이어에서 분할 영역 만들기

레이어 기반 분할 영역에는 레이어의 픽셀 데이터가 포함됩니다. 레이어를 이동하거나 레이어의 내용을 편집하면 새 픽셀을 포함하도록 분할 영역이 자동으로 조정됩니다.

레이어 기반 분할 영역은 사용자 분할 영역보다 유연성이 떨어지지만 레이어 기반 분할 영역을 사용자 분할 영역으로 변환, 즉 "승격"할 수 있습니다. 자동 분할 영역과 레이어 기반 분할 영역을 사용자 분할 영역으로 변환을 참조하십시오.

자동 분할 영역과 레이어 기반 분할 영역을 사용자 분할 영역으로 변환

레이어 기반 분할 영역은 레이어의 픽셀 내용에 고정되어 있기 때문에 레이어 기반 분할 영역을 사용자 분할 영역으로 변환하지 않는 한, 레이어 기반 분할 영역을 이동하고, 결합하고, 나누고, 크기를 조정하고, 정렬하는 유일한 방법은 해당 레이어를 편집하는 것입니다.

이미지의 모든 자동 분할 영역은 연결되어 있으며 동일한 최적화 설정을 공유합니다. 자동 분할 영역의 최적화 설정을 여러 개 지정하려면 자동 분할 영역을 사용자 분할 영역으로 승격해야 합니다.

분할 영역 및 분할 영역 옵션 보기

Photoshop과 웹용으로 저장 대화 상자에서 분할 영역을 볼 수 있습니다. 다음 특성을 이용하면 쉽게 분할 영역을 식별하고 구별할 수 있습니다.

분할 영역의 경계선을 정의합니다. 실선은 분할 영역이 사용자 분할 영역이나 레이어 기반 분할 영역임을 나타내고, 점선은 분할 영역이 자동 분할 영역임을 나타냅니다.

사용자 분할 영역 및 레이어 기반 분할 영역을 자동 분할 영역과 구분합니다. 사용자 분할 영역과 레이어 기반 분할 영역은 파란색 기호, 자동 분할 영역에는 회색 기호가 기본값으로 설정되어 있습니다.

그 외에도 웹용으로 저장 대화 상자에서 색상 조정을 사용하여 선택하지 않은 분할 영역을 흐리게 할 수 있습니다. 이러한 조정은 표시를 위한 것으로 최종 이미지의 색상에는 영향을 미치지 않습니다. 기본적으로 자동 분할 영역의 색상 조정 양은 사용자 분할 영역의 두 배입니다.

분할 영역에는 이미지의 왼쪽 위 모퉁이에서 시작하여 왼쪽에서 오른쪽으로, 위에서 아래로 번호 가 지정됩니다. 분할 영역의 전체 개수나 정렬 방식을 변경하면 분할 영역 번호가 업데이트되어 새로운 순서가 적용됩니다.

다음 배지나 아이콘은 특정 상태를 나타냅니다.

사용자 분할 영역에 이미지 내용이 있는 경우

사용자 분할 영역에 이미지 내용이 없는 경우

레이어 기반 분할 영역인 경우

분할 영역 가장자리 표시 또는 숨기기

자동 분할 영역 표시 또는 숨기기

분할 영역 번호 표시 또는 숨기기

분할 영역 선의 색상 변경