必须先切图再编码，因为网页无法直接渲染PSD文件，需将视觉元素转为图像资源或CSS样式；切图支撑语义化HTML结构、响应式适配与Retina显示，并避免旧版导出工具的结构缺陷。
如果您拿到一份PSD设计稿，准备将其转化为符合现代标准的HTML5页面，则必须先完成切图环节。这是因为网页无法直接渲染PSD源文件，所有视觉元素需转化为浏览器可识别的图像资源或CSS可描述的样式规则。以下是必须先切图再编码的核心原因与对应操作路径：
一、提取可嵌入网页的图像资源
网页中所有非文字类视觉内容（如按钮、图标、背景图、轮播图等）均需以独立文件形式存在，才能通过标签或CSS background-image属性调用。未切图则无可用素材，编码将无法实现视觉还原。
1、在Photoshop中打开PSD文件，确认图层已命名且分组清晰，删除隐藏图层、参考线及冗余智能对象。
2、对导航栏、轮播区、卡片模块等大区块，建立图层组并命名为“nav”“slider”“card”等语义化名称。
立即学习“前端免费学习笔记（深入）”；
3、右键点击图层或图层组，选择“快速导出为PNG”，保存至项目根目录下的/images文件夹；对Logo、图标等矢量元素，使用“导出为SVG”并保存至/icons目录。
二、支撑语义化HTML结构的视觉边界划分
切图过程强制开发者对照设计稿逐模块识别功能区域，为后续使用header、nav、section、article等HTML5语义标签提供明确的结构依据。跳过切图易导致HTML结构与视觉逻辑脱节，产生语义混乱或嵌套失当。
1、依据PSD中视觉层级，标记出头部区域、主导航容器、主内容流、侧边栏占位、页脚区块。
2、在图层面板中为每个区域创建独立图层组，并添加注释说明其功能，例如“nav: 水平菜单+搜索框”“main-content: 三列图文布局”。
3、导出各区域背景图时启用“透明度”选项，确保CSS中可叠加渐变、阴影等效果而不破坏原设计。
三、保障响应式适配与Retina显示的基础前提
现代Web要求图像资源具备多分辨率支持能力。切图阶段即需按需导出@1x、@2x甚至SVG版本，否则后期无法通过CSS媒体查询或srcset属性实现设备适配，造成高清屏模糊或低性能设备加载冗余资源。
1、对按钮、图标等小尺寸元素，统一导出SVG格式，并检查路径是否闭合、描边是否转为轮廓。
2、对Banner、大图背景等宽高比固定的区域，导出至少两套尺寸：原始尺寸（如1920×600）与移动端适配尺寸（如750×300）。
3、将导出文件按命名规范存放：hero-banner.jpg、hero-banner@2x.jpg、icon-menu.svg。
四、避免直接导出HTML遗留的结构缺陷
Photoshop内置的“存储为Web所用格式”或“导出为HTML”功能生成的是table布局、内联样式、冗余class名的过时代码，完全不符合HTML5语义化、CSS外链、可访问性等基本要求，且无法维护与扩展。
1、禁用“文件→导出→旧版Web格式”路径，不依赖Photoshop自动生成的HTML文件。
2、若使用Avocode、MarkNet等工具辅助生成代码，仍需先完成切图——这些工具解析PSD的本质仍是读取图层像素与命名，而非跳过资源提取环节。
3、所有工具生成的HTML骨架，都必须配合手动切出的图像资源路径进行校验与替换，确保img src与background-image url指向本地/images或/icons目录下真实存在的文件。
