기본 템플릿 소개 basic-templates

Dynamic Media Classic 조건에서 템플릿은 템플릿이 게시된 후 URL을 통해 동적으로 변경할 수 있는 문서입니다. Dynamic Media Classic은 이미지 서버에서 호출되고 이미지 및 렌더링된 텍스트로 구성된 이미지 기반 템플릿인 기본 템플릿을 제공합니다.

가장 강력한 템플릿 측면 중 하나는 템플릿에 직접 통합 지점을 연결하여 데이터베이스에 연결할 수 있다는 것입니다. 따라서 이미지를 제공하고 크기를 조정할 수 있을 뿐만 아니라 데이터베이스를 쿼리하여 새 항목 또는 판매 항목을 찾고 이미지에 오버레이로 표시되도록 할 수 있습니다. 항목에 대한 설명을 요청하고 선택한 글꼴과 레이아웃에 레이블로 표시되도록 할 수 있습니다. 가능성은 무한합니다.

기본 템플릿은 간단한 템플릿에서 복잡한 템플릿에 이르기까지 다양한 방식으로 구현할 수 있습니다. 예:

  • 기본 머천다이징. 해당 제품에 무료 배송이 있는 경우 "무료 배송"과 같은 레이블을 사용합니다. 이러한 레이블은 Photoshop의 상품 팀에서 설정하며 웹은 논리를 사용하여 이미지에 적용할 시기를 파악합니다.
  • 고급 머천다이징. 각 템플릿에는 여러 변수가 있으며 동시에 두 개 이상의 옵션이 표시될 수 있습니다. 데이터베이스, 재고 및 비즈니스 규칙을 사용하여 "Just In", "Clearance" 또는 "Sold Out"으로 제품을 표시할 시기를 결정합니다. 또한 제품 뒤의 투명도를 사용하여 서로 다른 배경(예: 다른 방)에서 표시할 수 있습니다. 동일한 템플릿 및/또는 에셋은 제품 세부 사항 페이지에 다른 배경에서 동일한 제품의 더 크거나 확대 가능한 버전을 표시하도록 용도 변경될 수 있습니다.

Dynamic Media Classic은 이러한 템플릿 기반 애플리케이션의 시각적 부분만 제공한다는 것을 이해하는 것이 중요합니다. Dynamic Media Classic 회사 또는 통합 파트너는 애플리케이션을 만드는 데 필요한 비즈니스 규칙, 데이터베이스 및 개발 기술을 제공해야 합니다. "내장" 템플릿 애플리케이션은 없습니다. 디자이너는 Dynamic Media Classic에서 템플릿을 설정하고, 개발자는 URL 호출을 사용하여 템플릿의 변수를 변경합니다.

이 자습서 섹션이 끝날 때까지 다음 방법을 알 수 있습니다.

  • Photoshop PSD을 Dynamic Media Classic에 업로드하여 템플릿의 기반으로 사용합니다.
  • 이미지 레이어로 구성된 간단한 머천다이징 기본 템플릿을 만듭니다.
  • 텍스트 레이어를 추가하고 매개 변수 사용을 통해 변수를 변경합니다.
  • 템플릿 URL을 구성하고 웹 브라우저를 통해 이미지를 동적으로 조작합니다.
NOTE
이 장의 모든 URL은 설명 목적으로만 사용되며 라이브 링크가 아닙니다.

기본 템플릿 개요

기본 템플릿(또는 간단히 "템플릿")의 정의는 URL 주소 지정 가능한 계층화된 이미지입니다. 최종 결과는 이미지이지만 URL로 변경될 수 있는 이미지입니다. 사진, 텍스트 또는 그래픽(Dynamic Media Classic의 P TIFF 에셋의 모든 조합)으로 구성될 수 있습니다.

템플릿은 유사한 워크플로 및 유사한 기능을 포함하므로 Photoshop PSD 파일과 가장 유사합니다.

  • 둘 다 적층된 아세테이트 시트 같은 층으로 구성됩니다. 부분적으로 투명한 이미지를 합성하여 레이어의 투명한 영역을 통해 아래 레이어로 볼 수 있습니다.
  • 레이어를 이동 및 회전시켜 내용을 재배치할 수 있으며 불투명도 및 혼합 모드를 변경하여 내용을 부분적으로 투명하게 할 수 있습니다.
  • 텍스트 기반 레이어를 만들 수 있습니다. 이미지 서버는 Photoshop 및 Illustrator과 동일한 텍스트 엔진을 사용하므로 품질이 매우 높을 수 있습니다.
  • 단순한 레이어 스타일을 각 레이어에 적용하여 그림자나 광선과 같은 특수 효과를 만들 수 있습니다.

그러나 Photoshop PSD과 달리 레이어는 완전히 동적이고 이미지 서버의 URL을 통해 제어할 수 있습니다.

  • 모든 템플릿 속성에 변수를 추가할 수 있으므로 즉석에서 구성을 쉽게 변경할 수 있습니다.
  • 매개 변수라는 변수를 사용하면 변경할 템플릿의 부분만 표시할 수 있습니다.

Photoshop에서와 같이 모든 레이어를 단일 파일에 넣고 표시하거나 숨기는 대신 달라질 각 레이어에 대한 자리 표시자만 추가하면 됩니다(원하는 경우 해당 작업도 수행할 수 있음).

자리 표시자를 사용하면 레이어의 콘텐츠를 게시된 다른 에셋으로 동적으로 교환할 수 있으며, 교체된 레이어의 동일한 속성(예: 크기 및 회전)을 자동으로 가져옵니다.

기본 템플릿은 일반적으로 Photoshop에서 디자인되지만 URL을 통해 배포되므로 템플릿 프로젝트에는 디자인과 기술 기술이 모두 혼합되어야 합니다. 일반적으로 크리에이티브 템플릿 작업을 수행하는 사람은 Photoshop 디자이너이고, 템플릿을 구현하는 사람은 웹 개발자라고 가정합니다. 템플릿이 성공하려면 크리에이티브 팀과 개발 팀이 긴밀하게 협력해야 합니다.

템플릿 프로젝트는 비즈니스 규칙 및 애플리케이션의 필요에 따라 비교적 단순하거나 매우 복잡할 수 있습니다. 기본 템플릿은 이미지 서버에서 호출되지만 Dynamic Media Classic 환경의 유연성으로 인해 다른 템플릿 내에 템플릿을 중첩할 수도 있으므로 일반적으로 명명된 변수에 의해 연결될 수 있는 상당히 복잡한 이미지를 만들 수 있습니다.

기본 템플릿 만들기

기본 템플릿을 사용하여 작업할 때는 일반적으로 아래 다이어그램의 워크플로 단계를 따릅니다. 동적 텍스트 레이어를 사용하는 경우 점선으로 표시된 단계는 선택 사항이며, 아래 지침에 "텍스트 워크플로우"로 표시되어 있습니다. 텍스트를 사용하지 않는 경우 기본 경로만 따릅니다.

이미지

기본 템플릿 워크플로입니다.

  1. 에셋을 디자인하고 만듭니다. 대부분의 사용자는 Adobe Photoshop에서 이 작업을 수행합니다. 필요한 정확한 크기로 에셋을 디자인합니다. 썸네일 페이지의 200픽셀 이미지인 경우 200픽셀로 디자인합니다. 확대/축소가 필요한 경우에는 약 2000픽셀 크기로 설계한다. Photoshop(및/또는 비트맵으로 저장된 Illustrator)를 사용하여 에셋을 만들고, Dynamic Media Classic을 사용하여 부품을 함께 조합하고, 레이어를 관리하며, 변수를 추가합니다.
  2. 그래픽 에셋을 디자인한 후 Dynamic Media Classic에 업로드합니다. PSD에서 개별 에셋을 업로드하는 대신, 계층 구조의 전체 PSD 파일을 업로드하고 Dynamic Media Classic에서 를 사용하여 계층별로 파일을 만들도록 하는 것이 좋습니다. 레이어 유지 업로드 시 옵션(자세한 내용은 아래 참조) 텍스트 워크플로우: 동적 텍스트를 만드는 경우 글꼴도 업로드하십시오. 동적 텍스트는 가변적이며 URL을 통해 제어됩니다. 텍스트가 정적이거나 변경되지 않는 짧은 구문(예: "X% Off" 대신 "New" 또는 "Sale"이라고 하는 태그)만 있는 경우(X는 변수 번호 사용) Photoshop에서 텍스트를 미리 렌더링하고 래스터화된 레이어로 이미지로 업로드하는 것이 좋습니다. 보다 쉽고 원하는 대로 텍스트 스타일을 지정할 수 있습니다.
  3. 빌드 메뉴의 템플릿 기본 사항 편집기를 사용하여 Dynamic Media Classic에서 템플릿을 작성하고 이미지 레이어를 추가합니다. 텍스트 워크플로우: 동일한 편집기에서 텍스트 레이어를 만듭니다. 이 단계는 Dynamic Media Classic에서 템플릿을 수동으로 빌드할 때 필요합니다. 디자인과 일치하는 캔버스 크기를 선택하고, 이미지를 캔버스로 드래그하여 놓고, 레이어 속성(크기, 회전, 불투명도 등)을 설정합니다. 템플릿에 가능한 모든 레이어를 넣는 것은 아닙니다. 이미지 레이어당 하나의 자리 표시자만 추가하면 됩니다. 텍스트 워크플로: Photoshop에서 텍스트 레이어를 만드는 것과 비슷한 방식으로 텍스트 도구를 사용하여 텍스트 레이어를 만듭니다. Photoshop 문자 도구에서 사용할 수 있는 것과 동일한 옵션을 사용하여 글꼴을 선택하고 스타일을 지정할 수 있습니다. 또 다른 워크플로우는 PSD을 업로드하고 Dynamic Media Classic에서 "무료" 템플릿을 생성하도록 하는 것이며, 텍스트 레이어를 다시 만들 수도 있습니다. 이에 대해서는 뒤에서 보다 자세히 살펴본다.
  4. 레이어가 만들어지면 레이어의 소스( 이미지 자체 )를 포함하여 URL을 통해 제어하려는 레이어의 속성에 매개 변수(변수)를 추가합니다. 텍스트 작업 과정: 텍스트 레이어에 매개 변수를 추가하여 텍스트 콘텐츠와 레이어 자체의 크기 및 위치뿐만 아니라 글꼴 색상, 글꼴 크기, 가로 추적 등과 같은 모든 서식 옵션을 제어할 수도 있습니다.
  5. 템플릿 크기와 일치하는 이미지 사전 설정을 만듭니다. 이 작업을 수행하여 템플릿을 항상 1:1 크기로 호출하고 템플릿에 맞게 크기가 조정되는 큰 이미지 레이어에 선명하게 하기를 추가하는 것이 좋습니다. 확대/축소할 템플릿을 작성하는 경우 이 단계는 필요하지 않습니다.
  6. Dynamic Media Classic 미리보기에서 URL을 게시하고 복사한 다음 브라우저에서 테스트합니다.

Dynamic Media Classic에 템플릿 에셋 준비 및 업로드

템플릿 에셋을 Dynamic Media Classic에 업로드하기 전에 몇 가지 준비 단계를 완료해야 합니다.

업로드 PSD 준비

Photoshop 파일을 Dynamic Media Classic에 업로드하기 전에 Photoshop의 레이어를 간소화하여 작업을 더 쉽게 하고 이미지 서버와의 호환성을 최대한 유지하십시오. PSD 파일은 Dynamic Media Classic에서 인식하지 못하는 많은 요소로 구성되는 경우가 많으며, 결국 관리하기 어려운 작은 조각이 많이 생길 수도 있습니다. 나중에 원본을 편집해야 하는 경우에 대비하여 마스터 PSD의 백업을 저장하십시오. 마스터가 아닌 간소화된 복사본을 업로드합니다.

이미지

  1. 함께 설정/해제해야 하는 관련 레이어를 단일 레이어로 병합/병합하여 레이어 구조를 단순화합니다. 예를 들어 "NEW" 레이블과 파란색 배너는 한 번의 클릭으로 표시하거나 숨길 수 있도록 단일 레이어로 병합됩니다.
    이미지

  2. 일부 레이어 유형 및 레이어 효과는 Dynamic Media Classic 또는 이미지 서버에서 지원되지 않으므로 업로드하기 전에 래스터화해야 합니다. 그렇지 않으면 효과가 무시되거나 레이어가 삭제될 수 있습니다. 레이어를 래스터화하면 가 편집 가능에서 편집 불가로 변환됩니다. 레이어 효과 또는 텍스트 레이어를 래스터화하려면 빈 레이어를 만들고 둘 다 선택한 다음 를 사용하여 병합합니다 레이어 > 레이어 병합 또는 CTRL + E/CMD + E.

    • Dynamic Media Classic은 레이어를 그룹화하거나 연결할 수 없습니다. 그룹 또는 연결된 세트의 모든 레이어는 더 이상 그룹화/연결되지 않는 별도의 레이어로 변환됩니다.
    • 레이어 마스크는 업로드 시 투명도로 변환됩니다.
    • 조정 레이어는 지원되지 않으며 무시됩니다.
    • [단색] 레이어와 같은 칠 레이어는 래스터화됩니다.
    • 스마트 오브젝트 레이어와 벡터 레이어는 업로드 시 일반 이미지로 래스터화되고 스마트 필터는 적용 및 래스터화됩니다.
    • 텍스트 추출 옵션을 사용하지 않으면 텍스트 레이어도 래스터화됩니다. 자세한 내용은 아래를 참조하십시오.
    • 대부분의 레이어 효과는 무시되며 일부 블렌드 모드만 지원됩니다. 확실하지 않은 경우 Dynamic Media Classic에서 간단한 효과(예: 내부 또는 그림자, 내부 또는 외부 광선)를 추가하거나 빈 레이어를 사용하여 Photoshop에서 효과를 병합하고 래스터화합니다.

글꼴 작업

동적 텍스트를 생성해야 하는 경우 글꼴을 업로드하고 게시합니다. Dynamic Media Classic에 포함된 유일한 글꼴은 Arial입니다.

각 회사는 웹에서 글꼴을 사용할 수 있는 라이선스를 취득할 책임이 있습니다. 컴퓨터에 글꼴을 설치했다고 해서 웹에서 상업적으로 사용할 수 있는 권한을 부여하는 것은 아니며, 귀하의 회사는 허락 없이 사용할 경우 글꼴 게시자로부터 법적 조치를 받을 수 있습니다. 또한 사용 약관은 다양합니다. 예를 들어 인쇄와 화면 표시에 대해 별도의 라이센스가 필요할 수 있습니다.

Dynamic Media Classic은 표준 OpenType(OTF), TrueType(TTF) 및 Type 1 Postscript 글꼴을 지원합니다. Mac - 슈트케이스 글꼴, 유형 컬렉션 파일, Windows 시스템 글꼴 및 독점 시스템 글꼴(조각 또는 자수 기계에서 사용되는 글꼴 등)만 지원되지 않습니다. 표준 글꼴 형식 중 하나로 변환하거나 Dynamic Media Classic 및 이미지 서버에서 사용할 유사한 글꼴로 대체해야 합니다.

다른 에셋과 마찬가지로 글꼴이 Dynamic Media Classic에 업로드된 후에는 이미지 서버에도 게시되어야 합니다. 매우 일반적인 템플릿 오류는 글꼴을 게시하는 것을 잊는 것이며, 이로 인해 이미지 오류가 발생합니다. 이미지 서버는 그 자리에 있는 다른 글꼴을 대체하지 않습니다. 또한 를 사용하려면 텍스트 추출 옵션을 업로드하는 경우 해당 글꼴을 사용하는 PSD을 업로드하기 전에 글꼴 파일을 업로드해야 합니다. 다음 텍스트 추출 이 기능은 텍스트를 편집 가능한 텍스트 레이어로 다시 만들어 Dynamic Media Classic 템플릿 내에 배치하려고 합니다. 이에 대해서는 다음 주제인 PSD 옵션에서 설명합니다.

글꼴에는 외부 파일 이름과 다른 내부 이름이 여러 개 있습니다. Dynamic Media Classic의 해당 에셋에 대한 세부 정보 페이지에서 서로 다른 모든 이름을 볼 수 있습니다. 다음은 Dynamic Media Classic의 메타데이터 탭 아래에 나열된 Adobe Caslon Pro Semibold 글꼴의 이름입니다.

이미지

Dynamic Media Classic의 글꼴에 대한 세부 정보 페이지의 메타데이터 탭

Dynamic Media Classic은 이 글꼴의 파일 이름(ACaslonPro-Semibold)을 자산 ID로 사용하지만 템플릿에서 사용하는 이름은 아닙니다. 이 템플릿에서는 맨 아래에 나열된 RTF(Rich Text Format) 이름을 사용합니다. RTF는 이미지 서버 텍스트 엔진의 기본 "언어"입니다.

URL을 통해 글꼴을 변경해야 하는 경우, 글꼴의 RTF 이름(자산 ID 아님)을 호출해야 합니다. 그렇지 않으면 오류가 발생합니다. 이 경우 이 글꼴의 올바른 이름은 "Adobe Caslon Pro"입니다. 다음 RTF 및 텍스트 매개 변수 항목에서 글꼴 및 RTF에 대해 자세히 설명합니다.

Windows 및 Mac 시스템에 있는 가장 일반적인 글꼴 파일 형식은 OpenType 및 TrueType입니다. OpenType의 확장명은 .OTF이지만 TrueType은 .TTF입니다. 두 형식 모두 Dynamic Media Classic에서 동일하게 작동합니다.

PSD 업로드 시 옵션 선택

템플릿을 만들기 위해 Photoshop 파일(PSD)을 업로드할 필요가 없습니다. Dynamic Media Classic의 모든 이미지 에셋으로 템플릿을 작성할 수 있습니다. 그러나 PSD을 업로드하면 일반적으로 이러한 에셋이 이미 계층화된 PSD에 있기 때문에 쉽게 작성할 수 있습니다. 또한 계층화된 PSD을 업로드할 때 Dynamic Media Classic에서 자동으로 템플릿을 생성합니다.

  • 레이어를 유지합니다. 이것이 가장 중요한 옵션입니다. 이렇게 하면 Dynamic Media Classic은 Photoshop 레이어당 하나의 이미지 에셋을 만들 수 있습니다. 선택하지 않으면 다른 모든 옵션이 비활성화되고 PSD이 단일 이미지로 병합됩니다.
  • 만들기 템플릿. 이 옵션은 생성된 다양한 레이어를 가져와 함께 다시 결합하여 템플릿을 자동으로 만듭니다. 자동 생성 템플릿을 사용할 때의 단점은 Dynamic Media Classic에서 모든 레이어를 하나의 파일에 배치하는 반면 레이어당 하나의 자리 표시자만 있으면 된다는 것입니다. 추가 레이어를 삭제하는 것은 쉽지만 레이어가 많으면 다시 만드는 것이 더 빠릅니다. 새 템플릿의 이름을 바꾸십시오. 그렇지 않으면 다음에 동일한 PSD을 다시 업로드할 때 덮어쓰기됩니다.
  • 텍스트 추출. 업로드한 글꼴을 사용하여 PSD의 텍스트 레이어를 템플릿의 텍스트 레이어로 다시 만듭니다. 텍스트가 Photoshop의 경로에 있고 템플릿에서 해당 경로를 유지하려는 경우 이 단계가 필요합니다. 이 기능을 사용하려면 템플릿 만들기 옵션을 선택하면 업로드 시 생성된 템플릿으로만 추출된 텍스트를 만들 수 있습니다.
  • 레이어를 배경 크기로 확장합니다. 이 설정을 사용하면 각 레이어의 크기가 전체 PSD 캔버스와 동일합니다. 이 기능은 항상 고정된 상태를 유지하는 레이어에 매우 유용합니다. 그렇지 않으면 이미지를 동일한 레이어로 교체할 때 위치를 변경해야 할 수 있습니다.
  • 레이어 이름 지정. 이는 Dynamic Media Classic에 레이어별로 생성된 각 에셋의 이름을 지정하는 방법을 알려줍니다. 다음 중 하나를 권장합니다. Photoshop 및 레이어 이름 또는 Photoshop 및 레이어 숫자. 두 옵션 모두 PSD 이름을 이름의 첫 번째 부분으로 사용하고 끝에 레이어 이름이나 번호를 추가합니다. 예를 들어 "shirt.psd"라는 PSD이 있고 "front", "sleeves" 및 "collar"라는 레이어가 있는 경우 Photoshop 및 레이어 이름 옵션에서 Dynamic Media Classic은 자산 ID인 "shirt_front","shirt_sleeves" 및 "shirt_collar"를 생성합니다. 이러한 옵션 중 하나를 사용하면 Dynamic Media Classic에서 이름이 고유한지 확인할 수 있습니다.

이미지 레이어를 사용하여 템플릿 만들기

Dynamic Media Classic에서 계층화된 PSD에서 템플릿을 자동으로 만들 수 있더라도 템플릿을 수동으로 만드는 방법을 알고 있어야 합니다. 위에서 설명한 대로 Dynamic Media Classic에서 만든 템플릿을 사용하지 않으려는 경우가 있습니다.

템플릿 기본 사항 UI

먼저 편집 인터페이스에 대해 알아보겠습니다.

왼쪽 가운데에는 최종 템플릿의 미리보기를 보여주는 작업 영역이 있습니다. 오른쪽에는 [레이어] 및 [레이어 속성] 패널이 있습니다. 이 영역들은 여러분이 가장 많은 일을 하고 있는 곳입니다.

이미지

빌드 템플릿 기본 사항 페이지

  • 미리보기/작업 영역. 메인 창문입니다. 여기서는 마우스로 레이어를 이동, 크기 조정 및 회전할 수 있습니다. 레이어 윤곽선은 파선으로 표시됩니다.
  • 레이어. 이 기능은 Photoshop 레이어 패널과 유사합니다. 템플릿에 레이어를 추가하면 여기에 표시됩니다. 레이어는 위쪽에서 아래쪽으로 스택됩니다. [레이어] 패널의 맨 위 레이어는 목록에서 그 아래에 있는 다른 레이어 위에 표시됩니다.
  • 레이어 속성. 여기서는 숫자 컨트롤을 사용하여 레이어의 모든 속성을 조정할 수 있습니다. 먼저 레이어를 선택한 다음 해당 속성을 조정합니다.
  • 합성 URL. UI의 맨 아래에 복합 URL 영역이 있습니다. 이 내용은 자습서의 이 섹션에서 다루지 않지만, 여기서는 템플릿이 이미지 제공 URL 수정자의 시리즈로 해체된 것을 볼 수 있습니다. 이 영역은 편집할 수 있습니다. 이미지 서버 명령에 익숙하다면 여기에서 템플릿을 수동으로 편집할 수 있습니다. 하지만 부수실 수도 있습니다 Photoshop과 마찬가지로 레이어 번호 매기기는 0에서 시작합니다. 캔버스는 레이어 0이고, 사용자가 직접 추가하는 첫 번째 레이어는 레이어 1입니다. 블렌드 모드는 레이어의 픽셀과 그 아래의 픽셀이 혼합되는 방식을 결정합니다. 혼합 모드를 사용하여 다양한 특수 효과를 만들 수 있습니다.

템플릿 기본 사항 편집기 사용

다음은 기본 템플릿을 시작하는 워크플로 단계입니다.

  1. Dynamic Media Classic에서 빌드 > 템플릿 기본 사항. 아무 것도 선택하지 않거나 먼저 템플릿의 첫 번째 레이어가 되는 이미지를 선택합니다.

  2. 크기 를 선택하고 키를 누릅니다. 확인. 이 크기는 Photoshop에서 디자인한 크기와 일치해야 합니다. 템플릿 편집기가 로드됩니다.

  3. 1단계에서 선택한 이미지가 없는 경우 왼쪽의 에셋 패널에서 이미지를 검색하거나 찾은 다음 작업 영역으로 끌어서 놓습니다.

    • 캔버스의 크기에 맞게 이미지 크기가 자동으로 조정됩니다. 고해상도 이미지를 교체할 계획이라면 일반적으로 대형(2000px) P-TIFF 이미지 중 하나를 가져와서 자리 표시자로 사용합니다.
    • 이 레이어는 템플릿의 맨 아래 레이어여야 하지만 나중에 레이어 순서를 변경할 수 있습니다.
  4. 작업 영역에서 직접 또는 [레이어 속성] 패널에서 설정을 조정하여 레이어의 크기를 조정하거나 위치를 변경할 수 있습니다.

  5. 필요에 따라 추가 이미지 레이어를 드래그합니다. 원할 경우 레이어 효과를 추가합니다. 항목 보기 레이어 효과 추가, 아래에 그룹화됩니다.

  6. 클릭 저장 ​를 클릭하고 위치를 선택한 다음 템플릿에 이름을 지정합니다. 미리 볼 수는 있지만 이 시점에서 템플릿은 아직 변경할 수 없으므로 병합된 Photoshop 이미지와 정확히 비슷하게 표시됩니다.

레이어 효과 추가

이미지 서버는 레이어 내용의 모양을 변경하는 특수 효과와 같은 몇 가지 프로그래밍 방식의 레이어 효과를 지원합니다. 이 효과는 Photoshop의 레이어 효과와 유사하게 작동합니다. 레이어에 첨부되지만 레이어와 독립적으로 제어됩니다. 레이어 자체를 영구적으로 변경하지 않고 조정하거나 제거할 수 있습니다.

  • 그림자. x 및 y 픽셀 오프셋으로 배치된 레이어 경계 외부에 그림자를 적용합니다.
  • 내부 그림자. 레이어의 경계 안에 x 및 y 픽셀 오프셋으로 배치된 그림자를 적용합니다.
  • 외부 광선. 레이어의 모든 가장자리 주위에 고르게 광선 효과를 적용합니다.
  • 내부 광선. 레이어의 모든 가장자리 안쪽에 균일하게 광선 효과를 적용합니다.

이미지

그림자가 있는 레이어 및 없는 레이어

효과를 추가하려면 효과 추가 ​을 클릭하고 메뉴에서 효과를 선택합니다. 일반 레이어와 마찬가지로 [레이어] 패널에서 효과를 선택하고 [레이어 속성] 패널을 사용하여 설정을 조정할 수 있습니다.

그림자 효과는 레이어에서 가로 또는 세로로 오프셋되지만 광선 효과는 모든 방향에서 고르게 적용됩니다. 내부 효과는 레이어의 불투명한 부분 위에 작용하는 반면, 외부 효과는 투명한 영역에만 영향을 줍니다.

자세히 알아보기레이어 효과 추가.

매개 변수 추가

레이어를 결합하고 저장하기만 하면 최종 결과는 병합된 Photoshop 이미지와 다르지 않습니다. 템플릿을 특별하게 만드는 것은 각 레이어의 속성에 매개 변수를 추가하는 기능으로, URL을 통해 동적으로 변경할 수 있습니다.

Dynamic Media Classic 조건에서 매개 변수는 URL을 통해 조작할 수 있도록 템플릿 속성에 연결할 수 있는 변수입니다. 매개 변수를 레이어에 추가하면 Dynamic Media Classic이 매개 변수 이름 앞에 달러 기호($)를 추가하여 URL에 해당 속성을 표시합니다. 예를 들어, 레이어 크기를 변경하기 위해 "size"라는 매개 변수를 만드는 경우 Dynamic Media Classic에서 매개 변수 이름을 $size로 바꿉니다.

속성에 대한 매개 변수를 추가하지 않으면 해당 속성은 Dynamic Media Classic 데이터베이스에서 숨겨진 상태로 유지되며 URL에 표시되지 않습니다.

이미지

매개 변수가 없으면 일반적으로 URL이 훨씬 길어집니다. 특히 동적 텍스트도 사용하는 경우에는 더욱 그러합니다. 텍스트는 각 URL에 수십 개의 추가 문자를 추가합니다.

마지막으로 초기 매개변수 세트는 템플릿의 속성 기본값이 됩니다. 템플릿을 작성하고 매개 변수를 추가한 다음 매개 변수 없이 URL을 호출하면 이미지 서버에서 템플릿에 저장한 모든 기본값을 사용하여 이미지를 만듭니다. 속성을 변경하려는 경우에만 매개 변수가 필요합니다. 속성을 변경할 필요가 없는 경우에는 매개 변수를 설정할 필요가 없습니다.

매개변수 생성

다음은 매개 변수를 만드는 워크플로우입니다.

  1. 다음을 클릭합니다. 매개 변수 매개 변수를 만들 레이어 이름 옆의 단추입니다. 매개변수 화면이 열립니다. 레이어의 각 속성과 해당 값을 나열합니다.

  2. 다음 항목 선택 날짜 매개 변수로 만들 각 속성의 이름 옆에 있는 옵션입니다. 기본 매개 변수 이름이 나타납니다. 기본 상태에서 변경된 속성에만 매개 변수를 추가할 수 있습니다.

    • 예를 들어 레이어를 추가하고 기본 xy 위치인 0,0에 유지하는 경우 Dynamic Media Classic에서 위치 속성. 고정하려면 레이어를 하나 이상의 픽셀로 이동합니다. 이제 Dynamic Media Classic에서 위치 를 속성으로 매개 변수화할 수 있습니다.
    • show/hide 속성에 매개 변수를 추가하려면( 레이어를 켜거나 끄기) 표시 또는 레이어 숨기기 아이콘을 클릭하여 레이어를 해제합니다(원할 경우 나중에 다시 켤 수 있음). 이제 Dynamic Media Classic에서 숨기기 매개 변수화할 수 있는 속성입니다.
  3. 기본 매개 변수 이름을 URL에서 쉽게 식별할 수 있도록 바꿉니다. 예를 들어 이미지 위에 배너 레이어를 변경하는 매개 변수를 추가하려면 기본 이름인 "layer_2_src"를 "banner"로 변경합니다.

  4. 누르기 닫기 매개변수 화면을 종료합니다.

  5. 다음을 클릭하여 다른 레이어에 대해 이 프로세스를 반복합니다. 매개 변수 단추를 누르고 매개 변수 추가 및 이름 바꾸기를 수행합니다.

  6. 완료되면 변경 사항을 저장합니다.

TIP
매개 변수의 이름을 의미 있는 이름으로 바꾸고 명명 규칙을 개발하여 이러한 이름을 표준화합니다. 명명 규칙은 설계와 개발 팀에서 미리 동의해야 합니다.
속성이 표시되지 않기 때문에 매개 변수를 추가할 수 없습니까? 레이어의 속성을 기본값에서 변경(이동, 크기 조정, 숨기기 등)하기만 하면 됩니다. 이제 속성이 노출된 것을 확인해야 합니다.

자세히 알아보기 템플릿 매개 변수.

텍스트 레이어를 사용하여 템플릿 만들기

이제 텍스트 레이어를 포함하는 기본 템플릿을 만드는 방법에 대해 알아봅니다.

다이내믹 텍스트 이해

이제 이미지 레이어를 사용하여 기본 템플릿을 만드는 방법을 이해할 수 있습니다. 많은 애플리케이션의 경우 이것이 전부입니다. 이전 연습에서 보듯이 텍스트가 간단한 레이어(예: "Sale" 및 "New")는 텍스트를 변경할 필요가 없으므로 래스터화하여 이미지로 처리할 수 있습니다.

그러나 필요한 경우

  • 레이블을 추가하여 "25% Off"라고 하고, 값은 25%입니다.
  • 이미지 위에 제품 이름이 있는 텍스트 레이블을 추가합니다
  • 레이어를 템플릿이 표시되는 국가에 따라 다른 언어로 현지화합니다

이 경우 텍스트 및/또는 서식을 제어하기 위해 매개 변수가 있는 동적 텍스트 레이어를 추가할 수 있습니다.

텍스트를 만들려면 일부 글꼴을 업로드해야 합니다. 그렇지 않으면 Dynamic Media Classic이 기본적으로 Arial로 설정됩니다. 글꼴도 이미지 서버에 게시해야 합니다. 그렇지 않으면 해당 글꼴을 사용하는 텍스트를 렌더링하려고 할 때 오류가 발생합니다.

RTF 및 텍스트 매개 변수

템플릿 기본 사항 도구를 사용하여 텍스트에 변수를 추가하려면 텍스트가 렌더링되는 방법을 이해해야 합니다. 이미지 서버는 Photoshop 및 Illustrator에서 사용하는 것과 동일한 엔진인 Adobe 텍스트 엔진을 사용하여 텍스트를 생성하고 최종 이미지의 레이어로 합성합니다. 엔진과 통신하기 위해 이미지 서버는 리치 텍스트 형식 또는 RTF를 사용합니다.

RTF는 Microsoft에서 문서의 형식을 지정하기 위해 개발한 파일 형식 사양입니다. 대부분의 워드 프로세싱 및 이메일 소프트웨어에서 사용하는 표준 마크업 언어입니다. URL &text=\b1 Hello에 쓴 경우 \b1은 텍스트를 굵게 만들기 위한 RTF 명령이므로 이미지 서버는 "Hello"라는 굵은 글씨체로 된 이미지를 생성합니다.

좋은 소식은 Dynamic Media Classic이 RTF를 생성한다는 것입니다. 템플릿에 텍스트를 입력하고 서식을 추가할 때마다 Dynamic Media Classic은 자동으로 RTF 코드를 템플릿에 기록합니다. 우리가 그것을 언급하는 이유는 당신이 직접 RTF 자체에 매개 변수를 추가하고 있기 때문이며, 따라서 당신이 그것에 조금 익숙해지는 것이 중요하다.

텍스트 레이어 만들기

Dynamic Media Classic의 템플릿에서 다음 두 가지 방법으로 텍스트 레이어를 만들 수 있습니다.

  1. Dynamic Media Classic의 텍스트 도구입니다. 이 방법은 아래에서 설명합니다. 템플릿 기본 사항 편집기에는 텍스트 상자를 만들고, 텍스트를 입력하고, 텍스트 서식을 지정할 수 있는 도구가 있습니다. Dynamic Media Classic은 필요에 따라 RTF를 생성하여 별도의 레이어에 배치합니다.
  2. 텍스트 추출(업로드 시). 다른 방법은 Photoshop에서 텍스트 레이어를 만들어 PSD에 일반 텍스트 레이어로 저장하는 것입니다(이미지 레이어로 래스터화하는 대신). 그런 다음 파일을 Dynamic Media Classic에 업로드하고 텍스트 추출 옵션을 선택합니다. Dynamic Media Classic은 RTF 명령을 사용하여 각 Photoshop 텍스트 레이어를 이미지 제공 텍스트 레이어로 변환합니다. 이 방법을 사용하는 경우 먼저 Dynamic Media Classic에 글꼴을 업로드해야 합니다. 그렇지 않으면 Dynamic Media Classic에서 업로드 시 기본 글꼴을 대체하게 되며 올바른 글꼴을 다시 대체할 수 있는 쉬운 방법은 없습니다.

텍스트 편집기

텍스트 편집기를 사용하여 텍스트를 입력합니다. 텍스트 편집기는 Photoshop 또는 Illustrator과 유사한 서식 지정 컨트롤을 사용하여 텍스트를 입력하고 서식을 지정할 수 있는 WYSIWYG 인터페이스입니다.

이미지

템플릿 기본 사항 텍스트 편집기.

대부분의 작업을 다음 위치에서 수행합니다. 미리 보기 탭 - 텍스트를 입력하고 템플릿에서 표시될 상태로 볼 수 있습니다. 다음 항목도 있습니다 소스 필요한 경우 RTF를 수동으로 편집하는 데 사용되는 탭입니다.

일반적인 워크플로우는 미리 보기 탭하여 텍스트를 입력합니다.

그런 다음 텍스트를 선택하고 맨 위에 있는 컨트롤을 사용하여 글꼴 색상, 글꼴 크기 또는 양쪽 맞춤 등의 서식을 선택합니다. 원하는 방식으로 텍스트 스타일이 지정되면 적용 작업 영역 미리 보기에서 업데이트됩니다. 그런 다음 텍스트 편집기를 닫고 템플릿 기본 사항 기본 창으로 돌아갑니다.

텍스트 편집기 사용

다음은 템플릿 기본 사항 빌드 페이지 내에 텍스트를 추가하는 워크플로우 단계입니다.

  1. 다음을 클릭합니다. 텍스트 빌드 페이지의 맨 위에 있는 도구 단추입니다.

  2. 텍스트를 표시할 텍스트 상자를 드래그합니다. 텍스트 편집기 창이 모달 창에서 열립니다. 배경에는 템플릿이 표시되지만 텍스트 편집을 완료할 때까지 편집할 수 없습니다.

  3. 템플릿을 처음 로드할 때 표시할 샘플 텍스트를 입력합니다. 예를 들어 개인화된 이메일 이미지에 대한 텍스트 상자를 만드는 경우 텍스트에 "안녕하세요 이름"이 표시될 수 있습니다. 지금이 절약을 할 때입니다!" 나중에 텍스트 매개 변수를 추가하여 Name을 URL에서 전송하는 값으로 바꿀 수 있습니다. 을 클릭할 때까지 창 아래의 템플릿에 텍스트가 표시되지 않습니다. 적용.

  4. 텍스트 서식을 지정하려면 마우스로 드래그하여 텍스트를 선택하고 UI에서 서식 컨트롤을 선택합니다.

    • 다양한 서식 옵션이 있습니다. 가장 일반적인 것 중 일부는 글꼴(면), 글꼴 크기 및 글꼴 색상과 왼쪽/가운데/오른쪽 맞춤입니다.
    • 먼저 텍스트를 선택하는 것을 잊지 마십시오. 그렇지 않으면 서식을 적용할 수 없습니다.
    • 다른 글꼴을 선택하려면 텍스트를 선택하고 [글꼴] 메뉴를 엽니다. 편집기에 Dynamic Media Classic에 업로드된 모든 글꼴 목록이 표시됩니다. 글꼴이 컴퓨터에도 설치되어 있으면 검정색으로 표시됩니다. 컴퓨터에 설치되어 있지 않으면 빨간색으로 표시됩니다. 그러나 를 클릭해도 미리보기 창에서 렌더링됩니다 적용. Dynamic Media Classic에 글꼴을 업로드하기만 하면 Dynamic Media Classic을 사용하는 모든 사람이 사용할 수 있습니다. 게시하면 이미지 서버에서 해당 글꼴을 사용하여 텍스트를 생성합니다. 사용자가 만든 텍스트가 이미지의 일부이므로 이를 확인하기 위해 글꼴을 설치할 필요가 없습니다.
    • Photoshop 및 Illustrator과 달리 이미지 서버는 텍스트 상자에서 텍스트를 세로로 정렬할 수 있습니다. 기본값은 위쪽 정렬입니다. 변경하려면 텍스트를 선택하고 가운데 또는 하단 다음에서 수직 정렬 메뉴 아래의 제품에서 사용할 수 있습니다.
    • 상자에 비해 너무 큰 텍스트를 만들거나 텍스트 상자가 너무 작은 경우 텍스트 상자의 전부 또는 일부가 잘려서 사라집니다. 글꼴 크기를 줄이거나 상자를 더 크게 만듭니다.
  5. 클릭 적용 작업 영역 창에서 변경 사항이 적용되는지 확인합니다. 다음을 클릭해야 합니다. 적용 ​또는 편집 내용이 손실됩니다.

  6. 작업을 마치면 를 클릭합니다. 닫기. 편집 모드로 돌아가려면 텍스트 레이어를 두 번 클릭하여 텍스트 편집기를 다시 엽니다.

텍스트 편집기는 시스템에 로컬로 글꼴이 설치된 경우 글꼴의 크기를 정확하게 미리 봅니다.

텍스트 레이어에 매개변수 추가 정보

이제 레이어 매개 변수의 경우와 마찬가지로 텍스트 매개 변수를 추가하는 유사한 프로세스를 따릅니다. 텍스트 레이어는 크기, 위치 등에 대한 레이어 매개 변수를 사용할 수도 있지만, RTF의 모든 측면을 제어할 수 있는 추가 매개 변수를 사용할 수도 있습니다.

레이어 매개 변수와 달리 전체 속성에 매개 변수를 추가하는 대신 변경할 값만 선택하고 해당 값에 매개 변수를 추가합니다.

이미지

샘플 RTF:

이미지

RTF를 검사할 때, 각 설정이 변경할 위치인지 파악해야 합니다. 위의 RTF에서 일부는 의미가 있을 수 있으며 서식이 어디에서 오는지 확인할 수 있습니다.

여러분은 초콜릿 민트 샌달이라는 문구를 볼 수 있습니다. 그것은 문자 그 자체입니다.

  • Poor Richard 글꼴에 대한 참조가 있습니다. 여기서 글꼴을 선택합니다.
  • RGB 값 \red56\green53\blue4 을 볼 수 있습니다. 이 값은 텍스트 색입니다.
  • 글자 크기가 20이지만 20이라는 숫자는 보이지 않습니다. 그러나 \fs40 명령이 표시됩니다. 몇 가지 이상한 이유로 RTF는 글꼴을 반점으로 측정합니다. 따라서 \fs40은 글꼴 크기입니다.

매개 변수를 만들 수 있는 충분한 정보가 있지만, 이미지 제공 설명서에 모든 RTF 명령에 대한 전체 참조가 있습니다. 다음 방문: 이미지 제공 설명서.

텍스트 레이어에 매개 변수 추가

다음은 텍스트 레이어에 매개 변수를 추가하는 단계입니다.

  1. 다음을 클릭합니다. 매개 변수 매개 변수를 만들려는 텍스트 레이어의 이름 옆에 있는 단추(P). 매개변수 화면이 열립니다. 다음 공통 탭에는 레이어의 각 속성과 해당 값이 나열됩니다. 여기서 일반 레이어 매개 변수를 추가할 수 있습니다.
  2. 을(를) 클릭합니다 텍스트 탭. 여기서 맨 위에 있는 RTF를 볼 수 있습니다. 추가한 매개 변수는 그 아래에 있습니다.
  3. 매개 변수를 추가하려면 먼저 변경할 값을 강조 표시하고 매개 변수 추가 단추를 클릭합니다. 전체 명령 자체가 아니라 명령에 대한 값만 선택해야 합니다. 예를 들어 위의 샘플 RTF에서 글꼴 이름에 대한 매개 변수를 설정하려면 "Poor Richard"만 강조 표시하고 매개 변수를 추가하지만 "\f0"도 추가하지 않습니다. 다음을 클릭: 매개 변수 추가 를 지정하는 경우 아래 목록에 매개 변수 값이 표시되고, 이 매개 변수 값은 선택되어 있는 동안 RTF에 빨간색으로 표시됩니다. 매개변수를 제거해야 하는 경우 옆에 있는 확인란을 클릭합니다. 날짜 를 클릭하여 해당 매개 변수를 비활성화하면 사라집니다.
  4. 를 클릭하여 매개 변수의 이름을 보다 의미 있는 이름으로 변경합니다.
  5. 완료되면 RTF가 매개 변수가 있는 녹색으로 강조 표시되고 매개 변수 이름과 값이 아래에 나열됩니다.
  6. 클릭 닫기 매개변수 화면을 종료합니다. 그런 다음 누르기 저장 을 클릭하여 템플릿을 저장합니다. 편집을 마쳤으면 닫기 템플릿 기본 사항 페이지를 종료합니다.
  7. 클릭 미리 보기 Dynamic Media Classic에서 템플릿을 테스트합니다. 텍스트 매개 변수를 테스트하려면 미리 보기 창에 새 텍스트 또는 새 값을 입력합니다. 글꼴을 변경하려면 정확한 글꼴 이름을 입력해야 합니다.
TIP
텍스트 색상에 매개 변수를 추가하려면 빨강, 녹색 및 파랑에 대한 매개 변수를 별도로 추가합니다. 예를 들어 RTF가 \red56\green53\blue46, 값 56, 53 및 46에 대해 별도의 빨강, 녹색 및 파랑 매개 변수를 추가합니다. URL에서 다음 세 가지를 모두 호출하여 색상을 변경합니다. &$red=56&$green=53&$blue=46.

방법 알아보기 다이내믹 텍스트 매개 변수 만들기.

템플릿 URL 게시 및 생성

이미지 사전 설정 만들기

템플릿에 대한 사전 설정을 만드는 것은 필수 단계가 아닙니다. 템플릿을 항상 1:1 크기로 호출하도록 하고 템플릿에 맞게 크기가 조정되는 큰 이미지 레이어에 선명하게 하기를 추가하는 것이 좋습니다. 사전 설정 없이 이미지를 호출하는 경우 이미지 서버가 임의로 이미지의 크기를 기본 크기(약 400픽셀)로 조정할 수 있으며 기본 선명하게 하기가 적용되지 않습니다.

템플릿에 대한 이미지 사전 설정은 특별한 것이 없습니다. 동일한 크기의 정적 이미지에 대한 사전 설정이 이미 있는 경우 대신 사용할 수 있습니다.

게시

게시를 실행하여 변경 사항이 이미지 서버에 실시간으로 푸시되는지 확인해야 합니다. 다양한 이미지 에셋 레이어, 동적 텍스트용 글꼴 및 템플릿 자체 등 게시해야 하는 사항을 염두에 두십시오. 이미지 세트 및 스핀 세트와 같은 다른 Dynamic Media Classic 리치 미디어 자산과 마찬가지로, 기본 템플릿은 인공 구성입니다. 이 템플릿은 일련의 이미지 제공 명령을 사용하여 이미지 및 글꼴을 참조하는 데이터베이스의 라인 항목입니다. 따라서 템플릿을 게시할 때는 이미지 서버의 데이터를 업데이트하기만 하면 됩니다.

자세히 알아보기 템플릿 게시.

템플릿 URL 구성

기본 템플릿에는 앞에서 설명한 대로 일반 이미지 호출과 동일한 필수 URL 구문이 있습니다. 일반적으로 템플릿에는 값이 있는 매개 변수와 같은 더 많은 수정자(&)가 앰퍼샌드(&)로 구분됩니다. 그러나 주요 차이점은 정적 이미지를 호출하는 대신 템플릿을 기본 이미지로 호출한다는 것입니다.

이미지

사전 설정 이름의 양쪽에 달러 기호($)가 있는 이미지 사전 설정과 달리 매개 변수에는 시작 부분에 달러 기호가 있습니다. 그 달러 기호들의 배치가 중요합니다.

정답:

$text=46-inch LCD HDTV

잘못됨:

$text$=46-inch LCD HDTV

$text=46-inch LCD HDTV$

text=46-inch LCD HDTV

앞에서 설명한 대로 매개 변수는 템플릿을 변경하는 데 사용됩니다. 매개 변수 없이 템플릿을 호출하면 템플릿 기본 사항 작성 도구에서 설계된 기본 설정으로 되돌아갑니다. 속성을 변경할 필요가 없는 경우에는 매개 변수를 설정할 필요가 없습니다.

이미지
매개 변수를 설정하지 않은 템플릿(위)의 예와 매개 변수를 사용하는 템플릿(아래)의 예.

recommendation-more-help
b56d7fc8-5dab-486f-a07d-09696ff7d067