1
00:00:00,770 --> 00:00:02,920
With the major chunks
of our design in place,

2
00:00:02,920 --> 00:00:07,450
we're ready to work on more functional
details like text and buttons.

3
00:00:07,450 --> 00:00:11,590
Let's start out easy, at the top,
with the name of the app.

4
00:00:11,590 --> 00:00:15,800
First, select the text tool
from the left side, or

5
00:00:15,800 --> 00:00:19,090
just hit the T key on your keyboard.

6
00:00:19,090 --> 00:00:23,530
Then if you click generally in
the area where you want the text,

7
00:00:23,530 --> 00:00:27,870
here at the upper left,
you can start typing.

8
00:00:27,870 --> 00:00:34,780
This app is called, Trippin',
with an apostrophe.

9
00:00:34,780 --> 00:00:40,260
To accept this text,
hit the escape key on your keyboard.

10
00:00:40,260 --> 00:00:47,270
Then we can switch back to the selection
tool by hitting the V key on the keyboard.

11
00:00:47,270 --> 00:00:51,490
And we can position this
text a little bit better, so

12
00:00:51,490 --> 00:00:54,410
that it's aligned left with the photo, and

13
00:00:54,410 --> 00:00:59,700
aligned toward the middle
with the profile image.

14
00:00:59,700 --> 00:01:03,000
In the property inspector,
let's change some values.

15
00:01:03,000 --> 00:01:08,640
First, change the font
from Helvetica Neue,

16
00:01:08,640 --> 00:01:13,670
or whatever appears to be on your OS,
to Verdana.

17
00:01:15,220 --> 00:01:19,240
This font might not be the choice
that we'd use in the final design,

18
00:01:19,240 --> 00:01:23,210
but it's functional for
the purposes of prototyping this app

19
00:01:23,210 --> 00:01:26,570
without getting too deep into
the visual design of it.

20
00:01:26,570 --> 00:01:31,070
Next, change the Fill color to something
that will contrast with the dark

21
00:01:31,070 --> 00:01:31,950
background.

22
00:01:33,190 --> 00:01:37,832
I'm going to use a sort
of orangey yellow color,

23
00:01:37,832 --> 00:01:43,277
it's mostly yellow,
just a little bit of orange there.

24
00:01:43,277 --> 00:01:48,219
And we'll actually end up using the same
color throughout the rest of the design,

25
00:01:48,219 --> 00:01:51,670
just for highlights and
accents and buttons and things.

26
00:01:52,760 --> 00:01:59,856
Finally, let's change the font styling
from Regular to Bold and Italic.

27
00:01:59,856 --> 00:02:05,840
And this bit would probably
be replaced by an SVG

28
00:02:05,840 --> 00:02:10,750
based logo later on, but it works for
the purposes of prototyping.

29
00:02:11,800 --> 00:02:17,770
Next, we're going to add text
on top of this first photo here.

30
00:02:17,770 --> 00:02:21,790
We'll have the name of the city,
a price for

31
00:02:21,790 --> 00:02:24,570
the trip, and
then a button to book the trip.

32
00:02:25,630 --> 00:02:30,110
Select the text tool again,
by selecting it from the menu here or

33
00:02:30,110 --> 00:02:34,150
hitting the T key on your keyboard, and

34
00:02:34,150 --> 00:02:37,960
then across the top of this image,
in all caps,

35
00:02:39,070 --> 00:02:44,360
we'll type BOLDER and
then hit Escape to accept.

36
00:02:44,360 --> 00:02:48,003
In the property inspector,

37
00:02:48,003 --> 00:02:52,100
change the Fill color to white,

38
00:02:52,100 --> 00:02:56,348
then change the size to 34, and

39
00:02:56,348 --> 00:03:02,900
the font style just to Bold
instead of Bold Italic.

40
00:03:04,070 --> 00:03:07,820
Last, let's change
the alignment to Center.

41
00:03:07,820 --> 00:03:13,031
This won't actually center the text, but
if we position it using the selection

42
00:03:13,031 --> 00:03:17,670
tool, And

43
00:03:17,670 --> 00:03:23,690
then we change the text later on,
it will stay centered.

44
00:03:23,690 --> 00:03:27,390
Now let's add some prices to this trip.

45
00:03:27,390 --> 00:03:32,940
Using the type tool,
I'll click on the bottom left of

46
00:03:32,940 --> 00:03:37,833
this photo here, and
let's just say this trip costs $1149,

47
00:03:37,833 --> 00:03:41,380
and then I'll hit Escape to accept.

48
00:03:42,520 --> 00:03:49,341
In the property inspector,
change the font size to 18.

49
00:03:49,341 --> 00:03:52,035
Then let's scroll down here and

50
00:03:52,035 --> 00:03:58,790
just add a small shadow underneath
this to make it stand out a bit more.

51
00:03:58,790 --> 00:04:03,183
I'll increase the opacity to 40%,.

52
00:04:05,217 --> 00:04:10,174
And set the x to 0, the y to 1.

53
00:04:10,174 --> 00:04:15,140
And then we'll keep this shadow
super crisp with 0 blur.

54
00:04:16,910 --> 00:04:20,720
Next, change the text so
that it's left-aligned.

55
00:04:20,720 --> 00:04:23,720
That way, when we change
the amounts on other photos,

56
00:04:23,720 --> 00:04:27,650
they'll all line up with one
another along the left edge.

57
00:04:27,650 --> 00:04:34,050
Finally, use the selection tool to move it
to the bottom-left corner of the image.

58
00:04:35,240 --> 00:04:38,460
And if you hold down Shift
on your keyboard and

59
00:04:38,460 --> 00:04:42,738
use the arrow keys,
you can move at 10 pixels at a time.

60
00:04:42,738 --> 00:04:47,700
So holding down Shift, I'm going to
hit the right arrow key to move it to

61
00:04:47,700 --> 00:04:52,415
the right by 10 pixels, and
then again, I'll hold down Shift and

62
00:04:52,415 --> 00:04:55,741
hit the up arrow key to
move it up by 10 pixels.

63
00:04:55,741 --> 00:05:00,644
And using that technique, you can get
a little bit more accurate positioning

64
00:05:00,644 --> 00:05:03,690
depending on what you want to place.

65
00:05:03,690 --> 00:05:06,670
To finish this up,
we'll add a booking button.

66
00:05:06,670 --> 00:05:11,481
To do this, select the rectangle tool, and

67
00:05:11,481 --> 00:05:16,551
in the bottom right corner
of the first image,

68
00:05:16,551 --> 00:05:21,233
draw a rectangle something like this, and

69
00:05:21,233 --> 00:05:28,277
switch over to the selection tool
to move that just a little bit.

70
00:05:28,277 --> 00:05:31,849
And then with this
rectangle still selected,

71
00:05:31,849 --> 00:05:37,437
in the property inspector,
change the corner radius to a value of 20,

72
00:05:37,437 --> 00:05:41,850
so that instead of a rectangle,
we have a capsule shape.

73
00:05:43,270 --> 00:05:46,190
And then next to the fill and

74
00:05:46,190 --> 00:05:50,900
border colors,
you'll notice there's an eye dropper tool.

75
00:05:50,900 --> 00:05:54,240
We don't wanna border on this, so
let's remove the border, but for

76
00:05:54,240 --> 00:05:58,800
the Fill, we want this to be
the same color as the logo.

77
00:05:58,800 --> 00:06:03,270
So we can use this eye dropper tool and

78
00:06:03,270 --> 00:06:09,490
we'll hover over an area of the text that
looks like it has a solid yellow color,

79
00:06:09,490 --> 00:06:13,530
be careful not to select
any of the earliest parts.

80
00:06:13,530 --> 00:06:16,490
Along the side there, so
that looks pretty solid to me,

81
00:06:16,490 --> 00:06:22,550
and that will give us
the same color as our logo.

82
00:06:22,550 --> 00:06:24,995
Now, let's type some text over it.

83
00:06:24,995 --> 00:06:29,610
I'll hit the text tool and
click over the button,

84
00:06:30,630 --> 00:06:35,800
and I'm going to type the word Book and
hit Escape to accept.

85
00:06:35,800 --> 00:06:41,760
And then change the Fill color to black,
so it stands out.

86
00:06:41,760 --> 00:06:44,840
Change the alignment to Center.

87
00:06:44,840 --> 00:06:50,325
And then with this text still selected,
if we change over to the selection tool,

88
00:06:50,325 --> 00:06:55,875
by hitting the V key, and
then hold down Shift and

89
00:06:55,875 --> 00:07:02,745
click the button background, we can make
sure that these are horizontally and

90
00:07:02,745 --> 00:07:06,595
vertically aligned using
the alignment tools up at the top.

91
00:07:07,710 --> 00:07:13,008
So I want those to be aligned middle or
vertically,

92
00:07:13,008 --> 00:07:18,442
then I want it to be aligned center or
horizontally.

93
00:07:20,396 --> 00:07:25,920
And this will make sure that the text is
perfectly in the middle of the button.

94
00:07:27,010 --> 00:07:28,940
When you're done,
make sure to save your work.

95
00:07:30,770 --> 00:07:34,010
Our first image is done, but
we want three more of them so

96
00:07:34,010 --> 00:07:37,800
people can see all the different
places they can travel.

97
00:07:37,800 --> 00:07:42,670
Might be tempted to just copy and paste
your images but there's a much better and

98
00:07:42,670 --> 00:07:44,820
faster way that I'll show you next.