사용 안내서 취소

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

참고:

이미지 자산은 이제 파일 > 자동화 > 생성기 플러그인 아래에 있습니다.

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

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

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

레이어 또는 레이어 그룹에서 이미지 정보 생성

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

Photoshop 이미지 정보 생성
PSD 파일과 그 레이어 계층 구조의 예

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

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

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

특수 문자 :*는 레이어 이름에서 지원되지 않습니다.

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

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 적절한 레이어/레이어 그룹의 이름 변경

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

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

참고:

한 레이어/레이어 그룹의 내용에서 하나의 이미지 정보가 생성됩니다. 예를 들어 위의 스크린 샷에 있는 AdventureCo Logo 레이어 그룹에는 모양 레이어와 라이브 텍스트 레이어가 들어 있습니다. 이러한 레이어는 레이어 그룹에서 이미지 정보가 생성될 때 병합됩니다.

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

Photoshop 생성된 이미지 정보
생성된 이미지 정보

품질 및 크기 매개 변수 지정

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

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

JPEG 정보용 매개 변수

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

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

참고:

그림에서 보듯이, 원하는 출력 이미지 크기를 지정할 때 서로 다른 단위와 픽셀을 혼합할 수 있습니다. 예를 들어 4in x 100 Rounded_rectangle_3.jpg는 정보 생성에 유효한 레이어 이름입니다.

PNG 정보용 매개 변수

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

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

참고:

그림에서 보듯이, 원하는 출력 이미지 크기를 지정할 때 서로 다른 단위와 픽셀을 혼합할 수 있습니다. 예를 들어 4in x 100 Rounded_rectangle_3.png는 정보 생성에 유효한 레이어 이름입니다.

GIF 정보용 매개 변수

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

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

참고:

그림에서 보듯이, 원하는 출력 이미지 크기를 지정할 때 서로 다른 단위와 픽셀을 혼합할 수 있습니다. 예를 들어 4in x 100 Rounded_rectangle_3.gif는 정보 생성에 유효한 레이어 이름입니다.

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로 레이어 이름을 시작합니다. 이제 문서에서 생성한 모든 이미지 정보에 적용할 설정을 입력합니다. 예:

default hi-res/

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

default hi-res/@2x

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

default 50% lo-res/

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

default hi-res/@2x + 50% lo-res/

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

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

기본 크기 조절 요소보다 개별 레이어에 대해 지정된 크기 조절 요소가 우선합니다.

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

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

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

환경 설정에서 이미지 자산 생성을 비활성화하면 파일 > 자동화 > 생성기 플러그인 메뉴 명령을 사용할 수 없습니다. 이 기능은 [환경 설정] 대화 상자에서만 다시 활성화할 수 있습니다.

생성기 플러그인 메뉴

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

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

FAQ

유사 검색

쉽고 빠르게 지원 받기

신규 사용자이신가요?