做前端这些年我最大的感受就是设计稿拿到手最让人头疼的不是写代码而是怎么把PSD里的图层、图标、间距、颜色原原本本地搬到页面上。很多同学一遇到PS就发怵觉得那是设计师的活自己装个PS连层没打开几次就开始瞎猜尺寸。但实际工作中切图、取色、测量、导出这些环节几乎每天都在碰。与其说你需要学会设计不如说你需要掌握一套熟练的PS操作套路保证拿到任何一份设计稿都能快速拆解、准确输出。这篇文章就把我这些年来踩坑总结出来的前端PS技巧整理出来按我自己的操作习惯来写希望能帮刚入行或者被切图折磨过的同行少走点弯路。我最初学PS的时候也特别抗拒总觉得这个软件界面复杂工具太多根本不知道从哪儿下手。但后来想明白一件事前端用PS的目标非常具体就是四个动作——看、量、取、切。看图层结构量尺寸和位置取颜色值切图片资源。把这四件事做好就覆盖了开发中95%的需求。所以下面我按照这个思路把整套流程拆开讲透。1. 前端为什么要学PS1.1 定位你不需要成为设计师但必须能读懂设计稿很多前端新人有个误区以为会写HTML和CSS就够了设计稿的内容交给设计师整理好再给自己。但在真实的团队协作里设计师交付的往往就是一版PSD或者一张Sketch稿文件里可能存在几十个图层有的还有隐藏组、智能对象、图层样式。如果你不具备基本的PS阅读能力连某个图层的字体大小、行高、背景渐变、圆角数值都拿不准那就只能靠猜最后做出来的页面多半和设计稿对不上。这里说的懂PS不是让你去修图、调色、做合成而是要求你熟练使用以下五类基础能力图层管理、标尺与参考线、选区与测量、颜色取样、图片导出。这五类能力加起来也就是一个比较熟练的前端半天就能掌握的内容。掌握之后你面对PSD时心态会完全不一样不再是被动地等别人给资源而是自己随时能动手。另外说一句ps技巧这事不挑工具版本。我原来公司有人用旧版的CS6有人用新版操作逻辑基本是通用的我下面讲的操作大部分在常见版本里都能找到个别菜单名称可能略有差异但不影响理解。1.2 核心诉求测量、取色、切图、导出我把前端和PS的关系总结成一张简单的对照表这样你就能清楚自己到底在PS里需要做什么前端需求对应PS操作常用位置量元素尺寸、间距、圆角标尺 参考线 矩形选区视图菜单、信息面板取文字、背景、边框的颜色吸管工具 色板工具栏查看字体、字号、行高、字重字符面板窗口菜单提取单个图标、按钮图层右键导出 / 选区复制图层菜单切出所有资源切片工具 或 生成器视图/文件菜单查看渐变、阴影的具体参数图层样式面板双击图层右侧fx这张表就是前端操作PS的路线图。你不需要去背每一个工具的作用只要遇到对应需求时知道去哪个面板找就行。实际开发中测量和取色的频率最高切图则集中在上线前。还有一个容易被忽略的点PS里信息面板窗口→信息特别有用当你用选区工具框选一个矩形时信息面板上会直接显示当前选区的宽、高、X、Y坐标不用自己去数像素。我至今推荐所有前端把信息面板常驻界面找尺寸的时候效率翻倍。1.3 从设计稿到网页的完整工作流在讲具体操作之前我先说下典型工作流让你知道这些技巧是在什么时候用的。设计师交付PSD后前端通常要经历这么几步整体浏览先打开全部图层组了解页面模块划分把和开发无关的图层比如水印、特效标记为隐藏。设定标注新建参考线把主体容器宽度、栅格列宽、关键区块边界标出来方便后续测量对齐。逐区块测量对每个模块量间距、量内边距、量字体、量颜色把结果记录到本地或标注工具里。资源提取把图标、背景图、装饰图单独导出并按命名规范整理好。走查比对页面写完后把实现稿和PSD放在一起逐屏核对尺寸、颜色、样式。这里有一个很实用的经验把PSD当作精确到像素的设计书但不是所有像素都要一比一还原。通常我会先和设计师确认哪些地方允许弹性处理比如响应式断点下的间距变化、文字换行后的行高调整等等。但在定宽容器内尺寸、颜色这类硬指标尽量做到精确。这样你在PS里的测量和切图结果才会真正有用而不是白忙一场。2. 前端必须掌握的PS核心操作2.1 界面配置先把工作区改成自己顺手的形态很多人第一次打开PS看到满屏的面板直接懵了。我建议前端不要用默认的Essentials工作区而是自己手动调整一次之后永久保存。我自己常年保留的面板有四个图层面板、信息面板、字符面板、历史记录面板。其中字符面板对查看文字属性至关重要默认情况下它藏在窗口菜单里很多人根本没打开过。具体配置方法就是点击顶部菜单的窗口把需要的面板勾选出来然后拖动排列到屏幕右侧最后在窗口→工作区→新建工作区里存个名字。操作一次五分钟之后你每次打开PS都是熟悉的环境。图层是整个PSD的灵魂。前端最常用的图层操作主要有这几项点击图层前的眼睛图标显示/隐藏该图层用来观察结构调整右键图层选择拷贝CSS可以直接复制出带渐变、圆角、阴影等信息的CSS片段双击图层缩略图右侧的fx标识查看投影、描边、内发光等样式参数按住CtrlMac为Cmd点击图层缩略图可以快速选中该图层中所有非透明区域非常常用。其中拷贝CSS这个功能我强烈建议每个前端都试一下。虽然它生成的代码不一定完全符合你的工程规范但至少能给出渐变方向、颜色节点、阴影数值、圆角大小等关键参考比肉眼猜准确得多。不过要提醒一句老版本PS生成的CSS里会带有浏览器前缀而且还可能包含一些无效样式用的时候还是需要自己筛一遍。2.2 测量与取色标尺、参考线、吸管的高级用法测量尺寸这件事新手喜欢用截图工具去量但精度不够。PS里最标准的做法是先用标尺拉出参考线再用选区工具配合信息面板读数值。具体步骤是这样的按CtrlRMac是CmdR调出标尺默认单位可能是厘米你需要在标尺上右键把单位改为像素然后从左侧标尺向外拖动就能拖出垂直参考线从顶部标尺拖动则是水平参考线。要精确地放位置可以在视图→新建参考线里输入精确的像素值。参考线是前端测量最依赖的辅助元素。比如我想量标题和卡片顶部的间距就先从顶部标尺拉一条水平参考线吸附到标题文字上方再拉一条吸附到卡片顶部然后打开信息面板面板上会自动显示两条参考线的坐标差这个差值就是精确的间距。取色就简单了直接用吸管工具快捷键I在画布上点击前景色会变成点击处的颜色双击前景色色块就能看到Hex值。这里有两个重要的细节在吸管工具的选项栏里把取样大小设置为3×3平均可以避免在噪点图上取到偏差极大的单像素颜色如果你想同时记录多个颜色可以按住Shift键用吸管工具连续点击画布不同位置这些颜色会全部记录到颜色取样器面板非常方便做整套配色的比对。字体信息的查看也是一样的套路选中文字图层打开字符面板面板上会显示字体名称、字号、行高、字距、字重。记得在字符面板右上角的菜单里把单位改为像素否则显示的点数容易换算错。2.3 精确选择选区工具、快速蒙版、图层区域切图之前最核心的准备工作是把要切的元素精确地选出来。如果你选不准导出的图片就会带着多余的背景或者多一块边角反而要二次处理。这里说几个我常用的选择方法按场景区分场景一元素是单独图层且边界清晰 直接在图层缩略图上按住Ctrl点击自动选中该图层所有非透明像素这是最快最准的方式。如果元素是一个组可以在图层组缩略图上用同样的办法选中整个组的内容区域。场景二元素是矩形比如按钮、卡片 用矩形选框工具快捷键M沿边缘框选配合参考线对齐选中后按CtrlC复制再新建文件粘贴导出。如果边缘有圆角可以点击菜单栏的选择→修改→平滑设置适当半径来消除锯齿感。场景三图标带有投影、阴影等效果 如果你只点了图层的像素选区导出的图片会丢掉投影。这种情况下你需要用图层样式里的效果范围来确定选区或者在导出时保留透明底再额外处理。我们自己切带投影的按钮时一般都会手动在图层下面扩出几个像素的透明边距方便后续CSS里控制位置。选区的另一个作用就是看尺寸。框选任意一块区域后信息面板会显示宽和高所以选区不只是切图工具更是一个测量工具。用熟了以后你量距离、量大小都可以靠它替代打开一堆截图工具。2.4 资源导出从图层直接生成图片文件以前前端切图用的是切片工具先在画布上拉出一个个切片然后存储为Web所用格式。现在PS版本基本都内置了更简单的导出方法。我常用的有三种各有各的使用场景第一种右键图层或图层组选择导出为然后选择PNG、JPG、SVG或WebP。这种方法的优点是所见即所得支持透明背景还能在面板里直接设置缩放比例。 第二种选择生成器。在文件→导出→将文件存储为...确认开启后只需把图层重命名成images/btn.png或者btn2x.pngPS就会自动把资源输出到源文件同目录下的images文件夹里。这个功能特别适合批量切图我后面会详细讲。 第三种如果是纯粹看尺寸、给设计走查可以按CtrlAltC复制合并再新建文档粘贴不过这种操作导出的画布大小一般需要手动调整效率一般。导出格式的选择也有讲究。图标、logo、带透明背景的装饰物用PNG或SVG照片、渐变背景用JPG或WebP需要保留动效的动图用GIF。不过现在前端项目里已经很少用GIF了CSS动画和SVG动画就能解决绝大多数场景。3. 实操流程拿到PSD后这样干3.1 前置检查打开PSD后先看什么很多新手拿到PSD直接开始到处点图层其实这是一种低效的节奏。我说的前置检查就是把文件整体结构过一遍花五分钟搞清楚三件事第一确认画布尺寸。在图像→画布大小里能看到设计稿的宽高通常设计师会给出1920、1440或750等尺寸。这个数值决定了你网站宽度的基准判断。 第二看图层分组。默认情况下图层面板上会有很多组组名通常是HeaderBannerFooter之类。先展开组了解页面结构同时把所有图层组的眼睛打开确保看到的是完整设计稿。 第三找到所有红线圈出的标注。不少设计师会直接在PSD里加红色或半透明图层写上间距12px字号18px这类注释这些信息要第一时间看到。这个前置检查做得越充分后面工作量越少。尤其要注意的是图层组命名混乱、图层未分组的情况说明设计师给的是裸稿你更需要提醒自己边量边记录不能指望靠文件名猜属性。3.2 规范化切图流程含完整步骤我结合自己的长期实践整理了一套比较通用的切图流程这里提供给还没形成自己步调的同学参考。假设我现在要切一张带背景、一个图标、一个按钮、一行文字的设计稿区块总共要做的事情如下第一步定义整体切片区域 在视图菜单下先把显示→切片打开用切片工具快捷键C沿设计稿中该区块的边界画一个大切片作为本次开发的资源范围参考。注意这个切片只是个范围不一定直接导出主要是为了对齐参考线。第二步建立参考线网格 从标尺拖出垂直和水平参考线把区块内的主要元素边界都框出来包括图标左边界、按钮上下边界、文字区域的左对齐位置。参考线越多后续测量越方便。第三步按元素依次导出 如果是单个图层右键导出如果是多个图层组合先选中多个图层按CtrlG编组再右键组导出。导出的图片名必须按规范来例如icon-home.png、btn-primary.png、bg-banner.jpg。文件名规范这一条我希望所有前端都能重视因为它关系到代码维护的直观性。第四步检查透明像素边界 导出前查看画布四周是否有透明白边或零散像素。可以在图像→裁剪中基于透明像素自动裁剪这样导出的资源尺寸就是实际内容范围不会浪费空间。第五步归档整理 导出的资源放到项目路径的src/assets/目录中并按功能模块建子目录。桌面散落一地的临时文件后期改起来会非常痛苦。这套流程看着很简单但能坚持规范化执行的人不多。我自己早期就吃过随便命名的亏结果项目上线后要换主题我对着1111.png、2222.png这种文件根本分不清哪个对应哪块只能逐个图片看浪费大量时间。3.3 不同资源类型的切图策略我在实际工作中把切图的资源类型分成了四类每一类的处理方式都不太一样。图标类这类资源通常色彩简单、边界清晰。首选导出SVG因为它支持无限缩放且体积小。如果设计稿里只是位图没有矢量数据那就导出2倍图和3倍图分别对应的CSS后缀是2x和3x防止高分辨率屏幕上发虚。背景类包括页面大背景、模块背景、渐变背景等。如果是纯色或简单渐变根本不用切图直接从PS的图层样式中取值在CSS里写linear-gradient。如果是纹理或图片导出JPG并做压缩通常建议导出宽度和实际渲染宽度一致不要盲目导大图。按钮类小按钮建议切成九个切图方案中间的拉伸块保留圆角区域宽度方向可以拉伸。做法是切出左右固定宽度、中间可平铺的三块图或者直接用CSS实现渐变和阴影完全不用切图。现在很多按钮用CSS搞定实在需要切就导出可切片模式方便前端做好自适应。装饰类例如圆形光晕、花纹、折角等。这类要小心透明背景和阴影导出时要保证周围有一定留白否则阴影会贴边被切掉。另外可以看一下是否能用CSS伪元素和box-shadow复刻如果能成本比图片小很多。总的来说切图策略的核心是一个人简单判断能用CSS模拟的就绝不切图必须切图的尽量用SVG或高倍图涉及大面积照片的再上JPG/WebP。3.4 导出后的文件整理与轻量化处理切完图不等于完事文件整理和体积优化同样重要。多数前端项目是需要提交到代码仓库的图片体积直接影响首屏加载所以这一步要细心。整理方面我给每个模块建一个二级目录是基本操作。比如assets/icons/、assets/images/、assets/backgrounds/。文件名一律小写加连字符不要包含空格、中文或特殊符号。同时维护一份resources-map.md记录每个图片对应的设计稿位置和用途这样设计师改版时我们能在分钟内找到对应资源。轻量化方面我一般会用在线压缩工具或者本地脚本对位图做无损压缩。对于JPG调整导出质量到70到80就很合适对于PNG优先考虑是否真的需要256色如果是简单图标可以导出8位PNG体积能减少大半对于WebP现在的支持度很成熟与构建工具配合能获得明显收益。还有一个小经验当你发现某张切图超过200KB时十有八九是导出尺寸太大或者格式不对。先回去确认设计稿里元素的像素宽度是多少再确定实际渲染宽度是多少两者不一致时以后者为准。很多前端直接把PSD里的原始大小导出明明页面只占100px宽却导出了400px的图白白浪费流量。4. 常见问题与排查实录4.1 切出来的图模糊不清前端最常遇到的第一个问题就是切图模糊。这个问题主要有三个原因缩放比例不对、原始素材分辨率低、导出格式不对。缩放比例不对是最常见的。比如你在PSD里把一个图标放大到300%去查看然后直接右键导出PS是按当前视图分辨率导出的吗不是右键导出其实是按图层原尺寸导出的。真正导致模糊的情况是你在导出为面板里设置了小于100%的缩放。我会统一在导出面板里确认宽度数值和设计稿原始像素一致需要多倍图再手动乘以2或3。原始素材分辨率低这种情况常见于设计师从网上拉来的占位图被拉伸成两倍大小这种没法靠导出救回来只能跟设计师要源文件。排查时你可以双击图层缩略图看PS里智能对象放大比例是否超过100%。格式方面则要注意带文字的界面截图不要存成JPG文字边缘很容易出现压缩伪影有纯色边界的图标不要存成JPG会出现杂色一定要用PNG或SVG。4.2 导出的图片带有多余背景或白边明明图层里只有图标导出却带一个大白框这个问题我实习时天天遇到。本质原因是没有裁剪画布。PS里图层面板中画布和图层内容的范围经常不一致画布可能包含了透明区域或多余区域。解决办法是选中图层后先用Ctrl点击缩略图把图层内容选中然后在图像→裁剪中选择透明像素这样画布就会自动收缩到内容边缘。如果图层本身有投影或描边则需要手动把裁剪范围向外扩几个像素不要把效果裁掉。还有一种情况是图层上有一个隐藏的矩形填充背景只是你把眼睛关掉了导出时不注意还是选中了它。所以导出之前最好把图层组内的眼睛全部打开检查一遍确认当前导出的内容只有目标元素。4.3 字体缺失或文字变方框打开设计师给的PSD发现所有文字都变成了一个个方框或者字体被替换成了默认字体。这是字体缺失的老问题。此时第一件事不是马上问设计师而是自己检查能识别到的文字属性。双击文字图层进入编辑模式即使字体映射错了你仍然能看到字号、行高、字距这些数值。我会先把这些数值截屏记下来再去字体库网站安装缺失字体。如果所有字体都没安装可以联系设计师拿字体包但在等待的过程中你依然可以先把文字的颜色、字号、对齐方式梳理出来。另外部分PSD里字体被栅格化也就是文字变成了图层像素无法再编辑。这种情况下如果你需要在页面上实现文本就直接按视觉尺寸写CSS只是要注意这种文本在响应式条件下会无法自动缩放提前告诉设计师这一块的差异性。4.4 参考线对不齐、尺寸与设计稿存在偏差很多前端在PS里量的尺寸是1919px或959px总觉得自己眼花了。这往往不是你看错而是参考线的吸附位置和对象边缘没对齐。要避免这个问题我建议在视图菜单里打开对齐选项同时确保对齐目标是参考线网格图层边界。拖参考线时它会自动吸附到图层边缘这样测量才有意义。还有种偏差来自缩放比例PSD显示比例如果不能整除比如缩放为66.7%很多边缘的像素会被四舍五入导致选择范围差1像素。尽量用100%或200%的缩放来操作快捷键Ctrl1会瞬间切回100%视图。尺寸对不上还有一个隐蔽原因设计师在制作时采用了画板或者智能对象缩放某些元素并不是原始像素尺寸。遇到这种情况就把智能对象右键通过拷贝新建智能对象再栅格化处理或者直接以外部CSS的测量值为准跟设计师确认最终视觉。5. 提高效率的进阶技巧与个人心得5.1 把重复性操作录制成动作前端拿到设计稿后经常会重复做一件事导出图标对图标命名统一后缀压缩。这类重复流程完全可以交给PS的动作功能。举个例子我录过这样一个动作选中某个图层组 → 新建画布裁剪到组内容范围 → 图片导出为PNG → 自动关闭文档。录好之后每次要导出图标我只需要选中组按一下快捷键PS就自动帮我操作完。这个功能虽然听起来很专业但录制动作用到的按钮其实很少打开窗口→动作面板点击新建动作然后按正常流程手动操作一遍PS就会记录每一步。要注意的是录制过程中不要加入鼠标随意移动的操作指令要尽量用快捷键和菜单命令否则播放时会出错。对于不会录制动作的同学也可以改认一个更省事的思路尽量使用前面提到的生成器功能只要图层命名为指定路径就自动导出本质上已经是一个轻量级的自动化方案。5.2 与构建工具配合实现自动化单个PS操作再熟练也无法替代前端工程化的整体效率。我更建议你把切图、压缩、合成雪碧图这些任务交给构建脚本。前端稳定可用的工具链很多比如在代码仓库里配置图片压缩脚本或者在构建流程中引入自动生成WebP版本的插件这些都不需要手动介入。我这里说一下典型思路先从PS导出高质量的原图提交到源码目录构建时开发环境用原图生产环境自动压缩、自动生成对应尺寸的响应式图片。这样既保证开发调试时清晰可见又保证上线时体积最小。前端的职责是把PSD中的资源准确提取出来而后续的工程化处理就交给自动化的流程来兜底。或许你会问我如果不熟悉这些工具怎么办那就先从手动压缩开始至少保证提交的资源体积在合理范围内。等哪一天你发现每次都要重复压缩太麻烦自然会去研究构建工具的配置方法。5.3 格式选择的最终建议良好的格式意识能够省掉很多net性能问题。结合我自己的项目经验我通常按以下优先级做选择资源类型首选格式备选格式原因图标/logoSVGPNG2x矢量清晰、体积小简单UI元素PNG-8PNG-24 / WebP透明清晰且体积可控大背景/照片WebPJPGWebP压缩率更高渐变/纯色CSS生成—无请求、无限自适应文字HTMLCSS—可选中、可SEO实践中最容易踩坑的是把照片背景导出成PNG体积可能比JPG大四五倍或者以为WebP万能结果遇到老版本浏览器不支持最后还是要做兼容。我的习惯是默认输出WebP加JPG双版本代码中按需引用。5.4 配合测量工具的走查闭环PS不只是产出资源更承担着设计走查的职责。我每次写完页面会把浏览器截图和PSD放在同一屏幕的左右两边逐模块比对。这个过程其实也用不到太复杂的PS技巧主要还是参考线和吸管。我会在PSD里用参考线标出关键区域的中心线、上下间距然后在浏览器里用开发者工具直接测量两边数值一对比就清楚哪里差了。还有一种办法是利用颜色取样器一次性标出多个目标颜色然后把CSS里的颜色逐一粘贴到PS的颜色面板做色差比较色差很小的话可以忽略超过5%的色差就要调整。走查时有时会发现设计稿里确实存在像素对齐不完美的情况比如间距不是整数。这时你不需要硬跟可以在CSS里取整然后同步告知设计师通常设计师会接受。我自己最后还有一个小习惯把所有当前项目的PSD文件和切出的图片资源放在同一个design/目录下并在云盘中建立链接方便团队任何人随时取用。处理过两三套大型设计稿之后这个习惯能省掉大量沟通成本。写到这里前面就是我做前端这些年来和PS打交道的全部核心心得了。说实话PS这类工具并不复杂前端需要的也就是那十几个命令和面板它更像是连接设计稿和代码的一根导管。熟练之后你会发现最大的瓶颈其实不是操作技巧而是你有没有一套清晰的处理流程从整体结构到细节参数再到资源输出每一步都有章法。如果这篇文章能在你下次打开PSD时帮上一点忙那就算我没白写。遇到具体操作拿不准的地方多试几次快捷键练熟切图这件事真的会越做越轻松。