1
00:00:00,440 --> 00:00:06,990
Everyone, and welcome back, so we're going to be talking about portfolios now, we have a lot of different

2
00:00:06,990 --> 00:00:11,360
images here that we've been working on with our our final compositions.

3
00:00:11,370 --> 00:00:17,520
And like when we get to a part in our project where we are really happy with you, the final results,

4
00:00:17,760 --> 00:00:19,840
even though projects are forever changing.

5
00:00:19,860 --> 00:00:21,180
I mean, we always iterate on them.

6
00:00:21,190 --> 00:00:26,340
There will be a point where, you know, we kind of like take our foot off the gas pedal and we're ready

7
00:00:26,340 --> 00:00:31,260
to just kind of display our work and just talk about it a bit with the community, get some feedback.

8
00:00:31,260 --> 00:00:37,440
And also, it's great to use it as a means to find a new job and impress potential employers.

9
00:00:37,950 --> 00:00:42,360
So what I've done here is I've taken a bunch of different screens, as you can see.

10
00:00:42,690 --> 00:00:47,100
And what I'm going to do is I'm going to explore all of these to my desktop.

11
00:00:47,100 --> 00:00:50,190
So I'm just going to select them all and I'm going to go down here.

12
00:00:50,530 --> 00:00:57,960
And so right now, they're all set within a frame size as the iPhone X, and I'm happy with that for

13
00:00:57,960 --> 00:00:58,290
now.

14
00:00:58,650 --> 00:01:00,450
And I'm just going to click export.

15
00:01:02,180 --> 00:01:07,820
And over here, you can export them to whatever type of file type that you like, I typically just use

16
00:01:07,820 --> 00:01:08,330
PNG.

17
00:01:08,460 --> 00:01:14,180
There's JPEG, there is SFG, if you're using vectors and stuff like that and PDF.

18
00:01:14,480 --> 00:01:19,460
So, I mean, there's different options here, but I always feel like the PNG is probably the best option

19
00:01:19,850 --> 00:01:21,410
you can export with the contents.

20
00:01:21,410 --> 00:01:27,500
Only if you have like a transparent background, you can kind of remove that background as well.

21
00:01:27,500 --> 00:01:31,610
In this case, we're going to actually keep the fill in the background of these frames and we're going

22
00:01:31,610 --> 00:01:32,630
to show that in the export.

23
00:01:33,740 --> 00:01:38,480
So I'm going to export these six layers and they're going to go straight to my desktop over here.

24
00:01:38,900 --> 00:01:45,620
So let's just say that, OK, so now that we have those images there, what we want to do is we want

25
00:01:45,620 --> 00:01:47,690
to display them in some sort of way.

26
00:01:48,950 --> 00:01:55,520
Now, let's create a new page and we'll just call this page portfolio pieces.

27
00:01:57,050 --> 00:01:59,560
And what we can do here is we can do shift command.

28
00:01:59,600 --> 00:01:59,890
Okay.

29
00:02:00,890 --> 00:02:06,200
And that is going to bring up our image placement kind of dialog box over here.

30
00:02:07,070 --> 00:02:14,120
And we are going to drop those images into this file so they're all placed.

31
00:02:16,950 --> 00:02:23,010
So here we go now, they're actually just pages, so we are just going to place these nicely together.

32
00:02:26,260 --> 00:02:28,960
And then.

33
00:02:31,190 --> 00:02:31,670
There you go.

34
00:02:31,850 --> 00:02:36,680
OK, so now that we have all these images that we want to work with nicely placed together, what we're

35
00:02:36,680 --> 00:02:45,610
going to do is we are going to bring up the iPhone mockups so you can find these types of mockups anywhere.

36
00:02:45,920 --> 00:02:49,880
So I have a couple of different variations here, and this will be available to you as well.

37
00:02:50,210 --> 00:02:52,580
So I have like an asymmetric view, if you kind of like that.

38
00:02:52,580 --> 00:02:59,210
Look, if you just want to get that view of like a realistic iPhone X, you can get that with this.

39
00:03:01,230 --> 00:03:06,160
Same thing with these visas, these are just kind of colorized a bit.

40
00:03:06,180 --> 00:03:08,660
So this is kind of a grayish purple.

41
00:03:09,090 --> 00:03:10,500
We have a yellow border.

42
00:03:10,500 --> 00:03:12,570
So if you see like, I'm just going to take this off.

43
00:03:14,190 --> 00:03:19,000
We have like a yellow border so it can go with the type of content that you're working with.

44
00:03:19,440 --> 00:03:21,800
So what I'm going to do actually is I like this yellow a lot.

45
00:03:22,290 --> 00:03:27,780
I'm actually going to take this whole frame and I'm going to just copy it into our portfolio piece,

46
00:03:27,780 --> 00:03:28,290
the section.

47
00:03:31,770 --> 00:03:37,500
So over here, I have my portfolio pieces section, and I'm really happy with that, so you can see

48
00:03:37,500 --> 00:03:42,510
this is where the screen is, so we can just call this onboarding.

49
00:03:42,510 --> 00:03:44,780
So we'll place the onboarding image in this one.

50
00:03:45,330 --> 00:03:49,920
So we have the onboarding, the on boarding frame over here.

51
00:03:50,370 --> 00:03:54,180
And what I like about this is we're going to kind of just create like a really nice composition that's

52
00:03:54,180 --> 00:03:56,610
going to show off just our general design here.

53
00:03:56,970 --> 00:04:04,830
So I'm just going to copy that option and drag and command, see that and then go into this iPhone.

54
00:04:05,550 --> 00:04:07,770
And I'm going to try and find where I can place this.

55
00:04:07,770 --> 00:04:10,440
So it actually displays really nicely within the screen.

56
00:04:10,800 --> 00:04:12,690
So it's probably within content here.

57
00:04:13,020 --> 00:04:13,640
And there you go.

58
00:04:13,860 --> 00:04:15,270
So I've placed it in here.

59
00:04:15,270 --> 00:04:19,920
You can kind of remove that screen, a placeholder and there you go.

60
00:04:19,920 --> 00:04:24,990
You kind of have this perfectly placed image inside of this iPhone.

61
00:04:25,140 --> 00:04:28,350
And there's so many different ways you can do this, like if I wanted to.

62
00:04:29,770 --> 00:04:33,320
It's now that I have this iPhone, let's just place it nicely.

63
00:04:33,910 --> 00:04:36,190
So now it's just displaying this one image.

64
00:04:36,220 --> 00:04:41,260
So if we wanted to kind of show multiple images, we can like do side by side.

65
00:04:41,260 --> 00:04:45,420
If we want if we want to show, like a flow the entire onboarding flow, we can do that.

66
00:04:45,670 --> 00:04:52,540
We can also show kind of like a little bit of a stylized rendition of our images.

67
00:04:55,130 --> 00:04:58,130
If he wants to just kind of make it a little bit more dynamic.

68
00:05:00,900 --> 00:05:03,880
Something like that, if we want to show a different variations.

69
00:05:04,260 --> 00:05:09,210
Now, this is purely speaking from like I would say, from a rebel perspective, if you just want to

70
00:05:09,210 --> 00:05:13,740
take a quick snapshot of your work and then, like, post it there, this is like an awesome way to

71
00:05:13,740 --> 00:05:14,040
do it.

72
00:05:14,040 --> 00:05:14,610
And look at that.

73
00:05:14,730 --> 00:05:18,600
It took us like five seconds to just put together a quick composition.

74
00:05:18,960 --> 00:05:23,940
Even if I wanted to change the background color, I can do that if I wanted to add, like, a little

75
00:05:23,940 --> 00:05:25,830
bit more depth to that background color.

76
00:05:27,200 --> 00:05:33,650
I can do that just by kind of adding a little bit a darker color on the outside so we can kind of just

77
00:05:33,650 --> 00:05:35,120
like make this.

78
00:05:36,190 --> 00:05:37,420
A little bit of a gradient.

79
00:05:40,050 --> 00:05:42,240
So, I mean, there's different ways you can do this.

80
00:05:43,630 --> 00:05:48,400
And there you go, like we already have, like a dribble shot ready to go, it just took us like five

81
00:05:48,400 --> 00:05:55,180
seconds, really high quality and very interesting to look at now from a perspective of, like, showing

82
00:05:55,180 --> 00:05:59,970
off different types of pieces of your work for, like your portfolio website and stuff like that.

83
00:05:59,980 --> 00:06:01,480
You can still do something like this.

84
00:06:01,780 --> 00:06:07,030
But I would argue that, you know, if you wanted to show off certain interactions like that's the place

85
00:06:07,030 --> 00:06:12,640
to do it, you could also just really scale things up a bit more.

86
00:06:12,650 --> 00:06:17,800
So if you really want to showcase, like, how this interaction worked, like you would really zoom

87
00:06:17,800 --> 00:06:21,160
into, like how this slider would be featured.

88
00:06:22,170 --> 00:06:26,940
So definitely think about that when you're exporting your content for your portfolio, whether that

89
00:06:26,940 --> 00:06:32,100
be like on something like Dribbler Behance or something like porfolio website, just be very mindful

90
00:06:32,100 --> 00:06:37,290
that you want to showcase not just like, oh, look how pretty this looks, but I want to showcase different

91
00:06:37,290 --> 00:06:38,310
interactions.

92
00:06:38,500 --> 00:06:45,390
I want to showcase how a slider like our carrousel like this would work or what happens when I click

93
00:06:45,390 --> 00:06:51,750
on the different navigation pieces or just like a general flow, like what happens when I go ahead and

94
00:06:51,750 --> 00:06:52,950
I click search?

95
00:06:53,280 --> 00:06:55,030
Like, what does that look like?

96
00:06:55,620 --> 00:07:01,380
So keep that in mind when you're exporting, like, different types of designs for the sake of your

97
00:07:01,380 --> 00:07:06,620
portfolio, because this will really help you just kind of show off your work much more easier.

98
00:07:06,630 --> 00:07:11,430
And there's so many different resources out there just like this, this and this.

99
00:07:11,460 --> 00:07:13,440
So let's take this, for example.

100
00:07:13,600 --> 00:07:18,030
We'll bring that in really quickly and let's see what that looks like.

101
00:07:19,020 --> 00:07:20,520
I just copy the screen.

102
00:07:20,520 --> 00:07:22,170
So let's let's do that again.

103
00:07:22,470 --> 00:07:23,100
There it is.

104
00:07:23,520 --> 00:07:27,290
We'll do iPhone X minimal and we're going to bring that into our portfolio.

105
00:07:28,590 --> 00:07:37,530
And for this one, we'll take this, so I'm going to copy that and go to my screen.

106
00:07:42,730 --> 00:07:44,250
It should work.

107
00:07:50,140 --> 00:07:52,540
So what you can do is there's a plug in.

108
00:07:54,530 --> 00:07:57,200
That can turn your.

109
00:07:59,180 --> 00:08:03,380
Your screen shot over here, like into an isometric view.

110
00:08:05,360 --> 00:08:06,150
So like that.

111
00:08:06,560 --> 00:08:11,390
So this is just a 45 degree angle, and so what we're going to do is.

112
00:08:17,610 --> 00:08:19,270
They're just going to flip it.

113
00:08:31,320 --> 00:08:32,780
Let's make sure that fits.

114
00:08:39,980 --> 00:08:41,340
And there you go.

115
00:08:41,570 --> 00:08:46,970
So with the use of like a plug in, you can really help make your designs look a little more dynamic

116
00:08:46,970 --> 00:08:48,050
with something like that.

117
00:08:48,650 --> 00:08:54,730
What you can also do, you can just copy and paste something like this over and over again.

118
00:08:56,580 --> 00:09:02,550
So this is a different shadows, so you can copy and paste this if you want to group it, you can Grubert.

119
00:09:03,990 --> 00:09:10,200
And make multiple versions of it, you don't need to have a drop shadow on it if you don't want to.

120
00:09:11,900 --> 00:09:16,730
Just kind of have it floating there, but you can show like your own entire application in just like

121
00:09:16,730 --> 00:09:18,610
one shot of all the different screens.

122
00:09:19,040 --> 00:09:21,380
So that's how I would approach building out your portfolio.

123
00:09:21,380 --> 00:09:22,910
Images use real devices.

124
00:09:23,210 --> 00:09:27,800
Sometimes you don't need to like if it's a Web based product, you could just kind of show just the

125
00:09:27,800 --> 00:09:33,080
screenshot of the entire screen, but show off your beautiful work and it's really easy to do.

126
00:09:33,080 --> 00:09:40,190
So just search even on Google for mock ups, for iPhones or Google pixels or whatever type of device

127
00:09:40,190 --> 00:09:41,780
that you're using, even Web browsers.

128
00:09:41,780 --> 00:09:44,270
And there's so many Theama options out there.

129
00:09:44,630 --> 00:09:49,250
So all of these will be available to you and go out there and start exporting the designs that you created

130
00:09:49,250 --> 00:09:50,150
to show off.