Skip to main content

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

Lesson 109 from: Adobe Photoshop Mastery

Daniel Walter Scott

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

Lesson 109 from: Adobe Photoshop Mastery

Daniel Walter Scott

buy this class

$00

$00
Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2200+ more >

Lesson Info

109. How to Make a Simple UI App Web Design Mockup Using 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

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

Hi there. This video is all about mocking up a Ui app design. It's a nice simple one. We're going to scale these guys down which is not exciting but we'll add a convincing blur on off on reduce the background levels. We'll add a job shadow that only affects the background UI options. It's pretty easy to do. Let's learn the techniques now in Photoshop. Alright to get started. Let's go to print. So file new print. We're using U. S. Letter. We're gonna use landscape and that's gonna work for me. I'm gonna color the background and ingredient so I'm gonna click on my gradient tool and what I'm gonna do is I'm gonna make sure my foreground color is one kind of gray and then the background color is a different or dark agree. Is that good enough? Yep. I'm going to use a radio. Yeah, I'm gonna use a radial gradient, click hold and drag and it's going to work for me. Just a real subtle gradient. Anyway, let's bring in the different UI mockups. These were made in adobe. Xd Just simple shapes and ...

letters. Place embedded under exercise files and the mock ups and I'm going to show you using that file. Place embedded. You can't pick more than one. Yeah. Okay. So what I tended to is I have this open. Okay this works on a Mac and a pc. You just got to have your finder. Window open or your window open and Windows find your files, grab these three and just dump them in there. Hit return, return return. Just get them all in there at the same time. Plus they're all smart objects which is cool or just work through slowly and bring them in one by one. So what do I want? My dashboard is going to be like the main focus one And I want him just transforming him command T. To be the biggest kind of main feature one. These other two I'd like to be the same size so I've selected both of them in my layers, panel, command T or control T on the pc. Scale it down. So which one I'm gonna use onboarding, it's going to go over here, it's going to be just behind. Same with the login, it's going to be just behind but I might do is slip them all and just distribute the centers just to make sure they're all lined up. Nice. Perfect. But I also might do for these two as much slow them down. Alright, so now I need to make these kind of ones at the back recede into the background. What I'd like to do is I want to do them to the instead of doing it once to this one and then trying to copy and paste layer styles, I'm gonna group them instead of grouping them inside of like a folder. It's actually really good just to select both of them and make them a smart object. Okay. It just means that they're going to act as one layer and if I need to go inside it, I can double click to go inside and they're both still in there. So you smart objects as grouping as well. I do want to do two things with it selected. I'm going to go to adjustments and I want to find my levels Okay. And I want to make sure the levels are clipping just to the layer underneath. That's what this little arrow does. Just this layer here and I find this is a useful trick just to kind of grab the whites and to say, I just want less white. I'm not fixing the levels. I'm actually just dragging and saying there are no more whites. You can see it's just darkening them up, showing a bit of a contrast between the two up to you. How far you want to go too far somewhere about there. Next thing I want to do as well is I want to click on this layer and I want to add my favorite filter. My second favorite, my first favorite is Girls and Blair. Who could forget you Betty. But my next favorite blue gallery, irish blue. The cool thing about iris blue has a center and it kind of fades out and you can move that center remember. So right in the middle there actually by default, it's kind of cool. It's only affecting these guys in the background. You can adjust this. Okay, so it just means it's not it's going to be perfectly sharp in the middle and there's this kind of like transition between how blurry it is on the outside and that is controlled by this little slider here, how blurry it is on the outside. Or you can use the slider over here, that's what I want, visible. Readable in the middle here. I might move it up a little bit as well. You can have more than one. Okay, I haven't in this course. Okay, I've just been using one for lots of things but no, you can have more than one when you're ready, click. Okay, awesome. One last thing I want to do is have a shadow for this this main dashboard version of my app. I want that to cast a shadow on these two. So with it selected, let's go to effects drop shadow. Okay, pick a drop shadow. I'm gonna pick something nice and fuzzy. Distance wise. I'm not worried too much about distance at the moment. Why? Because we're gonna detach it so I'm gonna have distance at zero and have it nice and fluffy. How hard? Yeah, something like that. Even fluffy click Ok, and you could leave it like that. What I want to do though is like you can see it's got the shadow casting everywhere. I'm going to do our trick that we've done a zillion times. Now we're going to right click drop shadow and say create layer, the mysteriously named thing so that it detaches it from that original layer. Now what we can do is we can say you my friend, I would like you to only affect this group here. I want to do exactly what the levels is doing levels. Is clipping to that layer. I want you to do it as well. Hold down the option key on a Mac or a Pc and just looking for there's a little icon that appears in between the two layers so that now you can see it only appears on these two guys, not on this background but awesome. So if you wanted to update it, all you do is double click on them, I'm gonna invert mine for no reason, save it, you can see it's a lovely reusable little mock up. Alright, that is it for this tutorial, I will see you in the next video before we go instructor HQ Just so you know, it's something that I work on, it's one of my other projects, basically the instructor HQ dot com is for people who want to themselves become an instructor, I'm an adobe instructor, but you might be looking to do something similar or or some other complete field and basically instructor excuse there to show you how to make the courses, how to edit them, where to distribute them, how to market them and plus it tracks their success as well. So it's a cool little thing, Go check it out if you're keen, that explains why instructor HQ appears randomly every now and again. Alright, that is definitely the end of the video. I'll see you in the next one.

Class Materials

Bonus Materials with Purchase

Exercise Files
Completed Files Part 2
Completed Files Part 1

Ratings and Reviews

Shah Nawaz
 

Amazing experience but it is little old. You should update with latest version of PS

Uli N
 

Great class, but outdated PS version. It was confusing sometimes. Some tools are not in PS anymore and more tools have been added which is not included in the course.

Nadim Rouf
 

Student Work

RELATED ARTICLES

RELATED ARTICLES