做网页切图最烦啥？按钮边缘有锯齿，背景抠不干净，或者切完发现尺寸全乱套。这篇不扯虚的，直接告诉你怎么在PS里把按钮切得干干净净，还能保留透明背景，让前端代码写起来不头疼。

我干了15年建站，见过太多新手用“裁剪工具”去硬抠按钮，结果切出来是个方方正正的矩形，背景还是白色的，前端还得去写CSS去背景，纯属多此一举。其实PS自带的切片工具或者更高级的导出功能，才是正解。咱们今天不讲那些花里胡哨的理论，就讲实操。

首先，你得把按钮从背景里单独提出来。这一步很多人忽略，直接切，结果切出来一堆杂边。正确做法是：选中按钮图层，按住Ctrl键点击图层缩略图，这样就能选中按钮的像素区域。然后按Ctrl+Shift+N新建图层，按Ctrl+C复制，再Ctrl+V粘贴。这时候你会得到一个新的、只有按钮的透明图层。把原来的背景图层隐藏或者删掉。这时候你的画布上就只剩下一个孤零零的按钮了，而且背景是透明的棋盘格，这就对了。

接下来是关键步骤，很多人问ps如何做切片网站按钮，其实现在PS版本更新了，传统的“切片工具”有点过时，更推荐用“导出为”或者“存储为Web所用格式”。但为了照顾老习惯和精准控制，我还是教你用切片工具配合图层面板。

第一步，确保你的按钮图层是独立的，且背景透明。

第二步，选择工具栏里的“切片工具”（快捷键C，如果没看到，长按裁剪工具就能看到）。

第三步，在按钮周围拖拽出一个矩形框，这个框就是你要切的区域。注意，框要紧贴按钮边缘，不要留太多空白，否则切出来的图片文件大，加载慢。

第四步，双击这个切片，在弹出的属性栏里，把“切片选项”里的“输出”格式选为PNG-24。为什么要选PNG-24？因为JPEG不支持透明背景，选JPEG的话，按钮周围的空白会变成白色或黑色，很难看。PNG-24能完美保留透明通道，前端直接用标签或者CSS背景图都能完美显示。

第五步，点击菜单栏的“文件”>“导出”>“存储为Web所用格式（旧版）”。在弹出的窗口里，你会看到预览图。检查按钮边缘是否清晰，有没有锯齿。如果有，回到上一步，检查按钮图层是否有羽化或模糊效果，如果有，用“选择并遮住”清理一下边缘。

第六步，点击“存储”，选择保存位置，文件名随便起，比如btn_home.png。

这里有个真实案例，我之前给一个客户做电商网站，按钮是渐变色加阴影。如果用普通截图，阴影部分会糊掉。我用了上面的方法，先复制按钮图层，用“图层样式”里的投影和渐变叠加，然后导出PNG-24。前端拿到图后，直接设置background-image，阴影效果完美保留，客户非常满意。

再说说价格，如果你找外包做切图，一个按钮大概5-10块钱，一天做几十个，也就几百块。自己学一下，半小时搞定，省下的钱买杯咖啡不香吗？

避坑指南：

1. 千万别用JPEG格式切透明背景的按钮，绝对会报错或者背景变色。

2. 切片的时候，尽量让按钮居中，不要贴边，方便前端加margin或padding。

3. 如果按钮有文字，确保文字是矢量图层，导出后不会模糊。

很多人纠结ps如何做切片网站按钮才能既快又好，其实核心就是：图层独立、透明背景、PNG-24格式。记住这三点，你切出来的图，前端看了都会给你点赞。别再去研究那些复杂的脚本了，手动操作最稳妥，尤其是对于小项目，按钮不多，手动切反而更精准。

最后，切完图记得用浏览器打开看看，缩放一下，看看边缘是否清晰。如果满意，就交给前端吧。建站这事儿，细节决定成败，一个小小的按钮切不好，整个页面的质感都掉价。希望这篇经验能帮到你，少走弯路。