PS切片全攻略，从入门到精通，高效切割网页设计图的必修课
在网页设计与UI制作中,我们经常需要将设计稿中的按钮、图标、背景等元素“拆”成独立的图片文件，以便前端工程师进行页面搭建，如果说Photoshop是设计师的画笔，那么PS切片就是那把精准的“手术刀”，无论你是刚入行的新手，还是希望提升切图效率的老手，掌握切片的正确用法都能让你的工作流如虎添翼，本文将从概念、操作到进阶技巧，带你全面攻克PS切片。
什么是PS切片？
PS切片（Slice） 是Photoshop中一种将图像分割成若干矩形区域的功能，每个切片可以独立导出为单独的文件，并可以标记为不同类型的Web格式，它的核心用途是优化网页素材的产出流程：你只需要在整张设计稿上框选好范围，Photoshop就能自动生成对应的切片文件，省去手动裁剪和导出的重复劳动。
切片分为三类：
- 用户切片：你用切片工具手动拖拽出的区域，带蓝色的实线边框。
- 基于图层的切片：通过图层内容自动生成的切片，与图层边界联动（后文会提）。
- 自动切片：当你创建用户切片时，Photoshop会用灰色虚线自动补齐剩余空白区域，用于覆盖整幅图像。
日常工作中,我们主要关注用户切片，因为它的可控性最高。
切片工具的基础操作
-
调出切片工具
在Photoshop工具栏中长按“裁剪工具”图标，即可在展开菜单中选择“切片工具”，快捷键是C（需在裁剪工具组内切换）。 -
手动创建切片
用切片工具在设计稿上直接拖拽出一个矩形框，即可生成用户切片。
小技巧：按住空格键可以移动正在拖拽的虚线框；按住Shift可创建正方形区域。 -
基于参考线创建切片
先拉好参考线（Ctrl+R显示标尺，再从标尺拖出参考线），然后点击“工具选项栏”中的“基于参考线的切片”按钮，所有参考线会瞬间把图片切分为多个整齐的切片，适合有严格栅格系统的设计稿。 -
基于图层创建切片
在图层面板中选中一个图层（比如一个Button图标），然后执行图层 > 新建基于图层的切片，Photoshop会生成一个恰好包裹该图层内容的切片，图层的任何移动或变形，切片边界都会自动跟随更新，这个功能特别适合频繁调整位置的元素。
编辑与调整切片
- 选择切片：使用“切片选择工具”（在切片工具图标下长按可切换），点击切片即可选中，选中后，你可以拖动角落手柄调整大小。
- 移动/缩放：按住切片边缘拖拽即可；若要精确输入数值，可在属性面板中修改X、Y、W、H参数。
- 合并切片：按住Shift选多个切片，然后右键选择“合并切片”，它们会变成一个整体大切片。
- 删除切片：选中后按Delete键，或右键选择“删除切片”，自动切片无法手动单独选中删除，除非删除所有用户切片。
存储为Web所用格式——切片的最终出口
切片画好之后,导出是关键一步，执行 文件 > 导出 > 存储为Web所用格式（旧版）（快捷键 Alt+Shift+Ctrl+S），这里有几个核心设置：
- 格式选择：照片和复杂渐变用JPEG，图标和纯色图形用PNG-8或PNG-24，需要透明背景时用PNG。
- “选中的切片”按钮：在导出面板左下角选择“所有切片”或“所有用户切片”，或者带着切片选择工具在画面上点击你要导出的切片（“选中的切片”）。
- 优化预设：如果导出全部切片，建议每个切片单独设定格式，你可以在切片选项对话框中（双击切片）预设每个切片的名称、链接、Alt文本（用于网页HTML），甚至指定背景色。
导出完成后,Photoshop会在目标文件夹中生成一个“images”目录，里面就是所有切片图片，同时还会附带一份HTML文件（如果你勾选了“生成HTML”），可以直接在浏览器中预览网页结构，不过目前UI开发流程中HTML文件一般不使用，所以导出时记得取消勾选。
切片命名与组织——工程素养
切片名称直接决定前端拿到手的文件是否清晰,建议在导出前，双击每个切片打开“切片选项”面板，在“名称”栏里填写规范命名。
推荐命名规则：模块_位置_状态，button_home_normal、logo_header_pressed。
如果切片的背景需要透明，请务必确保原图层没有白色底填充；同时格式选择PNG-24或PNG-8（带透明）。
进阶技巧与常见坑
- 精确到像素的边界：切片拖拽时会自动吸附参考线，若没有吸附，请在
视图 > 显示 > 智能参考线中开启。 - 避免手滑切坏影响比例：切片是矩形，无法切成异形，遇到圆形图标时，只需让切片边界贴合图标的包边矩形，透明区域会自动留白，前端可用CSS覆盖。
- 切片的隐藏与清理：
Ctrl+H可以隐藏切片边界预览，但不影响导出；切换到“移动工具”后，某些操作会误移动切片，建议在需要时用“切片选择工具”锁定。 - 批量导出多尺寸：如果项目需要iOS/Android多倍图，可以在“导出”时选择多个缩放比率（在“存储为Web所用格式”面板的“图像大小”标签中设置），一次导出1x、2x、3x倍率的文件。
- 注意切片和裁剪的区别：裁剪是破坏性地改变图像本身；切片只是定义导出区域，不删除原图任何内容，随时可以重新调整。
- “画板”替代方案：在较新版本Photoshop中，画板（Artboard）配合“快速导出为PNG”也常被用来代替切片，但对于批量碎片化导图，切片依然更胜一筹。
写在最后：切片的取舍
现在很多团队喜欢用“组件化交付”或“蓝湖/摹客”等协作工具，自动标注和切图，但PS切片仍然是设计师必须掌握的底层能力——它不依赖任何网络平台，离线即可完成，且能执行一些自动化工具无法精确控制的复杂导出逻辑（比如为图标加安全边距、不同切片用不同格式），在无网络、或需要处理超大设计稿时，PS切片永远是你最稳妥的备选方案。
熟练使用切片工具 + 参考线 + 存储为Web所用格式这条黄金路径，你的切图速度至少能提升一倍，更重要的是，切好的每一块素材都井井有条，前端开发时拿到的文件清晰干净，自然会减少很多沟通与返工成本。
下次当你面对一张密密麻麻的设计图时,别再一张张“Ctrl+C”了，拿出PS切片，划几刀，收获一整片效率。
<< 上一篇
下一篇 >>