1
00:00:00.05 --> 00:00:01.04
- [Instructor] Now, when it comes

2
00:00:01.04 --> 00:00:05.01
to creating multiple screens,
it's done really easily.

3
00:00:05.01 --> 00:00:06.05
I call them screens.

4
00:00:06.05 --> 00:00:08.02
They're technically artboards,

5
00:00:08.02 --> 00:00:11.04
'cause as I select this,
this is actually an artboard.

6
00:00:11.04 --> 00:00:13.05
Well, if I want to duplicate this artboard

7
00:00:13.05 --> 00:00:18.02
to make two screens, just go
ahead and select Command + D,

8
00:00:18.02 --> 00:00:20.06
or Control + D if you're on a PC.

9
00:00:20.06 --> 00:00:21.08
It's the easiest way to do it.

10
00:00:21.08 --> 00:00:24.03
And this is going to be
my alternate homepage.

11
00:00:24.03 --> 00:00:26.04
So A-L-T, that's my alternate.

12
00:00:26.04 --> 00:00:27.07
And from here I can start

13
00:00:27.07 --> 00:00:30.00
to sort of design this accordingly.

14
00:00:30.00 --> 00:00:32.05
Maybe I want to select
this graphic right here,

15
00:00:32.05 --> 00:00:33.08
size that down.

16
00:00:33.08 --> 00:00:37.00
I actually want to make
it about 480, like that.

17
00:00:37.00 --> 00:00:40.04
And same thing for even
duplicating images.

18
00:00:40.04 --> 00:00:44.07
So Command + D, that
duplicates this image, right?

19
00:00:44.07 --> 00:00:48.03
Another way of duplicate
images is Option and Shift,

20
00:00:48.03 --> 00:00:52.01
and then when I drag, I'm
duplicating that object.

21
00:00:52.01 --> 00:00:53.05
So it's really easy.

22
00:00:53.05 --> 00:00:56.01
Artboards and graphics
are what I'm showing.

23
00:00:56.01 --> 00:00:58.01
Basically they're the same thing.

24
00:00:58.01 --> 00:01:00.03
And then I can change these graphics.

25
00:01:00.03 --> 00:01:03.00
So in this case, I'm just
going to grab background one,

26
00:01:03.00 --> 00:01:06.03
just dropping in some different images

27
00:01:06.03 --> 00:01:10.06
for these different cases,
something like that,

28
00:01:10.06 --> 00:01:12.08
and now I have my alternate screen.

29
00:01:12.08 --> 00:01:15.03
I'm going to select all of these
by holding down the Shift key

30
00:01:15.03 --> 00:01:17.07
and I'm going to turn off the border,

31
00:01:17.07 --> 00:01:19.05
and now I have two versions.

32
00:01:19.05 --> 00:01:21.02
They're looking pretty nice.

33
00:01:21.02 --> 00:01:23.05
Command + 0 will actually position them

34
00:01:23.05 --> 00:01:25.03
within the viewable area.

35
00:01:25.03 --> 00:01:27.06
Let's go beyond that because
what I want to do now

36
00:01:27.06 --> 00:01:30.02
is draw one from scratch.

37
00:01:30.02 --> 00:01:32.09
So right over here, you
can see my artboard tool.

38
00:01:32.09 --> 00:01:34.09
Selecting it, I can come over here

39
00:01:34.09 --> 00:01:38.02
and I can draw out one at any size, okay,

40
00:01:38.02 --> 00:01:41.01
and I can change its size
in my Properties panel

41
00:01:41.01 --> 00:01:43.07
but I'm going to delete it
because with it selected,

42
00:01:43.07 --> 00:01:46.01
I can now just come over
and select from a preset,

43
00:01:46.01 --> 00:01:47.01
so I can say, "Hey, you know what?

44
00:01:47.01 --> 00:01:50.01
"Select the iPhone 6, 7, and 8+."

45
00:01:50.01 --> 00:01:51.08
Click, there it is.

46
00:01:51.08 --> 00:01:54.03
And I can always select it and move it

47
00:01:54.03 --> 00:01:55.07
to where I want it to be.

48
00:01:55.07 --> 00:01:58.04
So again, my mobile version of
the site will be right there

49
00:01:58.04 --> 00:02:03.05
and what I can also do
is, right over here,

50
00:02:03.05 --> 00:02:05.08
with that selected, by the
way, it doesn't really matter,

51
00:02:05.08 --> 00:02:08.04
if it's selected, it's
going to create the new one

52
00:02:08.04 --> 00:02:11.00
right next to it to the
right, but in this case,

53
00:02:11.00 --> 00:02:13.04
I want to create an Android version.

54
00:02:13.04 --> 00:02:15.05
Clicking there, and now I have my iPhone

55
00:02:15.05 --> 00:02:18.01
and Android artboards right there

56
00:02:18.01 --> 00:02:20.06
and now I can start to
reposition content there,

57
00:02:20.06 --> 00:02:23.07
just duplicating all of that content

58
00:02:23.07 --> 00:02:25.01
when I'm ready to do so.

59
00:02:25.01 --> 00:02:28.00
But you can see it's easy
to create new screens.

60
00:02:28.00 --> 00:02:30.04
It's as easy as duplicating graphics.