图文设计JZ图文设计与开发，聊聊其中特别的注意事项，希望各Agency和品牌主从

近期“代言人”的话题火热，那么结合 JZ 以往与各大品牌合作经历中涉及代言人的图文设计与开发，聊聊其中特别的注意事项，希望各 Agency 和品牌主从中学习到技术重点。

遵守品牌代言人使用规范

这是底线规范，没有必要为了一些创意、设计、文案等原因与经纪人发生相关的冲突，但凡与使用规范文档相左的图文设计都应摒弃。如果确实出现如 VI 与使用规范冲突等刚性条件碰撞，则要借助娴熟的平面设计功底，形成两者的合理过渡。

最大程度保留硬照的参数

硬照往往集结大量的人力物力，经过层层筛选交到品牌主手中，Agency、Digital 的在使用过程中应当尽力优化它的呈现。

关于动态色彩参数，要善于使用颜色表衔接。我们在交付《已为你破解，赵丽颖的空气感秀发养成秘密》过程中图文设计，Agency 就中途遇到了人像 GIF 动态与后续一图流衔接的色彩困境——GIF 的 256 色与 JPEG 的广域 16777216 色差距悬殊，很容易在动静交替时候产生过于明显的色差。

这时候，要充分利用 *Adobe *PhotoShop 的颜色表能力，选择一个核心画面导出其颜色表，在其他衔接切片中反向载入颜色表。这样可以最大程度减少色彩异常问题。

而对于本身 GIF 优化，我们在教程和公开课《指南｜GIF 完美压缩方法》已经介绍，这里就不再赘述。但相对来说我们更建议不要用 GIF 格式去处理代言人出镜画面，对于技术优异的 Digital 来说完全可以用序列帧等 SVG 技术曲线解决。

例如在与杰克琼斯的合作经历中，以《欧冠重启 | 携手邓伦，绿茵激情一键重燃！》为例，开篇邓伦的轮播图我们采用了 SVG 代码 Banner 驱动的方式形成动画效果，而非蹩脚的 GIF 合成——否则如此丰富的色彩轮播效果必然会因为 GIF 格式的劣势大打折扣。

与硬照叠加的其他要素要分层代码堆叠。通过合理的平面设计思路，应当尽可能将明星硬照以单独组件部署入图文，其他修饰内容分离处理。这里又以我们设计的《一键回看邓伦直播宠粉！扛住了邓伦神颜，扛不住联名款的真香警告》为例，其中代言人现场活动照片的滑块我们做了透明分离处理，将包括背景要素、滑动提示等分离到其他图层进行组件式的平面设计，再经由 CSS3 前端代码拼装而成图文设计，最大程度保留了硬照品质。

除此外，还有一些动态提示符等设计，如果确实需要叠加到硬照上，那么建议使用 CSS 混合模式进行代码叠加，而不是强行将动态提示符与照片素材合并渲染为 GIF 图。

TVC 应设计封面元素

首发 TVC 是粉丝极为期待的宣传物料，如果只是生硬地载入图文，一方面悬念感有限，另一方面腾讯视频自身的 Thumbnail 画质渣到费解，非常影响观感并严重割裂图文。

实现额外前置封面要素的方法有很多，以我们在 Tiffany 账号上开发的《千玺同款 七夕全球首发》为例，通过 SVG 交互为易烊千玺的 TVC 前置了一个封面图，从外层更好的衔接住了整体一图流，也为视频的开启预留了悬念。

又如与 SKG 合作设计开发的《王一博的放松秘笈：SKG热敷按摩筋膜枪登场！》一文，通过伸长式 SVG 给视频制作了一个动态分层 SVG 流体变色封面，经过点击后用户才会看到露出的视频与产品图。

另外对于代言人竖版视频，还记得要选择好呈现模式。通过缩放视频？还是通过旋转视频？两者在播放前的视觉表现有巨大差异，需要品牌主做出取舍。

通过互动开发提升粉丝好感

尽管代言人的物料是既成图像的数字格式文件，但基于合适的互动策划能够让粉丝感受到明星与自己的互动关联。

以我们开发交付的《如何与蔡徐坤相遇？这份星力护航攻略告诉你》一文为例，Agency 精心策划了特殊的日历互动，向粉丝详细说明了与蔡徐坤“相遇”的操作步骤。另一篇《蔡徐坤拍了拍你，一起来打开「未来文件夹」》中我们采用了相似的开发技术，也是为了通过互动拉近代言人和粉丝间的距离。