Editorial Bleed 版式系统详解PPT-Master 图片出血与遮罩的 16:9 结构化版式设计规范【免费下载链接】ppt-masterAI turns documents or topics into real, native PowerPoint decks—with native shapes, transitions and animations,>项目地址: https://gitcode.com/GitHub_Trending/ppt/ppt-master导读Editorial Bleed 是 PPT-Master 仓库中一套仅含结构、不含品牌身份的 16:9 版式系统它定义了 10 个可在 PowerPoint 中直接选用的 Layout其核心设计语言是图片出血到画布边缘、文字直接压在图片之上配遮罩提升可读性。本文以该版式的设计规范文档design_spec.md为主体结合仓库中 10 张结构化的 SVG 原型源码逐页拆解其槽位几何、遮罩技法、层叠规则与规范化要求。读完本文你将掌握这套系统每个页面类型的精确槽位布局与占位符约定、四种遮罩scrim技法的参数与适用场景、为何遮罩必须是 Slide 本地元素而非 Layout 原子、以及一套合规版式在设计规范、SVG 契约与验证工具上需要满足的条件。一、这是什么一套图片承载论证的结构型版式系统1.1 定位structure-only 的 Layout在 PPT-Master 的模板体系里layout是一种只描述结构的可复用模板包它承载画布、Master/Layout 结构、页面类型、槽位几何、语义化文本角色、对齐/换行/容量行为以及 SVG 清单——但不拥有品牌色、字体/字重身份、最终字号阶梯、Logo、语气或图标风格这些属于 Brand/Deck 或确认阶段的下游决策见 layouts/README.md。Editorial Bleed 正是这一结构即契约理念的典型实例。从 layouts_index.json 的注册条目可以看到它的顶层元数据canvas_format: ppt1691280×720viewBox0 0 1280 720page_count: 1010 个页面类型hero_full、hero_side_scrim、split_bleed、split_bleed_reverse、chapter_full、quote_over_image、triptych、image_grid_four、full_statement、closing_full设计规范开篇即点明其核心主张Editorial Bleed provides a structural vocabulary for 16:9 material where imagery carries the argument and text is set on the image rather than beside it.即图片承载论证文字设置在图片之上而非其旁边。原型中的中性配色如#0F172A深色基底、#475569强调条只是用于暴露层级与槽位几何的预览油漆不是身份段——颜色、字体、Logo、语气、图标处理都留给下游决定。1.2 与同目录其他版式的区别同一 layouts 目录下还有presentation_core20 页通用系统、report_core13 页带持久页眉页脚的报告系统、story_vertical9:16 竖版等。Editorial Bleed 的差异化特征在于所有图片槽位至少触达一条画布边缘且几乎每一页的文本都压图显示。这一点也是全系统最容易被破坏的地方——规范明确警告将图片内缩进边距就会把这套系统变成普通的内容版式。二、签名设计要素七条决定系统身份的结构规则设计规范第 IV 节用一张表格定义了七条签名设计要素它们是理解全部 10 个页面类型的钥匙。下面逐条结合 SVG 源码展开。2.1 图片没有安全框No safe frame for pictures每个picture槽位都必须到达画布边缘页面类型图片几何hero_full/hero_side_scrim/chapter_full/quote_over_image/closing_full全画布 1280×720split_bleed/split_bleed_reverse精确的半画布 640×720triptych三条等高的垂直带427 / 427 / 426 宽image_grid_four四个 640×360 象限对应的 SVG 契约是data-pptx-boundsx y width height。例如 01_hero_full.svg 中的图片槽g idhero-full-picture-slot>rect idhero-full-scrim x0 y240 width1280 height480 fillurl(#hero-full-scrim-paint)>linearGradient idhero-full-scrim-paint x10 y10 x20 y21 stop offset0 stop-color#000000 stop-opacity0/ stop offset0.55 stop-color#000000 stop-opacity0.30/ stop offset1 stop-color#000000 stop-opacity0.78/ /linearGradientclosing_full10_closing_full.svg终点不透明度提高到0.82遮罩区为 y300–720。② 水平方向性遮罩horizontal directional scrim—— 用于hero_side_scrim。渐变从左到右为0.88 → 0.30 → 0覆盖左侧 880 px 宽让图片在开放侧右侧保持可读、在文字列一侧压暗linearGradient idhero-side-scrim-paint x10 y10 x21 y20 stop offset0 stop-color#000000 stop-opacity0.88/ stop offset0.55 stop-color#000000 stop-opacity0.30/ stop offset1 stop-color#000000 stop-opacity0/ /linearGradient③ 全画布分级洗涤full-canvas graded wash—— 用于chapter_full0.44 → 0.68自上而下向文字方向加深为章节号、标题、描述统一提供对比度05_chapter_full.svg。④ 抬升地板的径向暗角raised-floor radial vignette—— 用于quote_over_image中心0.42 → 边缘 0.72让居中引文保持对比度同时让画布边缘退开radialGradient idquote-vignette-paint cx0.5 cy0.5 r0.5 stop offset0 stop-color#000000 stop-opacity0.42/ stop offset1 stop-color#000000 stop-opacity0.72/ /radialGradient2.4 遮罩必须是渐变绝不能是纯色矩形规范给出了一条硬性规则全画布的纯色rect只保留给结构化包中的背景归属且会被编译进背景平面background plane位于所有图片之下。因此这里每一个遮罩都携带渐变油漆——即使视觉意图是平坦的洗涤如chapter_full。原因很实际如果用纯色填充 fill-opacity替代渐变遮罩其堆叠顺序会被反转纯色矩形会盖在文字之上而不是图片之上并且会直接导致模板校验失败。这是模板验证svg_quality_checker.py --template-mode可以程序化检查的契约之一。2.5 深色基底平面与无图之页单一 Master 携带深色背景#0F172A。这个基底是深色的是可复用的结构事实——因为文字设置在图片之上、以反白方式呈现原型中的 hex 值只是可替换的预览油漆不是身份值。深色基底只在没有图片覆盖处可见split 页的文字半区以及full_statement整页。full_statement09_full_statement.svg是系统中唯一没有图片槽的页面。规范的解释很有设计洞察完全建立在图片上的系统需要一页停下来否则每一页都在争夺同样的注意力。 它用一条#475569强调条80 272 96 8 64 px 主陈述{{KEY_MESSAGE}}槽位80 328 1120 200 22 px 支撑文字{{SUPPORT_TEXT}}槽位80 556 880 56完成收束。2.6 用说明文字替代标题Captions instead of titlesimage_grid_four不声明标题槽triptych把标题放进顶部渐隐之内而非图片之上方——因为这两个页面没有可容纳标题的边距带。此时阅读顺序由说明文字captions承载triptych标题槽data-pptx-bounds80 64 1120 7234 px位于顶部 scrim 之内三条说明文字槽位于 y560各宽约 362–363 px字号 20image_grid_four四个象限各配一个 18 px 的说明文字槽上排 y268下排 y628内边距约 32 px。2.7 文本进入方式Text entry正文与说明文字槽一律从左上角开始左对齐、上对齐居中对齐只保留给引文页quote_over_image因为该页构图刻意对称——引文槽data-pptx-bounds160 268 960 184使用text-anchormiddle与 x640 实现水平居中。三、页面名册Page Roster10 个 Layout 逐一拆解设计规范第 V 节给出完整名册。下表为官方映射关系可直接对照 PowerPoint 版式选择器使用SVG 文件Layout keyPowerPoint 选择器名称用途01_hero_full.svghero_fullHero Full全画布图片 底部渐隐 标题与副标题02_hero_side_scrim.svghero_side_scrimHero with Side Scrim全画布图片 方向性遮罩 左侧文字列03_split_bleed.svgsplit_bleedSplit Bleed左半画布图片 右侧文字列04_split_bleed_reverse.svgsplit_bleed_reverseSplit Bleed Reverse右半画布图片 左侧文字列05_chapter_full.svgchapter_fullChapter Full全画布图片 平铺洗涤 章节号/标题/描述06_quote_over_image.svgquote_over_imageQuote over Image全画布图片 洗涤与暗角 居中引文07_triptych.svgtriptychTriptych三条全高图片带 顶/底渐隐 三条说明文字08_image_grid_four.svgimage_grid_fourFour-Image Grid四个边到边图片象限 每格渐隐 说明文字09_full_statement.svgfull_statementFull Statement无图深色画布 一条主导陈述10_closing_full.svgclosing_fullClosing Full全画布图片 底部渐隐 收尾语与联系行3.1 开篇与结尾页Hero Full01标题 52 px 加粗#FFFFFF副标题 22 px#E2E8F0槽位宽 880–1120 px字号与槽深96 / 56 px对应一级信息与二级信息Closing Full10收尾语 44 px 加粗#FFFFFF联系行 20 px#CBD5E1遮罩终点不透明度 0.82保证长尾文字对比度。3.2 分割出血页split_bleed 两兄弟split_bleed与split_bleed_reverse结构互为镜像图片精确占半画布文字区在另一半、80 px 边距起排。除了对称位置外两者都带一条 72×6 px、圆角 3 的#475569强调条data-pptx-layerlayout>layout_id: editorial_bleed kind: layout category: general summary: A structure-only 16:9 system with 10 authored PowerPoint Layouts whose images bleed to the canvas edge and whose text sits on the image behind a scrim. canvas_format: ppt169 canvas_width: 1280 canvas_height: 720 canvas_viewbox: 0 0 1280 720 replication_mode: standard native_structure_mode: structured page_count: 10placeholders:映射按页面声明可替换占位符沿用规范化的{{PLACEHOLDER}}写法参见 template-designer.md 第 4 节placeholders: 01_hero_full: [{{TITLE}}, {{SUBTITLE}}] 02_hero_side_scrim: [{{PAGE_TITLE}}, {{CONTENT_AREA}}] 03_split_bleed: [{{PAGE_TITLE}}, {{CONTENT_AREA}}] 04_split_bleed_reverse: [{{PAGE_TITLE}}, {{CONTENT_AREA}}] 05_chapter_full: [{{CHAPTER_NUM}}, {{CHAPTER_TITLE}}, {{CHAPTER_DESC}}] 06_quote_over_image: [{{QUOTE_TEXT}}, {{ATTRIBUTION}}] 07_triptych: [{{PAGE_TITLE}}, {{CAPTION_1}}, {{CAPTION_2}}, {{CAPTION_3}}] 08_image_grid_four: [{{CAPTION_1}}, {{CAPTION_2}}, {{CAPTION_3}}, {{CAPTION_4}}] 09_full_statement: [{{KEY_MESSAGE}}, {{SUPPORT_TEXT}}] 10_closing_full: [{{CLOSING_MESSAGE}}, {{CONTACT_LINE}}]这些占位符名必须与 SVG 中text contenteditable="false">【免费下载链接】ppt-masterAI turns documents or topics into real, native PowerPoint decks—with native shapes, transitions and animations,>项目地址: https://gitcode.com/GitHub_Trending/ppt/ppt-master创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Editorial Bleed 版式系统详解：PPT-Master 图片出血与遮罩的 16:9 结构化版式设计规范
Editorial Bleed 版式系统详解PPT-Master 图片出血与遮罩的 16:9 结构化版式设计规范【免费下载链接】ppt-masterAI turns documents or topics into real, native PowerPoint decks—with native shapes, transitions and animations,>项目地址: https://gitcode.com/GitHub_Trending/ppt/ppt-master导读Editorial Bleed 是 PPT-Master 仓库中一套仅含结构、不含品牌身份的 16:9 版式系统它定义了 10 个可在 PowerPoint 中直接选用的 Layout其核心设计语言是图片出血到画布边缘、文字直接压在图片之上配遮罩提升可读性。本文以该版式的设计规范文档design_spec.md为主体结合仓库中 10 张结构化的 SVG 原型源码逐页拆解其槽位几何、遮罩技法、层叠规则与规范化要求。读完本文你将掌握这套系统每个页面类型的精确槽位布局与占位符约定、四种遮罩scrim技法的参数与适用场景、为何遮罩必须是 Slide 本地元素而非 Layout 原子、以及一套合规版式在设计规范、SVG 契约与验证工具上需要满足的条件。一、这是什么一套图片承载论证的结构型版式系统1.1 定位structure-only 的 Layout在 PPT-Master 的模板体系里layout是一种只描述结构的可复用模板包它承载画布、Master/Layout 结构、页面类型、槽位几何、语义化文本角色、对齐/换行/容量行为以及 SVG 清单——但不拥有品牌色、字体/字重身份、最终字号阶梯、Logo、语气或图标风格这些属于 Brand/Deck 或确认阶段的下游决策见 layouts/README.md。Editorial Bleed 正是这一结构即契约理念的典型实例。从 layouts_index.json 的注册条目可以看到它的顶层元数据canvas_format: ppt1691280×720viewBox0 0 1280 720page_count: 1010 个页面类型hero_full、hero_side_scrim、split_bleed、split_bleed_reverse、chapter_full、quote_over_image、triptych、image_grid_four、full_statement、closing_full设计规范开篇即点明其核心主张Editorial Bleed provides a structural vocabulary for 16:9 material where imagery carries the argument and text is set on the image rather than beside it.即图片承载论证文字设置在图片之上而非其旁边。原型中的中性配色如#0F172A深色基底、#475569强调条只是用于暴露层级与槽位几何的预览油漆不是身份段——颜色、字体、Logo、语气、图标处理都留给下游决定。1.2 与同目录其他版式的区别同一 layouts 目录下还有presentation_core20 页通用系统、report_core13 页带持久页眉页脚的报告系统、story_vertical9:16 竖版等。Editorial Bleed 的差异化特征在于所有图片槽位至少触达一条画布边缘且几乎每一页的文本都压图显示。这一点也是全系统最容易被破坏的地方——规范明确警告将图片内缩进边距就会把这套系统变成普通的内容版式。二、签名设计要素七条决定系统身份的结构规则设计规范第 IV 节用一张表格定义了七条签名设计要素它们是理解全部 10 个页面类型的钥匙。下面逐条结合 SVG 源码展开。2.1 图片没有安全框No safe frame for pictures每个picture槽位都必须到达画布边缘页面类型图片几何hero_full/hero_side_scrim/chapter_full/quote_over_image/closing_full全画布 1280×720split_bleed/split_bleed_reverse精确的半画布 640×720triptych三条等高的垂直带427 / 427 / 426 宽image_grid_four四个 640×360 象限对应的 SVG 契约是data-pptx-boundsx y width height。例如 01_hero_full.svg 中的图片槽g idhero-full-picture-slot>rect idhero-full-scrim x0 y240 width1280 height480 fillurl(#hero-full-scrim-paint)>linearGradient idhero-full-scrim-paint x10 y10 x20 y21 stop offset0 stop-color#000000 stop-opacity0/ stop offset0.55 stop-color#000000 stop-opacity0.30/ stop offset1 stop-color#000000 stop-opacity0.78/ /linearGradientclosing_full10_closing_full.svg终点不透明度提高到0.82遮罩区为 y300–720。② 水平方向性遮罩horizontal directional scrim—— 用于hero_side_scrim。渐变从左到右为0.88 → 0.30 → 0覆盖左侧 880 px 宽让图片在开放侧右侧保持可读、在文字列一侧压暗linearGradient idhero-side-scrim-paint x10 y10 x21 y20 stop offset0 stop-color#000000 stop-opacity0.88/ stop offset0.55 stop-color#000000 stop-opacity0.30/ stop offset1 stop-color#000000 stop-opacity0/ /linearGradient③ 全画布分级洗涤full-canvas graded wash—— 用于chapter_full0.44 → 0.68自上而下向文字方向加深为章节号、标题、描述统一提供对比度05_chapter_full.svg。④ 抬升地板的径向暗角raised-floor radial vignette—— 用于quote_over_image中心0.42 → 边缘 0.72让居中引文保持对比度同时让画布边缘退开radialGradient idquote-vignette-paint cx0.5 cy0.5 r0.5 stop offset0 stop-color#000000 stop-opacity0.42/ stop offset1 stop-color#000000 stop-opacity0.72/ /radialGradient2.4 遮罩必须是渐变绝不能是纯色矩形规范给出了一条硬性规则全画布的纯色rect只保留给结构化包中的背景归属且会被编译进背景平面background plane位于所有图片之下。因此这里每一个遮罩都携带渐变油漆——即使视觉意图是平坦的洗涤如chapter_full。原因很实际如果用纯色填充 fill-opacity替代渐变遮罩其堆叠顺序会被反转纯色矩形会盖在文字之上而不是图片之上并且会直接导致模板校验失败。这是模板验证svg_quality_checker.py --template-mode可以程序化检查的契约之一。2.5 深色基底平面与无图之页单一 Master 携带深色背景#0F172A。这个基底是深色的是可复用的结构事实——因为文字设置在图片之上、以反白方式呈现原型中的 hex 值只是可替换的预览油漆不是身份值。深色基底只在没有图片覆盖处可见split 页的文字半区以及full_statement整页。full_statement09_full_statement.svg是系统中唯一没有图片槽的页面。规范的解释很有设计洞察完全建立在图片上的系统需要一页停下来否则每一页都在争夺同样的注意力。 它用一条#475569强调条80 272 96 8 64 px 主陈述{{KEY_MESSAGE}}槽位80 328 1120 200 22 px 支撑文字{{SUPPORT_TEXT}}槽位80 556 880 56完成收束。2.6 用说明文字替代标题Captions instead of titlesimage_grid_four不声明标题槽triptych把标题放进顶部渐隐之内而非图片之上方——因为这两个页面没有可容纳标题的边距带。此时阅读顺序由说明文字captions承载triptych标题槽data-pptx-bounds80 64 1120 7234 px位于顶部 scrim 之内三条说明文字槽位于 y560各宽约 362–363 px字号 20image_grid_four四个象限各配一个 18 px 的说明文字槽上排 y268下排 y628内边距约 32 px。2.7 文本进入方式Text entry正文与说明文字槽一律从左上角开始左对齐、上对齐居中对齐只保留给引文页quote_over_image因为该页构图刻意对称——引文槽data-pptx-bounds160 268 960 184使用text-anchormiddle与 x640 实现水平居中。三、页面名册Page Roster10 个 Layout 逐一拆解设计规范第 V 节给出完整名册。下表为官方映射关系可直接对照 PowerPoint 版式选择器使用SVG 文件Layout keyPowerPoint 选择器名称用途01_hero_full.svghero_fullHero Full全画布图片 底部渐隐 标题与副标题02_hero_side_scrim.svghero_side_scrimHero with Side Scrim全画布图片 方向性遮罩 左侧文字列03_split_bleed.svgsplit_bleedSplit Bleed左半画布图片 右侧文字列04_split_bleed_reverse.svgsplit_bleed_reverseSplit Bleed Reverse右半画布图片 左侧文字列05_chapter_full.svgchapter_fullChapter Full全画布图片 平铺洗涤 章节号/标题/描述06_quote_over_image.svgquote_over_imageQuote over Image全画布图片 洗涤与暗角 居中引文07_triptych.svgtriptychTriptych三条全高图片带 顶/底渐隐 三条说明文字08_image_grid_four.svgimage_grid_fourFour-Image Grid四个边到边图片象限 每格渐隐 说明文字09_full_statement.svgfull_statementFull Statement无图深色画布 一条主导陈述10_closing_full.svgclosing_fullClosing Full全画布图片 底部渐隐 收尾语与联系行3.1 开篇与结尾页Hero Full01标题 52 px 加粗#FFFFFF副标题 22 px#E2E8F0槽位宽 880–1120 px字号与槽深96 / 56 px对应一级信息与二级信息Closing Full10收尾语 44 px 加粗#FFFFFF联系行 20 px#CBD5E1遮罩终点不透明度 0.82保证长尾文字对比度。3.2 分割出血页split_bleed 两兄弟split_bleed与split_bleed_reverse结构互为镜像图片精确占半画布文字区在另一半、80 px 边距起排。除了对称位置外两者都带一条 72×6 px、圆角 3 的#475569强调条data-pptx-layerlayout>layout_id: editorial_bleed kind: layout category: general summary: A structure-only 16:9 system with 10 authored PowerPoint Layouts whose images bleed to the canvas edge and whose text sits on the image behind a scrim. canvas_format: ppt169 canvas_width: 1280 canvas_height: 720 canvas_viewbox: 0 0 1280 720 replication_mode: standard native_structure_mode: structured page_count: 10placeholders:映射按页面声明可替换占位符沿用规范化的{{PLACEHOLDER}}写法参见 template-designer.md 第 4 节placeholders: 01_hero_full: [{{TITLE}}, {{SUBTITLE}}] 02_hero_side_scrim: [{{PAGE_TITLE}}, {{CONTENT_AREA}}] 03_split_bleed: [{{PAGE_TITLE}}, {{CONTENT_AREA}}] 04_split_bleed_reverse: [{{PAGE_TITLE}}, {{CONTENT_AREA}}] 05_chapter_full: [{{CHAPTER_NUM}}, {{CHAPTER_TITLE}}, {{CHAPTER_DESC}}] 06_quote_over_image: [{{QUOTE_TEXT}}, {{ATTRIBUTION}}] 07_triptych: [{{PAGE_TITLE}}, {{CAPTION_1}}, {{CAPTION_2}}, {{CAPTION_3}}] 08_image_grid_four: [{{CAPTION_1}}, {{CAPTION_2}}, {{CAPTION_3}}, {{CAPTION_4}}] 09_full_statement: [{{KEY_MESSAGE}}, {{SUPPORT_TEXT}}] 10_closing_full: [{{CLOSING_MESSAGE}}, {{CONTACT_LINE}}]这些占位符名必须与 SVG 中text contenteditable="false">【免费下载链接】ppt-masterAI turns documents or topics into real, native PowerPoint decks—with native shapes, transitions and animations,>项目地址: https://gitcode.com/GitHub_Trending/ppt/ppt-master创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考