레이어에서 이미지 에셋 생성

PSD 파일에 있는 레이어 또는 레이어 그룹의 내용에서 JPEG, PNG, GIF 또는 SVG 이미지 정보를 생성할 수 있습니다. 지원되는 이미지 형식 확장명을 레이어 이름이나 레이어 그룹 이름에 첨부하면 정보가 자동으로 생성됩니다. 필요에 따라, 생성된 이미지 정보에 대해 품질 및 크기 매개 변수를 지정할 수도 있습니다.

PSD 파일에서 이미지 정보를 생성하는 것은 다중 장치 웹 디자인에 특히 유용합니다.

웹 그래픽을 만들고 내보내는 방법은 Photoshop에서 다양한 형식으로 파일을 내보내는 방법을 참조하세요.

이미지 정보 생성기를 잘 이해하려면 다음 레이어 계층을 가진 간단한 PSD 파일(이 링크에서 다운로드)을 사용해 보세요.

이 파일에 대한 레이어 계층 구조에는 두 개의 레이어 그룹, 즉 Rounded_rectangle 그룹과 타원 그룹이 있습니다. 이 레이어 그룹 각각에는 5개의 레이어가 들어 있습니다.

다음 절차에 따라 이 PSD 파일에서 이미지 정보를 생성하세요.

1. PSD 파일을 연 채로 파일 > 자동화 > 생성기 플러그인 > 이미지 자산을 선택하세요.
2. 이미지 정보를 생성할 레이어 또는 레이어 그룹의 이름에 적절한 파일 형식 확장명(.jpg, .png, .gif 또는 .svg)을 추가합니다. 예를 들어, 레이어 그룹 Rounded_rectangle 및 Ellipses의 이름은 Rounded_rectangle.jpg 및 Ellipses.png로 변경하고, Ellipse_4의 이름은 Ellipse_4.gif로 변경합니다.

Photoshop에서는 이미지 정보를 생성하여 소스 PSD 파일과 함께 하위 폴더에 저장합니다. 소스 PSD 파일을 아직 저장하지 않은 경우 Photoshop에서 생성된 정보를 데스크탑의 새 폴더에 저장합니다.

클라우드 문서에 대해 에셋 생성

클라우드 문서로 작업하는 경우, 에셋은 다음과 같이 "Photoshop Cloud Associates" 디렉토리에 저장됩니다.

• Windows: C:\Users\yourname\Documents\Adobe\Photoshop Cloud Associates
• macOS: /Users/yourname/Documents/Adobe/Photoshop Cloud Associates

레이어 또는 레이어 그룹에서 여러 정보 생성

레이어/레이어 그룹에서 여러 정보를 생성하려면, 정보 이름들을 쉼표로 구분하세요. 예를 들어, 다음 레이어 이름은 세 개의 정보를 생성합니다.

Ellipse_4.jpg, Ellipse_4b.png, Ellipse_4c.png

정보를 하위 폴더에 저장

레이어/레이어 그룹에서 생성된 이미지 정보를 문서 정보 폴더 바로 아래의 하위 폴더에 저장하도록 선택할 수 있습니다. 하위 폴더 이름을 레이어/레이어 그룹 이름에 포함합니다. 예를 들면 다음과 같습니다.

[하위 폴더]/Ellipse_4.jpg 

웹 디자인 사용 사례

PSD 파일에서 이미지 정보를 생성하는 것은 다중 장치 웹 디자인에 특히 유용합니다. 다음의 웹 디자인과 그 레이어 구조를 생각해 보세요.

맨 위와 전체 핫스팟 이미지 격자의 맨 위 행에 있는 아이콘을 이미지 정보로 추출해봅시다.

• 이미지 형식 확장명을 적절한 레이어 이름에 추가합니다.

적절한 레이어/레이어 그룹의 이름 변경

Photoshop에서는 정보를 생성하여 소스 PSD 파일과 동일한 위치에 저장합니다.

품질 및 크기 매개 변수 지정

JPEG 정보는 기본적으로 90%의 품질로 생성됩니다. PNG 정보는 기본적으로 32비트 이미지로 생성됩니다. GIF 정보는 기본 알파 투명도로 생성됩니다.

정보를 생성하기 위해 레이어 또는 레이어 그룹의 이름을 변경할 때 품질과 크기를 사용자 지정할 수 있습니다.

JPEG 정보용 매개 변수

• 원하는 출력 품질을 .jpg(1-10)나 .jpg(1-100%)와 같이 정보 이름의 접미어로 추가합니다. 예:
  • Ellipse_4.jpg5
  • Ellipse_4.jpg50%
• 원하는 출력 이미지 크기를 (px, in, cm 및 mm) 등의 관련 또는 지원 형식으로 정보 이름의 접두어로 추가합니다. Photoshop은 그에 따라 이미지의 크기를 조정합니다. 예:
  • 200% Ellipse_4.jpg
  • 300 x 200 Rounded_rectangle_3.jpg
  • 10in x 200mm Rounded_rectangle_3.jpg
    

참고: 접두어와 정보 이름 사이에 공백 문자를 추가하는 것을 잊지 마세요.  픽셀 단위로 크기를 지정할 때 단위는 생략해도 됩니다. 예: 300 x 200.

PNG 정보용 매개 변수

• 원하는 출력 품질을 8, 24 또는 32와 같이 정보 이름의 접미어로 추가합니다. 예:
  • Ellipse_4.png24
• 원하는 출력 이미지 크기를 (px, in, cm 및 mm 등의 관련 또는 지원 형식으로) 정보 이름의 접두어로 추가합니다. Photoshop은 그에 따라 이미지의 크기를 조정합니다. 예:
  • 42% Ellipse_4.png
  • 300mm x 20cm Rounded_rectangle_3.png
  • 10in x 50cm Rounded_rectangle_3.png

참고: 접두어와 정보 이름 사이에 공백 문자를 추가하는 것을 잊지 마세요. 픽셀 단위로 크기를 지정할 때 단위는 생략해도 됩니다. 예: 300 x 200.

GIF 정보용 매개 변수

• 원하는 출력 이미지 크기를 (px, in, cm 및 mm 등의 관련 또는 지원 형식으로) 정보 이름의 접두어로 추가합니다. 예:
  • 42% Ellipse_4.gif
  • 300mm x 20cm Rounded_rectangle_3.gif
  • 20in x 50cm Rounded_rectangle_3.gif

참고: 접두어와 정보 이름 사이에 공백 문자를 추가하는 것을 잊지 마세요. 픽셀 단위로 크기를 지정할 때 단위는 생략해도 됩니다. 예: 300 x 200.

GIF 정보에는 품질 매개 변수를 사용할 수 없습니다.

복잡한 레이어 이름 구성

정보 생성용 레이어의 이름을 지정할 때 매개 변수를 사용하여 여러 정보 이름을 지정할 수 있습니다. 예:

120% Delicious.jpg, 42% Delicious.png24, 100x100 Delicious_2.jpg90%, 250% Delicious.gif

Photoshop에서는 이 레이어에서 다음 정보를 생성합니다.

• Delicious.jpg(크기가 120%로 조정된 8품질 JPG 이미지)
• Delicious.png(크기가 42%로 조정된 24비트 PNG 이미지)
• Delicious_2.jpg(절대 크기 100x100px의 90% 품질 JPG 이미지)
• Delicious.gif(크기가 250% 조정된 GIF 이미지)

절대 크기 조절 예제

절대 크기 조절의 좋은 예

• 100x80 foo.png(단순 절대 크기 조절)
• 80 x 100px foo.png(길이 사이의 간격)
• 4in x100 foo.png(단위 혼합 및 단위 없음)
• 90mm x120cm foo.png(서로 다른 단위 혼합)
• 100x? foo.png(와일드카드)
• ?x60in foo.png(시작 시 와일드카드)

절대 크기 조절의 잘못된 예

• 100x100foo.png(파일 이름 앞에 공백 없음)
• 80x100 60% foo.png(절대 크기 조절과 상대 크기 조절의 혼합)
• 50% 80x100 foo.png(절대 크기 조절과 상대 크기 조절의 혼합)
• 20in cm x50cm foo.png(여러 단위)
• 30nm x20 nano.png(잘못된 단위)

여러 파일 포맷 및 분리

좋은 예

• Layer 1.png(파일 이름에 공백을 사용할 수 있음 - "Layer 1.png"라는 단일 파일 생성)
• Layer 1.png,Layer 2.jpg(쉼표를 구분 기호로 사용)
• Layer 1.png, Layer 2.jpg(뒤에 공백이 있는 쉼표를 구분 기호로 사용)
• Layer 1.png+Layer 2.jpg(더하기를 구분 기호로 사용)
• Layer 1.png + Layer 2.jpg(뒤에 공백이 있는 더하기를 구분 기호로 사용)

통합 기능

100% Delicious, 42% Layer 1.png24 + 100x100 Layer.jpg-90% , 250% Quux/Foo Bar Baz.gif의 세 개 파일 생성("100% Delicious" 문자열은 파일 이름이 아니므로 무시됨)

• Layer 1.png, 42% 비율, 24비트 png
• Layer.jpg, 절대 크기 100x100 픽셀, 90% 품질 jpg
• 하위 폴더 Quux에 있는 Foo Bar Baz.gif, 250% 비율, gif로 표시.

정보에 대한 기본 설정 지정

생성된 정보에 대한 문서 전체의 환경 설정을 지정할 수 있습니다. 다음 단계를 따르세요.

1. 문서에 빈 레이어를 만듭니다.
2. 키워드 default로 레이어 이름을 시작합니다. 이제 문서에서 생성한 모든 이미지 정보에 적용할 설정을 입력합니다. 예:
   

hi-res 하위 폴더에 모든 이미지 정보를 생성합니다. 예: [asset_folder]/hi-res/Delicious.jpg.

hi-res 하위 폴더에 모든 이미지 정보를 생성합니다. 또한 정보 이름 뒤에 @2x를 붙입니다. 예: [asset_folder]/hi-res/Delicious@2x.jpg.

문서의 정보 폴더 아래의 lo-res 하위 폴더에 50% 축소된 이미지 정보를 저장합니다.

레이어에서 2개의 이미지 정보를 생성합니다.

• hi-res 하위 폴더에 이름 뒤에 @2x가 붙은 이미지 정보 생성
• lo-res 하위 폴더에 50% 축소된 이미지 정보 생성
  

모든 문서에 대해 이미지 정보 생성 비활성화

[환경 설정]을 수정하여 모든 Photoshop 문서에 대해 전체적으로 이미지 정보 생성을 비활성화할 수 있습니다.

1. [편집] > [환경 설정] > [플러그인]을 선택합니다.
2. [제네레이터 활성화]를 선택 해제합니다.
3. 확인을 클릭합니다.

생성기 플러그인 메뉴

데스크탑용 Photoshop 버전 25.11의 2024년 7월 릴리스 이전에 생성기 플러그인은 파일 > 생성 메뉴에서 찾을 수 있었습니다.

이제 기본 이미지 자산 플러그인을 포함한 모든 생성기 플러그인은 파일 > 자동화 > 생성기 플러그인 메뉴에서 찾을 수 있습니다.  이 변경은 하위 메뉴의 이름을 보다 명확하게 확인하고 이미지 생성과 같은 새로운 생성형 기능과 구별하기 위해 이루어졌습니다. 

FAQ