Creating Launch Graphics for Your Website Launch

Wanna create the perfect launch graphics to share on social media for your next website launch? This video tutorial is for you.

Checkout the video below for a quick tutorial on creating launch graphics for your next website launch.  We also add notes under the video in case of any small updates. Let us know in the comments if you have any questions, or if we need to make an update to the video.
You can also find a video transcript underneath the video.

Video Transcript:
Hey guys, Krista here from Davey & Krista where we help creative businesses build brands that book. In today’s video I’m going to walk you through creating a computer launch image for your new website to help with promotion or social media, or really just we’re talking about your, your new website in general. So to get started you’re going to need some sort of either stock photography image like this one from Shay Cochrane’s SC Stock Shop, or a laptop or a desktop image to actually put your screenshot into in. You’re also gonna need a screenshot. If you don’t know how to take a screenshot on a Mac computer, you can hit Command+Shift+Three and that will take a screenshot of your screen that you can then open up in Photoshop. Next we’re going to cut. We’re going to hit Command-A to select all of the document, and we’re going to just click Command-C or you could come up to Edit and go to Copy, and then we’re going to paste this image into our desktop photo. So you can hit Command-V or you could again come up to edit and then hit paste straight here.
For now I’m going to turn off this screenshot because there’s a step we need to do first. So I’m going to zoom in and then next I’m going to grab the rectangle tool and we’re going to draw a rectangle that is really close to the shape of the screen space on this desktop. It’s not gonna be exact because this image wasn’t shot like perfectly straight on and most of the images that you’re working with probably won’t have been shot 100-percent straight on. But we can tweak this graphic a little bit to make it work. So I’m going to let it go and I’m going to close these properties and then I’m going to lower the opacity a bit so that we can see where the images overlap. So it looks like I need to tweak this corner right here and maybe this one right here and this one right here to get it to be perfect.
So I’m gonna hit Command-T and then if I hold Command down while I’m hovering over one of the corners—I’m going to zoom in so you can see—it’s going to let me tweak this corner so I can get it to be exact. And so that one’s looking pretty good. And then I’m going to hold Command again and do this corner and we’ll come over to this one. And again just holding down command looking for that white arrow, and that lets me tweak the corner. When I’m happy with the changes and it looks like there’s no overlap—we don’t see any white—I’m gonna hit enter. So it looks like the shape is just a tiny bit off and, but if I make it a little bit bigger, that should take care of it. So one way to make the shape bigger is to, again, hit Command-T and then hold down option and shift at the same time, while you grab this corner of the box and that’ll let you just pull it to make it a little bit bigger.
And then I’m gonna hit enter and we don’t see any more white and it’s okay that we’re overlapping the black a little bit. That part doesn’t need to be exact. So next while I’m on the shape, I’m going to bring the opacity up to 100 percent. Next I’m going to turn on the screenshot and I’m going to move it above the rectangle. Then I’m going to hold down the Option key and put my mouse in-between the two layers. And I’m going to look for this little Arrow, this little pointing down Arrow. And then while still holding Option, I’m going to click on the layers through this line in between the layers. And that’s going to commit this little screenshot to this shape. So it’s going to lock it in there. It’s called a clipping mask. So next I’m going to zoom out a little bit and then we’re going to want to size the screenshot so that it fits better within the space.
So while I’m clicked on it, I’m going to hit Command-T and then, again, I’m going to just drag it so that it’s a smaller size. And it looks like I’m going to need to turn it a little bit so that this line right here is a little more matching with the actual line of the screen. This one doesn’t need to be completely perfect. I’m just going to grab the corner when I see this little rotate box and turn it a little bit more and then I’m going to hit enter to commit to the shape and if we want to check to see how—it looks like I might be a little off. I could compare this line with this line and it looks like I need to tweak it just a little bit more to get it perfect, so that’s better and then I’ll drag it down so that it’s all centered.
And then next to make it look a little bit more like a screen, we’re going to take this red shape, um, and we’re going to make it dark. So we’re going to do with like a really dark gray and then I’m gonna lower the opacity of this shape, just a tiny, tiny bit because an actual photo of a desktop wouldn’t be super bright. So we’re going to make it like 99 percent. And then we’re gonna add a shadow on the inside of this box so that it looks like there’s a little bit of dimension. So we’re going to come up to the top menu where it says Layer, and then come to Layer Style. And then over to Inner Shadow. I’m going to move this box so we can see a little bit better. And we want it to be, I’m going to make it really strong so you can see what it does.
If I really like increased the size, you can see that it’s coming in right here. We’d probably want this depending on the size of their image to be about 20. And then the distance, again, like if I really increase it, you can see what it does. You just want it to be coming out just a little bit so that you can tell that there’s some dimension. And we want the opacity to be probably around 35. It’s not going to be super noticeable. It’s just a subtle effect. If you look really closely you can see it here to make it look like it is a screen and like the—because when you actually look at a screen, the image isn’t right in the front of the screen. There’s a piece of glass above it. So that is all that you would do to actually create your image. And then you would probably just want to come up and hit File and then Export and maybe Save it for Web or Export as a PNG to export the image with all of these layers compressed together. So that’s it. If you liked this video, make sure you subscribe to our YouTube channel. And if you have any questions about the video, let us know in the comments. You can also request a tutorial by using the form on our website over at daveyandkrista.com/showit.