hi everybody this is josh continuing our figma course with lesson seven in this lesson i'm going to show you how to cut out photos using vector shapes we're going to take a penny and cut out abraham lincoln's portrait but you can do this with any photo let's get started so here we are in the document i'm just continuing to build on we can see all the progress we've made so far i'm just going to hold down space bar and pan over to a blank area here and create a new frame this should be easy by now press f on the keyboard and we're going to choose from the right hand side over here the instagram post which is 1080 by 1080. i'm going to line it up here with my other artboards or frames and i'm just going to rename it here for fun we'll call it lesson seven and you can find a penny pretty easily with a google search but i've made it as easy as possible if you go to joshuapomeroy.com downloads you can get assets and i have a 2021 penny here in a google drive folder open this up right click and choose download this will download it to your default downloads folder and then we can drag and drop it right into our figma tab here so back to our figma tab grab that penny jpeg and drop it right in hold ctrl and use the mouse wheel or your track pad and you can zoom in and out i'm going to line it up here on my frame we can size it up if we want to okay that's pretty good now i'm just going to zoom in here nice and tight p on the keyboard selects the pen tool and i'm going to use the method of creating a low polygon shape first and then push the curves into place so i'm going to choose a corner here maybe this left hand corner plot a point there i'm going to ignore the curves for now and just do my nodes and anywhere that i want to have a bump or a curve i'll put a line segment between them and we'll come back through and push and pull those right into place so let's get his bow tie here under his beard there's a little bump there zoom in a little more you can get really really precise and this is a great way to get clean cutouts and if this black line is hard to see you can change it even while you're still creating your vector shape and i'm going to change it to something i can see a little bit easier maybe a bright blue there we go so we can see the stroke i'll continue around here his wavy hair so essentially just like we did before with the sketches when we were tracing around the sketches we're using the same technique here but we'll do something a little bit different using the mask feature in figma to cut out abraham lincoln right out of this penny okay and then finish it off by clicking on the original point that you started with or the first point that you started with v on the keyboard that'll go back to our selection tool and now holding control in between these line segments we can pull these curves right into place if the curve isn't quite right we can grab those handles move that around a little bit move this one around so that bottom curve is nice we've got a little bump here there's his bow tie under his beard and just keep going around holding ctrl pulling and pushing these curves right into place and what i'm trying to do here is just get really close to the perimeter without having any extra pixels outside of my shape there we go that looks pretty good so i'm going to zoom out now i can double click to get out of editing mode here i'm going to remove my stroke and add a fill and it really doesn't matter what color this vector shape is the real trick now is just to make sure that your vector shape is underneath the photo and you can do this in the layers panel by dragging your penny right above the vector shape there we go so now we can't see it but it's still there so make sure that both of these are selected now we can just hold shift and select them both in the layers panel or just lasso select by clicking and dragging to make sure that both of those things are selected and then right up here we have use as mask and we can just click this button or the keyboard shortcut is ctrl alt m and that's all you have to do just click that and there you go make sure you don't move your vector shape after you've created it now i'm going to make sure that i have both of these selected again over here in the layers panel i can make sure that those are both highlighted and control g we'll put those into a group that'll make it a little bit easier to manage and you can see that this is now cut out and to really show you that this is cut out i'm going to change the color of my background so to do that select your frame you can click on the frame label or over here where you've got the sort of hashtag icon that's your frame or artboard and you can change the color fill right over here so let's just use that bright blue again and see now we have no pennies showing just abraham lincoln and we can size it up i'm holding shift and alt to size it proportionately i'm going to drag a duplicate holding alt and then shift i'm going to hold shift while i drag it so i can make sure i constrain my movement and shift h can flip it and i'm just going to line those up so it's two abraham lincoln's looking right at each other now of course this would be a lot more fun using your own photos so maybe try this out with a photo that you've taken with your phone or maybe something that you've done in another class and see if you can cut out a photo using that vector shape method it's really that simple so this is going to be a pretty short lesson but i do want to add in here how to export your artboard or frame make sure you have the frame selected again and then over here in the inspector panel on the right hand side down at the very bottom you can see we have export with a little plus icon i'm going to click that and that will add an export option and i'm just going to choose jpeg and then export lesson 7 and i can open it right up in google chrome and there is our artwork so that completes lesson 7 for the figma course thank you guys for watching and i'll see you in the next lesson bye for now [Music]