This lesson is exclusive to members

Photoshop - How To Design A Website In Photoshop

What about page heights?

Daniel Walter Scott || VIDEO: 19 of 49

Download Exercise Files

Contents

Introduction

In this video you’ll learn how to resize your Photoshop artboards. This allows us to change the heights of our different artboards to match the mobile, tablet and desktop content. You’ll be adjusting this constantly as you play around with your layout and get more content for your website design.

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

When we started creating our artboards we all made them a height of - I think 1500 pixels high. Now, let’s look at my final version here, and you’ll notice that - say my desktop view here, versus my mobile, - mobile was a lot longer, and my desktop view is actually longer than what I’ve originally done as well. So, as you’re working along, you’re going to end up changing the height of your website quite a bit to accomodate the content you’re going to add in there, which you don’t know yet as it’s going to change as you go along. Now to change these heights as you go, you want to use the artboard tool.

To find  the artboard tool, you click and hold down the move tool, and there he is there, there’s my artboard tool. Now to select, say my desktop to make it longer, if I click in the middle it doesn’t really work. Right,  I’ve got to click on this edge here, and make it a little longer, so click on the edge of the artboard, and I can drag it down, and that’s it. OK That’s made my desktop view  that much longer.  You can obviously contract it as well.  Now these little handles will stay around the outside until you select on anything else, other than this kind of like high level artboard here, Click on the nav bar, and they will disappear.  Obviously you can do it for any of the pages I can then go to the artboard tool, - make sure you click on the edge here of my mobile device, and I can make this, say a lot longer as I’m working.  

When I’m finished, click on anything else inside my layers, and those little transform windows will be gone.  Alright, that’s how you resize your web pages using the artboard tool.