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 in Photoshop. We're not going to cover every single part of web design in Photoshop. It can be a big thing, I've actually made a separate course, specifically for Web Design in Photoshop. It's 50 videos by itself, so I'm 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 mockup websites. You can see here, I've got this mockup of a website, and this is the way it looks like on a desktop, and that's what it looks like on a mobile, a responsive website. You can mockup mobile apps here, but it is just a mockup. Eventually you're going to 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 mockup 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. Illustrator, XD, or Photoshop. So that's enough talking, let's get in and get started. 

First up let's go to 'File', 'New'. Photoshop is super helpful, and given 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 kind of a website, a responsive web site. So we want to design it for Desktop, Mobile and Tablet sizes. We're going to 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 and width here. I'm going to start with Web, we're going to start with the most common web size. Now we're starting from scratch. What you can do is, under 'Web', can you see all these templates down the bottom here? So there's some cool wire framing template, lots of stuff ready to go, to help you get started with website design. So have a little look through those, if you like one, click it, it will 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. 

So I've picked 'Web Most Common', I'm going to click 'Create'. The big thing it's going to give me, by using that template along the top there, rather than just typing the pixels, it's going to start doing Artboards. We know how to make Artboards, they become particularly useful here. This one is going to be my mockup for my desktop size. I'm just going to rename that one 'Desktop'. I'm going to create a new Artboard. I'm going to click in here, 'Artboard Tool', the little '+'. This one is, instead of 1316 this one is going to be a typical tablet size, which is 768. It will depend on what sizes you are designing for. The height, like a lot of these things, most websites are scrollable, so it doesn't really matter, the height, or at least I'm going to design it so it can be scrolled up. Same with this desktop size here, I'm going to click on the edge of it, just make this longer, because I want my website to be-- it's going to be a bit big, and it's definitely going to stick within the width, but it's going to be scrollable in terms of the website. 

Let's do the last one, let's do mobile. Actually let's name everything, this one's going to be 'Tablet'. Let's make a new one, let's call this one 'Phone'. And typical phone width is generally designed for 480. So you can see how Artboards are super useful when you're doing UI work. We're doing website design, but if you were doing phone, you could just have all the different screens, just lots of duplicates of that phone. Login screen, signup, billing, payments, there's lots of repeats. 

Now the one thing you're doing when you are doing website 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, it can be setting up a grid. But whether it's magazine design or web design, often a page is divided into columns, typically 12 columns. Matches Bootstrap in a few other libraries. So we want this grid, instead of actually drawing them in ourselves, so 'Command R' turns the rulers on, 'Ctrl R' on a PC. Just trying to kind of lay out this grid system, there's a real easy trick. Go to 'View, and go to 'New Guide Layout'. 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 6 on both of these, 6 and 4 generally. You could put 12 in there if that's the way you prefer the design, but for me all I need to see here is 6. So with 'Tablet' selected, 'View', 'New Guide Layout', go to 'Preset'. Doesn't have 6, so I'm just going to type it in; 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, I'll add you. I'm probably just going to do 4 in this one. Click 'OK'. 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', I'll use 'Embedded'. And in your 'Exercise Files', under 'Web', there's one in there called 'Background brick building', I'm going to place him in. I'll make it a little bigger. I'll move him to the top. Hit 'Return'. I'm just going to 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 going to put Type over the top of him, but he's too light. So with this selected I'm going to go to 'Adjustments', 'Levels'. Then just yank this one up. Just yank the white up just to kind of darken it down. It's doing it to the whole document, I want it to just affect the background bricks. If the guides are getting annoying, 'Command :'. The colon is next to your L key, normally. That's 'Ctrl :' on a PC. 

So the grids are helpful sometimes, and sometimes in the way. 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 going to pick a web safe font. I'm going to use Roboto. Putting in my Hero text, my kind of large 'Welcome to my website'. Let's make things awesome, just because. I'm adding text in 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. Grid's on, I'm going to make sure this lines up with my grid system somehow. I'm going to grab my 'Type Tool', put in some text, we drag out a box. Make sure the font size is something a little readable. Not so big, and I'm going to go to 'Type', 'Paste Lorem Ipsum'. It will do for the moment. I'm going to put in a fake Navbar along the top. Do my Rectangle Tool, fill it with black. I'm going to have it semi transparent. 

Now I'm going to add my, not to the actual box itself, just down here. It's going to have a Home Page, the About Us page, and the Contact Us. So remember this, in Photoshop it's just a mock-up. A visual that we can get the client signed off, you don't have to be a Web Designer or Developer to make this work. Just look and feel, you are an UI designer, you're in charge of making this look great and work. Make sure the user experience is nice. Just 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 mockup tool, it's not actually creating the code. You can do little bits, you can help our developers out. If you're a designer you can design in Photoshop, in building something like Dreamweaver. But even if you don't, you can just do it to the design side. Make sure you're a Web Designer not a Web Developer. And you can just do the Photoshop work, and 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, something like Dreamweaver might be a good start for you. I've got a course, I 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. I'm going to save this. And what I'll do is-- actually in your 'Exercise Files', under '14 Web', I actually included my template that I've got from my Photoshop course. It just has all the grid setup 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. 

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 mockup, and how we get it to our Web Developer to start building it as a website.