← 设计系统总览
CASE 02 / DESIGN ANATOMY PDF P.06

嘉宾视觉 · 风格切换

从街头拼贴到冷色未来感

6 个作品 / 画面单元9 个解析章节SSR 视觉创作
01

原作与阅读方式

基于所提供 PDF 的视觉解析。原作画面为事实依据;风格关联属于分析,不代表创作者自述。色值为参考或量化近似;网格、字号、间距与图层顺序是便于复用的建议,非原稿参数。未提供源文件,不能恢复独立素材图层或确认字体名称。

02

逐张拆到基础元素

同一套视觉,也保留每张作品自己的结构与取舍。

PDF P.06 · 画面 01

ELEMENT STUDY / 01

Apple 橙黑海报

街头音乐视觉
排版与视线
黑白半身像居中,巨大的背景字与顶部姓名上下呼应。
颜色关系
亮橙背景、黑白主体、少量白色标签。
字体层级
粗厚衬线姓名与小尺寸无衬线标签对比。
基本图形与材质
背景字模糊、粗图形与贴纸式标记。
#FE6B28
#0E0C0B
#54210B
#A69288

局部图像量化取色,包含人物、背景与压缩误差。

复用要点

背景字降清晰度,把最清晰文字留给姓名和日期。左侧为 PDF 可见部分。

PDF P.06 · 画面 02

ELEMENT STUDY / 02

ZOE 银色曲线

冷色未来感
排版与视线
直立人物居中偏右,弧线从四周包围,刷写姓名横跨腰部。
颜色关系
银灰和冰蓝构成环境,深蓝下缘承接白字。
字体层级
白色刷写姓名为第一文字焦点。
基本图形与材质
纵向金属纹、镜面弧线、水滴高光。
#DDE3EB
#B3B8C2
#667588
#2A2D38

局部图像量化取色,包含人物、背景与压缩误差。

复用要点

弧线避开眼睛;姓名可与身体重叠,但不遮面部。

PDF P.06 · 画面 03

ELEMENT STUDY / 03

MICRO·G & DJ.TT 电视拼贴

涂写与复古媒介
排版与视线
倾斜电视位于中心,巨型涂写字贯穿背景。
颜色关系
白到粉的底色,使黑色手写和深色电视外壳突出。
字体层级
涂写属于图像层,底部无衬线姓名承担准确阅读。
基本图形与材质
旧电视机、嵌入肖像、手写线与箭头。
#FFFEFE
#343230
#FE64AD
#534F4D

局部图像量化取色,包含人物、背景与压缩误差。

复用要点

屏幕内只保留最关键肖像;电视外留一处规整信息行。

PDF P.06 · 画面 04

ELEMENT STUDY / 04

NAOMI 水光肖像

梦幻数字场景
排版与视线
人物位于水面中心,顶部大标题与腰部名字形成上下锚点。
颜色关系
深蓝背景、冰蓝高光、白色服装建立冷暖中性关系。
字体层级
顶部细线高对比衬线与下方圆润展示字并置。
基本图形与材质
水面反射、透明气泡、虚化景深。
#131214
#678BAC
#B1B3BD
#D8E3EF

局部图像量化取色,包含人物、背景与压缩误差。

复用要点

反射和气泡不侵入面部;小字落在稳定暗部。

PDF P.06 · 画面 05

ELEMENT STUDY / 05

AMILA & KYSA 双人银色

舞台式数字拼贴
排版与视线
双人并列放入桁架舞台,顶部斜向时间引入阅读。
颜色关系
灰银统一环境,黑白服装区分两人。
字体层级
细衬线日期、手写 Miami 与金属效果标题分层。
基本图形与材质
舞台灯架、波纹网线、金属小物。
#D2D3D5
#696361
#999A9A
#F9F9FA

局部图像量化取色,包含人物、背景与压缩误差。

复用要点

双人保留等权面积;装饰统一金属色,避免增加无关强调色。

PDF P.06 · 画面 06

ELEMENT STUDY / 06

DJ CICI 节日变体

节日人物视觉
排版与视线
人物覆盖绿色块面,画面边缘保留节日植物。
颜色关系
绿色、红色和白色形成节日对照。
字体层级
顶部手写文字较轻,人物标识使用更醒目的小标签。
基本图形与材质
雪花、植物与不规则色块。
#054700
#FFFEFE
#DCBCAB
#5B0F0F

局部图像量化取色,包含人物、背景与压缩误差。

复用要点

右侧内容未完整保留,只分析可见部分,不猜测完整标题。

03

排版系统

把视觉顺序写成可以重复使用的结构。示意比例为建议,不是原稿测量。

01

主题字体先界定风格

02

人物占据中央的主要识别区

03

姓名与局部装饰形成第二焦点

04

场次信息在边角形成稳定检索区

从焦点到信息落点

  • 统一主体、标题、日期三层优先级;不必统一所有材质。
  • 背景越复杂,关键信息底色越应干净。
  • 金属亮度不能高过脸部高光;先看人,再看质感。
安全边距4u模块间距6u章节留白10u

建议 u = 画布宽度的 1%。以 1000px 宽画布为例,4u = 40px;多列与长图按内容调整。

04

配色与色彩角色

以下为本组视觉提炼的参考色;逐张量化色见上方。混合风格组不应把全部参考色同时放进一张海报。

#F46C20RGB 244, 108, 32
#CAD9E4RGB 202, 217, 228
#F6389ERGB 246, 56, 158
#174C73RGB 23, 76, 115
#181D23RGB 24, 29, 35

环境色

先从对应画面的背景选择环境色,统一照片与素材的整体色温。背景主色不等于文字主色。

强调色

从本张作品的对照色中选择一个强调,用于姓名、日期或主题,避免多个色块同时争夺注意。

信息色

正文落在稳定明暗区。浅色装饰、透明效果和照片高光不作为小字底色。

05

字体与信息层级

原始字体名称无法由平面图可靠确认。下面用系统字体示意角色,不冒充原作字体。

DISPLAY / 8–12u

VISUAL
EXPRESSION

NAME / 6–9u

SSR / 主题姓名

BODY / 2–2.6u

活动说明负责讲清楚内容,日期和地点负责帮助读者行动。

META / 1.8–2.2u

DATE / LOCATION / INFORMATION

  • Apple 的粗厚衬线、ZOE 的刷写姓名、NAOMI 的高对比衬线各有角色。
  • 同一组的字体不能强行统一成一个字体;系统统一的是层级。
  • 小号辅助英文只承担节奏与信息,不能替代明确的日期和姓名。

以上字号是以画布宽度为基础的复用建议,导出后必须在实际显示尺寸检查可读性;不能把海报参数直接当作网页字号。

06

图像处理与合成层次

从后向前的重建建议;所示原图为扁平化图像,不包含可编辑原始图层。

  1. L01色调与环境底背景
  2. L02金属、电视或舞台框架叠加
  3. L03人物照片叠加
  4. L04跨越主体的标题叠加
  5. L05清晰的信息末层叠加

合成顺序

先建立背景与透视,确定主光方向;再放入主体并匹配明暗、色温与接触阴影。最后叠加姓名与必要装饰,在小尺寸下确认人物轮廓、标题与日期仍然清晰。这里描述可复用流程,不推断原作者实际使用的工具。

07

从元素到组件

COMPONENT / 01

冷色肖像

低饱和环境配亮面细节。

COMPONENT / 02

街头姓名

大号手写与几何文字标签。

COMPONENT / 03

双人模块

共享舞台边框与等权头部尺度。

COMPONENT / 04

节日变体

在人物结构外更换季节符号。

08

风格背景与关联

历史资料与本作品的视觉观察分开阅读。

电视与人物的拼接属于可用蒙太奇解释的形式;涂写和饱和色可放在俱乐部平面文化中比较。金属、液态表面与细线网格在这里作为“数字未来感”的描述性标签,不断言具体年代或直接传承。

09

一套可以继续生长的规则

保留什么

  • 统一主体、标题、日期三层优先级;不必统一所有材质。
  • 背景越复杂,关键信息底色越应干净。
  • 金属亮度不能高过脸部高光;先看人,再看质感。

如何扩展

  1. 保留原画面的焦点与阅读顺序。
  2. 换人物或内容时先适配比例,再替换色彩与装饰。
  3. 横幅保留主题、主体与日期;长图增加简介和分章。
  4. 在真实尺寸检查文字、边距、素材清晰度与导出结果。
下载本章参考色与规则 JSON ↓

滚动查看细节 · 按 Esc 关闭