Using free templates & Adobe Market to mockup in Photoshop

Hi there, this video is all about mock-ups. We're going to take out work that we've done throughout the course and mock them up in different ways, and we're going to do it the super easy way, the easy way as in, Adobe have given us these templates already, they're really sophisticated, you just add your graphics, you can see, there's the UI from earlier, add our logos, and magically the mock-up gets added to our glasses case, and even trifold brochures, wine bottles, they're all ready to go for us. They're going to take seconds to update. Let's jump in now, take a look how to get these things going. 

To get started we need to find these mock-ups. They're hidden under the Creative Cloud app. On a Mac it's an icon up the top here, and if you're on a PC it's at bottom right. What you'll find is, it will look like this probably, go to 'Assets, 'Market', and you'll get these kind of free, mostly icons, but some mock-ups. You won't have access to this if you are using an earlier version of Photoshop, so maybe CS6. You also won't have access to it if you have potentially what's called a Machine License. So if you're working in a big University, and you don't have your own kind of personal login, like I login to Creative Cloud with my own email address. Some larger institutions get a cheaper version, but it doesn't come with this kind of personalized libraries awesomeness. So check with your IT department to see whether you do have that, and they just haven't given you the login, or whether you just don't have access to it. Also, if you have a hacked and stolen version, it's probably not going to work either. 

If you don't have a working version, I've downloaded one for you and put it in the exercise files. So if you find the '16 Mock-ups', there's one in there called, where are you, friend? 'Mock-up Poster', that's the one we'll do first. I'm not going to include everything from this tutorial, just because the file sizes are really big. So to find our mock-ups, 'Creative Cloud App', 'Assets', 'Market', and just click on this little search icon, and type in 'mock up'. Well, you get different results if you put a space in there, I know mock-up's one word. Why don't I know it's one word, I spelt it wrong earlier, and didn't get very good results. You get different results. So type in mock up, and then you'll see, just amazing amount of ready to go mockups. And what's really cool about it is - let's click on this one here - it's a PSD. 

So it's going to have all sorts of layers and coolness that we can easily replace using something called Smart Objects. So click 'Download', put it into one of your libraries, I've already done a couple. Once it's downloaded, you'll see like this little icon will change, looks like it's busy doing something. So open it up. Photoshop likes to start this kind of welcome screen, you can just go to 'Window' and open up your 'Libraries'. So here's the one I've downloaded. Just double click it and it will open up in Photoshop. You can see here, super layer awesomeness, and what most people do, they're not all designed by the same person, but there's often a layer that says Replace Me, and often it's got a color. If you do want to make a colored layer, you can just right click any layer and just give it a color. 

Anyway, so what we want to do is double click it, because it's a Smart Object it opens up in its own little tab, and now we just get to replace it. So what I'm going to do is, go 'File', 'Place Embedded'. In your 'Exercise Files', we've got one, under 'Mockups', called 'Poster'. Just something we made earlier, use your own version, you don't have to use this. I'm making it bigger so it covers the whole poster. I might quickly make a white border around because I like that from the original. So I'm just going to draw a box, weirdly if you draw a rectangle, up here it's got no Fill, and it's got a Stroke of, I want it to be bigger, maybe 40. When you initially drag it out it doesn't snap to the edges, but once you transform it-- so 'Ctrl T' on my Mac, sorry, 'Command T' on a Mac, 'Ctrl T' on a PC. And it will snap to the edges after that, so just drag it out. 'Save' it, 'close' that down, and magic, just updates the mock-up. 

The cool thing about this particular mock-up, it has lots of things you can turn on and off. You might not like the lighting, or let's say you don't like the lighting, you don't like the folds either. You prefer the shine, some sort of kind of glassy reflection, or just kind of a glassy wobbly version. You can decide which one you like. I think I like the folds. Have a look through, see what else is done, there's a different kind of shadow, like an extra double one that the designer of this decided like, don't want to maybe give them the option of it. And blurred background, it's kind of cool. In there is another version of your Smart Object with some Gaussian Blur, and it's kind of faded out in the background; very cool. 

Let's have a look at some other mock-ups, so in my Libraries Panel, I've got this one here for, it's an iPhone 6 mock-up, a little old. The mock-up itself is pretty amazing, right? So in here there's a bunch of stuff, there's a white version, there's a black version. Basically all you need to do is place your image here, so double click it to go inside, and I'll show you two ways that I get my kind of UI designs in here. Either an app design or say a mobile website design. We're going to open up a file from earlier. 'File', 'Open', and in your '14 Web' folder, remember this guy we used earlier on, ‘Web Design Example’, open him up. You can copy and paste everything from this Artboard. It's probably easy just to select on the Artboard by clicking the name at the top using the Move Tool. Then go to 'File', let's go to 'Export'. I'm going to export to PDF. You can export to files, which gives you jpgs and pngs. PDF is going to at least retain some of the vector. I've used lots of type and vector shapes in here. So a PDF is going to retain those. 

Where's it going to go? I'm going to stick it on my very messy desktop, you guys have done this to me. I'd keep my desktop nice and clean, but I started dumping in here, and I can't stop. We're going to call this one 'Mobile UI'. This option here finally comes into play. 'Export Selected Artboards', just the one I had selected in here. And I want to make sure all of that's like that. Click 'Run'. Thank you, Photoshop. What I'm going to do in here, go to 'File', 'Place Linked'. Why? It just means that-- often I'm kind of-- this is not a finished app, it's a design. Like their versions 1-6. So if you link it, means you can update that file, and it will update in your mockup. So on my Desktop, it's called Mobile UI. Place, it's the wrong size, zoom out. Zoom out loads. Drag it down, zoom in. Hit 'Return'. Save that file? Yes, please. Back into here. Ah, look at that. Cool, huh? 

So when you have updates, you need to change it, you can just go to here, you can right click, you can either just update the PDF and in here it will update, or you can right click and just relink to a different file. How efficient are we! Black phone, oh, so good! One thing I'll show you is how to get your designs from, say something like Adobe XD. Adobe XD is-- I've got a course on this. It's just for  mocking up, especially websites and apps, because it allows you to do what Photoshop does in terms of their mocking up, but it also allows you to add interactivity for testing; super cool. 

What you can do, if it's relatively the right size you can just click on the Artboard name and copy it, and just paste it straight up into the mock-up. The problem is it's the wrong size and it's not vector. So what you can do is click on the Artboard name, 'File', 'Export', and go 'Selected'. We end up at the exact same place, except this one here, you want it to be-- 'Format', can be anything, PDF again is going to keep the vector, so is SVG, but do whatever feels good. All right, back to Photoshop. I'll close this down. What I want to do is show you another really cool example, which is Glasses Case. It's another one I've downloaded from the Adobe Market. And look how good and detailed that is. 

So in my Layers Panel here, 'Libraries', there's 'Glasses Case', not as well laid out. One thing you can do is, if you open up a mock-up, and there's stuff everywhere, and you're like, "Ah, what do I update?" Often just click on this icon here. Remember we can sort all my layers to only show me Smart Objects. It will often only show me the things that need replacing. All of it, or Smart Objects. 'Replace Me', here we go. Double click him, I'm going to bring in my logo; 'File', 'Place Embedded'. And in your 'Exercise Files', under '16 Mock-ups' there is a logo. I'm making at the moment, it's just an Illustrator file. Click 'OK', it's a black and white logo. Because it's vector though, hopefully. Hit 'Return'. I'm going to bin that one there, save it, click in here. How cool is that! I am very impressed with this mock-up. It looks like it's been embossed in there. So cool! 

What else have we got? I'll show you just two more, but it's basically all doing the same thing. I've got it under-- I was using it for another project. Where are you, my library? It's this one, Trifold Brochure. So you've designed it say in Illustrator or InDesign, you can replace the logo, and it will end up in the right place. The whole thing's being mocked up so you can lay it into these. My wine bottle, same thing here. There is a Replace Me layer. You can double click, go in. Click 'OK', 'Save' it. Come back and it's all mocked up nice. Now there are loads of cool mockups in the Adobe Market. It's growing all the time, but sometimes it's just not the angle you want, or just not doing it for you. So the other place to go is something like a stock library site. I use a mixture of Shutterstock, iStock, and Adobe Stock. There are different things on different ones. I'm using Adobe Stock more and more because it's tied in so nicely, like you saw in this course. You can see how I just typed in magazine mockup or magazine blank. The trouble is, you're not going to get PSDs, so you're going to have to mock these up yourself afterwards. We'll do that in the next video, show you how to set it up like, like the people have done for their Adobe Market. You can see in here, there's just a lot of examples. 

So either magazine blank, whatever you're looking for, blank or mockup. So hopefully you can find something in the Adobe market or a stock library site, and mock it up yourself, and that's what we'll do in the next video. I'll show you how to set up your mock-up. You might be having a really special thing you want for your agency or for your student portfolio, or maybe it's your products, so you've got a special kind of packaging, you can photograph it, and we'll show you how to mock it up, so you can save time every time, not having to kind of move it all around. Let's go do that now.