从零开始学Sketch——进阶篇

从零开始学Sketch——进阶篇

Sketch是一款矢量绘图应用,而矢量绘图无疑是目前进行网页、图标以及界面设计的最好方式。

在初识了Sketch的界面布局和基础工具之后,我们就可以开始进入高阶的Sketch工具篇学习了。这篇文章主要会涉及Sketch模板、插件的使用,以及Sketch在具体使用过程中的一些技巧分享。

如果你曾接触过PS、AI、Axure等软件,那么接下来的内容你应该不会陌生,因为所有的设计软件学习的路径都是相似的,都是从认识基本功能框架到外部资源整合运用,最终形成个人风格的一个过程。

-39-39-1-39-3

Sketch模板

Sketch自带模板

Sketch自带模板也就是Sketch在file菜单栏下的template。

-40-40-1-40-4

进入Template

在使用的过程中,我们只需要将所需的模板复制到我们的Artboard中就好了。需要注意的是,在调整大小时需要固定长款比例。

Sketch自定义模板

在Sketchappsources网站中,有许多Sketch的模板可以下载,我们可以将这些控件导入到Sketch中。

亦或是在工作中,团队经常用到一些固定的组件,为避免重复劳动,我们可以把它们转存为模板。这个复用的思维跟Axure中的自定义母版是一样的。

具体的步骤如下:

  • Step 1
    下载或自建一个Sketch文档,内含需要导入的模板;
  • Step 2
    点击File下的“Save as template”;
-41-41-1-41-4

所有的Sketch文件都可以直接Save as template
  • Step 3
    给你的自定义模板命名;
  • Step 4
    点击模板菜单栏目录时就会出现你所自定义的模板了。

要运用好模板,除了平时多加积累素材之外,还需要注意模板与模板之间的独立不重复和规格的统一,比如iPhone手机顶端信号栏的宽度这样的细节。

Sketch插件

插件是设计软件必备的神器,无论是PS还是AI都有强大的插件库,当然Sketch也是如此。

安装插件的方法

Sketch的插件多是技术大牛写的,获取的方法有三个:

  • 方法一:下载Sketch Toolbox这个工具,在里面之间下载你所需要的插件库,然后在Sketch工具栏中点击Plugins就可以看到你下载的插件库了;
-45-45-1-45-4

Sketch Toolbox
  • 方法二:在Github上搜索自己需要的插件名,然后直接打包下载就好了。
  • 方法三:在Sketch的Plugin菜单下点击manage plugins,在弹出的对话框中点击“get plugins”。
-46-46-1-46-4

点击Get plugins,会跳转到sketch的官网插件库

推荐几个超炫插件

关于插件,建议一开始的时候不要安装太多。推荐以下几个插件库,可以满足日常工作需求:

  • Content Generator:可以自动填充类型图片、姓名、联系方式等信息,避免手动输入带来的不便;
stri

自动填充用户头像.gif
  • Rename it:
    这个插件的用途是批量修改图形名称。
    比如上面那个动图,我们可以全选所有的矩形,然后点击rename it插件,将其命名为“%N”,即可得到一串倒序排列的矩形命名。
    主要的规则有:

    • 输入 “%N” 将对象编号;
    • 输入“+”和“button”可以将所有选中的对象名变为以button结尾的命名;
    • 输入新的图层名时,使用 “” 号代替原图层名。如:big button,表示的是保留原命名,并在一头一尾加入big和button;
    • 输入 “%w” 或者 “%h” 来添加图层的长和宽。
  • Sketch Measure插件:
    这个插件可以添加图形尺寸、距离、颜色和文本属性的标注,并会自动把附注编组,方便你自己修改和管理。
-42-42-1-42-4

图形的长宽标注

运用Sketch Measure插件可以在团队合作的时候,可以更方便的把设计稿交付给相关同事。

  • Sketch Notebook:
    给一个对象添加注释、评论,可以更加自由地对设计稿进行标注和说明。
  • Sketch Color Swatches:
    这个插件便于我们在设计初期参考一些别的网站基础配色。

配合Sip这款取色工具,我们可以直接获得我们想要的网站配色。以简书为例:

  • 首先,吸取5个简书官网的主色色值;
-43-43-1-43-4
  • 然后,在Swatch插件中输入色值编号,得到色板。
-44-44-1-44-4

Color Swatches: 输入色值,得到色板
  • Export as Flinto Document: 这个插件可以将我们的设计稿转换为Flinto文件形式,以便在Flinto这个软件中完成动态交互设计,因为Sketch是不提供动态交互功能的。
    当然,现在也越来越流行Sketch+Keynote的结合了,说白了就是把Sketch里设计好的帧画面和元件拖拽到Keynote里,然后用Keynote构造原型。这也是一个不错的选择哦!

Sketch Mirror

要说Sketch脱颖而出的理由,很重要的一点就是它满足了实时在手机端查看的功能,这是Axure所不具备的。

在手机上下载Sketch Mirror这款APP,然后在Mac端工具栏中点击Sketch mirror,只要两台设备在同一wifi环境下,就可以同步查看了。

使用Sketch的快捷键

-47-47-1-47-4

快捷键一览表,感谢图片作者:康上明学

实战:制作图片分享APP-个人展示页

-48-48-1-48-4

运用模板和插件制作图片分享APP个人展示页

制作的步骤如下:

  • 画布设置与布局:选择iPhone 5作为Artboard,将画布分割为上下两部分,用矩形分割,将元素分组;
  • 打开template,选择iOS design UI模板,负责头部信号栏(白色)置于画布顶端,并调整大小;
  • 将图片展示部分用20个小正方形分割,并用content generator插件填充自定义为“views”的风景图片,同时设置将头像和封面照;
  • 输入文字,调整细节。

关于Sketch的进阶篇就介绍到这里。大家在平时的生活中可以多思考一下优秀APP的页面如果让你来做,你的思路是怎样的,然后去实践、运用,遇到不懂的地方就上论坛去问;同时,养成复盘每一个作品制作过程的习惯,想一想哪些地方可以优化,哪怕是很小的细节改善,都能带来很大的效率提升。

一起进步吧!

转载自:粽小喵   http://www.jianshu.com/p/ff70b5f35c8f#

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/12045/

(0)
iouedioued
上一篇 2016-01-06
下一篇 2016-01-06

相关推荐

  • sktch打造knob开关icon 附sketch破解下载!

    小编:今天带来的是由小乔分享的knob拟物小教程,对于想学习sketch小伙伴们或者已经在用的同学们 练习起来都是不错的选择,当然没有mac用photoshop也是可以能设计出来的哟,快来开动你们的脑筋和动手能力吧!(附sk…

    2015-12-23
  • sketch 3.6.1(破解版涵盖3.0以上版本) 安装and使用指南(20160303更新)

     截至2015  6月23 日  SKetch 常用版本  3.2.2 、 3.3.1 、3.3.2    3.4.4 截至2016 3月2日  常用版本 3.5.1 ,3.5.2  ,3.6.0  3.6.1 Sketch 安装指南 安装版本 : 3.2.2  3.3.1  3.3.2 安装环境:mac book pro 20…

    2016-04-13
  • Sketch从入门到精通 怎样切图及导出图片尺寸 免费版

    怎样切图及导出图片尺寸 在讲这一章之前,先把上一章提到的布尔运算给大家讲一下(如下图) 这是顶部工具栏区域的一小部分。布尔运算有四种形式,你可以根据你的需求来选择不同的方式。 合并形状 (Union):合并的结果…

    2015-07-03
  • Sketch从入门到精通-Sketch3 颜色填充

    颜色在做设计中是重要又必不缺少的组成部分,颜色有很多变化,丰富的颜色变化会给你的设计加分,Sketch里边,就对颜色有各种填充的效果,下面具体介绍一下,Sketch里边一共有六种填充效果,虽然你平常只用一两种,…

    2015-07-29
  • UE网出品:Sketch从入门到精通[免费精品课程] | 阿西UED&Smiler

    Sketch从入门到精通  讲师:阿西UED Smiler 参加时间:2015年6月24日 17:40 最后更新:2015年6月24日 17:40 适用人群: UI设计师、美工、视觉设计师、 对UI有兴趣的人。 简介 Sketch从入门到精通是由www.iamue.com …

    2015-06-25
  • [译]使用Sketch的10个小技巧

    随着Sketch越来越受到广大设计师们的欢迎,在这分享10个Sketch使用小技巧,希望能够帮助到正在学习Sketch的同学提升相关技能。 1、学会“Insert”的快捷键 什么是你在设计中最常用的?创建一个新的Artboard A,插入文…

    2016-07-20
  • Mirror镜像的运用- Sketch从入门到精通

    Mirror镜像这个只针对于设计手机界面的同学来说,比较有用。因为这是一个可以电脑做图和手机显示同步的一个功能。在Sketch的工具栏,你会发现这个Mirror,如下图: 看见了么?怎么样能实现和手机同步呢?首先你要在…

    2015-07-13
  • Sketch从入门到精通-Sketch3 九宫格

    九宫格 在做图的时候,有的时候需要把画面划分几个部分,分别进行设计。因为随着作图能力的提高,规范性和严谨性就需要提高。尤其是网页设计,一个好的网页设计不是杂乱无序的。 所以我们可以用Sketch里的九宫格,…

    2015-08-03
  • 字体的转曲-sketch从入门到精通

    字体在设计中是不可缺少的元素,无论你是设计海报,广告牌,网站,还是手机界面,都离不开字体。字体的运用也是设计中重要的组成部分。尤其是在做手机端界面设计的时候,一个像素都不能差。所以这就涉及到每个元素…

    2015-07-13
  • Sketch从入门到精通-Sketch3 神奇的测量键

    在做设计的时候经常离不开精准的测量,间距,字体的大小。尤其是在做移动端UI设计的时候,设计完的界面效果图还要输出标注规范给工程师们让他们去实现,这就离不开精准的测量。 在Sketch里面,有个神奇的测量键,你…

    2015-08-28