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.