포토샵에서 웹페이지 분할하기

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

 

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

분할 영역으로 나뉜 웹 페이지.

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

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

그런 다음 분할 영역을 이동하거나 크기를 조정하거나 다른 분할 영역에 맞춰 정렬할 수 있습니다.
• [분할 영역 옵션] 대화 상자에서 각 분할 영역에 대한 분할 영역 유형, 이름, URL 등의 옵션을 설정할 수 있습니다.
• 웹용으로 저장대화 상자에서 여러 최적화 설정을 사용하여 각 분할 영역을 최적화할 수 있습니다.

분할 영역 유형

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

[분할 영역 도구]로 만든 분할 영역을 사용자 분할 영역이라고 하고, 레이어에서 만든 분할 영역을 레이어 기반 분할 영역이라고 합니다. 사용자 분할 영역이나 레이어 기반 분할 영역을 새로 만들면 이미지의 나머지 영역에 추가로 자동 분할 영역이 만들어집니다.

 

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

 

사용자 분할 영역과 레이어 기반 분할 영역은 실선으로, 자동 분할 영역은 점선으로 정의되므로 각각 다르게 보일 수 있습니다.

또한 사용자 분할 영역과 레이어 기반 분할 영역은 서로 다른 아이콘으로 표시됩니다. 자동 분할 영역을 표시하거나 숨기면 사용자 분할 영역과 레이어 기반 분할 영역을 쉽게 볼 수 있습니다.

 

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

 

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

• 자동 분할 영역은 자동으로 생성됩니다.
• 사용자 분할 영역은 [분할 영역 도구]를 사용하여 만들어집니다.
• 레이어 기반 분할 영역은 [레이어] 패널을 사용하여 만들어집니다.

웹 페이지 분할

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

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

1. [분할 영역 도구]  를 선택합니다. C 키를 눌러 [자르기] 도구로 그룹화된 도구를 순환할 수 있습니다.
문서 창에 기존 분할 영역이 자동으로 표시됩니다.

 

2. 옵션 막대에서 스타일 설정을 선택합니다.

 

표준

사용자가 드래그하는 대로 분할 영역의 비율이 결정됩니다.

 

종횡비 고정

높이와 폭의 비율을 설정합니다. 정수나 소수를 입력합니다. 예를 들어, 분할 영역의 폭을 높이의 두 배가 되게 하려면 폭 2, 높이 1을 입력합니다.  

 

크기 고정

분할 영역의 높이와 폭을 지정합니다. 픽셀 값을 정수로 입력합니다.

 

3. 분할 영역을 만들 영역 위로 드래그합니다. Shift 키를 누른 상태에서 드래그하면 분할 영역을 정사각형으로 제한할 수 있습니다. 중심부터 그리려면 Alt 키(Windows) 또는 Option 키(Mac OS) 키를 누른 채 드래그합니다. 이미지의 다른 분할 영역이나 안내선에 새 분할 영역을 정렬하려면 [보기] > [스냅 대상]을 사용합니다. 사용자 분할 영역 이동, 크기 조정 및 스냅을 참조하십시오.

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

1. 이미지에 안내선을 추가합니다.

 

2. [분할 영역 도구]를 선택하고 옵션 막대에서 [안내선에서 분할 영역 만들기]를 클릭합니다.
 
안내선에서 분할 영역을 만들면 기존의 분할 영역이 모두 삭제됩니다.

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

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

레이어 기반 분할 영역은 소스 레이어가 수정될 때 업데이트

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

 

1. [레이어] 패널에서 레이어를 선택합니다.

 

2. [레이어] > [레이어 기반 새 분할 영역]을 선택합니다.

 

참고: 
애니메이션이 실행되는 동안 이미지의 넓은 영역 위로 레이어를 이동하려는 경우에는 레이어 기반 분할 영역을 사용하지 마십시오. 이렇게 하면 분할 영역이 너무 커질 수 있습니다.

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

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

 

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

 

1. [분할 영역 선택 도구]  를 사용하여 변환할 하나 이상의 분할 영역을 선택합니다.

 

2. 옵션 막대에서 [승격]을 클릭합니다.

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

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

 

분할 영역 선

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

 

분할 영역 색상

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

 

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

 

분할 영역 번호

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

 

분할 영역 배지

다음 배지나 아이콘은 특정 상태를 나타냅니다.
 
1. 사용자 분할 영역에 이미지 내용이 있는 경우

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

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

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

1. [보기] > [표시] > [분할 영역]을 선택합니다. 분할 영역을 다른 항목과 함께 숨기거나 표시하려면 [표시자] 명령을 사용하십시오. 표시자 표시 또는 숨기기를 참조하십시오.

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

1. 다음 중 하나를 수행합니다.
 
• [분할 영역 선택 도구]  를 선택하고 옵션 막대에서 [자동 분할 영역 표시] 또는 [자동 분할 영역 숨기기]를 클릭합니다.
• [보기] > [표시] > [분할 영역]을 선택합니다. 자동 분할 영역이 나머지 분할 영역과 함께 나타납니다.

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

1. 다음 중 하나를 수행합니다.
 
• Windows에서는 [편집] > [환경 설정] > [안내선, 격자 및 분할 영역]을 선택합니다.
• Mac OS에서는 [Photoshop] > [환경 설정] > [안내선, 격자 및 분할 영역]을 선택합니다.

 

2. [분할 영역]에서 [분할 영역 번호 표시]를 클릭합니다.

분할 영역 선의 색상 변경

1. Windows에서는 [편집] > [환경 설정] > [안내선, 격자 및 분할 영역]을 선택하고, Mac OS에서는 [Photoshop] > [환경 설정] > [안내선, 격자 및 분할 영역]을 선택합니다.

 

2. [분할 영역 선] 아래의 [선 색상] 메뉴에서 색상을 선택합니다. 색상이 바뀌면 선택된 분할 영역 선은 대조되는 색상으로 자동 표시됩니다.

 

Adobe Creative cloud 굿즈 디자인 - 티셔츠 굿즈 제작해 판매 시작하기

Adobe Creative cloud 굿즈 디자인 - 티셔츠 굿즈 제작해 판매 시작하기

Adobe 웹양식 만들기

Adobe 웹양식 만들기

PNG 파일이 아닌 Photoshop 오류 해결하기

PNG 파일이 아닌 Photoshop 오류 해결하기