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

PSD 파일에서 이미지 자산을 생성하면 다중 장치 웹 디자인에 특히 유용합니다.

비디오: Photoshop CC에서 웹 자산 생성

비디오: Photoshop CC에서 웹 자산 생성
이 비디오는 Photoshop CC의 자산 생성기를 사용하여 다른 프로젝트에서 사용할 수 있게 다양한 크기 및 해상도의 이미지를 출력하는 다양한 방법을 안내합니다.
Chris Converse

Adobe Generator를 사용하여 웹 그래픽을 작성하고 생성하는 방법에 대해서는 웹용 자산 추출을 참조하십시오.

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

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

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

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

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

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

참고:

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

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

Photoshop 이미지 자산 이름
레이어 이름/레이어 그룹 이름에서 이미지 정보 이름이 생성됩니다.

참고:

현재 문서에 대해 이미지 정보 생성이 활성화되어 있습니다. 활성화되면, 다음에 문서를 열 때마다 이 기능을 사용할 수 있습니다. 현재 문서에 대해 이미지 정보 생성을 비활성화하려면, [파일] > [생성] > [이미지 정보]를 선택 해제합니다.

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

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

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 이미지)

자산에 대한 기본 설정 지정

생성된 자산에 대한 문서 전체의 기본 설정을 지정할 수 있습니다. 다음 단계를 따르십시오.

  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. [확인]을 클릭합니다.

참고:

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

FAQ

정보 이름을 고유하게 지정해야 합니까?

정보 이름은 문서 수준에서 고유해야 합니다.

이미지 정보를 생성할 때의 기본 품질 수준은 무엇입니까?

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

Photoshop에서는 투명도나 다른 효과가 있는 레이어에서 이미지 정보를 생성합니까?

예. 레이어에 적용된 투명도 및 기타 효과는 해당 레이어에서 생성된 정보에서 반영됩니다. 하지만 이와 같은 효과는 생성된 정보에서 병합됩니다.

캔버스 도련을 벗어나는 레이어에서는 이미지 정보가 어떻게 생성됩니까?

자산이 문서 경계에 맞게 잘립니다. 이미지가 문서 경계 내에 있지 않은 경우, 제네레이터에서는 연결된 이미지 자산을 만들지 않습니다.

쉼표가 이미지 정보 이름 사이에 유일하게 허용되는 분리 기호입니까?

쉼표(,) 이외에, 더하기 (+) 기호를 이미지 정보 이름간 분리 기호로 사용할 수 있습니다. 예:

42% Rounded_rectangle_1.png24 + 100x100 Rounded_rectangle_1.jpg90%

는 다음과 동일합니다.

42% Rounded_rectangle_1.png24, 100x100 Rounded_rectangle_1.jpg90%

비디오: Photoshop 생성기에서 가장자리 리플로우 프로젝트 만들기

비디오: Photoshop 생성기에서 가장자리 리플로우 프로젝트 만들기
이 비디오는 320픽셀부터 1,000픽셀이 넘는 화면 크기에 반응하는 웹 레이아웃을 만드는 방법을 보여 줍니다.
Chris Converse

이 작업에는 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License의 라이센스가 부여되었습니다.  Twitter™ 및 Facebook 게시물은 Creative Commons 약관을 적용받지 않습니다.

법적 고지 사항   |   온라인 개인 정보 보호 정책