Everyone, and welcome back, so we're going to be talking about portfolios now, we have a lot of different
images here that we've been working on with our our final compositions.
And like when we get to a part in our project where we are really happy with you, the final results,
even though projects are forever changing.
I mean, we always iterate on them.
There will be a point where, you know, we kind of like take our foot off the gas pedal and we're ready
to just kind of display our work and just talk about it a bit with the community, get some feedback.
And also, it's great to use it as a means to find a new job and impress potential employers.
So what I've done here is I've taken a bunch of different screens, as you can see.
And what I'm going to do is I'm going to explore all of these to my desktop.
So I'm just going to select them all and I'm going to go down here.
And so right now, they're all set within a frame size as the iPhone X, and I'm happy with that for
now.
And I'm just going to click export.
And over here, you can export them to whatever type of file type that you like, I typically just use
PNG.
There's JPEG, there is SFG, if you're using vectors and stuff like that and PDF.
So, I mean, there's different options here, but I always feel like the PNG is probably the best option
you can export with the contents.
Only if you have like a transparent background, you can kind of remove that background as well.
In this case, we're going to actually keep the fill in the background of these frames and we're going
to show that in the export.
So I'm going to export these six layers and they're going to go straight to my desktop over here.
So let's just say that, OK, so now that we have those images there, what we want to do is we want
to display them in some sort of way.
Now, let's create a new page and we'll just call this page portfolio pieces.
And what we can do here is we can do shift command.
Okay.
And that is going to bring up our image placement kind of dialog box over here.
And we are going to drop those images into this file so they're all placed.
So here we go now, they're actually just pages, so we are just going to place these nicely together.
And then.
There you go.
OK, so now that we have all these images that we want to work with nicely placed together, what we're
going to do is we are going to bring up the iPhone mockups so you can find these types of mockups anywhere.
So I have a couple of different variations here, and this will be available to you as well.
So I have like an asymmetric view, if you kind of like that.
Look, if you just want to get that view of like a realistic iPhone X, you can get that with this.
Same thing with these visas, these are just kind of colorized a bit.
So this is kind of a grayish purple.
We have a yellow border.
So if you see like, I'm just going to take this off.
We have like a yellow border so it can go with the type of content that you're working with.
So what I'm going to do actually is I like this yellow a lot.
I'm actually going to take this whole frame and I'm going to just copy it into our portfolio piece,
the section.
So over here, I have my portfolio pieces section, and I'm really happy with that, so you can see
this is where the screen is, so we can just call this onboarding.
So we'll place the onboarding image in this one.
So we have the onboarding, the on boarding frame over here.
And what I like about this is we're going to kind of just create like a really nice composition that's
going to show off just our general design here.
So I'm just going to copy that option and drag and command, see that and then go into this iPhone.
And I'm going to try and find where I can place this.
So it actually displays really nicely within the screen.
So it's probably within content here.
And there you go.
So I've placed it in here.
You can kind of remove that screen, a placeholder and there you go.
You kind of have this perfectly placed image inside of this iPhone.
And there's so many different ways you can do this, like if I wanted to.
It's now that I have this iPhone, let's just place it nicely.
So now it's just displaying this one image.
So if we wanted to kind of show multiple images, we can like do side by side.
If we want if we want to show, like a flow the entire onboarding flow, we can do that.
We can also show kind of like a little bit of a stylized rendition of our images.
If he wants to just kind of make it a little bit more dynamic.
Something like that, if we want to show a different variations.
Now, this is purely speaking from like I would say, from a rebel perspective, if you just want to
take a quick snapshot of your work and then, like, post it there, this is like an awesome way to
do it.
And look at that.
It took us like five seconds to just put together a quick composition.
Even if I wanted to change the background color, I can do that if I wanted to add, like, a little
bit more depth to that background color.
I can do that just by kind of adding a little bit a darker color on the outside so we can kind of just
like make this.
A little bit of a gradient.
So, I mean, there's different ways you can do this.
And there you go, like we already have, like a dribble shot ready to go, it just took us like five
seconds, really high quality and very interesting to look at now from a perspective of, like, showing
off different types of pieces of your work for, like your portfolio website and stuff like that.
You can still do something like this.
But I would argue that, you know, if you wanted to show off certain interactions like that's the place
to do it, you could also just really scale things up a bit more.
So if you really want to showcase, like, how this interaction worked, like you would really zoom
into, like how this slider would be featured.
So definitely think about that when you're exporting your content for your portfolio, whether that
be like on something like Dribbler Behance or something like porfolio website, just be very mindful
that you want to showcase not just like, oh, look how pretty this looks, but I want to showcase different
interactions.
I want to showcase how a slider like our carrousel like this would work or what happens when I click
on the different navigation pieces or just like a general flow, like what happens when I go ahead and
I click search?
Like, what does that look like?
So keep that in mind when you're exporting, like, different types of designs for the sake of your
portfolio, because this will really help you just kind of show off your work much more easier.
And there's so many different resources out there just like this, this and this.
So let's take this, for example.
We'll bring that in really quickly and let's see what that looks like.
I just copy the screen.
So let's let's do that again.
There it is.
We'll do iPhone X minimal and we're going to bring that into our portfolio.
And for this one, we'll take this, so I'm going to copy that and go to my screen.
It should work.
So what you can do is there's a plug in.
That can turn your.
Your screen shot over here, like into an isometric view.
So like that.
So this is just a 45 degree angle, and so what we're going to do is.
They're just going to flip it.
Let's make sure that fits.
And there you go.
So with the use of like a plug in, you can really help make your designs look a little more dynamic
with something like that.
What you can also do, you can just copy and paste something like this over and over again.
So this is a different shadows, so you can copy and paste this if you want to group it, you can Grubert.
And make multiple versions of it, you don't need to have a drop shadow on it if you don't want to.
Just kind of have it floating there, but you can show like your own entire application in just like
one shot of all the different screens.
So that's how I would approach building out your portfolio.
Images use real devices.
Sometimes you don't need to like if it's a Web based product, you could just kind of show just the
screenshot of the entire screen, but show off your beautiful work and it's really easy to do.
So just search even on Google for mock ups, for iPhones or Google pixels or whatever type of device
that you're using, even Web browsers.
And there's so many Theama options out there.
So all of these will be available to you and go out there and start exporting the designs that you created
to show off.