必须先切图再编码，因为网页无法直接渲染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中可叠加渐变、阴影等效果而不破坏原设计。
