选中需要放进文件夹里的文件,然后按command+G,就会自动生成文件夹并把需要放进的文件包含进去了。(组 Group)

选中需要锁住的图层,然后按command+shift+L就可以将图层锁住。(锁:Lock)

按快捷键T就可以自动弹出文本输入,然后编辑就可以了。

 
 假如你找不到合适的字体做设计,可以选择mac系统都会自带的字体:
 
 右键字体图层,转为路径图层,就可以做手工的修改:
 
 
 按shift+o可以画圆
然后把圆放进前面path文件夹内,它也会变成可编辑的path。
 
选中需要编辑的对象,然后按住option或者alt键,就会出现相对边距的距离,然后就可以按照实际情况调整居中:
 如果画一些组件,想偷懒可以通过自带的模板
 
 
 当你直接复制一个组件图层的时候会自动被设定为symble(可能不是这个单词),这个作用就是你修改一个组件,其它组件就会跟着一起做同样的改变,这个用途在设计需要统一重复修改大量的相同的组件可以大大节省时间,但是这里用户名输入和密码输入我们需要解除这个symble的绑定功能:
 解除symble:
 
但是:由于文字元素还是共享一个元素,所以选中一个text文本,然后修改style或者添加一个自定义名字的style:
 
 然后是使用图标,可以FQ访问国外的网站:(http://fortawesome.github.io/Font-Awesome/icons/)免费下载的图标,然后导入即可;或者在https://github.com/JakeLin/Font-Awesome-Symbols-for-Sketch直接下载sketch文件,然后打开,点击按钮:
 
就可以使用很多图标模板。
 如果找需要的图标,可以去那个国外的图标提供网站找相关的图标。比如网站上用户相关的图标英文是User,那么这个sketch相关的就是fa-User图标。
然后拷贝到设计文件中就可以用了:
 
 按control+L就可以带开方便调整布局的布条:
 如果按control+G就会出现方格线网也可以方便布局:
 
 然后呢,我们需要改一个细节:
 
 我们可以将图标改成空心,然后有边框:
最后的效果是:
 
 然后选中所有的图层所在的父级文件夹,并把文件名改为Login,按conmmand+D就会生成另一个文件夹以及所有图层,文件名(Login Copy),然后把文件名改为typing:
 
 然后要单独操作,就需要修改symble,然后单独操作:
这个是第二个UI视图,可以在输入有问题的情况下,呈现出来。
 继续选中整个图层,然后按command+D拷贝一整个视图,然后继续添加模板里的spinner图标:
 
 然后添加警示按钮的模板后,然后需要修改按钮的圆角,选中后再radius上设置就可以了:
 
 
 
 
 

《慕客网:IOS动画案例之会跳动的登入界面(上)》学习笔记 -Sketch的使用的更多相关文章

  1. 《慕客网:IOS动画案例之会跳动的登入界面(下)》学习笔记 -Sketch的使用

    导出选中的一个图片,比如这里我们选中background,然后点击软件的右下角,可以设置导出的尺寸: 然后添加1倍,2倍,3倍的尺寸,因为在ihpne6之后就需要这三个尺寸倍数的UI,以适应不同设备的 ...

  2. iOS开发——实用篇Swift篇&QQ登入界面实现

    QQ登入界面实现 我们知道在App Store中几乎所有软件都设计到账户的登入,而我们最常见的就是QQ,微信,在没有踏入程序员这条不归路之前,看到一个个的界面都感觉好高大上的样子. 在学习的过程中,自 ...

  3. 《慕客网:IOS-动画入门》学习笔记

    新建Cocoa Touch Class,语言是swift 然后继续为界面添加一个普通的View Controller,并且添加前面视图的静态table的转向剪头指向这个View Controller, ...

  4. 《慕客网:IOS基础入门之Foundation框架初体验》学习笔记 <五> NSDicionary + NSMutableDictionary

    int main(int argc, const char * argv[]) { @autoreleasepool { //字典, 存储的内存不是连续的 用key和value进行对应(键值) //k ...

  5. iOS动画案例(2) 仿网易新闻标题动画

      由于产品的需要,做了一个和网易新闻标题类似的动画效果,现在新闻类的APP都是采用这样的动画效果,来显示更多的内容.先看一下动画效果:   由于这个动画效果在很多场合都有应用,所以我专门封装了一个控 ...

  6. iOS动画案例(1)

       受人所托,做一个类似于qq账号信息里的一个动画,感觉挺有意思,也没感觉有多难,就开始做了,结果才发现学的数学知识都还给体育老师了,研究了大半天才做出来.    先看一下动画效果:   用到的知识 ...

  7. iOS动画案例(1) 仿qq账号信息里的一个动画

       受人所托,模仿qq账号信息里的一个动画,感觉挺有意思,也没感觉有多难,就开始做了,结果才发现学的数学知识都还给体育老师了,研究了大半天才做出来.    先看一下动画效果:   用到的知识点: ( ...

  8. 慕客网laravel学习笔记

    session中set方法使用 Session::set('user.username.age','18')嵌套使用得出$user = ['username'=>['age'=>18]]; ...

  9. ios 动画学习的套路 (二)

    有它们俩你就够了! 说明:下面有些概念我说的不怎么详细,网上实在是太多了,说了我觉得也意义不大了!但链接都给大家了,可以自己去看,重点梳理学习写动画的一个过程和一些好的博客! (一) 说说这两个三方库 ...

随机推荐

  1. [IR] Evaluation

    无序检索结果的评价方法: Precision
 P
 =
tp/(tp
+
fp)
Recall

 



R
     =
tp/(tp
+
fn)
 Accuracy   = (tp + tn) ...

  2. Spring Remoting: HTTP Invoker--转

    原文地址:http://www.studytrails.com/frameworks/spring/spring-remoting-http-invoker.jsp Concept Overview ...

  3. Flatic – 超齐全的 Web 元素界面素材库免费下载

    Flatic 是一个庞大的用户界面工具包,包含数以百计的网页元素,这将有助于你在 Photoshop 中轻松设计整个网站.成套的图标和动作都已包含在套件中.该素材包包括超过100个 PSD 元素.您可 ...

  4. "浅谈Android"第一篇:Android系统简介

    近来,看了一本书,名字叫做<第一行代码>,是CSDN一名博主写的,一本Android入门级的书,比较适合新手.看了书之后,有感而发,想来进行Android开发已经有一年多了,但欠缺系统化的 ...

  5. T4语法快速入门

    1.什么是T4? T4,即4个T开头的英文字母组合:Text Template Transformation Toolkit.T4(Text Template Transformation Toolk ...

  6. Java魔法堂:注解用法详解——@Override

    一.前言 现在有Son和Parent两个类,且类型Son将会重写类型Parent的getName函数.但不幸的是由于码农大意,写成如下代码: public class Parent{ public S ...

  7. Sprint第三个冲刺(第五天)

    一.Sprint介绍 实验截图: 任务进度: 二.Sprint周期 看板: 燃尽图:

  8. 怎样实现Web控件文本框Reset的功能

    在ASP.NET开发过程序,在数据插入之后,文本框TextBox控件需要Reset.如果只有一两个文件框也许没有什么问题,如果网页上有很多文本框,你就会有点问题了.再加上某一情形,一些文本框是有默认值 ...

  9. SqlDataReader、SqlDataAdapter與SqlCommand的 区别

    1.SqlDataReader,在线应用,需要conn.open(),使用完之后要关闭. SqlConnection conn = new SqlConnection(connStr); //conn ...

  10. C#的回调方法

    C# 里面回调方法一般指某个委托.也可以说是接口. using System; using System.Collections.Generic; using System.Linq; using S ...