1
00:00:07,010 --> 00:00:11,200
Hey everybody what's going on this is Caleb with Deb's Loeb's dot com and in this video I'm going to

2
00:00:11,200 --> 00:00:17,590
show you how to create your own static stickers using sketch 3 as well as how to cut apart a sprite

3
00:00:17,590 --> 00:00:24,550
sheet to create the images needed to make an aping sequence so go ahead and actually pull open a brand

4
00:00:24,550 --> 00:00:26,050
new sketch 3 document.

5
00:00:26,050 --> 00:00:28,480
And if you don't have sketch three there is a free trial.

6
00:00:28,600 --> 00:00:33,430
And if your free trial is expired you might want to look into using pixel art or another free alternative

7
00:00:33,430 --> 00:00:33,820
program.

8
00:00:33,820 --> 00:00:39,850
So go ahead and pull open a brand new sketched document here and we're going to just simply create a

9
00:00:39,970 --> 00:00:42,280
basic sticker I'm going to create a cup of coffee.

10
00:00:42,310 --> 00:00:48,160
So I'm going to go ahead and create this bigger than I want it to be and then scale it down later so

11
00:00:48,160 --> 00:00:48,850
let's make it.

12
00:00:48,850 --> 00:00:51,140
How about 600 by 600.

13
00:00:51,560 --> 00:00:51,870
OK.

14
00:00:51,880 --> 00:00:54,470
Just to give me a nice big canvas to work with.

15
00:00:54,610 --> 00:01:00,230
And I think I'm going to start by making a rectangle for the base of the coffee cup.

16
00:01:00,340 --> 00:01:05,720
And how about yeah let's go ahead and make it white.

17
00:01:06,040 --> 00:01:10,410
And because of that I'm actually going to change the background color here to be kind of a darker gray

18
00:01:11,080 --> 00:01:13,820
and I'm going to exclude it from being included.

19
00:01:13,990 --> 00:01:15,090
So yeah.

20
00:01:15,100 --> 00:01:16,060
So there's that.

21
00:01:16,090 --> 00:01:17,250
This is cool.

22
00:01:17,290 --> 00:01:22,060
Now I'm going to double click to edit the shape and I'm going to pull these out one two three four five

23
00:01:22,060 --> 00:01:25,900
six seven eight nine 10 11 12 13 14 15.

24
00:01:26,110 --> 00:01:30,870
And for this one we're going to do a much more elegant job and just simply subtract 15.

25
00:01:30,880 --> 00:01:31,860
Very cool.

26
00:01:31,930 --> 00:01:38,950
And you know what I'm actually going to subtract another 10 and maybe another I'll add another 10 here.

27
00:01:38,950 --> 00:01:39,940
All right.

28
00:01:39,940 --> 00:01:40,770
So there's that.

29
00:01:40,810 --> 00:01:47,830
We now have kind of our coffee cup shape which is cool but now I want to add something on the top.

30
00:01:47,830 --> 00:01:52,840
I want to add the actual you know coffee cup thing so I'm going to create a rectangle again and I'm

31
00:01:52,840 --> 00:01:58,880
going to just drop it right on top there and shrink it down a ways and that looks pretty good.

32
00:01:58,960 --> 00:01:59,570
Let's see.

33
00:01:59,680 --> 00:02:01,380
Yeah that sits right on top there.

34
00:02:01,690 --> 00:02:09,550
And now I'm going to go ahead and create another rectangle and put it right there like so now I'm going

35
00:02:09,550 --> 00:02:14,370
to drag it a little bit wider so that it's a little better looking awesome.

36
00:02:14,710 --> 00:02:20,710
And I'm going to double click on it now and I'm going to go ahead and pinch this in maybe 25 and I'm

37
00:02:20,710 --> 00:02:25,000
going to subtract this point 25 as well.

38
00:02:25,000 --> 00:02:25,770
All righty.

39
00:02:26,110 --> 00:02:30,760
Now what I want to do is I want to actually remove the borders from all of these shapes.

40
00:02:30,760 --> 00:02:36,040
Shouldn't have a border and I'm going to go ahead and round a few corners here to make it look a little

41
00:02:36,040 --> 00:02:37,730
less sharp and intense.

42
00:02:37,840 --> 00:02:43,570
So I'm going to select these top two points and I'm going to round them let's try ten.

43
00:02:43,560 --> 00:02:44,510
How does that look.

44
00:02:44,740 --> 00:02:45,860
Yeah that's pretty good.

45
00:02:46,210 --> 00:02:51,020
And I'm also going to go ahead and round these top two corners as well 10 so I'm going actually type

46
00:02:51,010 --> 00:02:52,330
10 this time.

47
00:02:52,750 --> 00:02:59,410
And there's our lead supercool and for the cup I think now you know what I think I'm going to keep it

48
00:02:59,650 --> 00:03:03,730
nice and square because if you think about it a coffee cup is actually actually has hard corners on

49
00:03:03,730 --> 00:03:10,330
the bottom but the lid is the part that actually is you know hard like that.

50
00:03:10,330 --> 00:03:16,650
So next I think what I'm going to do is I'm going to go ahead and put a nice label on the side of this

51
00:03:16,690 --> 00:03:22,870
and to do that I'm just going to create a rectangle that's about the size of a coffee label and I'm

52
00:03:22,870 --> 00:03:27,470
going to try to just kind of line it up here with the with the way it's supposed to be.

53
00:03:28,530 --> 00:03:34,080
And I'm going to just manually create a little bit more with their little more.

54
00:03:34,170 --> 00:03:39,160
Let's just try to thirty eight K that looks pretty good.

55
00:03:39,470 --> 00:03:40,250
Nice.

56
00:03:40,250 --> 00:03:44,870
Let's remove the border and I'm actually going to go ahead and make this dark green.

57
00:03:45,290 --> 00:03:45,680
OK.

58
00:03:45,680 --> 00:03:51,830
I'm going to double click and add these points here and I can actually drag them until they look look

59
00:03:51,830 --> 00:03:58,100
good like so I'm not doing a great job of you know making very pixel perfect work.

60
00:03:58,280 --> 00:04:01,090
But overall this looks pretty OK.

61
00:04:01,310 --> 00:04:06,680
We have a nice image here that will allow us to make a nice sticker.

62
00:04:06,680 --> 00:04:08,400
There is one thing I do want to do.

63
00:04:08,480 --> 00:04:11,090
Going to select all of these and try to center them.

64
00:04:11,090 --> 00:04:16,490
I want to put a nice rounded you know kind of white border around it so it really does look like a peeled

65
00:04:16,490 --> 00:04:17,580
off sticker.

66
00:04:17,660 --> 00:04:23,900
And to do that I'm going to go ahead and just add a border outside and I'm going to make it maybe 20

67
00:04:23,900 --> 00:04:24,230
thick.

68
00:04:24,230 --> 00:04:24,520
Whoa.

69
00:04:24,530 --> 00:04:25,330
That is way too thick.

70
00:04:25,340 --> 00:04:26,600
Maybe 15.

71
00:04:26,600 --> 00:04:27,100
No.

72
00:04:27,230 --> 00:04:27,810
10.

73
00:04:27,880 --> 00:04:28,520
Yeah.

74
00:04:28,940 --> 00:04:29,420
OK.

75
00:04:29,540 --> 00:04:31,680
And I'm going to go ahead and make it white.

76
00:04:31,700 --> 00:04:33,710
Like I said.

77
00:04:33,830 --> 00:04:39,570
And because of that I'm actually going to make the inner shape here maybe a little bit not not gray

78
00:04:39,650 --> 00:04:45,060
definitely not yellow but maybe a little bit off white Yeah.

79
00:04:45,060 --> 00:04:48,910
No that just does not look good.

80
00:04:50,820 --> 00:04:51,400
OK.

81
00:04:51,420 --> 00:04:53,630
Well no you know what let's go with that.

82
00:04:53,730 --> 00:04:58,200
And if I want these corners to be rounded I'm going actually need to select the corners and I'm going

83
00:04:58,200 --> 00:04:59,860
to need to round them as well.

84
00:05:00,120 --> 00:05:05,190
So I think two is good because that makes the border a nice round kind of sticker look which is pretty

85
00:05:05,190 --> 00:05:06,120
sweet.

86
00:05:06,600 --> 00:05:07,440
Let's think what else.

87
00:05:07,440 --> 00:05:12,480
So I want to put it this same border here so I'm actually going to just right click no cause that would

88
00:05:12,480 --> 00:05:14,360
copy the whole style.

89
00:05:14,430 --> 00:05:19,680
I'll just do a border make it white on the outside and make it ten.

90
00:05:19,680 --> 00:05:22,630
Now here's where we're going to run into some issues.

91
00:05:22,800 --> 00:05:28,070
The border is going to bleed over on top of this no matter what shape we add the border to.

92
00:05:28,140 --> 00:05:30,390
Because if you see I'll add a border here.

93
00:05:30,390 --> 00:05:31,440
I'll go outside.

94
00:05:31,440 --> 00:05:32,790
I'll make it ten.

95
00:05:32,820 --> 00:05:39,150
And as you can see it looks OK but you know we're still no matter which one is on top.

96
00:05:39,150 --> 00:05:42,780
We're still going to get that border bleeding over the top and we don't want that.

97
00:05:43,050 --> 00:05:44,340
So that looks pretty good.

98
00:05:44,340 --> 00:05:49,280
I just moved it on top but I don't necessarily want there to be this borderline in the middle.

99
00:05:49,290 --> 00:05:53,330
So what I can do is I can actually go ahead and remove the border from both.

100
00:05:53,640 --> 00:05:59,550
And before you know let's get rid of the border on both there before I move on I'm going to actually

101
00:05:59,550 --> 00:06:05,430
select both of these and click Union and it'll unionize those into a single shape.

102
00:06:05,430 --> 00:06:09,440
And now if I want I can go ahead and add a border to this shape.

103
00:06:09,570 --> 00:06:14,330
I can go ahead and change it to White said it outside and make it 10.

104
00:06:14,680 --> 00:06:16,110
And oops I mean 10.

105
00:06:16,110 --> 00:06:16,930
There we go.

106
00:06:17,130 --> 00:06:21,050
And as you can see we have a nice border that's not getting cut off.

107
00:06:21,090 --> 00:06:24,900
But the issue is now the shape on the inside is totally transparent.

108
00:06:24,900 --> 00:06:29,220
So to fix this one I'm going to do is I'm going to copy these and I'm actually going to go ahead and

109
00:06:29,220 --> 00:06:34,160
paste them above the border there remove the border.

110
00:06:34,350 --> 00:06:38,930
That was given and then I'm actually going to go ahead and increase it by like two percent.

111
00:06:38,940 --> 00:06:40,670
One hundred two percent.

112
00:06:40,670 --> 00:06:47,220
All right now I'm going to drag it underneath that shape that had that kind of clear look to it and

113
00:06:47,220 --> 00:06:47,990
take a look.

114
00:06:48,000 --> 00:06:53,580
Now we have a border that's going around our whole sticker without getting cut off which is pretty neat.

115
00:06:53,580 --> 00:06:54,330
And there we go.

116
00:06:54,330 --> 00:06:57,160
Now we have this awesome border right around our whole shape.

117
00:06:57,240 --> 00:07:01,150
I don't like that this corner is sharp so I'm actually going to select this shape.

118
00:07:01,200 --> 00:07:07,100
Double click on it and I'm going to add rounding to this corner of like to k.

119
00:07:07,260 --> 00:07:11,140
And as you can see now it's nice and round which is pretty sweet.

120
00:07:11,190 --> 00:07:17,520
And what we can do now is we can go ahead and export this as a p n g and we can drag it into our project.

121
00:07:17,520 --> 00:07:24,330
So let's go ahead and let's actually take this whole shape here and let's combine it into one unified

122
00:07:24,330 --> 00:07:25,490
shape.

123
00:07:25,620 --> 00:07:36,530
I'm going to go ahead and reduce the scale like I was saying to have a max height of 128 and I'm going

124
00:07:36,530 --> 00:07:38,390
to go ahead and put this here.

125
00:07:38,420 --> 00:07:42,010
And you know what as I'm looking at this I think the border does need to be a bit wider.

126
00:07:42,020 --> 00:07:43,040
So let's make the border.

127
00:07:43,040 --> 00:07:44,660
How about five.

128
00:07:44,660 --> 00:07:46,160
That might be a little better.

129
00:07:46,170 --> 00:07:50,120
OK let's choose that combined shape and change the thickness to five.

130
00:07:50,330 --> 00:07:51,020
Yeah there we go.

131
00:07:51,020 --> 00:07:56,600
That looks a little better although I am noticing that that little line is there showing which I don't

132
00:07:56,600 --> 00:07:58,450
think it should be.

133
00:07:58,460 --> 00:08:02,980
It appears that there's a bit of an overlap between the shapes which is interesting.

134
00:08:03,080 --> 00:08:08,580
So if I actually zoom out to 100 percent you'll see that it is still showing up but weird.

135
00:08:08,600 --> 00:08:13,520
I wonder why that is because there's not a border that is gray set on these.

136
00:08:13,760 --> 00:08:16,170
So it shouldn't be showing up like that.

137
00:08:16,610 --> 00:08:23,540
But you know what I wonder if I actually reduce this to or increase it to exactly 76 if that.

138
00:08:23,570 --> 00:08:28,490
Oh that's with how about 20 22 and 17.

139
00:08:28,490 --> 00:08:31,820
I wonder if it's just because there's like a point three that's showing up.

140
00:08:32,000 --> 00:08:33,660
Maybe that's part of the problem.

141
00:08:34,020 --> 00:08:38,920
OK so it appears it is still showing up there which is not cool.

142
00:08:39,070 --> 00:08:43,060
And if I move it there creates a border actually you know what.

143
00:08:43,370 --> 00:08:45,450
Ooh I like that better.

144
00:08:46,620 --> 00:08:51,390
I like that a lot actually with a little gap there because then it shows a very clear delineation between

145
00:08:51,390 --> 00:08:53,740
the cap and the the little lip here.

146
00:08:54,060 --> 00:08:56,220
Oh I like when I discover things like that that I like more.

147
00:08:56,260 --> 00:08:57,220
Ok cool.

148
00:08:57,240 --> 00:09:00,350
So it is officially 128 pixels.

149
00:09:00,450 --> 00:09:06,130
We're going to go ahead and reduce our art board here to be 128 by 128.

150
00:09:06,480 --> 00:09:12,240
And you know what it looks like we're having a little bit of sizing issues because the border is not

151
00:09:12,240 --> 00:09:14,200
included in this.

152
00:09:14,220 --> 00:09:19,180
So let's make it 150 by 150 and you'll see I just centered it there.

153
00:09:19,290 --> 00:09:23,230
And now what I can do since the background color is not included.

154
00:09:23,250 --> 00:09:29,890
I can export this at size one acts like so I can call it a coffee cup.

155
00:09:30,330 --> 00:09:32,530
Let's put a dash between coffee and cup.

156
00:09:32,610 --> 00:09:33,790
Save it to my desktop.

157
00:09:33,810 --> 00:09:40,050
And now if I pull open my X code project and go into my sticker pack what I can do is I can just go

158
00:09:40,050 --> 00:09:41,920
ahead and drag it straight on.

159
00:09:41,960 --> 00:09:42,150
OK.

160
00:09:42,150 --> 00:09:43,320
Here it is.

161
00:09:43,320 --> 00:09:46,950
I can drag it in here let's put it right at the front and there we go.

162
00:09:46,950 --> 00:09:49,830
My coffee cup is now totally accessible.

163
00:09:49,890 --> 00:09:52,970
Let's build and run and let's go see how it looks.

164
00:09:53,010 --> 00:09:58,460
That's just one way that you can design an image here in sketch for a sticker which is pretty neat.

165
00:09:59,640 --> 00:10:04,600
Let's see how we did sticker packs loading pulling open here.

166
00:10:04,890 --> 00:10:05,880
And it crashed.

167
00:10:05,880 --> 00:10:06,120
OK.

168
00:10:06,120 --> 00:10:06,630
Interesting.

169
00:10:06,630 --> 00:10:14,100
This is a problem that I have found with the simulator sometimes it's buggy says mobile S-M as quit

170
00:10:14,130 --> 00:10:15,420
unexpectedly.

171
00:10:15,420 --> 00:10:18,510
So to fix this what I've been doing is I've been going in.

172
00:10:18,660 --> 00:10:24,660
I've been going into my apps here and as you can see there is no app loaded but it's saying that it's

173
00:10:24,660 --> 00:10:28,260
crashing so I'm going to go ahead and erase all content and settings.

174
00:10:28,260 --> 00:10:32,490
This takes about you know 20 seconds or more depending on your machine.

175
00:10:32,670 --> 00:10:37,220
But basically it's just going to do a factory reset of the whole phone which is frustrating.

176
00:10:37,350 --> 00:10:39,070
You don't have to do this but.

177
00:10:39,090 --> 00:10:39,430
Yeah.

178
00:10:39,510 --> 00:10:43,310
So it'll load and then we'll try to build and run it again.

179
00:10:53,850 --> 00:10:54,190
OK.

180
00:10:54,210 --> 00:10:56,740
So here we go let's try that one more time.

181
00:10:56,850 --> 00:11:01,350
And you know what let's quit the simulator just for good measure build and run.

182
00:11:01,350 --> 00:11:06,800
Wait for it to pop open here and load and then we'll see if our coffee cup shows up on our sticker pack

183
00:11:06,810 --> 00:11:09,660
the way we're hoping.

184
00:11:10,170 --> 00:11:12,590
K Rigaud it's loading.

185
00:11:12,590 --> 00:11:13,570
There it is.

186
00:11:13,980 --> 00:11:18,690
And yeah let's just see how we did pulling it up.

187
00:11:18,690 --> 00:11:21,600
Their message app opening.

188
00:11:21,750 --> 00:11:22,310
Cool.

189
00:11:26,020 --> 00:11:28,160
Like it's taking its sweet time to load.

190
00:11:28,160 --> 00:11:28,540
All right.

191
00:11:28,550 --> 00:11:30,390
So let's send a message.

192
00:11:30,410 --> 00:11:32,540
Let's get some coffee.

193
00:11:32,650 --> 00:11:33,810
Socky Whoops.

194
00:11:34,040 --> 00:11:35,310
That's different.

195
00:11:35,600 --> 00:11:36,820
All right let's get some coffee.

196
00:11:36,830 --> 00:11:37,300
Awesome.

197
00:11:37,310 --> 00:11:38,360
Boom.

198
00:11:38,360 --> 00:11:41,250
Select our sticker pack and there's our coffee cup.

199
00:11:41,360 --> 00:11:45,920
As you can see it's floating and I can drag and drop it right there.

200
00:11:45,920 --> 00:11:46,660
Boom.

201
00:11:46,700 --> 00:11:48,080
Oh that's so cool.

202
00:11:48,080 --> 00:11:48,950
Super amazing.

203
00:11:48,950 --> 00:11:52,640
Now what I do notice it's hard to see because of the white border.

204
00:11:52,760 --> 00:11:55,970
So I think in sketch I'm going to do some modifications here.

205
00:11:56,030 --> 00:11:58,060
I'm going to add a little bit of a drop shadow.

206
00:11:58,430 --> 00:12:02,100
And now I'm going to export it with that shadow so let's do that again.

207
00:12:02,180 --> 00:12:03,740
I'm going to call it coffeecup.

208
00:12:03,830 --> 00:12:04,690
Save it.

209
00:12:04,790 --> 00:12:06,460
Replace it.

210
00:12:06,470 --> 00:12:12,560
Minimize that and let's go ahead and delete that coffee cup and let's pull in the one we just fixed

211
00:12:12,560 --> 00:12:13,580
with the shadow.

212
00:12:13,730 --> 00:12:15,840
As you can see that's a little easier to see.

213
00:12:15,920 --> 00:12:20,020
So I'm going to stop at here and I'm going to build and run one more time.

214
00:12:20,030 --> 00:12:24,830
A lot of this process is you know kind of trial and error finding out what looks good and what doesn't.

215
00:12:24,830 --> 00:12:26,980
So I'm going to send that message again.

216
00:12:26,990 --> 00:12:29,060
Let's get some coffee.

217
00:12:31,360 --> 00:12:32,970
And I can drag my sticker.

218
00:12:33,010 --> 00:12:35,970
You can already tell it looks way better if I drop it there.

219
00:12:36,070 --> 00:12:38,920
It's very easily visible because of the drop shadow.

220
00:12:39,070 --> 00:12:43,140
Super super cool guys amazing I could send that individually if I wanted to.

221
00:12:43,390 --> 00:12:44,340
And there it is.

222
00:12:44,350 --> 00:12:45,340
So cool.

223
00:12:45,340 --> 00:12:50,170
So this video has actually gone a little bit long so we're going to head over to the next video where

224
00:12:50,170 --> 00:12:55,290
I'm going to show you how to cut apart one of those sprite sheets to create a sequence of animated piano

225
00:12:55,290 --> 00:12:56,950
keys just like that little running character here.

226
00:12:56,950 --> 00:12:59,740
So let's head over to the next video and let's do that now.