All righty, welcome back. So the reason I recommend using mock ups to show your projects is that I believe it gives more of a professional look, then just having a square or rectangular image. It's also good for showing off mobile designs even if your website is being accessed on desktop. The great thing is that there are a lot of free mock ups already made. And all you'll need to do is edit a layer of the Smart Object, pasting in a new image the same size. I'll now show you two of the websites that I prefer using to find mock ups.

The first is mock up world and the second is freebie seberg. So I'll have links to all of this in the course. And so you can see on mock up world we have a variety of different types of mock ups. So there's an iPad Pro, this is even a food truck so you could actually replace this With your own company, logo, I guess is the idea. And you can see you can browse by category. So for example, iPhone and essentially what we're going to do is we're going to paste in a screenshot of one of our projects that is the size and so it'll fit into the iPhone and look like it's being accessed on an iPhone.

Alright, so we're gonna go to freebies Berg, and again another great website. I'm going to click on this S 10 one because I think it's better to have one where you can kind of cut out the background and just have this floating, and then put that into its own grid. So that's what we're gonna do. And you can see you're just going to scroll down, download the Photoshop file, we'll go to a link and then you click download for free. And this downloads a zip file with Photoshop files inside of it. I already have have my own prepared and the reason is because photo p cannot process 16 bit color depth, it can only use eight bit images.

So I prepared a few mock ups for you that I know that are a bit so they'll work in photo P. And now I guess I can show you photocopy. So this will be able to open Photoshop files, it can also open sketch files, but I prefer just using Photoshop files because I have Photoshop on my computer as well. And so we can close this, we can go to File, Open. And you can see I have my iPhone x mock up here. And we're going to open it and you might not be able to read that but it says screen goes here. So we're going to expand this and we see we have a layer that says your screen goes here.

So we're going to double click on that and this is actually opening the Smart Object And now what we're going to do is, if we don't know the pixel size, we can use this rectangular Select tool. And we can see that the pixel width is 1125, and the height is 2436. So I already know that this is an iPhone device. So we're going to go into our Chrome Dev Tools. Now I'm going to go to a project that I previously made. And so all we're going to do is we're going to right click, click inspect.

And you can see I already have the device toolbar toggled on. And you can see here there's actually a list of devices we can choose between these come standard, you can actually add your own as well if you have custom dimensions that you want to get. And if you click responsive, you can actually just type in the dimensions so you don't have to save a preset for everything. But for us, we are using iPhone six. So you might see that the width and height don't quite match what we had before. That's because this has a different device pixel ratio.

So basically it is times three. So or divided by three, depending on how you look at it. But this screenshot will work for our purposes because it's the right dimension and the right density. Okay, so we're just going to go back to this menu here, and we're just going to capture a screenshot. And so this will go to our Downloads folder, and we can cut this and we're going to put it into our assets folder, paste, just going to rename it Falcon fear. And so we can close this for now.

And now back in photo p, what we're going to do is we're still on our Smart Object layer, we can actually get rid of the text layer, we don't need that. And what we're going to do is file Open and place. And we're going to click on our fucking beer file and we'll double click to confirm that that's there. And then we're going to Ctrl S to save Smart Object. And now you can see that this updated our main file. And so you can see that we have our Falcon brewing homepage in this iPhone now.

Very cool. So if you don't like that this is kind of cut off, we can actually go back and change that. So depending on how it fits in the mobile device, so because our background layer is black, that's perfect. And I'm just going to lower this a little bit. Okay, save that again, and go back and we have that a little bit lower, and that looks good. So I'm going to save that.

And you can see when I press Ctrl S it actually saved as a Photoshop file, and it's good to hold up to This Just In Case, you want to edit it again later. So I'm just going to Ctrl x, and I'm going to paste this into a mockups folder instead. I do have something by the same name, so I can't really paste it in there. Okay, but anyway, it's in the Downloads folder for now. Alrighty, so now we've saved our project, we're going to get it ready to export. So the first thing we're going to do is we're going to remove this background.

So that'll give it a transparent background. That's what this checker pattern represents. And then we're going to go to File Export as PNG. And you can see that this is a little bit bigger than what we're going to need. So we're gonna make this smaller. So I'm just going to make it 500 pixels.

And that seems a lot more manageable. And we're going to save so we're actually going to run this file Now through our tiny PNG again, just to make sure we have an optimized version. So we're gonna do that. Okay, and 60%, we say pretty good. Okay, so we're going to download that. Okay, and we're going to show that in our folder.

And we're going to take both of these, and we'll put those into our assets folder. And this is the one that is optimized. So I'll just call this one, project dash one. And so we're actually going to copy this. And I believe I still have my image folder open. So this is our against source assets image, and we're going to paste that inside.

So you're going to repeat this process for any other projects that you have. As I said, in my opinion, it's good to have at least six different projects on your website. And you should try to have that amount before you start job hunting because it shows that you have kind of a wide range of experience. And yeah, so now we're ready to actually use this project markup in our project section code. Alright, I'll see you in that one. Bye for now.