ps插件蓝湖使用教程

哈喽，大家好，那这一节课呢，就教大家我们一般在 ui 设计当中，特别是设计完界面之后，与程序员如何去做交接。那么这里的话呢，我们先讲交接的其中一个部分，就是我们的切图， 那么这里的话呢，呃，带来了一款工具，这款工具呢叫做蓝湖，蓝色的蓝，湖水的湖，那么大家可以自己去百度搜索一下，然后并且去下载一下他的插件。 ok， 那这里的话呢，我们就用 ps 来教大家， 那这里的话呢，我们先把这个退出， ok， 然后呢比如说我这里用 ps 做了一个界面，对吧？那这个时候呢，我们与程序员做交接的时候，他是需要去切一些图片的，比如说我们的按钮啊， 或者说我们一些图标，比如说这里有一个放大镜，那么我们都知道在界面当中呢，这一个放大镜他是搜索的意思，那如果说我们用户在这一个界面当中去点击这个放大镜，那么他会跳转到一个搜索页面， 也就是说他会进行一个跳转，那其实这一个跳转呢，就是一个用户的交互的一个过程。好，那这里的话呢，像这一个一般我们怎么去给他切出来那 一种方法？其实这里教两种啊，第一种的话呢，就是我们我们不借助任何的工具去进行切图， 那首先的话呢，我们都知道我们每一个图标可以点击的图标，他都有一个安全区域，或者说有一个热区，也就是这个图标可以被点击的一个区域。那么比如说我这里这一个图标 设置的一个区域尺寸大小呢？是五十乘五十个像素，比如说我们可以把它的呃这个矩形给他设置出来，对吧？像这一个蓝色的矩形五十乘五十，那么里面这一个包含了这个图标本身的一个图形在内，所以说我们需要把它切出来， 但是我们把它切出来的时候呢，一定要把这个旁边的这五十个像素一块包含进去。那我们在不借助任何的工具的情况之下呢，比较简单，首先的话呢我们可以停，我们可以把这个矩形一块放这里，然后我们可以把它的不透明度设为零， ok， 然后这个时候呢我们可以选中整个主，就是这个主包含这一个不透明的五十个像素，那么这里我们可以给他转为智能对象，把整个主转成智能对象，然后双击打开，打开进来之后呢会是一个全 全新的画布，那么这个画布的尺寸刚好就是五十个像素乘以五十个像素，那么这个时候呢，我们就可以直接把这一个新的画板或者说新的画布给他导出来。但是我们导出来的时候呢，格式的设置一定是需要用选择 png 的格式，如果说有 png 八， png 二十四，那么我们就应该选择 png 二十四，因为二十四的质量会更高。然后这个时候呢，我们直接就点击储存就可以了，并且把这一个文件的名称去命名一下就可以了，然后放在你的桌面，到时候呢与其他与其他的这一些图标 快发给这个程序员，那么这一个就 ok 了。当然这个方法呢是我们在不借助任何的工具的情况之下，那如果说有工具的话呢，我们就会便捷很多，因为很多 之后，我们一个页面当中需要切的图标往往可能有几个，甚至多达十几个，那这个时候呢，再加上我们整一套 app， 他的页面通常都有十几个页面到几十个页面不等，所以说这种情况之下呢，如果手动的去处理每一个 呃图标的话呢，其实我们耗费的时间往往会比较比较多，所以这里的话呢，就教另外一个借助工具的方法，那么这样子的话呢，也可以大大提升我们的切图效率。那如何借助工具呢？像刚刚的话呢，我们已经说过了，像蓝壶这个呃插件，我们就可以去使用。 ok， 比如说我们在百度搜索蓝湖，然后直接打开他的官网。好的，那这一个就是他的官网，那么我们可以可以再下载 这里面呢，去下载他的 ps 插件。当然他目前的话呢，也支持 sketch， 包括 ps， 包括 xd， 包括 x 锁这一些，还有以及蓝图他自己的 app。 那如果说我们只是用 ps 的话呢，那么你就选择 ps 插件去下载，那其实包含它里面他整一个呃插件的使用呢，都是免费的，也不会进行任何的收费，那包括在他的官网当中呢，也有一些比较简单的一些教程，也可以去看一下。 那这里的话呢，我们就直接开始操作好，那比如说我们安装好这个蓝壶的插件之后呢，我们在窗口这里打开有一个扩展功能，那么在扩展功能里面会有蓝壶，我们给他打开，打开之后呢，他其实会呃让我们去注册， 或者说提醒我们去登录你的账号，那么你需要提前去蓝湖的官网去注册一个账号，并且把它登录上去就可以了。登录完之后呢，我们在切图的时候呢，简单的操作一下，比如说我们依次拿这一个，应该说依旧拿这一个图标， 我们先给他切回这个文件夹的状态，比如说这个图标，那么我们在切的时候呢，同样是需要保留这五十乘五十的像素出来的，所以这个时候呢我们也比较简单， 那么这个时候呢，在切图他这里会有一个上传跟切图的功能，那么我们选择切图， ok， 切过来之后呢，我们需要去标记一下我们的大小，当然我们最重要是选择我们整个文件夹，如果说你这里本身是没有提前像我这样子设置好 这一个五十的像素的矩形的话呢，那么你就需要去给他进行一个标记，那如果说你有的话就不需要了，那比如说 我们先来操作一下，如果说你只有一个图层的时候呢，我们选中他，选完之后呢，你可以在这里去输入你的安全区域的大小，比如说五十乘五十，设置好之后呢，点点击上面的标记就可以了， 点一下之后呢，他会自动给我们生成一个五十像素，成五十像素的一个矩形，这个时候呢这个矩形是一个呃蓝浅蓝色的， 包括他旁边会有一些蓝色的虚线描边，那他多出来的这个矩形我们不用去理他， 这个时候就算是标注成功，标注成功之后呢，我们回到切换啊，回到上传这里，那这个时候呢，我们 就上传我们这个画布，或者说上传我们的这个画板，当然你也要去结合一下你的设计稿的一个尺寸，比如说我现在这一个设计稿的尺寸，他是 ios 的两倍图的尺寸，对吧？那这个时候呢，我就需要去选择 ios 两倍图的一个尺寸， ok， 然后这时候我点击上传，那如果说你是有多个画板的时候呢，你就选择你选中的那一个画板就可以。如果说你整个文件里面呢只有一个画布，那么你就选择全部画板，然后我们点击上传， 这个时候呢等待他去上传就可以。上传的过程呢，主要取决于我们网络的一个速度，那上传成功之后会提醒我们直接点击去微博端查看，这个时候他会跳转回南湖的官网， 但这个时候呢跳转进来，他是另直接显示出我们刚刚上传好的一个界面，这时候呢我们就双击他这一个界面就可以了。 双击完之后呢，我们可以查看整个页面当中，比如说我们刚刚切的这一个图标，那么一旦有进行标注的图标的话呢，这里其实会有一个虚线，那么当有这样子的虚线的时候呢，就意识着我们刚刚已经标注好，并且已经上传上来， 引擎是没有问题的。那比如说像下面这一些呢，我们是没有标注的，所以说他是不会有这些虚线的，那没有这些标注的话，我们也没有办法把它下载下来， 所以你需要依次去把所有的图标标注好之后才可以上传上来。那像现在我们已经把这个搜索标注好了，标注好之后呢，我们是单击鼠标左， 首先单击他，单击他的时候呢，他也会去显示一些简单的信息，比如说他有一个尺寸的大小，对吧？比如说这里有二十五个 pt 的尺寸，包括他的填充等等，包括图标本身的一个造型都会显示在这里。那么这个时候我们去下载切图的时候呢， 在下面这里首先需要选格式，我们在如果是用 ps 的话呢，正常我们选 png 格式就可以了， 正常也是 png， 当然还有包括其他的，比如说可以 svg 啊等等这一些，但是 ps 如果说你直接选择 svg 的话呢，那这个 svg 他是会出问题的， 所以说我们选择偏居就可以，然后接下来呢他下面会默认勾选一二三三倍的一个尺寸，那这个时候你就自己去选择，通常我们只需要选择二倍跟三倍， 然后这个时候下载当前切图，如果说你整个页面当中所有需要切的图标按钮全部都标注好了之后呢啊，应该说标记好了之后呢，那么我们就可以直接选择 啊查看所有的切图，然后一次把所有的切图都给他下载下来，那这个时候呢，我们直接选择下载当前切图就可以，然后点击下载， 这个时候呢他会自动下载好一个压缩包，然后我们双击打开这个压缩包，那么在压缩包里面就会有刚刚我们上传好的这一个呃，搜索的一个切片，那这里的话呢，也会与我们刚刚选择的两倍以及三倍的切片 作为一个吻合，那么这里最终就是下载两倍跟三倍的文件，那最终我们只需要把这个文件的名称 给他规范性的修改好，修改完之后呢打包发给我们的前端开发人员就可以了。那这一个切图的一个使用方法呢？主要就是这两个方法。