igal-commits/art-directing-site-imagery

사이트 이미지 아트 디렉팅

개요

웹사이트 이미지는 개별 사진이 아닌 세트로 실패합니다. 공유하는 것이 없는 세 장의 좋은 사진은 빛, 팔레트, 주제를 공유하는 평범한 세 장보다 더 나빠 보입니다. 그리고 문장 옆에 있는 아름다운 사진이 그 문장을 입증하지 못한다면 그것은 장식에 불과합니다.

핵심 원칙: 단일 이미지를 생성하기 전에 세트 전반의 상수를 결정하고, 모든 이미지가 옆에 있는 주장을 입증하도록 만드세요.

엔진과 아트 디렉터

페이지의 이미지는 엔진에서 생성되고, 아트 디렉터가 방향을 제시하며, 절대 재고 사진이나 이전 페이지의 크롭에서 가져오지 않습니다.

저희 스택에서 엔진은 자체 온-모델 렌더링 엔진인 Botika이며, 아트 디렉터는 그 위에 위치하는 스킬입니다. 이 스킬은 브리프의 상수를 보유하고, 각 이미지에 대한 모델, 포즈, 의상 완성 및 배경을 선택하며, 렌더 배치를 실행하고 요구된 스타일에 대해 결과를 QA 검사합니다. 이 스킬은 비공개 파이프라인을 구동하며 이 저장소의 일부가 아닙니다. 이 스킬이 충족하는 계약은 모든 엔진에서 필요한 것입니다:

입력	출력
브리프의 상수 (팔레트, 조명, 환경, 크롭, 연속성, 변형)	네이티브 해상도의 세트, 슬롯별로 이름 지정됨
의복 또는 주제당 하나의 소스 에셋	충실도를 위한 소스 대 렌더 시트
슬롯 목록: 각 섹션의 주장과 박스의 종횡비	QA 로그: 확인된 사항, 재렌더링된 사항

엔진이 상수를 입력으로 받을 수 없는 경우, 아트 디렉터 단계는 체크리스트를 가진 사람이며, 그 체크리스트가 바로 이 스킬입니다.

예산 규칙

렌더링에는 크레딧과 시간이 소모됩니다. 고유한 작업당 하나의 렌더링. 새로 만들기 전에 기존 에셋을 재사용하세요. 약 여섯 개 이상의 배치는 사람에게 문의하세요. "만약을 대비해" 추측성 배치는 금지입니다. 동일한 렌더링이 종종 두 섹션에 사용될 수 있습니다: 재사용하세요.

상수를 먼저 수정하세요

이것들을 기록하세요. 모든 이미지는 이 기준에 따라 평가되며, 기준에 미치지 못하는 이미지는 수락되지 않고 재생성됩니다.

상수	결정
팔레트	중성색 3개, 최대 강조색 1개, 16진수로
조명	하나의 언어: 부드러운 자연광, 하드 방향광, 또는 흐린 날
환경	스튜디오, 실제 장소, 또는 둘의 선언된 비율
크롭	전신 / 미드 / 타이트 중 두 개를 선택, 세 개는 안 됨
연속성	세트 전체에서 동일하게 유지되는 한 가지
변형	세트 전체에서 변경되는 한 가지

제품 세트의 가장 강력한 연속성 장치는 다양한 모델과 장면에 걸쳐 하나의 의복입니다. 이는 일관성을 입증하면서 범위를 보여주며, 일반적으로 페이지가 만드는 바로 그 주장입니다. 약한 버전은 다양한 의복을 입은 한 명의 모델입니다: 이는 아무것도 입증하지 못하며 룩북처럼 보입니다.

이미지는 카피를 입증합니다

레이아웃을 건드리기 전에, 각 섹션에 대해 해당 카피가 만드는 하나의 주장과 이를 입증하는 사진을 작성하세요. "Scene" 아래에 얼굴 크롭이 있거나 "Prints and logos" 아래에 평범한 드레스가 있으면 카드를 장식할 뿐 입증하지 않습니다.

섹션 주장	사진의 내용
프린트가 정렬됨	솔기를 따라 정렬된 줄무늬
로고가 제자리에 유지됨	가슴의 엠블럼, 모든 모델에서 동일한 위치
카탈로그로 확장 가능	하나의 스튜디오에 있는 다양한 제품과 상태 목록
하나의 의복, 모든 장면	여러 장소에서의 동일한 의복과 모델, 변화하는 컨트롤
포용적	여러 다른 모델의 하나의 의복

섹션에 주장이 있고 그것을 입증하는 사진이 없다면, 그것은 렌더 브리프입니다.

기존 세트 매칭

이미 존재하는 이미지에 추가할 때는 생성하기 전에 거기에서 상수를 도출하세요. 눈대중보다는 측정하세요: 기존 프레임의 배경 휘도와 지배적인 색조를 샘플링하고, 각각의 크롭과 조명을 기록하세요.

기존 세트가 밝은 프레임 4개와 어두운 프레임 1개라면, 새 세트는 밝은 프레임 4개와 어두운 프레임 1개여야 합니다. 비율은 룩의 일부입니다.

주제 소싱

• 이미지 모델을 사용하여 룩 사진에서 각 의복을 추출하고, 룩 사진을 참조로 사용하세요. 의복당 하나의 제품, 렌더당 하나의 룩을 렌더링하세요.
• 제3자 워드마크 또는 로고가 포함된 소스 이미지를 절대 사용하지 마세요.
• 이야기에 맞는 포즈를 선택하세요. 상의는 상반신 포즈. 드레스, 청바지, 스커트, 바지는 전신 포즈. 손을 허리에 얹으면 주머니와 정렬된 줄무늬가 보입니다.
• 배경은 중립적입니다. 분위기는 따뜻한 배경이 아닌 캐스팅과 스타일링을 통해 전달하세요.

장면 프롬프팅

장면을 설명하고, 절대 의복을 설명하지 마세요. 의복은 입력으로 제공되며, 이를 설명하면 모델과 충돌하여 충실도가 저하됩니다.

순서: 설정, 조명, 카메라, 포즈와 무드, 팔레트.

긴 주름진 강철 셔터 옆 황혼의 빈 도시 거리, 시원한 파란색 주변광과 오른쪽에서 비스듬히 비추는 하나의 따뜻한 나트륨 램프, 35mm 전신 환경 프레임, 모델은 프레임 오른쪽에 서서 왼쪽에 긴 빈 벽을 두고, 옆구리에 편안한 손을 얹고 카메라를 똑바로 응시하며, 영화적이고 조용하며, 시원한 콘크리트 회색과 크림 팔레트.

웹에 특화된 내용:

• 주제를 중앙에서 벗어나게 배치하고 비어 있는 쪽을 지정하세요. 히어로는 카피 공간이 필요합니다.
• 전체적으로 긍정적인 표현을 사용하세요. 원하지 않는 것을 언급하면 프레임에 들어갑니다.
• 장면은 실제적이고 구체적이며 살아있는 공간으로, 그곳에 속한 것들로 가득 차 있습니다. 모델이 있는 창백하고 빈 방은 장소인 척하는 스튜디오로 읽힙니다.
• 템플릿은 프롬프트를 재정의합니다. 템플릿이 요청하지 않은 룩을 계속 반환한다면, 템플릿을 버리고 프롬프트에서 전체 장면을 구동하세요.

히어로 그리드

초상화 그리드는 세 가지 방식으로 실패하며, 모두 첫 1초 안에 보입니다:

• 같은 사진이 나란히 두 번
• 히어로 가장자리에 의해 잘린 머리
• 페이드하지 않고 슬라이드하는 변경

규칙: 보이는 모든 사진은 고유하고, 히어로 가장자리에 의해 잘린 것이 없으며, 사진은 한 셀에서 페이드 아웃되고 다른 셀로 페이드 인되어 변경됩니다. 8초 동안 프레임을 샘플링하고 중복 소스, 히어로 사각형 밖의 타일, 타일 겹침 또는 카피 아래 타일이 있으면 실패로 테스트하세요.

네이티브 해상도 QA

썸네일과 콘택트 시트는 27인치 모니터에서 눈에 띄는 실패를 정확히 숨깁니다. 로케이터 시트에서 손과 발을 찾은 다음, 전체 크기 파일에서 해당 영역을 잘라내어 2배에서 4배로 보세요:

• 발과 신발: 쌍으로 비교하세요. 밑창 두께, 라스트 모양, 스트랩, 힐.
• 손: 손가락 개수를 세세요. 개수를 확인할 수 없으면 합격이 아닌 불합격입니다.
• 사지 연결: 밑단에서 신발까지 이어지는 다리, 어깨, 팔꿈치, 무릎
• 접촉 그림자: 발 아래에, 오프셋되지 않음
• 의복 충실도: 주머니, 솔기, 칼라, 밑단 길이와 워시를 소스와 비교
• 텍스트: 프레임 내의 모든 표지판 또는 인쇄물

가장 저렴한 수정은 구도입니다. 허벅지 중간에서 끝나는 프레임은 신발 실패를 완전히 제거합니다. 하반신이 중요하지 않을 때 사용하세요. 프롬프트 가드도 작동합니다: "프레임은 허벅지 중간에서 끝나며 발, 발목 또는 신발이 어디에도 보이지 않습니다."

해상도

슬롯이 차지할 가장 큰 CSS 너비의 약 2배로 제공하고, srcset을 통해 1x 화면에는 1x 파일을 제공하세요. 모든 스크롤 위치에서 모든 사진의 유효 비율을 감사하세요 (필요한 픽셀을 파일의 픽셀로 나눈 값; 1.0 이상이면 소프트). 작은 소스를 업스케일링하면 픽셀이 추가될 뿐 디테일이 추가되지 않습니다. 이를 명시하고 재렌더링을 제안하세요.

컬러 필드 및 이미지 위의 텍스트

이미지 또는 컬러 필드 위의 텍스트는 판단되지 않고 측정됩니다. 흰색 텍스트는 큰 크기에서 3:1, 본문 크기에서 4.5:1의 명암비가 필요하며, 픽셀에서 샘플링됩니다. 필드 안의 스크림은 색상을 둔하게 하지 않고 가독성을 해결합니다. 컬러 필드 위에 배치된 모의 UI는 자체 텍스트 색상이 필요하며, 그렇지 않으면 장면에서 흰색을 상속받아 흰색 카드에서 사라집니다.

슬롯 구성을 위한 컴포지션

느슨하게 생성하고, 타이트하게 크롭하세요. 전달된 종횡비를 CSS 박스와 일치시켜 브라우저가 거의 선택하지 않도록 하세요:

• 카드 그리드: 모든 카드에 대해 하나의 종횡비, 래퍼에 설정, 이미지에 object-fit: cover
• 히어로: 지원하는 가장 넓은 뷰포트 비율의 약 10% 이내
• 오버레이 영역: 카드 카피가 이미지의 하단 1/3에 위치할 때, 해당 영역은 조용해야 함
• 일관성을 입증하는 콜라주: 하나의 큰 셀과 두 개의 작은 셀, 모두 동일한 종횡비

체크리스트

• 생성 전에 상수가 기록됨
• 모든 섹션에 주장과 이를 입증하는 사진이 있음
• 모든 이미지가 상수에 대해 평가됨; 미달된 것은 수락되지 않고 재생성됨
• 밝은 프레임과 어두운 프레임의 비율이 기존 세트와 일치함
• 모델은 세트 전체에서 다르며, 의복이나 조명은 동일함
• 손, 발 및 의복 디테일이 네이티브 해상도에서 확인됨
• 모든 소스에 제3자 워드마크가 없음
• 모든 히어로 프레임에 카피 공간이 있고 올바른 측면에 있음
• 전달된 종횡비가 CSS 박스와 일치함; 유효 비율이 1.0 이하
• 이미지 위의 텍스트가 명암비로 측정됨
• 재렌더링 전에 재사용됨; 약 6개 이상의 배치는 사람이 승인함