网站图像艺术指导是做什么的？

概述

网站图像的失败在于成套出现问题，而非单张图片。三张毫无共同点的好照片，看起来比三张共享光线、调色板和主题的普通照片更差。而一张美丽的图片如果无法证明旁边的句子，那就是装饰品。

核心原则：在生成任何单个图像之前，先确定整组图像的恒定参数，并确保每张图像都能证明其旁边文案的主张。

引擎与艺术指导

页面上的图像来自引擎，由艺术指导指导，绝不来自素材库，也绝不来自旧页面的裁切。

在我们的技术栈中，引擎是Botika——我们自有的模特渲染引擎——而艺术指导是位于其上的一层技能：它持有简报的恒定参数，为每张图像选择模特、姿势、服装搭配和背景，运行渲染批次，并根据所需风格对结果进行QA检查。该技能驱动一条私有管道，不属于本仓库。它所履行的合约是本技能对任何引擎的要求：

输入	输出
简报的恒定参数（调色板、光线、环境、裁切、连续性、变化性）	原生分辨率的图像集合，以其插槽命名
每件服装或主体的一个源资产	用于保真度检查的源图与渲染对照表
插槽列表：每个区块的文案及其方框的宽高比	QA日志：检查了哪些项目，哪些被重新渲染

如果您的引擎无法将恒定参数作为输入，那么艺术指导步骤就是一位拿着检查清单的人，而这份检查清单就是这个技能。

预算规则

渲染消耗积分和时间。每个不同的任务只进行一次渲染。在创建新资源之前，先重用现有资源。任何超过大约六张的批次都需要征求人员意见。不做“以防万一”的投机性批次。同一张渲染图通常可以服务于两个区块：请重用。

先确定恒定参数

写下这些参数。每张图像都将与它们进行比较，任何不符合的图像都将被重新生成，而不是被接受。

恒定参数	确定依据
调色板	三个中性色，最多一个强调色，以十六进制代码表示
光线	一种语言：柔和的日光、硬朗的方向性光或阴天光
环境	摄影棚、真实场地或两者声明的比例
裁切	从全身/中景/特写中选择两种，绝不能选三种
连续性	整套图像中保持不变的一个元素
变化性	整套图像中改变的一个元素

产品系列最强的连续性手法是一套服装搭配不同模特和场景。它展示了多样性，同时证明了一致性——而这通常正是页面要证明的主张。弱化版本是一个模特搭配不同服装：它什么也证明不了，而且看起来像一本产品册。

图像证明文案

在布局之前，为每个区块写下一个文案主张以及能证明它的图片。在“场景”下放一张面部特写，或在“印花和徽标”下放一件素面连衣裙，那是在装饰卡片，而不是在证明它。

区块主张	图片内容
印花保持对齐	条纹在接缝处对齐
徽标保持定位	胸前的徽章，在每个模特身上位置相同
适配产品目录	许多不同产品在一个摄影棚里，附带状态列表
一件服装，任何场景	同一件服装和模特在多个地方，控制条件变化
包容性	一件服装在不同模特身上

如果一个区块有主张但没有能证明它的图片，那就是一个渲染简报。

匹配现有图像集

当向已有图像添加内容时，在生成任何内容之前，先从现有图像中推导出恒定参数。通过测量而非目测：采样现有帧的背景亮度和主导色调，并记录每张的裁切和光线。

如果现有图像集是四张亮色帧和一张暗色帧，那么新图像集也应是四张亮色和一张暗色。比例也是外观的一部分。

获取主体素材

使用图像模型从造型照片中提取每件服装，以造型照片为参考。每件服装渲染一个产品，每个造型渲染一张。
绝不使用携带第三方文字标记或徽标的源图像。
为故事选择姿势。上衣使用上半身姿势。连衣裙、牛仔裤、裙子和裤子使用全身长度。手放在臀部可以展示口袋和对齐的条纹。
背景保持中性。通过选角和造型传达情绪，而不是通过温暖的背景。

场景提示

描述场景，绝不描述服装。服装作为输入提供；描述它会与模型产生冲突并降低保真度。

顺序：设置、光线、相机、姿势和情绪、调色板。

傍晚空无一人的城市街道，旁边是一扇长长的波纹钢卷帘门，凉爽的蓝色环境光搭配一盏暖色钠灯从右侧斜射过来，35mm全画幅环境框，模特站在画框右侧静止不动，左侧留出一大段空白墙壁，双手放松放在身体两侧，直视镜头，电影感且安静，凉爽的混凝土灰色和奶油色调色板。

针对Web的特别建议：

要求主体偏离中心并指出空白侧。 主视觉需要为文案留出空间。
全程使用正面措辞。指出你不想要的东西反而会把它放入画面。
场景是一个真实、具体、有人情味的地方，充满了属于那里的东西。一个苍白空旷的房间配上模特，看起来不过是一个假装是真实场所的摄影棚。
模板会覆盖提示。如果模板不断返回你不想要的外观，放弃它，直接从提示中驱动整个场景。

主视觉网格

肖像网格在三个方面会失败，而且都在最初一秒内可见：

同一张照片并排出现两次
头部被主视觉边缘裁切
变化是滑动而非淡入淡出

规则：每张可见照片都是唯一的，没有一张被主视觉边缘裁切，照片通过从一格淡出并进入另一格来更换位置。通过采样八秒内的帧进行测试，如果出现任何重复源、超出主视觉矩形的平铺、平铺重叠或平铺在文案下方，则判定为失败。

原生分辨率下的QA

缩略图和联系表会隐藏那些在27英寸显示器上才会被注意到的失败。在定位表上找到手和脚的位置，然后从全尺寸文件中裁切出这些区域，以2倍到4倍放大查看：

脚和鞋：作为一对进行比较。鞋底厚度、鞋楦形状、鞋带、鞋跟。
手：数清手指数量。如果无法分辨数量，那就是失败，而非通过。
肢体连接处：腿连接下摆到鞋子的部分、肩膀、肘部、膝盖
接触阴影：在脚下，而非偏移
服装保真度：口袋、接缝、领子、下摆长度和洗水效果与源图对比
文字：画面中的任何标牌或印刷文字

最便宜的修复方法是构图调整。一个以大腿中部结束的画面可以完全避免鞋子失败。在不需要下半身的情况下就使用它。提示防护也能起作用：“画面以大腿中部结束，任何位置都看不到脚、脚踝或鞋子。”

分辨率

交付的图像分辨率大约是该插槽将占用的最大CSS宽度的2倍，并通过srcset向1x屏幕提供1x文件。在每一个滚动位置审计每一张图片的有效比率（所需像素除以文件中的像素；高于1.0则图像变模糊）。对小型源图像进行放大只会增加像素，不会增加细节。明确指出这一点，并提供重新渲染。

色彩字段与图像上的文字

图像或色彩字段上的文字是通过测量来判断的，而不是凭感觉。白色文字在大字号下需要3:1的对比度，在正文大小下需要4.5:1的对比度，从像素中采样。字段内的遮罩可以修复可读性，同时不减弱颜色。放置在色彩字段上的模拟UI需要有自己的文本颜色，否则它会从场景中继承白色，并在白色卡片上消失。

为插槽构图

生成时宽松，裁切时紧凑。使交付的宽高比与CSS方框匹配，这样浏览器几乎不需要做任何选择：

卡片网格：每张卡片使用相同的宽高比，在包装器上设置，图像使用object-fit: cover
主视觉：在你支持的最宽视口比例的大约10%范围内
叠加区域：当卡片文案位于图像底部三分之一时，该区域必须保持安静
证明一致性的拼贴图：一个大单元格加两个小单元格，三者使用相同的宽高比

网站图像艺术指导