Sketch 进阶与技巧
一:App 设计标准
- Point (PT)
- Point (PT) - 表示独立于设备的
像素点 (在 Android 上叫 DP)
- Point (PT)和像素的关系
- 像素点: 相同 Point 的按钮, 在 Retina 屏幕上的图片像素是非Retina屏幕的两倍
- 通过 @2x 后缀标识
iPhone 分辨率的终极指南
iOS App 设计尺寸标准
iPhone 分辨率的终极指南
iOS App 设计尺寸标准
极客学院的视频教程,地址点我。总体上算是入门了,有待熟练要多做几个练习。
Sketch 的优点
Sketch 的弱点
1.添加图层
Shift 和 Option 的使用
2.选择图层
同时选择多个图层
重叠图层
3.移动图层
4.改变大小
5.锁定图层
1.基本图形
2.图形编辑
点的控制手柄
矢量工具
封闭路径 VS 开发路径
Shift
添加锚点
3.布尔运算
4.变形工具
5.蒙版
6.剪刀工具
7.复制旋转
1.添加文本
2.文本检查器
Text Style
3.文本转换问轮廓
渐变效果
4.文本字体的技巧
Fonts:找了半天,原来
1.位图编辑
高斯模糊
Color Adjust
反选
剪裁
填充
2.九宫格
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.
}
}
Time is not enough, and always not do as schedule.