网页切图技巧：利用切片工具快速输出Web图像资源，前端开发好帮手

作者：甜姐姐（资深PS使用教程作者）｜面向：初学者 / 设计爱好者｜目标：切图又快又稳、交付更专业

大家好，我是甜姐姐。今天我们聊一个“看起来很工程、其实超实用”的技能：网页切图。

很多同学切图的方式就是：框选→复制→新建→保存……来回折腾，最后文件命名还乱得像没睡醒。结果前端同学一接手：这图到底是2x还是1x？哪个是hover？透明底有没有？你就尴尬了。

所谓“高级感”的本质不是炫技，而是：输出规范、尺寸准确、资源整洁、交付顺滑。切片工具就是帮你把这些“一口气搞定”的前端好帮手。

一、先把地基打好：PS文档怎么建才不翻车

目的很简单：让你后面导出的资源尺寸对、清晰度对，不会“看着挺清楚，上线就糊”。

1. 新建文件：网页/界面类项目优先用像素尺寸，比如 1920×1080px 或设计稿实际尺寸。
2. 分辨率：做Web一般 72ppi 就行（关键是像素尺寸，不是ppi）。
3. 颜色模式：RGB，别用CMYK，不然颜色容易“发灰像隔了层雾”。

小技巧：

把常用网格开起来：视图 > 显示 > 网格，以及勾选视图 > 吸附。这样你切片对齐会更“咔哒”一声很舒服，像磁铁吸住一样。

二、认识切片：它到底是个啥？

你可以把切片理解成“给画面打包裹标签”。它不是裁掉画布，而是在画面上划分区域：这里导出一张图、那里导出一张图。

切片工具在哪？在工具栏里跟裁剪工具一组，长按能看到：切片工具 / 切片选择工具。

三、基础操作：用切片工具快速切出按钮/图标

先说目的：又快又准地圈出要导出的区域，并且让文件命名不再像“IMG_001最终版再最终版”。

1. 选择切片工具，在画面上拖拽框选需要导出的区域（比如一个按钮）。
2. 切到切片选择工具，点选你刚画的切片。
3. 双击切片（或右键）进入切片选项：给它取个名字，比如 btn_primary。
4. 检查尺寸：看顶部信息栏或切片选项里的宽高，确认像素是对的。

常见误区：

切片框选不对齐像素边界，会出现“边缘发虚”。尤其是图标、细线按钮。记住：尽量整数像素，别半个像素那种“虚焦感”。

四、进阶一点：用图层生成切图（更适合UI）

如果你的按钮/图标本来就是独立图层，那甜姐姐更推荐你用一种“贼省事”的思路：按图层导出。

操作思路（不同PS版本入口略有差异，但逻辑一样）：

1. 把要导出的元素整理成独立图层/组，并命名：icon_search、tab_home_active。
2. 使用 文件 > 导出 > 快速导出为PNG（适合单个）。
3. 或用 文件 > 导出 > 导出为... 进行批量设置（格式/透明/尺寸）。

甜姐姐的类比：

切片像你用便签纸给不同区域贴标签；按图层导出像你把东西装进一个个小盒子，盒子上写好名字，交付时直接整箱打包。

五、核心输出：用“存储为Web所用格式”批量导出切片

切片最好用的地方来了：一次性把多个切片导出成网页资源，格式和质量你还能控。

1. 菜单：文件 > 导出 > 存储为Web所用格式(旧版)（有些版本在“导出”为里）。
2. 右上角选择格式：常见用法：
• PNG-24
  
  ：透明背景、清晰，适合图标/按钮/需要透明的UI。
• JPG
  
  ：适合大图/背景图，体积小。质量建议先试 60-80。
3. 导出范围选择：所有切片 或 选中的切片。
4. 点“存储”，选择文件夹。你会得到一个规整的资源输出。

参数建议：

UI小图标优先 PNG-24 + 透明；背景大图优先 JPG质量70左右。别一上来就PNG全家桶，文件体积会把前端同学逼到“原地爆炸”。

六、给前端的“贴心小配合”：命名、2x/3x与透明

你想让前端觉得你很专业，其实就靠这些细节：

• 命名统一小写+下划线/短横线
  
  ：btn_primary、icon-user，别中英混搭还带空格。
• 区分状态
  
  ：tab_home_active / tab_home_default。
• 透明要透明
  
  ：PNG导出前确认背景层别硬顶着白色。
• 高清屏
  
  ：如果你设计稿是2倍图，告诉前端这是2x；或导出两套：icon.png 和 icon@2x.png（看团队规范）。

常见坑提醒：

别把“阴影、发光”裁掉了！切片框选时四周留点余量，不然上线后阴影像被刀切断，特别出戏。

七、效率快捷键：让你切图速度起飞

• Ctrl+J
  
  ：复制图层（做备份很香，别硬刚原图）。
• Ctrl+R
  
  ：显示/隐藏标尺（配合拖参考线对齐）。
• Ctrl+;
  
  ：显示/隐藏参考线。
• V
  
  ：移动工具（摆正元素）。

结尾：高级感其实就俩字——克制

最后甜姐姐再点题一下：网页切图的“高级感”不是你会多少花活，而是你能不能做到克制：

• 格式用对：该PNG就PNG，该JPG就JPG。
• 尺寸准确：别差1px还自我感动。
• 命名清晰：让别人一眼懂，不用猜。
• 输出整洁：交付像收纳一样干净。

想让我下一篇写“切图如何兼顾压缩体积还不糊（含TinyPNG思路/PS导出参数）”，你就告诉甜姐姐：你做的是电商图、官网还是App界面，我按场景给你安排得明明白白。