How to Make a Simple UI App Web Design Mockup Using Photoshop
Daniel Walter Scott
Lesson Info
109. How to Make a Simple UI App Web Design Mockup Using Photoshop
Lessons
Class Introduction
03:24 2Before you get Started with the Photoshop Advanced Course
01:28 3The Easiest Way in the World to Mask a Person in Adobe Photoshop
24:23 4Class Project - Select Subject
01:41 5Select Mask & Changing a Color using Photoshop - Color Range
10:00 6Using Photoshop Selection to Fix Grass & Sky - Color Range
07:20How to Change the Color of Skin in Photoshop - Color Range
08:05 8How to Create an Ink Splash Image Around Text - Color Range
15:02 9Class Project - Color Range in Adobe Photoshop
01:54 10Mask on a Group Rather than each Layer
11:18 11Advanced Masking using a Channels in Adobe Photoshop
14:14 12Class Project - Channel Mask
01:30 13How to Make Selections in Photoshop Based on the Focus Area
22:53 14Class Project - Focus Area
01:11 15Selection Trick Using the Smudge Tool in Photoshop
04:16 16Future of Selections in Photoshop with Adobe Sneaks
07:04 17Quiz - Selection & Masking
18Advanced Preference Changes for Adobe Photoshop
08:36 19How to Speed up Adobe Photoshop if it’s Running Slow
07:48 20Workflow Tips & Tricks Like a Professional in Photoshop
13:45 21Advanced Layer Tricks in Adobe Photoshop CC
05:58 22Automatically Add a Watermark Text or Logo in Photoshop
08:29 23Batch or Image Process Multiple Images at Once in Photoshop
09:05 24How to put Loads of Images into one Photoshop File Quickly
07:04 25Weird Adobe Photoshop Features & Easter Eggs
06:37 26How to Enlarge Images Without Becoming Blurry in Photoshop
06:57 27How to Fix Blurry Images in Photoshop Using Shake Reductions
08:17 28Advanced Color & Tone Correction Using Levels in Photoshop
06:44 29Advanced Curves in Adobe Photoshop CC
06:34 30Quiz - Fixing Images
31How to Reshape Images Without Distorting in Photoshop Content Aware Scale
09:44 32How to use Content Aware Move in Photoshop
08:38 33How to use Content Aware Extend in Adobe Photoshop
07:28 34Removing Objects Using Content Aware Fill in Photoshop
07:01 35Class Project - Content Aware Fill
01:03 36Cropping Tricks Delete Pixel & Reveal Cropped Content in Photoshop
06:11 37Automatically Crop & Rotate Scanned Documents in Photoshop
05:35 38Crop Angled Images to Straighten Perspective Cropping Photoshop
04:42 39How to Trim the White Away from the Edge of an Image in Photoshop
01:52 40Automatically Align Layers in Adobe Photoshop CC
07:38 41How to Reshape Images using the Puppet Warp in Photoshop
18:10 42Class Exercise - Puppet Warp
01:14 43How to Change the Perspective in Photoshop Perspective Warp
05:47 44Quiz - Cropping & Aligning & Distorting
45How to Color Black & White Image in Photoshop
09:42 46How to Create a Duotone Effect in Adobe Photoshop CC
09:28 4744. Class Project – Duotone in Adobe Photoshop
02:20 48How to create the Glitch Effect in Adobe Photoshop
07:01 49Class Project - Glitch Effect in Adobe Photoshop
00:44 50Color Grading with Orange & Teal Effect in Adobe Photoshop
05:36 51Class Project - Color Grading in Adobe Photoshop
00:49 52Quiz - Color
53Advanced CC Libraries Tricks and Tips Photoshop
19:15 54Advanced Type Trick & Workflows in Adobe Photoshop
19:38 55Photoshop Can Guess your Font Using Match Fonts
10:43 56Quiz - Typography
5752. Adding Artboards to your Photoshop Workflow Properly
05:24 58How to Add Images Correctly to a Photoshop Artboard
08:17 59Using Smart Objects & Relinking Images in Photoshop
04:10 60Advanced Speed Tricks for Updating Artboards in Photoshop
04:09 61Export Artboards as PDF & Separate JPGs in Photoshop
05:38 62Quiz - Artboards
63Advanced Tricks for Healing Brush for Retouching in Photoshop
08:24 64Don’t Forget About Clone Tool Stamp in Photoshop
06:09 65How to use the Patch Tool for Retouching in Photoshop
06:41 66Class Exercise – Retouching in Photoshop
01:15 67How to Retouch in Photoshop Using Face Aware in Liquify
06:50 68How to Use Vanishing Point to Mocking up Designs in Photoshop
12:19 69Vanishing Point - Cloning & Healing at an Angle in Photoshop
11:19 7064. Class Exercise - Vanishing Point in Photoshop
00:51 71Fixing & Retouching Skin Tone in Adobe Photoshop
06:01 72Retouching Eyes by Enhancing in Adobe Photoshop
08:00 73Retouching Eyes with a Little Bit of Fakery in Photoshop
09:00 74Fully Faking Believable Eyes in Adobe Photoshop
06:45 75Class Project – Eyes in Photoshop
00:51 7670. How to Realistically Whiten Teeth in Adobe Photoshop
11:44 77Class Project – Teeth in Photoshop
00:57 78Quiz - Retouching
79Difference Between Place Linked vs Place Embedded in Photoshop
08:22 80What is the Difference Between Fill & Opacity in Layer
01:11 81How to Use & Export Layer Comps in Adobe Photoshop
03:27 8275. How to Create a Double Exposure in Adobe Photoshop
11:07 83Class Project - Double Exposure in Photoshop
01:17 84How to Create a Watercolor Painting Effect in Photoshop
09:23 85Class Project – Watercolor in Photoshop
00:32 86How to Decay Pixel Explosion Dispersion Method in Photoshop
13:47 87How to Make Exploding Shoe Effect in Adobe Photoshop
10:49 88Class Project – Decay in Photoshop
00:51 89Quiz - Visual Styles & Effects
90How to Edit Video in Adobe Photoshop
25:42 91Parallax Effect to Make Photos Move in Photoshop
13:22 92Class Project – Parallax in Photoshop
01:15 93How to Create Live Images - Cinemagraphs in Photoshop
13:19 94Class Project – Cinemagraph in Photoshop
01:35 95How to Setup a File Ready for Web and UI Design in Photoshop
09:32 96How to Export Your Web Design UI Project for Dreamweaver
07:57 97How to Make 3D Text & 3D Logos in Photoshop
11:52 98How to Add and Change 3D Materials & Textures in Photoshop
08:42 99Using Cameras & Depth of Field in 3D Photoshop
05:12 100Adding Lights & Casting Shadows Using Photoshop 3D
10:01 101How to Export a High Quality 3D Image from Photoshop
04:42 102Class Project – 3D in Photoshop
01:08 103How to Create Fake 3D Lines & Type in Photoshop
09:33 104Fake 2.5D Gradient Effect with Paths in Photoshop
07:10 105Class Project - Fake 3D in Photoshop
00:46 106Using Free Templates & Adobe Market to Mockup in Photoshop
11:07 107How Make a Reusable Mockup in Photoshop Using Smart Objects
06:40 108Mockup Poster Against a Wall Using Photoshop
08:16 109How to Make a Simple UI App Web Design Mockup Using Photoshop
06:06 110Class Project – Mockups in Photoshop
01:00 111How to Proofing Colors in Adobe Photoshop Ready for Print
04:04 112How to Tidy Up your Photoshop Files Before Sending Them Out
10:21 113How to Package Your Photoshop File to Include Linked Images
07:22 1143 Kinds of File Export for Photoshop Social Media Web & Print
12:59 115Quiz - Exporting
116What’s Next After Your Photoshop Advanced Course
01:05 117Final 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
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 Classes
Adobe Photoshop