Skip to main content

Using Free Templates & Adobe Market to Mockup in Photoshop

Lesson 106 from: Adobe Photoshop Mastery

Daniel Walter Scott

Using Free Templates & Adobe Market to Mockup in Photoshop

Lesson 106 from: Adobe Photoshop Mastery

Daniel Walter Scott

buy this class

$00

$00
Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2000+ more >

Lesson Info

106. Using Free Templates & Adobe Market to Mockup in Photoshop

Lessons

Class Trailer

Getting Started

1

Class Introduction

03:24
2

Before you get Started with the Photoshop Advanced Course

01:28

Selections & Masking - Advanced

3

The Easiest Way in the World to Mask a Person in Adobe Photoshop

24:23
4

Class Project - Select Subject

01:41
5

Select Mask & Changing a Color using Photoshop - Color Range

10:00
6

Using Photoshop Selection to Fix Grass & Sky - Color Range

07:20
7

How to Change the Color of Skin in Photoshop - Color Range

08:05
8

How to Create an Ink Splash Image Around Text - Color Range

15:02
9

Class Project - Color Range in Adobe Photoshop

01:54
10

Mask on a Group Rather than each Layer

11:18
11

Advanced Masking using a Channels in Adobe Photoshop

14:14
12

Class Project - Channel Mask

01:30
13

How to Make Selections in Photoshop Based on the Focus Area

22:53
14

Class Project - Focus Area

01:11
15

Selection Trick Using the Smudge Tool in Photoshop

04:16
16

Future of Selections in Photoshop with Adobe Sneaks

07:04
17

Quiz - Selection & Masking

Preferences & Workflow

18

Advanced Preference Changes for Adobe Photoshop

08:36
19

How to Speed up Adobe Photoshop if it’s Running Slow

07:48
20

Workflow Tips & Tricks Like a Professional in Photoshop

13:45
21

Advanced Layer Tricks in Adobe Photoshop CC

05:58
22

Automatically Add a Watermark Text or Logo in Photoshop

08:29
23

Batch or Image Process Multiple Images at Once in Photoshop

09:05
24

How to put Loads of Images into one Photoshop File Quickly

07:04
25

Weird Adobe Photoshop Features & Easter Eggs

06:37

Fixing Images

26

How to Enlarge Images Without Becoming Blurry in Photoshop

06:57
27

How to Fix Blurry Images in Photoshop Using Shake Reductions

08:17
28

Advanced Color & Tone Correction Using Levels in Photoshop

06:44
29

Advanced Curves in Adobe Photoshop CC

06:34
30

Quiz - Fixing Images

Cropping & Aligning & Distorting

31

How to Reshape Images Without Distorting in Photoshop Content Aware Scale

09:44
32

How to use Content Aware Move in Photoshop

08:38
33

How to use Content Aware Extend in Adobe Photoshop

07:28
34

Removing Objects Using Content Aware Fill in Photoshop

07:01
35

Class Project - Content Aware Fill

01:03
36

Cropping Tricks Delete Pixel & Reveal Cropped Content in Photoshop

06:11
37

Automatically Crop & Rotate Scanned Documents in Photoshop

05:35
38

Crop Angled Images to Straighten Perspective Cropping Photoshop

04:42
39

How to Trim the White Away from the Edge of an Image in Photoshop

01:52
40

Automatically Align Layers in Adobe Photoshop CC

07:38
41

How to Reshape Images using the Puppet Warp in Photoshop

18:10
42

Class Exercise - Puppet Warp

01:14
43

How to Change the Perspective in Photoshop Perspective Warp

05:47
44

Quiz - Cropping & Aligning & Distorting

Color

45

How to Color Black & White Image in Photoshop

09:42
46

How to Create a Duotone Effect in Adobe Photoshop CC

09:28
47

44. Class Project – Duotone in Adobe Photoshop

02:20
48

How to create the Glitch Effect in Adobe Photoshop

07:01
49

Class Project - Glitch Effect in Adobe Photoshop

00:44
50

Color Grading with Orange & Teal Effect in Adobe Photoshop

05:36
51

Class Project - Color Grading in Adobe Photoshop

00:49
52

Quiz - Color

CC Libraries

53

Advanced CC Libraries Tricks and Tips Photoshop

19:15

Typography

54

Advanced Type Trick & Workflows in Adobe Photoshop

19:38
55

Photoshop Can Guess your Font Using Match Fonts

10:43
56

Quiz - Typography

Artboards

57

52. Adding Artboards to your Photoshop Workflow Properly

05:24
58

How to Add Images Correctly to a Photoshop Artboard

08:17
59

Using Smart Objects & Relinking Images in Photoshop

04:10
60

Advanced Speed Tricks for Updating Artboards in Photoshop

04:09
61

Export Artboards as PDF & Separate JPGs in Photoshop

05:38
62

Quiz - Artboards

Retouching

63

Advanced Tricks for Healing Brush for Retouching in Photoshop

08:24
64

Don’t Forget About Clone Tool Stamp in Photoshop

06:09
65

How to use the Patch Tool for Retouching in Photoshop

06:41
66

Class Exercise – Retouching in Photoshop

01:15
67

How to Retouch in Photoshop Using Face Aware in Liquify

06:50
68

How to Use Vanishing Point to Mocking up Designs in Photoshop

12:19
69

Vanishing Point - Cloning & Healing at an Angle in Photoshop

11:19
70

64. Class Exercise - Vanishing Point in Photoshop

00:51
71

Fixing & Retouching Skin Tone in Adobe Photoshop

06:01
72

Retouching Eyes by Enhancing in Adobe Photoshop

08:00
73

Retouching Eyes with a Little Bit of Fakery in Photoshop

09:00
74

Fully Faking Believable Eyes in Adobe Photoshop

06:45
75

Class Project – Eyes in Photoshop

00:51
76

70. How to Realistically Whiten Teeth in Adobe Photoshop

11:44
77

Class Project – Teeth in Photoshop

00:57
78

Quiz - Retouching

Layers

79

Difference Between Place Linked vs Place Embedded in Photoshop

08:22
80

What is the Difference Between Fill & Opacity in Layer

01:11
81

How to Use & Export Layer Comps in Adobe Photoshop

03:27

Visual Styles & Effects

82

75. How to Create a Double Exposure in Adobe Photoshop

11:07
83

Class Project - Double Exposure in Photoshop

01:17
84

How to Create a Watercolor Painting Effect in Photoshop

09:23
85

Class Project – Watercolor in Photoshop

00:32
86

How to Decay Pixel Explosion Dispersion Method in Photoshop

13:47
87

How to Make Exploding Shoe Effect in Adobe Photoshop

10:49
88

Class Project – Decay in Photoshop

00:51
89

Quiz - Visual Styles & Effects

Video & Animated Gifs for Social Media

90

How to Edit Video in Adobe Photoshop

25:42
91

Parallax Effect to Make Photos Move in Photoshop

13:22
92

Class Project – Parallax in Photoshop

01:15
93

How to Create Live Images - Cinemagraphs in Photoshop

13:19
94

Class Project – Cinemagraph in Photoshop

01:35

Web Design

95

How to Setup a File Ready for Web and UI Design in Photoshop

09:32
96

How to Export Your Web Design UI Project for Dreamweaver

07:57

3D

97

How to Make 3D Text & 3D Logos in Photoshop

11:52
98

How to Add and Change 3D Materials & Textures in Photoshop

08:42
99

Using Cameras & Depth of Field in 3D Photoshop

05:12
100

Adding Lights & Casting Shadows Using Photoshop 3D

10:01
101

How to Export a High Quality 3D Image from Photoshop

04:42
102

Class Project – 3D in Photoshop

01:08
103

How to Create Fake 3D Lines & Type in Photoshop

09:33
104

Fake 2.5D Gradient Effect with Paths in Photoshop

07:10
105

Class Project - Fake 3D in Photoshop

00:46

Mock-ups & Presenting Your Work

106

Using Free Templates & Adobe Market to Mockup in Photoshop

11:07
107

How Make a Reusable Mockup in Photoshop Using Smart Objects

06:40
108

Mockup Poster Against a Wall Using Photoshop

08:16
109

How to Make a Simple UI App Web Design Mockup Using Photoshop

06:06
110

Class Project – Mockups in Photoshop

01:00

Exporting

111

How to Proofing Colors in Adobe Photoshop Ready for Print

04:04
112

How to Tidy Up your Photoshop Files Before Sending Them Out

10:21
113

How to Package Your Photoshop File to Include Linked Images

07:22
114

3 Kinds of File Export for Photoshop Social Media Web & Print

12:59
115

Quiz - Exporting

What’s Next

116

What’s Next After Your Photoshop Advanced Course

01:05

Final Quiz

117

Final Quiz

Lesson Info

Using Free Templates & Adobe Market to Mockup in Photoshop

Hi there. This video is all about mock ups. We're gonna take artwork 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 the easy way as in adobe have given us these templates already there. Really sophisticated. You just add your graphics, you can see there's the UI from earlier at our logos and magically the mock up gets added to our glasses case and even trifle 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. Alright to get started. We need to find these mock ups hidden under the Creative cloud app on a Mac. It's an icon at the top here. And if you're on a pc it's in the bottom. Right? And what you'll find is it will look like this. Probably go to assets, go to 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 early version of Photo...

shop. So maybe CS six, 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 like personal login. Like I log into my creative cloud with my own like email address, some larger institutions, get a cheaper version but it doesn't come with this kind of like personalized libraries awesomeness. So check with your I. T. 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 hacked 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 Meck ups there's one in there called where are you friends mock up poster. That's what we'll do first. I'm not going to include everything from this tutorial just because the file sizes are really big. All right so to find our mock ups creative cloud app assets market and just click on this little search icon and type in mock up really well you're different results if you put a space in there. I know mock ups one word. I don't know it's one word I spelled it wrong earlier and it didn't get very good results but you get different results. So type in mock up and then you'll see just amazing amount of ready to go mock ups and what's really cool about it is let's click on this one here. It's a PSD so it's gonna have all sorts of layers and coolness that we can easily replace using something called smart objects, click download put it into one of your library's already done a couple once it's downloaded you'll see like this little icon. Little change that looks like it's busy doing something to open it up. And he likes to start in this kind of like 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'll open up Photoshop, you can see here. Super layer awesomeness. And what most people do when they're not all designed by the same person, but there's a there's often a layer that says replace me and often it's got a color if you two want to make a colored layer and 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 gonna do is go file and place embedded and go in your exercise files. We've got one in the mock ups called poster. Just something we made earlier. Use your own version. You don't have to use this. Okay, I'm making it bigger. So it covers the whole poster and I might quickly make ah white border around because I like that from the original. So I'm just gonna draw a box weirdly, if you draw a rectangle right with 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 control T on my Mac or sorry, command T on a MAC control on a Pc and it will snap to the edges after that. So just drag it out. Alright, save it close that down and magic just updates the markup. Good thing about this particular markup, 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 if you don't like the folds either you prefer the shine, some sort of kind of glassy reflection or there's kind of a glassy wobbly version, you can decide which one you like. I think I like the vaults. Have a look through, see what else has done. There's a different kind of shadow, like an extra double one that the designer of this decided like I don't want it. Maybe give them the option of it and blurred background. It's kind of cool. And there is another version of your smart object with some Gaussian blur and it's kind of faded out in the background. Very cool. Alright, let's look at some other mock ups. So in my library panel, I've got this one here for IPhone six mock ups a little old but the market 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, familiar file open And then your 14 web folder. Remember this guy we used earlier on web design example? I'm going to open them up. Okay. And you can copy and paste everything from this art board. It's probably easier just to select on the outboard by clicking the name at the top using the move tool, then go to file. Let's go to exports and I'm going to export to pdf. You can export the files which gives you jpeg and PNG Pdf is gonna at least retain some of the vector. Okay. I've used lots of type in vector shapes in here. So Pdf is going to retain those either. Either. Where's it gonna go? I'm gonna stick it on my very messy desktop. You guys have done this to me? I keep my desk up nice and clean, but I started dumping it here. Can't stop. All right. We're going to call this one mobile Ui Mobile ui. This option here finally comes into play export selected outboards. Just the one I had selected in here and I want to make sure Well, that's like that quick run. Thank you Photoshop and what I'm gonna do in here. I'm gonna go to file. There we go. Place linked why it just means that often. I'm kind of this is not a finished app. So it's a design like the version 123456. So if you link it it means you can update that file and we'll update in your mock up. So on my desktop it's called mobile ui place wrong size zoom out. What do you want, loads, drag it down. Two men return save that file. Yes, please back into here. Ah look at that. 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 re linked to a different file. How efficient are we? Black phone also Cool. 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 the 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 art board 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. Okay, so what you can do is click on the art board, name, file export and go export selected. We end up at the exact same place except this one here. You want it to be format, it could be anything pdf again is going to keep the vector so is SVg do whatever. Feels good. Alright, back to Photoshop. Alright. I close those down. What I want to do is show you another really cool example. This glasses case. Okay. 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 if you find you open up a mock up and there's stuff everywhere and you're like what do I update? Often just click on this icon here. Remember we can sort all my layers to only show me smart objects that will often only show me the things that need replacing. Okay, all of it or what objects replace me. Here we go. Double click um I'm going to bring in my logo file place embedded And in your exercise files there is under 16 mock ups. There is a logo that I'm making at the moment. It's just an illustrator file quick. Okay, just a black and white logo because it's vector though. Hopefully return I'm gonna bend that one there. Save it, click in here. How cool is that? I am very impressed with this markup like it looks like it's been in boston there. So cool. Alright what else 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? Is this one trifle brochure? Okay so you've designed it say in illustrator or in design you can replace the logo and it will end up in the right place. The whole thing is being mocked up so you can lay it into these my wine bottle. Okay same thing here. There is a replacement layer. You can double click go in kick. Okay save it, save it. Even come back and it's all mocked up. Nice. Now there are loads of cool mock ups in the W market and it's growing all the time but sometimes it's just not the angle you want or just just not doing it for you. So the other place to go is something like a stock library site. So I use a mixture of shutter stock, 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 mock up or magazine blank. The trouble is that you're not going to get PSD S so you're gonna have to mock these up yourself afterwards and we'll do that in the next video to show you how to set it up, like, like the people have done for that adobe market. You can see in here just there's just a lot of examples. So either blank, whatever you're looking for, blank or mock up. 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. Okay, 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. All right, let's go do that now.

Class Materials

Bonus Materials with Purchase

Exercise Files
Completed Files Part 2
Completed Files Part 1

RELATED ARTICLES

RELATED ARTICLES