Sketch创建手机APPUI界面教程-实战教程-Sketch教程

                                         

最近看了几篇推荐sketch的文章,于是心里长草,想来试试。因为重点在试试软件,所以选择临摹一张作品,换了个色调嘻嘻。sketch只有mac版,特意换了公司的mac mini。

               


  •                                                                                    查看《Sketch 初探》原图,原图尺寸:640x1136                                                



    先看最终成品,是介个样子滴






  •                                                                                    查看《Sketch 初探》原图,原图尺寸:1424x1084                                                



    打开sketch,file -open new template-- ios ui design
    新建模板文件,打开以后长这样
    左侧的列表相当于ps的图层。中间是视图区域,一个文件可以同时展示、制作几个页面,有点类似illustrater的画板。右侧的列表融合了ps中的属性、字体样式、图层样式等




  •                                                                                    查看《Sketch 初探》原图,原图尺寸:250x152                                                



    这里我们只做一个页面体验,所以删除一个“画 板”,sketch中叫Artboart。在“Start here” 或者“instruction”那里右击--删除。 如果想增加Artboard,点击insert--artboard,然后在想增加的地方拖动一个矩形,不用担心大小,可以在右侧列表中调整大小、位置、 背景色等。




  •                                                                                    查看《Sketch 初探》原图,原图尺寸:253x111                                                



    双击start here 可以修改名字




  •                                                                                    查看《Sketch 初探》原图,原图尺寸:962x1084                                                



    选择图层,点击右侧列表中的 no symbol,会出现一个下拉框,惊喜就在这里了,iOS的每部分的模板都在这里了哈哈




  •                                                                                    查看《Sketch 初探》原图,原图尺寸:924x480                                                



    lz选了一个navigation / menubar,原来的组就变成了熟悉的样子,拖动一下放在合适的位置,拖动过程中会有红色的边界线帮助定位、也有自动吸附功能




  •                                                                                    查看《Sketch 初探》原图,原图尺寸:957x819                                                



    修改背景色为白色,颜色那里除了纯色还可以选择径向渐变、线性渐变、填充图案等
    在图形单击默认选择组,可以双击进去图层。
    修改文字的话直接在文字位置双击就可以修改了,按快捷键T,是用来插入文字的。




  •                                                                                    查看《Sketch 初探》原图,原图尺寸:954x611                                                



    insert--sharp--rectangle  快捷键R,创建矩形,并为这个矩形创建symbol,然后arrange--make grid 参数如下图,适当调整长度




  •                                                                                    查看《Sketch 初探》原图,原图尺寸:487x483                                                


                                           



  •                                                                                    查看《Sketch 初探》原图,原图尺寸:958x479                                                



    随便建个组,选择symbol,


  •                                                                         查看《Sketch 初探》原图,原图尺寸:954x875                                                

    设置背景颜色,吸色工具可以洗到整个屏幕任意位置的颜色。增加按钮(insert--sharp)先画一个矩形,在右边栏设置圆角半径(radius),再画一个三角形,可调节三角的高度

  •                                                                         查看《Sketch 初探》原图,原图尺寸:339x166                                                

    创建图形,为文字和分割线create symbol(工具栏或者右边栏no symbol下拉列表中)。起个合适的名字,后面相同设置的元素可以调用这个symbol。

  •                                                                         查看《Sketch 初探》原图,原图尺寸:340x248                                                

    同理创建更多元素

  •                                                                         查看《Sketch 初探》原图,原图尺寸:1069x1168                                                

    复制一份“1.gerenral info”组。 在右边栏symbol一栏选no symbol。然后对其进行修改。否则原始组也会跟着变动。

  •                                                                         查看《Sketch 初探》原图,原图尺寸:1069x1168                                                

    调整颜色文字到这样,然后为这个组create symbol,起个自己能辨识的名字

  •                                                                         查看《Sketch 初探》原图,原图尺寸:1317x1168                                                

    复制一组,移动位置,修改文字,中间加一个矩形工具制作的分割线

  •                                                                         查看《Sketch 初探》原图,原图尺寸:1317x1168                                                

    最后创建色块和按钮。按钮加了类似ps的描边效果,在右边栏的borders 一栏。border可以叠加很多层。


    第一次写教程,略混乱,见谅。很多功能在本次临摹中没用到,比如直接把图层中的图形切图导出,可以导出@2x的图 等等功能。直观感觉就是sketch就是专门为GUI设计的,比ps这样大而全的软件在GUI领域更灵活适用。
    参考资料:http://www.ui.cn/project.php?act=view&id=13517&pm=1&p=2
    http://www.teehanlax.com/tools/
    http://www.ui.cn/project.php?id=12192
    http://bohemiancoding.com/sketch/



原文地址:http://www.zcool.com.cn/work/ZMzYwMzA0OA==.html