xd怎么切图标注(xd怎么切图)

这可是好东西啊，真正万能的在线PS还能打开Sketch、XD文件

每个人的青春岁月一定会有Photoshop，尤其对于设计师来说，早期绘图软件选择不多，也没有在线编辑器可用，遇到网页图片需要编辑、修图或是制作广告横幅 ，Photoshop 就是最容易上手的工具。日常工作需要设计、编辑或制作素材的读者一定对绘图软件不陌生。

现在的软件或 APP 都开始采用「订阅制」模式，用户无需一次支付大笔费用买断，需要时才付费，亦可持续获得更新和支持，其实已经没有使用盗版软件的诱因。如果平常几乎不会用到绘图软件，临时需要编辑图片或是开启 PSD 图文件，除了寻找其他的替代方案，还有更简单的做法就是使用在线版绘图软件。

本文要推荐的「Photopea」号称是免费 Photoshop 在线版，因为它的操作界面就和 Photoshop 看起来很像，但完全不需要额外下载、安装软件，只要通过浏览器开启 Photopea 就能使用。这是一个非常神奇的在线图片编辑器，无论你要处理一张简单图片，或是对相片进行基本修图，甚至是高级滤镜或脚本等等都可以满足需求。

Photopea 本身也有中文界面，可开启像是 PSD、XD、Sketch、PDF、XCF、RAW 或任何图片格式（JPG、PNG、GIF、TIFF、TGA 和 SVG 等等），直接在浏览器就能运作的绘图软件。

当然 Photopea 用途并非要完全取代 Photoshop，如果你是工作上会需要用到 Photoshop 的人就不需要转换工具，倘若你和我一样可能计算机上没有绘图软件，但又临时需要打开像是 PSD 或是对图片相片进行简易的编辑工作，Photopea 是个非常推荐一试的解决方案。

补充一些惊人的背景故事，这个在线工具是由一位捷克的 28 岁工程师 Ivan Kutskir 独立开发，在历经三年半、每天五小时左右制作而没有赚钱的情况下，你可能会觉得相当不可思议！而现在开发者通过在工具内放入广告而有了不错的收入，非常励志的故事（也难怪 Photopea 会被称为在线图片编辑器之父）。

Photopea

网站链接：/d/file/gt/2023-09/zdhnbuklstc

▼ 使用教学

开启 Photopea 在线图片编辑器后如果看到的界面是英文，从上方找到「More — Language」选项往下就会看到「正体字中文」，选取后界面就会变成中文版。

从 Photopea 可以新增项目、从计算机打开 PSD、XD、Sketch 或图片档案，亦有提供两个范例文件用来测试网站相关功能。

在新增项目时 Photopea 会有一些预设的模板可供选择，比较特别的是建立时可以直接使用社群网站适用的图片大小，例如 Facebook、Instagram、YouTube 或 Twitter 等等。

将图片加载 Photopea 就能开始编辑，例如很常用到的滤镜效果：3D、模糊、变形、噪声、像素化、渲染、锐利化、风格化等等，点选上方选单就能快速加入效果。

和 Photoshop 一样滤镜效果也会可以调整的选项出现，像是高斯模糊就会有半径调整，也能在调整时实时预览图片变化。

一些对图片的基础调整像是亮度、对比、色阶、曲线、曝光、饱和度、色彩平衡、黑白效果等等也能在上方选单找到，左侧一整排的工具栏则是一般图片编辑器都会有的功能，将鼠标移动到图标停留就会显示功能名称。

右上角是每次编辑动作后就会更新显示的历史记录功能，右下角会有不同位置的图层名称。

Photopea 允许将编辑后的档案储存为 PSD 格式，或是转档储存为 PNG、JPG、SVG、GIF、PDF 或其他常见常用格式，其实就在线工具来说 Photopea 功能上算是非常完整。

如果你习惯通过快捷键进行相关的编辑操作，点选「更多」可以找到「热键」说明，比较有趣的是因为 Photopea 是在线工具，必须在浏览器上执行，当你将画面切换到 Photopea 后原有的浏览器快捷键就会失效，改为直接执行编辑器的快捷键（避免两边快捷键重复）。

注：此在线工具为国外网站，访问速度可能会比较慢，大家科学解决。

值得一试的三个理由：

免费 Photoshop 在线版，无需下载安装通过浏览器就能使用支持 PSD、XD、Sketch、PDF、XCF、RAW 和常见图片格式中文界面，可进行大部分的相片编辑功能

不知道怎么切图命名？UI设计师切图命名规范都在这里了

今天来给大家分享关于切图命名的规范，千千作为一名资深UI设计师，在命名规范方面可谓如火纯青~在与开发小哥哥的合作中会发现每一位开发小哥哥的命名都不一样，但大体不会有偏差太大的情况。有的开发小哥哥喜欢用缩写，例如背景：有的人会命名成缩写bg，有的人会命名全称background，个人觉得这个不是重点，关键是在于公司团队能够有一个统一的规则，这样全体成员都能严格遵守规范，会大大提高产品的开发效率，节约公司的开发成本。早期刚入行的时候公司还会就切图命名规范相关的问题来讲解，可见切图命名规范的重要性。好了，接下来开始今天的主题了！

切图命名规范的要求

1、所有命名全部为小写英文字母

原因是开发小哥哥的代码里面全是小写的英文字母，如何切图命名成中文的话，会导致开发小哥哥将命名全部更改，这样会耽误产品开发的进度。

2、所有命名不得出现大写以及中文和空格或其他符号，单词之间用_隔开

切图格式：Png格式通用切片命名格式：组件_类别_功能_状态@2x.png

举例：

tabbar_icon_home_default@2x.png（中文对应的是：标签栏_图标_主页_默认@2x.png）

模块特有切图命名规则

模块_类别_功能_状态 @2x.png

举例：

mail_icon_search_pressed@2x.png（对应的中文为：邮件_图标_搜索_ 默认@2x.png）

如果出现了很多图标的时候，可以命名为icon1、icon2、icon3...等，这样就不会出现重复的命名了。

大家可以举一反三，例如同一个banner广告位有三条banner，可以命名为banner1、banner2、banner3等。

常用英文单词表

如果有的英文单词很长的，可以将英文单词进行缩写，比如前面我们讲到的有的人会命名成缩写bg，有的人会命名全称background。其实这两种方式都是可以的。

切图命名英文缩写三个原则：

1、较短的单词可通过去掉“元音”形成缩写

2、较长的单词可取单词的头几个字母形成缩写

3、 此外还有一些约定成俗的英文单词缩写.

下面提供一些命名时常用的英文单词列表（有些是已经缩写过的，仅供参考）

bg（backgrond 背景）nav（navbar 导航栏）tab（tabbar 标签栏）btn（button 按钮）img（image 图片）del（delete 删除）msg（message 提示信息）pop（pop up 弹出）icon（图标）selected（选中）disabled（不可点击）default（默认）pressed（按下）back（返回）edit（编辑）content（内容）left/center/right（左/中/右）logo（标识）login（登录）refresh（刷新）banner（广告）link（链接）user（用户）download（下载）note（注释）

目前市场上有很多切图插件，虽然切图插件众多，但是我们团队用的最多的就是蓝湖，蓝湖有很多插件，并且可以自动标注，设计图可以树状连线，一键切图，还可以制作交互原型，产品文档共享。

Axure 插件Sketch 插件Photoshop 插件Adobe XD 插件

蓝湖官网：https://lanhuapp/?home

好了，今天就写到这里，希望对大家有所帮助~

如果你看完这篇文章还有什么疑问或想法，欢迎私信或留言与我交流。

我是@千千素材库：免费分享最新精选的插画设计教程、素材资源干货，喜欢我的文章请点赞、关注、转发、欢迎大家关注！

Adobe Xd教程丨 批量取消导出标记小技巧

各位使用Adobe Xd的设计师们注意啦，今天要教大家一个实用的小技巧--批量清除画板的导出切图标记。

首先我们思考一下，为什么我们要使用这个功能呢？回顾在日常UI工作中如果有重复菜单或内容我们一般会复制一个原画板再进行新的绘制，比如弹窗，我们会熟练地把需要做弹窗的画板直接拷贝一份然后加一个黑色蒙层在上面绘制弹窗的内容。

但是这种情况如果原画板我们添加了很多切图标记的话，生成自动标注的时候，开发同学看到你的弹窗页面就会是下面这个样子：

原画板切图标记

弹窗画板切图标记

开发小哥哥在线迷惑~

可以看到原画板切图标记很多，我们直接叠加弹窗的话在导出标注的时候切图标记会非常混乱，并且这些标记在上一个画板已经有了，这个画板其实不需要再标记了，所以我们可以在复制原画板的时候做一次批量清理画板的标记。

怎么批量进行清理标记呢？知识点来了！以macOS为例：

Adobe XD添加导出标记的快捷键是control+command+E，所以我们的给大家的方法就是连续按两次快捷键就可以清除画板的标记了，具体参考以下步骤：

首先鼠标拖拽框选中需要清除标记的画板，这里最好切换到图层视图比较方便，我们可以看到图层面板里选中了大部分的切图图层（蓝色选中状态部分）

接下来使用一次快捷键control+command+E，我们可以看到底部两个选中的图层组我们没有标记的标记上了

再使用一次快捷键control+command+E，可以看到红框内的标记已经全部清除。

那么有的小伙伴会问了，为什么会有一部分没有标记没有被清除呢？原因是因为这部分没有被选中，使用一次性拖拽是没有办法选定二级组的，这个操作逻辑很简单，选中——标记为切图——取消标记，所以如果有漏网之鱼大家可以手动选择再使用快捷键清除一下，快捷键要记住呦~

将多余的标记清除干净再将标注分享给开发，开发小哥哥一定很开心的哈！

题外话，原本标记狮希望给大家做一个一键清除画板标记的功能，实现后发现官方限制了插件编辑组件、重复网格内部的权限范围(XD版本:v33.0.12.8)，导致和Adobe Xd官方一样，也是没有办法做到一键清除的，像重复网格、组件、二级组这些都没有办法一次性清除标记，所以我们放弃了这个功能，还是希望官方后期能注重下这个体验，目前只能根据上述的快捷键办法勉强用用啦，至少可以清理一些真的很多余的切图标记，快来试试吧！