photoshop中导出网页ui素材需用切片工具或“导出为assets”功能：一、手动创建用户切片；二、基于图层自动建切片；三、调整切片属性与导出参数；四、批量存储为web格式；五、用“导出为assets”直接从图层生成资源。
如果您在Photoshop中完成网页设计稿后需要将不同UI元素导出为独立图片素材，则必须借助切片工具进行精准分割与批量导出。以下是实现此目标的具体操作流程：
一、创建用户定义切片
手动切片适用于对导出区域有精确控制需求的场景，可自由划定每个按钮、图标或模块的边界，确保导出尺寸与设计一致。
1、在工具栏中选择切片工具（快捷键C）。
2、按住鼠标左键并拖动，在画布上绘制一个矩形区域，松开后即生成一个用户切片。
3、重复拖拽操作，为导航栏、轮播图、卡片组件等分别创建独立切片。
4、选中某一切片后，可在顶部选项栏中修改其名称、宽度、高度及URL（用于网页跳转时设置）。
二、基于图层自动创建切片
当设计稿中每个UI元素已置于单独图层且命名规范时，可利用图层生成切片功能快速完成区域划分，避免手动绘制误差。
1、确保所有需导出的图层均为可见状态且未被编组。
2、右键点击任一目标图层，在弹出菜单中选择“从图层建立切片”。
3、Photoshop将自动以各图层内容边界为依据生成对应切片，并保留图层名作为切片标识。
4、若某图层含多个子元素，可先将其栅格化或拆分为独立图层再执行该操作。
三、调整切片设置与优化导出参数
切片属性设置直接影响导出文件格式、质量及命名逻辑，需根据前端开发需求预先配置。
1、执行菜单命令“视图 > 显示 > 切片中心”，开启切片编号显示以便识别。
2、双击任意切片，在弹出对话框中设置“类型”为“无图像”或“图像”，区分是否参与导出。
3、在“存储为Web所用格式”对话框中，为不同切片指定格式（如PNG-24用于透明图标、JPEG用于大图背景）。
4、勾选“仅限所选切片”，防止误导出隐藏区域或辅助线相关切片。
四、批量导出切片素材
使用“存储为Web所用格式”可一次性输出全部启用切片，支持自定义保存路径与文件夹结构，适配常见前端项目目录规范。
1、执行菜单命令“文件 > 导出 > 存储为Web所用格式（旧版）”。
2、在弹出窗口左下角点击“存储”按钮。
3、在保存对话框中选择目标文件夹，确认“切片”选项处于启用状态。
4、点击“保存”，Photoshop将按切片命名自动生成对应图片文件，并同步输出HTML预览文件（可选）。
五、使用导出为Assets功能替代传统切片
Photoshop CC 2015及以上版本提供“导出为Assets”功能，无需创建切片即可直接从图层导出资源，适合扁平化设计流程。
1、在图层面板中右键点击目标图层，选择“导出为Assets…”。
2、在弹出面板中为该图层设置输出格式（PNG、JPG、SVG）、缩放比例（1x/2x/3x）及文件名前缀。
3、勾选“启用导出”开关，图层右侧将出现小眼睛图标表示已激活导出状态。
4、执行菜单命令“文件 > 导出 > 生成图像资源”，系统将在指定文件夹内实时生成对应素材。
