带你了解超好用的SKETCH插件

 

  通过上两节的文章,大家可能已经对sketch这款软件的基本操作有了一个大概的了解。但很多朋友可能会有疑惑,”好像sketch的功能也没有那么强大啊?””也就是个普通的矢量绘图软件吧?” 恩,你错了,因为你忽略掉了一件东西—插件。 插件是让sketch保持强大的独门绝技,很多软件看起来不支持的功能,通过插件都可以实现,大大提高工作效率。 下面,静电来介绍下sketch常用的,受大家欢迎的插件。

  一、安装插件的方法

  sketch有两种插件安装的方法,一种是传统的安装方式,另一种是通过一款叫sketch toolbox的小软件来快捷安装。

  首先看第一种安装方法,打开sketch(这里以最新版本的sketch3 为例),然后选择菜单 Plugins>Reveal Plugins Folder,即可打开插件文件夹。 打开后即可知道路径,不用刻意去记这个路径在哪里。


  打开后可以看到以一个个文件夹命名的,就是一个个的插件。以下就是静电的电脑中安装的插件。 目前sketch官网上零星分散着一些插件的压缩包(相关链接:http://www.bohemiancoding.com/sketch/support/developer/) 我们可以通过下载相应的压缩包,并解压到上述的Plugins下面,然后重启sketch,如果成功,在plugins菜单就会出现相应的选项。


  或者,可以直接解压文件夹,选择里边的以。sketchplugin结尾的文件,双击直接安装,出现下面的提示,则安装成功。


  但是,使用这种方法安装插件,需要一个个的找插件,非常麻烦。那么大家还记得静电在第一节的sketch教程中给大家的两个下载地址吗?一个是sketch安装文件,另一个就是关于插件的sketch toolbox。地址再贴一次给大家,没有下的同学一定要装哦(sketch toolbox下载地址:http://pan.baidu.com/s/1dD3VeUX),下载并安装后即可使用。打开sketch toolbox,大家会看到各种各样的插件,如下图:


  只需简单点击install按钮,即可方便的安装插件,再也不用费时费力的一个个的找了。

  二、插件推荐

  ok,这个时候大家可能会有选择恐惧症了,这么多插件,我要从何选起呢? 别着急,静电给大家推荐几款最常用的。

  推荐插件:Content Generator Sketch Plugin

  做app设计的时候,我们可能会使用各种各样的头像来营造真实效果。 但寻找头像并做遮罩是一件非常耗时耗力的事情,但我们又不想把头像做的千篇一律对吧? 这个时候神器来了,快来下载这款 Content Generator Sketch Plugin吧。 只需选中你要填充头像的图形,他会帮你随机选择并填充合适的图像。 看看效果吧。

  这个插件比较大,大概80m左右,所以请多耐心的等待下载完成。 如果实在下载很慢,那么请使用这个网址使用迅雷直接下载,然后按照上文的方法解压并拷贝到文件夹中:https://codeload.github.com


  当然随机生成用户名也是可以的。


  还可以有随机的大段文本生成。


  恩,这样的效果图,岂不是比做一个元素然后不断拷贝粘贴帅气多了?毕竟,我们的效果图要模拟最真实的效果不是吗?

  推荐插件:Sketch Measure

  我们在做完设计稿后,需要告诉前端开发工程师,图片是多大尺寸,这段文本是多大字号,间距是多少。这个时候,sketch messure就派上用场了,相比传统的标注方式,在软件内标注极大提高了我们的工作效率。我们只需选中两个元素,然后选择plugins菜单, 就可以标注图片尺寸,文字字号,间距等等等等,这一切不需要你自己一个个的打字上去哦,只需要告诉sketch你要标注那些元素,要标注什么,就可以一键搞定了。 效率极大提高,我们可以腾出更多的时间来更好的设计我们的作品了。


  tips:要标记,首先选择要标记的一个或者多个元素,然后选择plugins里的标注方式即可完成自动标注了。标注完成的设计稿,直接输出就可以给前端开发工程师了。

  另外要注意的一点,标注的时候,一定要选对相应的Design Resolution 。 安卓的按照安卓的解决方案标注, ios的按ios的方式标注。这样才能确保你的设计稿被前端工程师正确的实现出来。静电认为,这个标注非常方便,特别是标注字体的时候,插件直接按照标注解决方案换算出正确的字号,方便开发工程师调用。对于ios和安卓的标注,一般各自选择一套即可。 比如ios选择Retina,安卓可以选择xxhdpi或者xhdpi。


  推荐插件:icon stamper

  icon stamper是一个可以一键生成iOS多种图标尺寸的插件。 你只需要做一个最大的图标,这个插件可以自动帮你生成一整套各种尺寸的图标,然后可以一次导出。不用在ps中一个一个的设计啦。 来,让我们看看这款插件如何使用。

  首选,选择菜单 File > New From Template > iOS App Icon

  第二步,在名为iTunesArtwork@2x”的artboard中设计你的图标。 设计完成后,选中所有元素,按command+G组合成一个组,并选中这个组。

  第三步,选择 Plugins > icon-stamper > Icon Stamper 即可生成各种大小的图标了。

  第四步,选择File>Export,即可批量导出。


  推荐插件:Rename it

  对于app设计者来说,我们通常需要切出不同尺寸的图标来适应各种机型或者分辨率。这个时候,我们需要将某些参数体现的文件名或者图层名称,方便我们非常快速的知道,这个图层的属性,比如长宽高等等。 或者,我们需要批量将文件或者图层进行命名。 Renameit 插件可以轻松帮我们办到。

  目标:将图中的三个形状按照宽高来批量命名。

  第一步,选择要批量命名的元素。

  第二步,选择Plugins > Rename it ,在弹出的对话框中,设定命名规则。 这里要说明的是, %N %W这些都是变量,会根据图片的尺寸来自动填充,我们需要的是设定这个规则即可, 接着我们输入下面的参数(请自己填写文件后缀),然后确定。 这个时候图层就会按我们要的规则明明。


  图层命名规则参数:

  - 输入号 “+” 和你想添加的文本即可在适当的位置添加固定字符(如:+ button)

  - “%N” 将图层名按顺序加上数字后缀。“%n” 则是加上倒序的数字。(如:item %N)

  - 保留并移动原图层名: 输入新的图层名时,使用 “*” 号代替原图层名。(如:big * button)

  - 添加图层的长度和宽度:输入 “%w” 或者 “%h” 来添加图层的长和宽。(如:rectangle %w 或者 rectangle %w x %h)

  推荐插件:Duplicator

  使用这个插件,我们可以将一个元素有规律的复制并排列,并可以选择复制次数及间距。 使用很简单,静电就不截图演示了。

  推荐插件:Sketch Qrcode

  生成矢量二维码,直接在sketch中解决,不用再去找二维码生成网站了。

  ok,sketch强有力的左膀右臂已经介绍完毕了。有了这些插件,我们可以更方便的进行设计。 下一节,我们重点谈谈sketch的钢笔工具,毕竟,矢量软件嘛,路径什么的必须得及其熟练才行,小伙伴们,如果发现有其它好的插件,欢迎一起交流,也欢迎关注我的微信jingdesign91。 我们下期见。

时间: 2024-10-27 16:32:44

带你了解超好用的SKETCH插件的相关文章

基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)_jquery

这是一款基于jQuery的弹出对话框插件,这个jQuery对话框插件的最大特点是弹出和关闭都带有非常炫酷的动画特效,比如旋转飞入.上下抖动飞入等.效果图如下: 效果演示     源码下载 html代码: <div class="container"> <h1>jQuery gDialog Plugin Exampels</h1> <button class="btn demo-1">Alert Dialog Box&l

Sketch 插件介绍:Style Inventory(样式清单)

译者最近在做一个比较大的设计项目,才开始系统接触设计规范相关的内容,根据项目也需要生成一套样式清单供其他设计同事和研发团队使用.看到这款 Sketch 插件后发现有几个功能比较实用,比如能够一键汇总.导出所有项目/画板中所用到的颜色.字体样式信息.因此简单翻译了一下本插件开源地址的 Readme,希望有需要的朋友可以参考,原文地址如下:getflourish/Sketch-Style-Inventory · GitHub 注:原文页中有 gif 动图,因为专栏不支持动图显示,所以只截取了一帧,如

让你设计效率疾速提升的免费SKETCH插件

  尽管Bohemian Coding团队一直在尽力更新提高Sketch的易用性,完善功能和特性,但依然无法满足设计师和开发者的全部需求和愿望.好在开发者社区並沒有坐以待毙,而是积极地开始为Sketch开发各种各样地插件. 有些开发者打算用自己开发的插件替代系统预制的组件,旨在让GUI.图标和原型地设计拥有更大地定制空间,还有一些开发者则选择试图开发出提高工作效率,完善工作流程地组件,解决各种尚未完善地问题.如果你打算借助Sketch从零开始设计一个项目,那么下面介绍地许多插件和工具应该能给你极

25款轻巧实用的SKETCH插件大合集

  Sketch绝对是除了PS和AI之外在Mac 平台上最热门的设计工具,它更新迅速,功能完备,并且非常契合目前对于UI设计的需求,最重要的是,Sketch 小巧灵便不臃肿,还具有相当强大的可拓展性. Sketch 的优秀之处就是从它的可拓展性上延展开的,围绕着它的不仅有大量的设计师,还有一个活跃的开发者社群,许多优秀的免费插件都由此诞生.这些来自开发者社群的优秀插件从各个不同的角度完善.强化了Sketch的功能,让设计项目可以更加快速高效的完成.当然,在下载这些免费插件之前,请先装上Sketc

商品网页求推荐个全屏放大带手动轮播图片功能的js插件

问题描述 商品网页求推荐个全屏放大带手动轮播图片功能的js插件 解决方案 fancybox:http://www.coding123.net/eg/fancybox/

Windows 7自带解码器 支持超多格式

通过Windows 7,微软将给用户带来全新的多媒体播放体验,用户无需再到处下载解码器安装,因为, Windows 7本身原生支持的格式就已经相当多了.微软保证,像MPEG-4, 3GPP/3GPP2, AAC, AVI中的asp文 件以及AVCHD和HDV等格式都是在Windows 7支持范围内. 与之相关的解码器为H.264, MPEG-4, ASP和SP .同时,Windows 7在播放下列文件格式时都不会有问 题,.mp4 (A, V, A + V), .m4a (A), .mov, .

Sketch插件-Symbol符号的处理

Sketch3.7之前 符号是 Sketch 3 里一个重要的新功能,有些设计师又叫它模版,它功能确实像模版,你只要设计一组元素,并设置为 symbol,就能方便地在多个页面和画板中重复运用该组内容.你在某个画板中改变symbol某个元素的,其他各画板.页面的同组对应元素都会跟着改变. 符号其实就是一种特殊的组,在图层列表中也是以组的形式出现,但是不同于普通的组的蓝色图标,符号会有一个紫色的文件夹图标. Paste_Image.png 如何判断对象是否被设置了符号属性 在MSLayerGroup

超赞的jQuery幻灯插件 附下载

应朋友的邀请,帮他公司做jQuery缩略图正中间的为当前播放到的图片,两边呈发散状,逐渐缩小并降低透明度.假设当前正播放到第0张图片,则排列情况如下: 缩略图正中间的为当前播放到的图片,两边呈发散状,逐渐缩小并降低透明度.假设当前正播放到第0张图片,则排列情况如下: 0 1 4 2 3 按逆时针方向转一张图后的排列情况如下: 4 0 3 1 2 这个只是缩略图的播放效果,缩略图轮转时,后面有对应大图跟着从右到左滚进,并且大图进入的速度要对应着缩略图轮转,整体效果如下: 一个幻灯播放效果,效果如下

新手学JavaScript(三)----超酷消息警告框插件(SweetAlert)

HTML JavaScript API     今天给大家推荐一款不错的超酷消息警告框–SweetAlert:SweetAlert是一款不需要jQuery支持的原生js提示框,风格类似bootstrap.它的提示框不仅美丽动人,并且允许自定义,支持设置提示框标题.提示类型.内容展示图片.确认取消按钮文本.点击后回调函数等.和传统的alert相比: SweetAlert 能在页面自动居中,支持桌面环境,移动端和平板,并且高度自定义.接下来看看它的具体使用! HTML     首先引入相应的js和c