0%

Sketch 界面设计入门和实战

极客学院的视频教程,地址点我。总体上算是入门了,有待熟练要多做几个练习。

一:Sketch 概述

Sketch 的优点

  • 1.矢量
  • 2.文件小
  • 3.画布无限大
  • 4.每个图层都支持多种填充模式
  • 5.Symbol 和 Style
  • 6.强大的文件导出工具
  • 7.自动保留所有历史版本

Sketch 的弱点

  • 位图处理能力弱

二:Sketch 界面功能布局

  • 1.软件布局
  • 2.画布
  • 3.检查器
  • 4.图形列表

三:Sketch 基础工具-图层

  • 1.添加图层

  • Shift 和 Option 的使用

  • 2.选择图层

  • 同时选择多个图层

  • 重叠图层

  • 3.移动图层

    • Shift、Alt、Cmd+D
    • 隐藏图层
  • 4.改变大小

    • Cmd+方向键
    • Cmd+Shift+方向键
  • 5.锁定图层

四:Sketch 基础工具-图形

  • 1.基本图形

  • 2.图形编辑

  • 点的控制手柄

  • 矢量工具

  • 封闭路径 VS 开发路径

  • Shift

    • 选中多个点
  • 添加锚点

  • 3.布尔运算

  • 4.变形工具

  • 5.蒙版

    • 限制蒙版
    • 图形蒙版
    • ALPHA 蒙版
  • 6.剪刀工具

  • 7.复制旋转

五:Sketch 基础工具-文本

  • 1.添加文本

  • 2.文本检查器

  • Text Style

  • 3.文本转换问轮廓

  • 渐变效果

  • 4.文本字体的技巧

  • Fonts:找了半天,原来

六:Sketch 基础工具-图片

  • 1.位图编辑

  • 高斯模糊

  • Color Adjust

  • 反选

  • 剪裁

  • 填充

  • 2.九宫格

七:App 登陆界面制作完整步骤

Imgur

尚有一个 BUG,真机无法加载图片,模拟器可以。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
//
// ViewController.m
// Photo DEMO
//
// Created by Will on 5/24/15.
// Copyright (c) 2015 gewill.org. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()
@property (weak, nonatomic) IBOutlet UILabel *topLabel;
@property (weak, nonatomic) IBOutlet UILabel *descLabel;
@property (weak, nonatomic) IBOutlet UIButton *leftBtn;
@property (weak, nonatomic) IBOutlet UIButton *rightBtn;
@property (weak, nonatomic) IBOutlet UIImageView *imageView;

@property (nonatomic, assign) int index;
@property (nonatomic, strong) NSArray *imageDicts;

@end

@implementation ViewController

- (NSArray *)imageDicts{
if (!_imageDicts) {
_imageDicts = [NSArray arrayWithContentsOfFile:
[[NSBundle mainBundle] pathForResource:@"imageDate.plist" ofType:nil]];
}
return _imageDicts;
}

- (IBAction)clickLeftBtn:(UIButton *)sender {
self.index --;
[self clickBtn];
}
- (IBAction)clickRightBtn:(UIButton *)sender {
self.index ++;
[self clickBtn];
}

- (void)clickBtn{
self.topLabel.text = [NSString stringWithFormat:@"%d/%d", self.index+1, self.imageDicts.count];
self.descLabel.text = self.imageDicts[self.index][@"description"];
self.imageView.image = [UIImage imageNamed:self.imageDicts[self.index][@"name"]];

self.leftBtn.enabled = (self.index != 0);
self.rightBtn.enabled = (self.index != 4);

}

- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
}

- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}

@end

重新使用番茄学习法,Flat Tomato 设计非常简洁优雅。

使用计时器感觉时间过得飞快,也是平日里浪费时间习惯了。一晃一下午就过去了,什么都没做,就听歌看新闻了,关键是没有总结和互动,往往一个耳朵进一个耳朵出。

希望以后能够珍惜时间,做正确的事。

Imgur

极客学院充值月度 VIP,学习 iOS 视频,感觉他们的知识体系图和实战路径图很不错,按照一个大纲去学习的。

今天按照视频指导:制作汤姆猫小游戏,完成以下 DEMO。

其中发现我写代码中遇到很多小问题,google 就有答案的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
//
// ViewController.m
// Tomcat Game DEMO
//
// Created by Will on 5/24/15.
// Copyright (c) 2015 gewill.org. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIImageView *tomImageView;

@end

@implementation ViewController



- (IBAction)touchHeadOnHead:(UIButton *)sender {
[self tomAnimateWith:@"knockout" imageCount:81];


}
- (IBAction)touchEat:(UIButton *)sender {
[self tomAnimateWith:@"eat" imageCount:40];
}
- (IBAction)touchPie:(UIButton *)sender {
[self tomAnimateWith:@"pie" imageCount:24];
}
- (IBAction)touchScratch:(UIButton *)sender {
[self tomAnimateWith:@"scratch" imageCount:56];
}
- (IBAction)TouchDrink:(UIButton *)sender {
[self tomAnimateWith:@"drink" imageCount:81];
}
- (IBAction)touchCymbal:(UIButton *)sender {
[self tomAnimateWith:@"symbal" imageCount:13];
}
- (IBAction)touchStomach:(UIButton *)sender {
[self tomAnimateWith:@"stomach" imageCount:34];

}
- (IBAction)touchFootLeft:(UIButton *)sender {
[self tomAnimateWith:@"footLeft" imageCount:30];
}
- (IBAction)touchFootRight:(UIButton *)sender {
[self tomAnimateWith:@"footRight" imageCount:30];
}
- (IBAction)touchAngry:(UIButton *)sender {
[self tomAnimateWith:@"angry" imageCount:26];
}

#pragma mark - 动画执行方法
- (void)tomAnimateWith:(NSString *)fileName imageCount:(NSInteger)imageCount{
// 0. 判断是否正在执行动画
if (self.tomImageView.isAnimating) {
return;
}

// 1. 创建图片数组
NSMutableArray *tomImages = [NSMutableArray array];

for (int i = 0; i < imageCount; i++) {
NSString *imageName = [NSString stringWithFormat:@"%@_%02d.jpg", fileName, i];
NSString *path =[[NSBundle mainBundle] pathForResource:imageName ofType:nil];
UIImage *image = [UIImage imageWithContentsOfFile:path];
[tomImages addObject:image ];
}

// 2. 设置动画过程
[self.tomImageView setAnimationImages:tomImages];
[self.tomImageView setAnimationDuration:self.tomImageView.animationImages.count * 0.1];
[self.tomImageView setAnimationRepeatCount:1];
[self.tomImageView startAnimating];

}



- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
}

- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}

@end

一个简单地计算器,可以加减乘除,除法还有问题,待解决。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
//
// ViewController.swift
// Simple Calculator
//
// Created by Will on 5/24/15.
// Copyright (c) 2015 gewill.org. All rights reserved.
//

import UIKit

class ViewController: UIViewController {
@IBOutlet weak var text1: UITextField!


@IBOutlet weak var text2: UITextField!
@IBOutlet weak var result: UITextField!

@IBAction func BeZero(sender: AnyObject) {
self.result.text = "0"
self.text1.text = " "
self.text2.text = " "

}
@IBAction func plus(sender: AnyObject) {
// 三目运算符简洁,但是没有 if 逻辑清晰。
var num1 = self.text1.text.isEmpty ? 0 : self.text1.text.toInt()
var num2 = self.text2.text.isEmpty ? 0 : self.text2.text.toInt()


var resultNum:Double = Double(num1!) + Double(num2!)
println(resultNum)

self.result.text = "\(resultNum)"

self.text1.resignFirstResponder()
self.text2.resignFirstResponder()


}
@IBAction func minus(sender: AnyObject) {
// 三目运算符简洁,但是没有 if 逻辑清晰。
var num1 = self.text1.text.isEmpty ? 0 : self.text1.text.toInt()
var num2 = self.text2.text.isEmpty ? 0 : self.text2.text.toInt()


var resultNum = num1! - num2!

self.result.text = "\(resultNum)"

self.text1.resignFirstResponder()
self.text2.resignFirstResponder()

}
@IBAction func multiply(sender: AnyObject) {
// 三目运算符简洁,但是没有 if 逻辑清晰。
var num1 = self.text1.text.isEmpty ? 0 : self.text1.text.toInt()
var num2 = self.text2.text.isEmpty ? 0 : self.text2.text.toInt()


var resultNum = num1! * num2!

self.result.text = "\(resultNum)"

self.text1.resignFirstResponder()
self.text2.resignFirstResponder()

}
@IBAction func division(sender: AnyObject) {
// 三目运算符简洁,但是没有 if 逻辑清晰。
var num1 = self.text1.text.isEmpty ? 0 : self.text1.text.toInt()
var num2 = self.text2.text.isEmpty ? 0 : self.text2.text.toInt()


var resultNum = num1! / num2!

self.result.text = "\(resultNum)"

self.text1.resignFirstResponder()
self.text2.resignFirstResponder()

}
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
}

override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}


}



Imgur
Imgur

如何成为一名优秀的设计师:罗子雄
@TEDx Chongqing

##入门

##提高

  • 看 v2.0

  • 做 v2.0:模仿、参赛

    • 借鉴
    • 改进
    • 组合
  • 想 v2.0

虽然目录已经整理很好,但是为了多说话,我就讲讲的感受。 最近接触 iOS 开发需要做 logo 和 UI 设计,才开始接触设计方面,发现是一门创造美的过程。罗子雄说的方法很平白,也易于操作。但于我这般没有自律和执行力的人,报班学习最好,定闹钟次之,

自动打开我的网站 gewill.org 的 app。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//
// ViewController.swift
// Open gewill.org
//
// Created by Will on 5/21/15.
// Copyright (c) 2015 gewill.org. All rights reserved.
//

import UIKit

class ViewController: UIViewController {

override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
UIApplication.sharedApplication().openURL(NSURL(string: "http://gewill.org")!)
}

override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}


}


Github pages is too slowly, today I use gitcafe host my website by default. And resolve github to overseas users.

Read more »