简介这是一款面向Photoshop CC及以上版本的免费标注扩展插件主要服务UI设计师、前端开发以及需要输出设计尺寸与交互说明的视觉工作者解决PS原生标注不便、需要反复手动绘制箭头和文字的问题。parker工具集成了水平/垂直距离、双向尺寸、箭头、矩形、文字描述、颜色设置与位置面板等常用标注能力安装后从扩展面板即可调用操作顺畅。资源包为zip格式共73个文件涵盖JS主逻辑脚本、JSXBin扩展代码、CSS界面样式、PNG图标素材以及XML清单与部署配置等多种类型内置jQuery与Topcoat界面框架整体仅207KB轻量且无额外安装依赖。其中PNG图标覆盖工具栏各状态CSS提供多主题外观XML清单用于插件识别整体结构清晰便于按需调整。部署时解压后直接复制至CEP的extensions目录即可生效需要注意的是该版本为早期免费版使用后请勿升级以免触发收费机制。目前已有2731人学习/下载适合需要轻量化标注方案的个人设计师与小型团队直接取用。1. parker不是画线工具PS标注插件要解决的交付冲突设计稿交付时最磨人的不是画图而是把每个按钮的宽度、间距、字号、色值一点点量出来再写上去。手动标注一张详情页少说四十分钟等开发把稿子改成三倍图又要重标一遍。parker这类PS标注插件要解决的正是这个“标注—改稿—再标注”的高频循环它选中图层就能批量生成尺寸线、坐标与颜色说明跟着设计稿的图层结构走不用一行行手写数字。免费版适合UI/UX设计师、运营设计和前端开发三类人——前两者要把设计意图说清楚后者要拿到一份不会读错的标注结果。这篇按“安装→实操→排错→联动→复核”的顺序把免费版跑通日常标注的路径和边界讲透。2. 装好parker免费版ps标注插件parker的安装途径与许可证边界2.1 先认准PS版本和扩展类型ZXP、CCX与手动复制安装parker免费版之前第一件事不是找下载链接而是确认你用的Photoshop是哪个大版本。PS扩展从技术形态上分三类老式ZXP扩展、新版CCX扩展、以及最低级的jsx脚本。parker免费版的发布格式常见是.zxp或.ccx后缀也可能直接给一个文件夹让你拖进去。后缀不同安装手法完全不同认错了后面会白折腾半天。原理层面这类标注插件运行在Photoshop的CEPCommon Extensibility Platform或UXP环境里。CEP面板本质是一个被PS宿主加载的迷你网页界面用HTML和JavaScript渲染底层通过ExtendScript调用PS的DOM API去读写图层、取尺寸、画引线。这就是为什么插件能否安装几乎完全取决于PS版本和CEP运行时版本——PS 2021之后开始转向UXP部分老插件不升级就用不了。你搜“ps标注插件parker”看到一堆安装踩坑贴十有八九都是版本不匹配造成的。判断方法很简单打开你的PS点菜单栏“帮助→关于Photoshop”记下大版本号比如24.x或25.x。然后看parker的下载页标注的支持版本免费版如果写明“支持CC 2018CC 2023”那你用2024、2025可能就要找对应新版安装包。我一般会先试.ccx双击安装不行再退回手动复制文件夹这是兼容性最好的兜底方案。2.2 把插件装进Photoshop完整步骤与一条自检命令以最常见的“手动复制到扩展目录”方式为例这是ZXP和文件夹型插件通用的做法。Windows和macOS的扩展目录不同但逻辑一致把parker的插件文件夹复制到一个固定位置PS启动时扫描到就加载。# macOS安装到当前用户的CEP扩展目录不需要管理员权限 mkdir -p ~/Library/Application\ Support/Adobe/CEP/extensions # 把parker插件文件夹整个复制进去实际路径按你下载位置改 cp -R ~/Downloads/parker_free ~/Library/Application\ Support/Adobe/CEP/extensions/ # 自检确认目录里已经有parker的文件夹和关键文件 ls -la ~/Library/Application\ Support/Adobe/CEP/extensions/ | grep -i parker # 看到类似 debug.jsx、index.html、CSXS 这些文件才说明复制完整Windows用户对应路径是C:\Users\你的用户名\AppData\Roaming\Adobe\CEP\extensions操作一样只是把cp -R换成右键复制粘贴。这段命令的逻辑是先建目录保证路径存在再整目录复制保留插件内部结构最后用ls | grep验证文件是否齐全。关键参数是那个“文件夹内至少包含CSXS和index.html”——CSXS是CEP扩展的清单目录缺了它PS根本识别不出这是插件index.html是面板界面入口缺了会报“无法加载扩展”。装完以后先别急着开PS还有一步关键操作部分PS版本默认不允许加载未签名的CEP扩展需要在注册表或系统偏好设置里打开“调试模式”。macOS在终端执行以下命令后重启PS# 允许未签名CEP扩展PS重启后生效 defaults write com.adobe.CSXS.12 PlayerDebugMode 1版本号按你的PS大版本改比如PS 2023对应CSXS.11PS 2024对应CSXS.12拿不准就全写一遍不影响。做完这步再打开PS菜单栏“窗口→扩展”里应该能看到parker的入口。 注意如果你下载的是.ccx格式双击后由Adobe Creative Cloud桌面端接管安装不需要进扩展目录。手动复制只适用于文件夹型和解压后的.zxp。2.3 免费版被锁掉的边界哪些功能值得你为它付费parker免费版不是“阉割到没法用”的试用版但你需要知道它的锁在哪里。装好打开面板凡是灰色按钮、带小锁图标、或者点击后弹“Upgrade/Pro”提示的就是付费功能。常见免费版边界是单次标注不限制图层数但批处理只能一张一张来自定义标注模板比如公司统一的企业色、LOGO水印、固定字号规则不可保存导出高清长图或一整套切图包被限制颜色标注只能取色不能手动微调色值。我的建议是先明确你的使用频率。如果一周只标注两三张UI稿免费版完全够用最核心的尺寸线和颜色标注都有如果你是团队里专门出标注重的人一天要处理几十张稿子那“自定义模板批处理自动切图”这三个付费点确实能把你从重复劳动里捞出来。别因为界面弹几个Pro弹窗就急着付费把免费版跑两周统计一下自己到底哪里被卡得最难受再决定值不值得。这里也想多说一句尽量用官网或正规渠道的免费版别去找来路不明的“破解绿色版”。标注插件要读写PS的DOM权限和你的设计稿同级来路不明的包等于把你的稿子暴露给未知脚本这个风险不比付费那点钱小。3. 一套带尺寸、颜色和说明的标注图免费版实操与参数表3.1 从选中图层到标注生成免费版的核心操作链路parker这类PS标注插件的操作逻辑几乎都是同一套选中图层插件读取图层的bounding box边界框在你指定的方向拉出尺寸线同时生成对应的尺寸数字、坐标和颜色信息。这一步省掉的不只是手动拉参考线的时间更关键的是“数据源单一”——数字直接来自图层不是人眼读出来的。免费版的标准操作链路是在图层面板选中要标注的图层可以是普通图层、文字图层或图形图层。确保该图层没有被锁定且不是“智能对象”内部的状态智能对象整体可以标但不能进到里面去标子图层。打开parker面板点“标注尺寸”或“Add Dimension”按钮。在画布上拖出标注线方向或者用面板里的预设方向按钮上、下、左、右一键生成。输入或修改标注文字说明点确认。这里最容易被新手误操作的是第2步。很多刚用插件的设计师选中的是一个处于“图层蒙版编辑模式”或“智能对象内部”的图层插件读不到正确的边界生成出来的尺寸要么是0要么是整个智能对象范围。免费版不会给你详细报错常见的反馈就是按钮点了没反应这时候回到图层面板把选中状态切回普通图层就好。关于“先解锁图层”这个习惯值得多说两句。Photoshop的老版本里背景图层默认锁定parker在读取锁定图层的bounds时不同版本的表现不一致——有的能正常读有的直接跳过。我自己的操作顺序是拿到PSD先全选图层Ctrl/Command双击解锁背景层再做标注。这个动作不花时间但能避免后面一系列“这图层怎么标不了”的玄学问题。3.2 四个必须改的默认参数单位、字号、引线样式与颜色免费版默认参数通常是为“快速出图”设计的直接出图能用但要达到团队交付标准下面四个参数必须改。这四样是parker免费版最影响交付质量的设置也是你在项目开始前应当固定的“标注规范”。参数默认值常见推荐值翻车点尺寸单位像素(px)按团队约定UI稿用px印刷用mm默认px出图运营拿去做线下物料会糊标注字号12px1824px字号太小开发放大看标注时线对不上字引线颜色#FF0000红与设计稿主色对比明显的颜色红色在暖色调界面上看不清坐标显示相对坐标绝对坐标相对坐标随画板移动变化开发会读晕单位这个坑最隐蔽。UI设计稿默认用px没有错但如果你的设计稿最终要交付给做印刷物料的同事比如易拉宝、展会背板parker免费版里如果不手动把单位切成mm或cm导出的标注图上所有尺寸都是像素值印刷那边没法直接用。换算规则是1mm约等于3.7795px但这不是你该在标注图上做的事直接把单位改对让印刷端拿到原生毫米数。字号和引线颜色是一对配合参数。引线颜色要保证在“当前设计稿的底图上”有足够对比度而不是在“白色画布”上有对比度。深色界面用亮黄或荧光绿引线浅色界面用深蓝或品红不要默认红色走天下。另外建议把“精度”参数设为“整数”不要带一位小数。开发量尺寸时看到“37.5px”这种值会默认四舍五入到38px但如果插件自动加了小数点反而引起误解以为你希望精确到0.5px。3.3 用ExtendScript接管标注输出免费版也能导出JSON标注文件免费版parker大多不支持直接导出结构化的标注数据只能出标注图。但做UI交付时开发往往想要一份“能搜、能复制、能写进代码注释”的标注信息。我的做法是额外跑一段独立的ExtendScript把选中图层的尺寸和坐标输出成JSON文件和标注图一起交付。这段脚本不是parker内置的功能而是我自己维护的一个独立脚本放在“文件→脚本→浏览”里触发。它的价值在于不依赖parker的付费导出功能也能拿到结构化的标注数据。// 导出选中图层的标注信息为JSON // 用法PS里选中一个或多个图层然后 文件脚本浏览 运行本脚本 #target photoshop var doc app.activeDocument; var selectedLayers getSelectedLayers(doc); var output []; for (var i 0; i selectedLayers.length; i) { var layer selectedLayers[i]; // bounds返回的是一个四元素数组[左, 上, 右, 下]单位是px var b layer.bounds; var info { name: layer.name, left: Math.round(b[0].as(px)), top: Math.round(b[1].as(px)), width: Math.round((b[2].as(px) - b[0].as(px))), height: Math.round((b[3].as(px) - b[1].as(px))), // 如果图层有纯色填充取它的前景色作为颜色标注 color: getLayerColor(layer) }; output.push(info); } // 把结果写到桌面上的 json 文件 var file new File(~/Desktop/layer_annotations.json); file.open(w); file.writeln(JSON.stringify(output, null, 2)); file.close(); alert(已导出 output.length 个图层的标注数据); function getSelectedLayers(doc) { // 遍历图层的简化版本这里假设所有选中的图层都在同一层级 var result []; for (var i 0; i doc.layers.length; i) { var layer doc.layers[i]; if (layer.selected) { result.push(layer); } } return result; } function getLayerColor(layer) { try { // 尝试读取图层颜色读不到就返回空字符串 if (layer.kind LayerKind.SOLIDFILL) { var fill layer.fillColor; return # fill.rgb.hexValue; } } catch (e) {} return ; }这段代码的逻辑分三块第一块遍历选中图层并读取bounds数组as(px)是把PS内部单位强制转成像素第二块把组装好的对象写进~/Desktop/layer_annotations.jsonJSON.stringify的第三个参数2控制缩进格式让文件在编辑器里可读第三块是两个辅助函数处理图层选择和颜色读取。参数说明里最需要注意的是Math.round——我故意做了整数化目的就是避免输出37.5这种让开发犯嘀咕的小数。颜色部分只处理了纯色填充图层渐变和图案图层读不出颜色会返回空字符串这正是免费版手工标注颜色时要你自己补写的位置。4. 标注插件的翻车现场parker免费版常见问题与排查4.1 插件装上了扩展面板里却没有parker这是安装类问题里出现频率最高的一条。现象是插件文件夹已经复制到CEP扩展目录自检命令也看到了文件PS重启了好几遍但“窗口→扩展”菜单里就是找不到parker的入口。原因是PS默认不信任未签名的扩展尤其是非Adobe官方商店的插件。CEP运行时在启动时会校验扩展的签名没有签名时直接跳过加载除非你在系统里开启了调试模式。很多安装教程把这一步藏在“疑难解答”里用户复制完文件就关掉网页自然踩坑。解决方法是回到2.2节那段defaults write命令确认CSXS版本和PS大版本对应关系没写错。如果写了版本号还不行打开PS菜单“编辑→首选项→插件”勾选“允许加载扩展并访问网络”重启后再看扩展菜单。这一步不用太早做但排错时可别漏掉。4.2 标注数字全是“”或乱码现象是parker生成的尺寸线正常但数字要么显示为问号要么是乱码符号要么是拼音字母。这通常发生在文字图层或者包含特殊字符的图层名称上。原因分两层。第一层是字体渲染问题插件在画布上写数字时用的默认字体在中文系统上没有正确映射导致字符显示异常第二层是编码问题parker把图层信息写进标注时如果图层名包含中文而插件内部是按英文编码解析的就会变成乱码。解决方法是先去parker面板设置里把“标注字体”改成系统中安装的中文字体比如“微软雅黑”或“PingFang SC”。如果设置里没有字体选项那就绕过插件显示层的问题在生成标注后选中标注文字图层手动把字体改为中文字体。图层名乱码则更简单——标注前顺手把图层重新命名用英文或拼音输出完再改回来。这确实有点麻烦但免费版对中文图层的兼容性就是这个水平算是血泪经验。4.3 编组图层和智能对象点不了标注现象是选中一个图层组或者一个智能对象parker的标注按钮是亮的但点击后画布上没有出现任何标注或者标注的尺寸大小明显不对。原因是图层组和智能对象的bounds计算方式和普通图层不同。普通图层的bounds是自身边界而图层组的bounds是组内所有子图层的并集智能对象更特殊它的bounds在PS的DOM模型里有时返回的是“对象整体范围”但某些版本或某些状态下会返回子图层范围插件读到不一致的数据就放弃生成。解决方法是把图层组先栅格化右键→栅格化图层样式或者转为普通图层后再标注智能对象要么整体标注要么双击进入内部把要标的子图层复制到外面标。这属于parker免费版在PS不同版本上的兼容性边界不是你的操作错误。判断依据就是看画布上有没有出现半个标注有的话就是数据源不稳定没有的话就是选中对象类型不被支持。4.4 撤销后引线和尺寸位置错乱现象是标注已经生成好了但你随后执行了撤销CtrlZ或删除某个图层再回来时标注引线的端点还留在原位但尺寸数字已经变了或者整个标注和图层完全错位。原因是parker生成标注时把尺寸线、箭头、文字分别放到了不同的图层或组里这些元素和原始图层之间没有绑定关系。Photoshop的DOM只记录“标注外观元素”不记录“这个标注来源于哪个图层的哪个bounds”你动过画布结构后标注就变成无根浮萍。解决方法是养成“最后加标注”的习惯所有设计调整全部做完确认不再改布局然后才开始跑parker。如果需要改稿先删掉旧的标注调整完再重新生成不要想着在旧标注上手动拉伸。免费版没有“随图层自动更新标注”的能力这一点跟Figma的Smart Annotate完全不能比别拿PS插件硬碰协作工具。4.5 点击导出得到一张空白底图现象是标注都显示在PS画布上但点击parker的“导出标注图”按钮后生成的文件是一张透明底或白色底的空白图上面的标注线全消失了。原因基本都指向一个方向导出的目标文档尺寸、色彩空间或图层可见性和当前的画布不一致。常见于导出时插件创建了新文档但没有复制所有标注图层或者标注图层被设置为“不可见”。还有一个典型情况你的画布是透明的导出格式选了PNG某些导出逻辑会把“透明”直接变成“空白清洁底”让标注线也一起消失。解决方法是不要用插件的导出按钮直接用PS原生的“文件→导出→存储为Web所用格式”或者用“存储副本”选PNG把背景图层填充为白色后再导出。这样标注内容和底图一起被拍平不会有透明通道问题。如果你要保留可编辑分层就直接存PSD把标注组和设计组分开放好。5. 让免费版接近专业版效率命名约定、JSON导出与切图联动5.1 用图层命名约定教parker识别标注对象免费版parker没有“记住上次标注”的能力但你可以通过图层命名约定把“哪些图层要标、标法是什么”这个信息固化在设计稿结构里。命名约定不是给插件看的是给你自己的肌肉记忆和给后续接手的人看的——但好的命名约定确实让parker的标注结果更整齐。我的推荐命名模式是类型_名称_尺寸_倍率例如图层名含义标注时的效果btn_primary_44x44主按钮44x44pt目标明确标注宽度高度各44倍率清晰icon_arrow_20箭头图标20px无需额外说明数字可直接用bg_gradient_full背景渐变整幅标注时直接跳过不需要尺寸线text_price_36_bold价格文字36号粗体需要标注字重和字号不只是宽高原理是parker这类插件读取图层名后会将其带进标注文本。如果你的图层名本身是“矩形1 副本2”这种PS默认命名标注图上的文字说明就是一堆无意义编号如果你在命名里包含了关键信息标注图上直接就能读出按钮尺寸和层级含义。免费版不支持自定义标注模板命名约定就是你成本最低的“模板”。5.2 把标注信息导出成前端能读的JSON在3.3节的导出脚本基础上再加一层命名解析就能让前端开发直接拿到“标注对象类型说明”的结构化数据而不是从图上肉眼读数。扩展脚本的重点在于解析图层名里的约定字段。// 导出带术语识别的标注JSON // 图层名规范类型_名称_尺寸_备注如 btn_primary_44x44 #target photoshop var doc app.activeDocument; var layers doc.layers; var annotations []; for (var i 0; i layers.length; i) { var layer layers[i]; if (!layer.selected) continue; // 只看选中的图层 var parts layer.name.split(_); var annotation { name: layer.name, type: parts[0] || unknown, // btn / icon / text / bg label: parts[1] || , // primary / arrow / price 等 width: Math.round(layer.bounds[2].as(px) - layer.bounds[0].as(px)), height: Math.round(layer.bounds[3].as(px) - layer.bounds[1].as(px)), size: parts[2] || , // 44x44 或空 weight: parts[3] || // bold / regular / 空 }; annotations.push(annotation); } var outFile new File(~/Desktop/annotations.json); outFile.open(w); outFile.writeln(JSON.stringify(annotations, null, 2)); outFile.close(); alert(JSON标注已生成 annotations.length 条);这段代码的变化有两个一是split(_)把图层名按命名约定拆成数组分别映射到type、label、size和weight字段二是宽度高度的计算直接引用layer.bounds的四个下标省去了中间变量。注意参数[btn, primary, 44x44, bold]这种结构前端拿到JSON后可以按type过滤出所有按钮再按label找到具体的某一个配合设计稿定位非常快。如果你的命名约定不统一解析结果就会一半字段为空这时候先回头整理图层名而不是怪脚本不好用。5.3 标注和切图一起出免费版也能完成3倍图交付UI交付里标注和切图是一对双胞胎parker免费版不自带自动切图但Photoshop自带的“图像资源生成器”Image Asset Generator可以补位。这个功能是原生的不占插件资源。原理很简单你只要把图层命名为文件名.后缀PS在保存文档时自动把该图层导出成对应格式的文件全程无需手工切片。我常用的三层图配置是这样目标图层命名生成文件说明1倍图icon_home.pngicon_home.png逻辑像素基准2倍图icon_home2x.pngicon_home2x.png宽度×23倍图icon_home3x.pngicon_home3x.png宽度×3iOS标准操作步骤先开“文件→生成→图像资源”然后把要切的图层复制一份重命名为带2x/3x后缀的名字CtrlS保存PS自动在PSD同目录下生成对应尺寸的PNG。这配合parker标注的尺寸参数传递一套信息parker标注告诉开发“这个图标逻辑上是44px”切图文件里3x给你132px的图开发拿到的信息才是完整的。需要注意的是图像资源生成器读取的是图层名也就是说你要为同一个图标放多个命名副本这在图层面板里会有点乱。我的习惯是单独建一个“_export”图层组把所有带后缀的切图图层放进去标注时不选这个组parker就不会把切图副本一起标进去。免费版做不到“标注一次、按倍率自动换算尺寸”但这个组合拳已经能覆盖95%的日常交付。6. 不用插件复核的三步走每条标注都得过这一关6.1 先对信息面板尺寸、坐标和颜色逐项核对插件生成的标注不等于一定正确。免费版parker最大的问题是它不会告诉你“这个尺寸可能读错了”。我复核时第一件事是打开PS的“窗口→信息”面板鼠标悬停在画布的标注关键点上对照信息面板的X/Y/W/H数值逐项核对标注数字是否一致。信息面板是PS原生渲染的数据可信度高于任何第三方插件。这个过程单张稿子大约多花三分钟但能拦下绝大多数“尺寸小数点多一位”“坐标偏移几个像素”的问题。6.2 再查图层结构标注层组与设计层组分离打开图层面板确认parker生成的所有标注内容都被隔离在独立图层组里和原始设计图层分开。这不只是为了整洁更是为了后续改稿时能“一键删标注改完再重新标”。如果标注线和原始图层混在一起改稿时误删一个原图层重标时连边界都找不到。新建一个“标注”组把parker每次生成的标注都归进去是免费版用户必须手工完成的规矩。6.3 把“手动复核”固化成交付前的默认动作深色界面、半透明图层、蒙版边缘这三类场景是免费版标注最容易翻车的高危地带。原因是它们的bounds在PS的DOM模型里可能包含透明像素或蒙版范围导致标注尺寸比视觉范围大一圈。我在交付前有一组固定动作把不透明度调回100%、隐藏参考线、放大到100%视图整体过一遍确认没有漏标、错标、超界标。这套复核动作不依赖任何插件能力纯粹是操作习惯。我见过太多人装了插件、出了图、直接丢给开发翻车后才回来改。尽管多花五分钟但至少不用在开发那边听到那句熟悉的“这里尺寸好像不对”。希望今天这套流程能帮到你以后不论用parker还是别的PS标注插件核心原则都不会变插件负责快人工负责准免费版不是让你省掉复核而是让你把省下的时间花在复核上。本文还有配套的精品资源点击获取