前端必学PS技巧：取色、量尺寸、读字体、切图全攻略

不少前端同学一听到PS第一反应是这不是设计师的活吗我只要看标注、切切图就行干嘛要碰它。但只要你做过几个真实项目大概率会碰到这样的场景设计稿发过来没有标注想量个间距还得拿尺子在屏幕上比图标没切好要自己从PSD里拖出来颜色总是取不准代码里写的和设计稿差那么一点。这些事看着小卡起流程来却相当磨人。所以我说句实在话前端不需要把PS学成设计师但至少要把它当成一个“读设计稿”的工具。本文要聊的正是这类能直接提升前端效率的必备PS技巧快速取色、量尺寸、读字体、切图导出、常见问题排查。内容不烧脑都是我在实际项目里反复用过、也踩过坑的日常操作。如果你是刚接触PS的新人跟着步骤走就能上手如果已经会一点PS也可以借这篇文章查漏补缺把流程理顺。1. 为什么前端要学PS它不只是设计师的工具1.1 前端日常工作里PS到底扮演什么角色先说一个很现实的问题为什么前端要学PS答案绕不开“设计稿”这三个字。绝大多数开发流程里前端拿到的是一份PSD、一份标注图或者一个在线设计稿链接。标注图做得好的时候尺寸、颜色、字体都写在上面确实省事但更多时候设计师给的是一个裸的PSD或者标注只覆盖了首页、漏了二级页。这时候如果前端不会主动打开PS去量数据项目就会卡在无休止的“帮我看一下这个间距是多少”的沟通里。PS在前端手里的角色更像是一把尺子、一个色卡、一把剪刀而不是一块画板。你需要从设计稿里快速拿到元素的精确尺寸、元素之间的间距、颜色值、字体参数、可复用图标。这些信息凑齐了CSS写起来就非常顺畅。我见过不少同学一到切图就截图把一张全屏截图放进代码里再用background-position去定位页面一缩放出问题。问题不在于错误而在于他们没有把PS当成资源提取工具。所以学PS对前端来说不是学习修图而是学习“读取设计稿信息”的能力。这个能力一旦建立你会发现工作效率直接上一个台阶不需要等标注不需要反复问设计师自己就能把设计稿“翻译”成前端能用的数据。1.2 需要掌握的能力边界既然目标清晰那学习范围也就清晰了。前端必备的PS技巧只需要围绕四个方向取色从设计稿中准确获取颜色值并转换成CSS可用的HEX、RGB或HSL。测量获取元素的宽高、间距、圆角大小以及阴影和渐变的参数。读字体查看文字的字体名称、字号、行高、字距和颜色。切图把图标、按钮、背景等图层导出为透明背景、合适尺寸的PNG或SVG资源。至于调色、修图、合成、通道、蒙版这些专业设计技能除非你个人有兴趣否则完全不需要花时间去啃。把这些时间省下来多学几个快捷键、多熟悉几个面板对开发效率的提升更明显。我教过团队里的前端新人按照这个边界自学两三天下班时间就能把常用技能练熟之后切图基本不会再求人。有一点需要提前说PS版本不同菜单名称和面板位置会有细微差别。文章里的操作以国内使用较多的中文版PS CC/2020系列为例旧版本如果菜单名字不一样通常也能在“窗口”和“视图”菜单里找到对应选项不需要死记路径。2. 取色与色值管理从设计稿到CSS变量2.1 吸管工具的正确打开方式取色是前端使用频率最高的PS功能没有之一。默认情况下吸管工具的快捷键是I选择它之后鼠标点击设计稿任意位置前景色就会变成该位置的颜色。为了看到颜色值你需要打开信息面板快捷键F8面板右下角会实时显示当前鼠标位置的颜色。这里有个新手容易忽略的点信息面板可以设置取样方式下拉菜单里有“实际颜色”“平均颜色”等选项。对于纯色图标和文字用默认的实际颜色就行如果设计稿带了很重的纹理想要一个代表性的颜色可以切换成“3x3平均”或“5x5平均”来平滑。实际使用中我很少专门去切换吸管工具因为在大部分工具状态下按住Alt键不放鼠标就会临时变成吸管松开后回到原工具。比如我用矩形选框测量尺寸时想顺手吸个色就不用切来切去。但要注意在文字编辑状态下按住Alt可能触发其他功能使用时要习惯性地看一下鼠标光标的变化。另外前景色和背景色的切换是X键填充前景色是AltDelete填充背景色是CtrlDelete。这组快捷键在做图标变色测试时特别好用切到某个图层锁定透明像素然后按AltDelete可以直接把图标换成当前前景色省去了反复新建图层的麻烦。2.2 把色值从PS里复制出来取完颜色接下来要解决“怎么把色值拿到代码里”的问题。最直接的方法是双击前景色打开拾色器在对话框底部的“#”输入框里就是HEX值选中复制即可。这个方法操作稳定但步骤稍多。快一点的方式是在信息面板上右键点击颜色数值区域会弹出复制颜色的菜单可以复制十六进制色值不同版本菜单名称略有不同但基本都能找到。我自己常用的流程是先按I调出吸管吸取颜色然后看信息面板直接在面板里读HEX值。如果面板默认显示的是RGB可以点击面板右上角的菜单按钮把“模式”切换到“Web颜色”或“十六进制”这样面板里就直接显示#开头的值。注意吸管工具要设置在“取样点”上也就是取样大小选“取样点”而不是平均否则取到的颜色可能会有细微偏差。还有一个小技巧如果同时要取多个颜色做对比可以用颜色取样器工具快捷键仍然是I在吸管工具组里切换。它能固定几个取样点信息面板会把所有取样点的颜色值列出来方便统一记录。尤其在提取设计稿的主色、辅助色、文字色时这个方式一目了然。2.3 色彩模式与色域坑这一节值得认真看因为色差问题是前端最容易踩的坑而且踩了不容易察觉。打开设计稿后先看一眼图像模式正常情况下应该是RGB颜色。如果设计稿是CMYK模式屏幕上看到的颜色和浏览器渲染出来的颜色大概率有偏差因为浏览器是基于RGB工作的CMYK转RGB的过程会改变颜色外观。遇到CMYK的设计稿建议在设计源文件里先转成RGB模式再做取色和切图不要直接拿数值。第二个坑是色彩配置文件。在编辑颜色设置里工作空间需要选择“显示器RGB”或者“sRGB”。如果PS的颜色管理配置和前端大多数浏览器的sRGB默认空间不一致同一个HEX值在不同环境下看起来就会偏色。我遇到过这样的情况从设计稿中取了一个浅灰蓝写进代码后浏览器里怎么看怎么偏红检查了很久才发现PS的工作空间被改成了一种广色域预设。把配置改回sRGB后颜色就正常了。最后是显示器本身。很多开发者用的是笔记本屏幕色准一般取出来的颜色在别人屏幕上看可能就偏色了。这个没法用PS解决有条件的话做UI还原度高的工作时尽量用外接显示器或校色过的屏幕没条件的话多参考设计稿里的数值不要凭眼睛微调代码里的色值。眼睛会骗人数值不会。3. 量尺寸与间距前端还原设计稿的黄金尺3.1 标尺、参考线、信息面板怎么配合尺寸测量是还原设计稿时绕不开的环节。首先要保证单位正确。按CtrlK打开首选项找到“单位与标尺”把标尺单位设为“像素”避免出现“英寸”“厘米”这些奇怪的单位。然后按CtrlR显示标尺从左侧标尺往外拖就能拉出垂直参考线从顶部标尺往下拖就能拉出水平参考线。参考线的主要作用是对齐元素边缘让测量区域边界清晰。按下F8打开信息面板面板上会显示当前鼠标的坐标拖出参考线后参考线所在位置的坐标也会出现在信息面板里。用两个参考线之间的坐标差就能算出宽度或高度。不过这个方式偏手动效率更高的方案是用标尺工具或矩形选框工具直接测。一个很实用的细节视图菜单下的“对齐”功能如果开着鼠标靠近参考线、图层边缘或文档边缘时会被吸附拖参考线和画选区都会受影响。如果你发现参考线总是贴不住想放的位置或者矩形选框一拖就跑偏去“视图对齐”里把不需要的吸附项关掉再试试看。测量时需要的是精确数值吸附反而添乱。3.2 用选区测量间距的完整流程这里分享一个我每天都在用的测量方法非常简单。第一步用矩形选框工具快捷键M在待测区域拖出一个选区比如从按钮左边到文字左边。第二步看信息面板面板中间位置会实时显示选区当前宽高也就是W和H的值记录下来即可。如果选区已经画好信息面板上还会有X和Y对应选区的起点坐标。用这个方法可以量宽度、高度也可以推算出间距。比如我想知道一个卡片内部左侧内边距是多少就用选区从卡片左边缘拖到文字左边缘W值就是内边距。想在两个元素之间找水平间距同样选中两者之间的空白区域W值就是间距。这个思路很直接但真的很高效因为不需要新增参考线也不需要算坐标差。更精确一点的方式是使用标尺工具。标尺工具藏在吸管工具组里按住I键切换几次就能找到或者右键吸管工具图标选择标尺工具。用它从一个点拖到另一个点信息面板会显示长度L、水平距离W、垂直距离H以及角度A。这个工具特别适合测量斜线或旋转元素比如做斜向分割的模块、渐变角度等。测量时为了对齐边缘建议把视图放大到200%以上鼠标落点会更准。3.3 常见测量误区第一个误区是认为视图缩放会影响尺寸。PS里显示比例是Ctrl加号/Ctrl减号缩放后标尺数值不会变但人眼容易误判。我见过有人把视图放大到400%后用屏幕上的像素点去估算间距结果设置的值和实际差距很大。记住测量以信息面板数值为准不要目测。第二个误区是坐标起点不同。同一份设计稿不同元素可能在同一个画布里但信息面板的坐标原点默认在画布左上角。如果你要比较两个元素的右边位置不能只看X需要加上元素的宽度。选区和标尺工具能直接给出区域宽高会比单看X坐标更不容易算错。第三个误区是单位混用。PS的标尺单位可以在“像素”“点”“毫米”之间切换如果设计稿的DPI设置特殊像素和毫米之间会换算得莫名其妙。所以前面才强调做前端开发一律用像素页面相关的尺寸才能直接映射到CSS的px上。4. 字体信息读取与图层结构梳理4.1 快速读取字体名称和字号拿到一个设计稿要还原文字最怕的就是“看起来像黑体但不知道具体是哪款黑体”。正确的做法是选中文字图层打开窗口字符面板面板顶部就是字体名称下拉框下面依次是字体样式、字号、行高、字距、所选文字的颜色等参数。如果面板里显示的字号和预期不符检查一下是否选中了全部文字还是部分文字不同的选择范围会显示不同参数。有些设计稿里的文字已经被栅格化也就是把文字变成了普通像素图层字符面板就读取不到任何字体信息了。这种情况通常会出现在老版设计稿或导出截图里。遇到之后先别急着猜可以在图层面板右键文字图层看看是否能“转换为智能对象”或“编辑文字”如果是栅格化图层这些选项是灰的。此时只能联系设计师要到原始文字信息或者用识别字体的工具辅助判断不过效率不高所以最好让设计师在交付说明里附带文字规范表。还有一个容易被忽略的点写前端代码时设计师用的字体可能并不在你的项目授权范围内。很多中文字体在设计稿里看着不错但考虑到版权和体积实际网页中往往用系统字体栈或开源字体替代。所以读取字体参数时重点关注字号、行高、字重和大小写字体族按项目规范映射就好不建议为了一个标题去购买一堆昂贵的字体授权。4.2 图层结构前端组件化的参考好的PSD源文件图层命名是有规律的头部、导航、轮播、按钮、文案一类的标签清清楚楚分组层级也和页面模块一致。拿到这样的设计稿我会先把图层面板从头到尾看一遍相当于读一遍设计结构。后续写布局时谁在哪个容器里背景和内容的分层关系脑子里就有底了。反过来遇到命名混乱的设计稿比如图层叫“图层1副本3”也别急。可以用图层面板自带的筛选功能按键只能看到文本图层这样可以快速找到所有文字信息。再看视觉层级设计稿中一个模块放在最上层、互相覆盖通常就是页面里的浮层或弹窗组件底部背景大概率是全屏或父容器。虽然不完全可靠但对还原布局很有参考价值。我个人的习惯是在开始写代码前把设计稿里的主要模块在笔记里列出来每个模块标注尺寸、间距、字体、背景色然后按照这些信息去搭建组件。这个笔记相当于前端的“设计说明书”后续开发、联调、走查都能拿它对答案比反复打开PSD方便得多。4.3 读取渐变、阴影、圆角等效果参数除了纯色前端经常要还原按钮阴影、卡片阴影、渐变背景和圆角。先说阴影双击图层的缩略图打开图层样式面板这里会列出投影、内阴影、描边等效果。选中“投影”后可以看到混合模式、颜色、不透明度、角度、距离、扩展、大小这些参数。前端还原时把颜色和不透明度转成rgba距离对应CSS阴影的第一个长度值大小对应模糊半径扩展对应扩展半径然后微调。PS里的“大小”和CSS的blur不完全对等因为PS的阴影算法与CSS不同写出来以后要在浏览器里微调2-3px很常见不必追求完全一致。渐变的话用渐变工具点开渐变编辑器选中设计稿里的渐变图层或图层样式里的“渐变叠加”就能看到各个色标的位置和颜色值。前端用CSS的linear-gradient或radial-gradient去映射需要注意PS渐变的角度是顺时针、CSS的角度是逆时针换算时要做一次转换。比如PS里角度90度对应从下到上的渐变在CSS里是to top或270deg这个细节很容易搞反。圆角读取最直接的方法是画选区用矩形选框工具沿着圆角矩形的可视边缘框住它看信息面板的W和H之外再用圆角矩形的矢量路径去看四个角的半径或者直接问设计师。也有的设计稿里圆角是通过蒙版实现的不看路径还真难判断。所以我的建议是如果项目复刻精度要求高约定设计标注阶段就把圆角值标出来没有标注时先用肉眼和选区估一个接近值浏览器里对比微调。5. 切图从PSD到前端资源的完整实操5.1 切图前先做这些准备工作磨刀不误砍柴工切图之前花三分钟把设计稿理一遍能避免后面导出时反复返工。第一步确认设计稿的倍率。常见的有一倍图、二倍图、三倍图很多移动端设计稿是750x1334这样的二倍尺寸。这一步直接决定你导出的图片是按原尺寸还是缩小一半。第二步把不需要出现在资源里的图层隐藏掉比如参考线、辅助文字、红色批注、背景装饰等避免导出时混进多余内容。第三步检查画布尺寸。如果图标周围留白太多导出的图片就需要裁切导出为PNG时可以用画布大小调整到刚好包裹图形。还有一点经常被忽略切图前要保证图层面板里目标图层是可见的而且没有被缩放过。如果源文件里的图标被整体缩小过导出的位图会有轻微模糊建议找到原始智能对象或矢量图层回到原始尺寸再导出质量会好很多。对于简单的矢量图形优先考虑重新绘制成SVG或直接用CSS实现而不是导出PNG。比如纯色圆角按钮、简单的箭头、三角形、loading转圈这些用CSS代码就能还原加载速度比任何图片都快。5.2 三种切图方式按场景选择第一种是单张快速导出。在目标图层上右键菜单里有“快速导出为PNG”和“导出为”两个选项。快速导出最省事适合只有一两个图标的场景但它会按图层内容自动裁切如果图层里带有透明区域和隐藏图层要根据结果判断是否满意。“导出为”会弹出对话框可以选择格式、倍率、是否裁切画布以及大小更适合精细化控制。我的习惯是简单图标用快速导出需要控制尺寸和倍率时用导出为。第二种是切片导出。适合一个页面里有很多图标需要整体输出。先用切片工具快捷键C在画布上拖出切片区域或者选中图层后右键也可以在图层菜单中选择“新建基于图层的切片”系统会自动创建一个包裹图层内容的切片。然后按CtrlAltShiftS打开存储为Web所用格式旧版本用得多新版本推荐文件导出导出为。切片导出的好处是一次性把所有切片输出成独立图片文件适合整页资源批量交付缺点是切片设置比较繁琐以后修改后还要重新切。第三种是手动抠图导出。当图标不是独立图层而是埋在整张背景图里就需要先用选区工具把它抠出来。最简单的用矩形选框工具框住CtrlC复制新建文档CtrlV粘贴再导出为PNG。如果图标背景比较复杂用魔棒工具快捷键W点击背景选中后再删除或创建蒙版。技巧是选定选区内右键可以“选择反向”这样能快速把目标图形单独选出来。处理好边缘之后执行“选择修改收缩”1到2像素再用“选择修改羽化”0.5像素可以让边缘更干净避免抠出来的图形带一圈白边。5.3 倍图与压缩移动端开发图标要同时跑在高清屏和普通屏上这就需要多倍图。举个例子设计稿是二倍尺寸一个图标在CSS里设计大小是24px那PS里的原始图就应该是48px。导出时如果是二倍图直接用48px如果是一倍图需要把尺寸改成24px再导出。在“导出为”对话框里有一个倍率选项可以直接选择1x、2x、3xPS会自动换算并导出对应尺寸的文件非常方便。导出的PNG图片多半还需要压缩。在线压缩工具或者本地打包工具都可以针对PNG做有损或无损压缩如果图片是照片或大背景也可以考虑转成JPEG或WebP体积会小很多。但要注意透明背景的图只能是PNG或WebPJPEG不支持透明。图标这种颜色简单的图形压缩率通常很高压完以后肉眼基本看不出差别。资源体积对网页性能影响很大切完图不压缩直接丢进项目里首屏加载会明显拖后腿。5.4 自动与半自动切图的思路现在很多设计协作平台和插件可以直接连接设计稿自动读取画板、导出图标、标注尺寸和颜色前端几乎不需要打开PS就能拿到切图和标注。如果你的团队已经在用这类协作流程那是最好不过的可以大幅减少手动操作也避免前端和设计师因为标注小事反复沟通。我见过团队把设计稿资产直接对接构建流程后前端交付速度明显提升。但你仍然值得掌握手动PS切图的能力因为并不是所有设计稿都会走协作平台。存量项目里的老PSD、外部供应商发来的半成品、紧急修改的临时稿这些场景下只有打开PS才能拿到你想要的资源。手动操作练熟之后即使将来自动化工具覆盖率越来越高你也不会在某次没有工具可用的时候卡住。能力这东西越基础越不容易被淘汰。6. 常见切图与取色问题排查实战6.1 高频问题与解决速查表下面这张表是我在实际工作中整理出来的高频问题每一行都对应一个真实的踩坑场景按表格顺序排查能省不少时间。问题现象常见原因解决办法导出的PNG边缘有白边半透明像素混入背景或原图边缘未抠干净导出前用“图层修边去边”清理或先对选区执行1到2像素收缩后再导出图标导出来是黑色方块目标图层下面有其他图层或背景未隐藏导出前隐藏背景图层确认目标图层的透明背景没有被覆盖浏览器颜色与PS里差很多色彩空间不一致PS工作空间不是sRGB编辑颜色设置统一工作空间为sRGB后重新取色并导出图层里的文字改不了文字已被栅格化成了位图联系设计师要原始文字源文件或用智能对象里的源文件找不到埋在背景里的图标图标不是独立图层或图层被编组隐藏用矩形选框选中图标右键可通过拷贝的图层建立新图层导出量出来的间距总是对不上标尺单位不是像素或“对齐”吸附干扰首选项单位与标尺设为像素视图对齐里关闭不需要的吸附项导出多个图标非常慢一个个手动导出效率太低用“新建基于图层的切片”批量创建切片再一次性导出所有切片切出来的图标尺寸偏大没有确认设计稿倍率按原尺寸导出了确认设计稿是1x、2x还是3x在导出为里选择对应倍率6.2 定位图层的避坑技巧图层一多最烦的就是找不到目标。这里有几个很实用的定位方法。第一开启移动工具快捷键V在上方属性栏勾选“自动选择”点击画布里的元素时图层面板会自动跳到对应图层。第二在画布上右键PS会列出当前位置所有可见图层从列表里点击就能选中。这个方法在多层元素叠压时非常好用省去一层层展开分组找的时间。第三如果图层多到右键列表都滚动半天用图层面板顶部的搜索框输入图层名称关键词可以直接过滤显示。但前提是图层命名要有规律如果都是“图层1副本”神仙也难搜。我建议前端拿到设计稿后如果发现团队没有统一命名习惯可以稍微提醒设计师双方约定一套简单的命名规范比如“模块-名称-状态”格式对所有人都方便。还有一个高频操作想把某个图标从复杂图层里提取出来。用移动工具选中图层后按住Ctrl键点击图层面板中该图层的缩略图会自动载入图层中不透明区域的选区然后CtrlC复制、CtrlV粘贴到一个新图层再导出。如果图层被锁定先解锁再操作。这个方法可以避免在大画布里反复抠图。6.3 保底手段从大图中抠出图标现实工作中总有那么一些设计稿没给源文件只有一张JPG或切好的整图但你偏偏需要其中一个按钮。这时候只能用选区工具硬抠。简单背景的图用魔棒工具点击背景会出现大块选区然后右键“选择反向”把目标选中复制粘贴出来。如果背景有渐变魔棒会选得不干净可以配合快速选择工具W在目标边缘来回涂抹PS会智能扩展选区但涂抹要慢避免把无关部分选进去。抠完以后边缘通常会有背景残色也就是常说的“白边”或“蓝边”。处理方法是执行“图层修边去边”设置1到2像素或者先“选择修改收缩”1像素再羽化0.5到1像素后删除背景。这个操作要反复试直到边缘在深色和浅色背景上都看不出明显痕迹。我个人的经验是不要追求一次到位导出后用PS的200%视图检查边缘再微调。这里的底层思路是凡是导出给前端用的位图边缘一定要干净、透明不能带着背景色。否则放到深色背景上边缘就露馅了。所以选区和抠图技巧虽然看起来偏设计但对前端就是家常便饭。7. 把PS用成开发辅助的几点体会最后分享几条个人经验虽然零散但都是能直接少走弯路的。第一新装PS之后先把单位改成像素把颜色空间改成sRGB把不要的吸附选项关掉这些设置都藏在首选项里几分钟就能配好。配置一次后面每份设计稿都受益不用每次量尺寸时嘀咕数值为什么这么怪。第二多用图层右键菜单里的导出功能它能记住上次设置也就是说只要第一次设定好了PNG、透明、2x之后切图基本就是右键、导出、完成的节奏。第三遇到再急的切图需求也要先确认倍率再导出。我踩过最大的坑就是在二倍设计稿里直接把图标导出来了结果CSS尺寸写的是图标原始像素页面里所有图标看起来比设计稿大了一倍最后又重切一遍。从那以后我每次切图前都会看一眼画布尺寸和设计规范确认输出比例。第四和设计师稍微约定一下图层命名和交付规范哪怕只是“重要图层要有名字、标注文档要附带文字规范”都能让前端和设计师的协作顺畅很多。最后还有一个很实际的小技巧同一个按钮在不同状态下的颜色往往不好用吸管逐个去取。你可以把几个状态的颜色都记在前端样式注释里用CSS变量统一管理比如主色、悬浮色、按下色各定义一个变量后续换主题也方便。这个习惯帮我在多次视觉走查时几乎没有返工因为设计稿里所有颜色都映射到了变量表上改起来很快。前端学PS不是让你去当半个设计师而是把设计稿这本“说明书”读薄、读透而后把它翻译成高效稳定的页面代码。