真香!设计神器 Sketch 65 进阶指南(建议收藏)

2020年05月13日 104点热度 0人点赞 0条评论

我在日常的工作中会做一点设计相关的工作,工作之外,我也依然会抽空来尝试不同的设计风格,这一点相信早期关注我的小伙伴应该会很熟悉,有没有发现无论是封面图或者文章首尾的图都变得越来越精致了呢?

不知道我们小伙伴中有多少是设计师呢?欢迎在留言区亮出你的职位~即便不是,你或许也听说过Adobe家的设计双子星Adobe Photoshop和Adobe illustrator吧!不过,相信「Mac软件天堂」接触过设计的小伙伴一定都知道Sketch,这是Mac上几乎与上面提到的Adobe家两款软件齐名的神器,它的图标是一颗钻石💎,当然也有钻石品质,可能是Mac最强大的移动应用矢量设计工具了!

Sketch对于网页设计和移动设计者来说,比PhotoShop好用N倍!尤其是在移动应用设计方面,Sketch 的优点在于使用简单,学习曲线低,并且功能更加强大易用,支持自动切图,并且具有移动设计模板,能够大大节省设计师的时间和工作量,非常适合进行网站设计、移动应用设计、图标设计等,功能非常强大👍!

咱们今天的标题是Sketch进阶指南,为了对得起这个标题,内容一定得干货,废话不多说,咱们这就走起。

软件安装及界面介绍

从下方下载链接获取Sketch软件包后,按照其中的提示将软件拖拽至“应用程序”文件夹即可成功安装。安装完成后直接打开,即可进入以下这个界面,就像其他任何一款好用的软件一样,左侧栏提供了使用教程和一些必要的工具,让你可以轻松上手:

Sketch默认提供了Android Icon Design(安卓图标设计)、iOS App Icon(iOS应用图标设计)、Material Design(材料设计)、Prototyping Tutorial(原型设计)、Web Design(网页设计)四种模板供你选择,如果你都不满意,还可以选择「最近使用」新建空白文档,随心所欲设计自己想要的作品。

新手入门

对于刚接触Sketch的新手来说,任意打开新建一个空白文档,就可以进入如下的编辑界面,简单插入一些形状和文字,尝试顶部菜单栏的各种功能,就可以慢慢上手Sketch。

我简单地将Sketch划分为以上的4个部分,从顶部至下部左中右依次是“顶部功能区”、“左侧页面&画板区”、“编辑&预览区”、“右侧属性区”,其对应的功能分别是:

(1)顶部功能区:添加各种素材,例如形状、图片、路径、画板等,同时还可以实现各种元素的编组、缩放、布尔运算等,是最核心的功能区域。

(2)左侧画板&页面区:像PS一样可以分图层清晰地显示每一层的内容,还可以通过插入画板仿真模拟素材的实际显示状态。

(3)中间实例编辑&预览区:最主要的操作区域,所有的元素创建、移动、组合等操作均在此区域完成,可以直观地看到作品的全貌。

(4)右侧属性区:针对不同的素材显示不同的属性选项,例如最基本的图片和文字的属性就不一样。添加任意元素后选中,即可在右侧属性区域自定义元素的属性。

新手进阶

我一直认为最好的学习方式就是研究别人的作品,遇到不懂的问题就用搜索引擎或者在知乎等社区寻找答案。你完全可以下载一个别人做好的Sketch源文件,花时间去拆解每一个模块是如何做出来的,再带上自己的理解重新复原一份作品,相信你会有很大的进步的。

图中的这份是我在网上Download的一份电商APP的Sketch源文件,用来作为今天的示例文件,每一个文件都可以单独拆分学习,感兴趣的小伙伴可以到UIKIT(http://www.uikit.me/)下载(非广告)。

同时,为了最高效地帮助你上手Sketch,我这里要特别强调的是注意对Sketch“Symbol 组件”的使用,“组件”可以帮助你快速实现最不同页面中重复使用素材的快速编辑。

创建组件也很简单,制作好一个需要重复使用的元素后,选中该元素,单击顶部“工具栏”中的「组件」按钮,即可将该元素转化为一个组件。以后在任何一个页面需要用到的时候,只需要复制一个过去使用即可。当后期需要进行修改的时候,只需要双击其中任何一个即可进入编辑界面,修改一个即可实现对所有相同组件的修改。

Sketch插件

我在「Mac软件天堂」分享过这么多的软件,我总结了一个规律,越是那些为人称赞的神器,肯定会有各种各样的插件来丰富其功能,比如:Chrome 浏览器、Adobe Photoshop、Final Cut Pro等均是此类。

Sketch当然是这样的神器,有非常多好用的插件可供你选择,我今天推荐几款我认为比较好用的三款插件,如下:

(1)一键汉化插件 SketchI18N

下载后双击打开即可,安装完成后重启Sketch即可完成汉化,以下即为汉化后的Sketch(不过之前有小伙伴反馈说新版本的sketch已经原生支持中文,所以如果安装成功即是中文的小伙伴就不用安装这个插件啦~)。

(2)一键搞定产品页面标注插件 Sketch Measure

安装此插件后可以在Sketch中标注任意元素的尺寸和位置等信息,精确到像素。具体的使用方法是依次点击“插件”-“Sketch Measure”-“Toolbar”调出工具栏,然后任意选择一个元素,点击标尺图标即可看到详细的位置信息。

除此之外,Sketch Measure还提供了标注图层或文本层的信息,如填充颜色、边框颜色、不透明度字体和字号等丰富的功能,实在是Sketch必备良心插件。

(3)Sketch设计稿转换为Axure内容插件 Axure RP

Axure作为使用最多的原型设计软件,可是产品汪的必备恰饭工具,UI设计也是必备技能,在Sketch中设计好后,可以用这款插件把Sketch设计稿转化为Axure支持内容,可以直接在Axure中粘贴使用。

如果你还想了解更多的Sketch 相关内容,可以访问SketchUI(http://www.sketchui.net/)网站了解更多的内容(也不是广告)。

一点感想:学习任何一款软件都有从入门-上手-熟悉-精通的过程,不同的阶段所需要的时间也不一样,Sketch是一款可以轻松上手的软件,但是要做到精通其实也不容易,需要不断反复地练习及领悟。

 

软件下载地址:https://www.macfans.org/thread-37588-1-1.html

 

 

 

麦客孤独

保持饥渴的专注,追求最佳的品质

文章评论