如何利用Photoshop的切片工具分割网页设计图，输出适合前端开发的图片素材

甜姐姐出场新手友好可直接照做

你是不是也遇到过这种情况：设计稿做得贼漂亮，交给前端却不知道怎么切图，最后要么导出一堆乱七八糟的PNG，要么前端同学一脸“我裂开了”？别慌，甜姐姐今天就用PS切片工具带你把网页设计图切得又快又稳，输出的素材让前端拿到手就能用。

先说一句大实话：所谓“高级感”在切图这件事上，本质是克制+规范——不是切得越碎越专业，而是该切才切、命名清楚、格式选对。就像收拾行李，不是塞得越满越厉害，是放得刚刚好还好找。

一、切片到底是干嘛的？别把它当“截图工具”

切片（Slice）你可以把它想象成在一张大披萨上画线：你不是把披萨全切成渣渣，而是把需要单独上桌的那几块切出来（比如按钮、图标、背景纹理）。

• 该切
  
  ：按钮、icon、装饰性小图、需要透明的元素、重复背景纹理（小块即可）。
• 不建议切
  
  ：大段文字（交给前端写HTML/CSS更清晰）、纯色块背景（用CSS就行）、能用CSS画出来的圆角/阴影。

二、开切之前先“打底”：文件设置别偷懒

目的：让你导出的素材不糊、不偏色、不返工。

1. 先把设计稿保存一个副本：Ctrl + Shift + S（另存为）。
2. 检查画布单位：像素 px（网页用像素最直观）。
3. 颜色模式建议：RGB（网页显示用RGB）。路径：图像 > 模式 > RGB颜色。
4. 打开标尺和参考线：视图 > 标尺（Ctrl + R），需要时拖参考线对齐。

甜姐姐小提醒：如果你后面要交付给前端做适配，尽量保证元素都对齐到整数像素。半像素那种东西，显示起来就像“没睡醒似的”发虚。

三、切片工具在哪？两种切法怎么选

切片工具在工具栏里，通常藏在裁切工具那一组：长按裁切图标，选择切片工具或切片选择工具。

两种常用切法：

1. 手动切片
   
   ：你框哪里就切哪里，适合按钮、图标这类“我就要这一块”。
2. 基于参考线切片
   
   ：用参考线先把版式分区，再一键生成切片，适合规则栅格布局（比如整页模块化）。

四、基础操作：手动切片（新手先学这个）

目的：快速切出按钮/icon等单独图片，交付给前端直接用。

1. 选择切片工具，在需要导出的元素上拖拽框选。
2. 切完后换成切片选择工具，点击切片可调整大小位置（像拽橡皮泥一样拽边框）。
3. 需要精确数值：双击切片，会打开“切片选项”，可填X/Y/W/H（位置和宽高）。
4. 命名很重要：在切片选项里把名称改成有意义的，比如：btn_login、icon_search。

常见误区：切片框一定要紧贴元素边缘！别留太多透明边，不然前端排版会莫名其妙“多出一截空气”，你还以为是他写错了CSS。

五、进阶一点：用参考线一键切（规则页面超省事）

目的：把页面按模块快速分区，省得一块块拖到手抽筋。

1. 先拉参考线：Ctrl + R开标尺，从标尺拖出参考线，贴着模块边界放。
2. 走菜单：视图 > 新建切片 > 基于参考线（不同版本文字略有差异，但意思差不多）。
3. 生成后用切片选择工具微调、重命名。

甜姐姐经验：参考线切出来通常会比较“规整”，但网页素材不一定要整块导出。真正要交付给前端的，还是那些必须用图片呈现的部分。其它能用CSS实现的，别切，克制一点就很高级。

六、真正的输出：存储为Web所用格式（别直接“另存为PNG”瞎导）

目的：一次性导出所有切片，并控制格式/质量/透明度，让体积和清晰度更合理。

1. 点击：文件 > 导出 > 存储为 Web 所用格式(旧版)（有的版本在“存储为Web所用格式”）。
2. 右上角选择格式建议：

• PNG-24
  
  ：需要透明、边缘干净（按钮、icon）。
• JPEG
  
  ：大图/背景图（无透明），质量建议60-80起步看体积。
• PNG-8
  
  ：颜色少的小图可用，但容易色阶断层，新手慎用。

1. 确认预览没问题后，点击存储。
2. 在弹窗里选择：所有切片（不是“选定切片”），输出到一个文件夹。

参数小抄：如果你纠结JPEG质量，甜姐姐给你个不费脑的范围：70先试，文件太大再降到60，看不出糊就行。别硬上95，那叫“高清且臃肿”，跟背着冰箱去旅游一样。

七、交付给前端的“体面”：命名、倍图、与最少必要切片

目的：让前端同学一看就懂，减少沟通成本。

1. 命名规则
   
   ：全小写+下划线，比如header_bg、btn_primary、icon_close。
2. 按用途建文件夹
   
   ：/icons、/buttons、/bg（背景）。
3. 2x/3x倍图
   
   （如果你做移动端）：在设计时就按2倍做（例如750宽），导出后让前端按规范使用；或者额外导出一套并标注清楚。
4. 最少必要原则
   
   ：能用CSS实现的圆角、阴影、渐变，尽量不切图（除非效果特别复杂）。

八、最后收个尾：切图高级感=克制+规范

今天这套流程你学会了，基本就能把网页设计图切得很“职业”：先整理，再切片，最后用Web导出，命名清楚、格式选对、只切必要的东西。

记住甜姐姐这句：切图不是把设计“拆碎”，而是把它变成前端能顺手拼起来的积木。做得越克制，越高级；越规范，越省事。

练习小作业：找一张你做过的网页Banner/落地页设计稿，只切：一个主按钮、两个icon、一张背景图。用“存储为Web所用格式”导出，并把命名整理成 /buttons /icons /bg 三个文件夹。做完你就会发现：哎？也没那么难，还挺爽。

——甜姐姐