How to Setup a File Ready for Web and UI Design in Photoshop
Daniel Walter Scott
Lesson Info
95. How to Setup a File Ready for Web and UI Design in 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 Setup a File Ready for Web and UI Design in Photoshop
Hi there in this video, we're going to talk about web design and Photoshop. We're not gonna cover every single part of web design and Photoshop. It can be a big thing. I've actually made a separate course specifically for web design and Photoshop. It's videos by itself. So we're not going to cram it all here in the advanced Photoshop course. What I'll do is I'll give you the high level important details. If you want to go deeper, you can go check out the other course. It's also worth mentioning here that Photoshop is a perfectly great tool to mock up websites. You can see here I got this mock up of a website that this is the way it looks like on a webs on a desktop and that's what it looks like on a mobile, a responsive website. You can mock up mobile apps here, but it is just a mock up. Eventually you're gonna have to go get this thing made in a web design tool. Something like Dreamweaver would be useful. Or you can send it to a developer to be made in the next couple of videos. I'm ...
going to show how you would mock it up in Photoshop and how to then pass on information to a web designer to go and build it for you or for yourself to go and build another note is that Photoshop is a perfect tool to do it, illustrator might be a great tool for you as well if your skills are better in that. And the third one is adobe XD. Adobe XD is probably the more professional mock up tool that adobe has but that's a whole new program to learn. It's up to you. I've got courses in all three of those for web design. Okay, illustrator XD or Photoshop. So that's enough talking. Let's get in and get started. Alright, so first up let's go to file and it's good in new Photoshop. Super helpful. And giving us over here where it says web and mobile. Just some templates to start with in terms of sizes. So in this case we're doing a kind of a website, a responsive website. So we want to design it for desktop mobile and tablet sizes. So we're gonna start with one of these. If you're doing say a mobile app design, you're going to design it in mobile or you can just type in the pixel height with here. I'm gonna start with web and we're gonna start with the most common websites Now. We're starting from scratch. What you can do is under web. Can you see all these templates down the bottom here. Okay, so there's some cool wire framing templates. Lots of stuff ready to go to help you get started with website design. Okay, so have a little look through those if you like one click it, it'll say download over here and it will slowly download. You can open it up and make the changes. We're going to start from scratch. Ok. So I've picked web most common. I'm going to click create and the big thing that's going to give me by using that template along the top there rather than just typing the pixels is going to start doing outboards so we know how to make outboards. They become particularly useful here. So this one is going to be my mock up for my desktop size. I'm just gonna rename that one desktop. I'm going to create a new upward. Okay, so I'm gonna click in here upward tool a little plus and this one is instead of 13 16. This one is going to be a typical tablet size which is +768. Okay. It'll depend on what sizes you're designing for and the height like a lot of these things. Okay. Most websites are scalable so it doesn't really matter what the height or at least I'm going to design it so it can be scrolled up the thing with this desktop size here, I'm gonna click on the edge of it and just make this longer because I want my website to be it's going to be a bit bigger and it's definitely gonna stick within the width but it's going to be scroll Herbal in terms of the website, let's do the last one. Let's do mobile actually let's name everything. This one is going to be tablet. Let's make a new one. Let's call this one phone and typical phone width is generally Designed for 4 80. All right. So you can see our outboards are super useful when you're doing all you. I work okay. We're doing web site design. But if you were doing phone, you could just have all the different screens. Just lots of duplicates of that phone. Okay, login screen sign up billing payments. Just lots of repeats. Now, the one thing you're doing when you are doing web site design is using something called grids. I guess this requires a little bit of pre knowledge and I guess that longer course would help. But this is useful for that. People that are already doing web design. One of the hardest things that could be setting up a grid, but whether it's magazine design or web design. Often pages divided into columns. Typically 12 columns matches bootstrap and a few other libraries. So we want this grid instead of actually drawing them in ourselves. So command our turns. The rulers on control are on a pc. Just trying to kind of lay out this grid system. There's a real easy trick. Good of you and go to new guide from Lout. You can see in here. Presets. I want a 12 column grid. Let's put a 12 column grid in there. You decide whether you need margins or not. Either side, top and bottom. It's that easy. So that 12 column grid persists on tablet and mobile. But what I find more useful when I'm actually designing is just to have six on both of these. Six and four. Generally you could put 12 in there if that's the way you prefer to design. But for me, all I need to see here is six. So with tablet selected few, your guide layout preset, It doesn't have six. So I'm just going to type, it divides it up, you can adjust the gutter depending on what framework you're using. Let's say I'm using bootstrap if you have no idea what bootstrap is. Don't worry. It uses roughly about 20 pixels in between. Same with the phone and I had you and I'm probably just going to do four in this one. Okay. Okay, so let's look at adding just some basic stuff to get started before we look at exporting. So on my desktop I'm going to go file place embedded or linked values embedded and in your exercise files under web there's one in there called background brick building. I'm gonna place them in, make them a little bigger, moving to the top, hit return and I'm just gonna use my generic Photoshop skills. There's nothing special about it. I want to start designing what I'd like to do to this guy. I'm gonna put type over the top of him but he's too light so with the selected, I'm going to go to adjustments levels and then just yank this one up and just yank the white up just to kind of darken it down, bring it to the whole document I want it to just affect the background brooks If the guides are getting annoying. Command and colon. Okay. The colon is next to your alki. Normally let's control colon on a Pc. So the grids are helpful sometimes and sometimes in the way you turn them on and off that way. So I'm going to now add my type tool. I'm going to click once I'm gonna pick our web safe font. Gonna use roboto putting in my hair a text. My kind of large. Welcome to my website. Let's make things awesome. Just because meeting text on an image because I want to work through some of the kind of high level principles of web design inside of Photoshop, mainly the exporting grids on. I'm going to make sure this lines up with my grid system. Somehow grab my type tool put in some text. If you drag out a box, make sure the font sizes something readable. Not so big. And I'm going to go to type place Lauren ipsum That'll do for the moment. I'm gonna put in a fake never barrel on the top due to my rectangle tool filled with black. I'm going to have a semi transparent now. I'm gonna add my not to the actual box itself. Just down here we're gonna have a homepage the about us page and they contact us. So remember this in Photoshop is just a mock up. Okay, visual that we can get the clients signed off, You don't have to be a web designer or developer to make this work. Okay, just look and feel you are ui designer. You're in charge of making this look great and work. Make sure the user experience is nice to put in some last basic stuff you have to follow along. But I guess I just wanted to just show you that we're just using Photoshop as a mock up tool. It's not actually creating the code. You can do little bits. Okay. Can help our developers out. If you're a designer, you can design and Photoshop then build it in something like Dreamweaver. But even if you don't you can just do the design side. It makes you a web designer, not a web developer. And you can just do the Photoshop work. Then you'll have to hand it over to somebody else to do. Html and CSS if you are interested in getting into that type of thing. The front end web design. Okay. Something like Dreamweaver might be a good start for you. And I've got a course. I've got a bunch of courses with Dreamweaver. But let's say this is the basics to get started. I just want to show you that we are just mocking this up using our Photoshop tools. We'll turn it into a website later on. Not in this course, But you can get by by being a web designer and just mocking things up. All right, I'm going to save this and what I'll do is actually in your exercise files under 14. Web actually included my template that I've got from my Photoshop course and it just has all the grids set up already ready to go for a responsive template. You might get started with that. Rather than having to go into view guide yourself and work out what all the sizes need to be. Alright, that's it for this video. Let's get into the next one where we look at getting some of the information out of our mock up and how we get it to our web developer to start building it as a website.
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