Using artboards

Course contents
SECTION: 7
Color 3:42
SECTION: 10
Page adjustments 1:28

Questions

0
0
0
0

Course info

49 lessons / 3 hours

Overview

Web design skills are one of the most employable opportunities of our lifetime. In this course you’ll learn how to design a professional website in Photoshop. We’ll start right at the basics of Photoshop and work our way through to building professional website concepts.

I created this course for people new to the world of website design and Photoshop. I created this for people nervous about changing their careers into the world of web design.

You’ll learn how to design desktop, tablet and mobile versions of your website. You’ll learn what types of files and code are required at the end of your job. This course is for people serious about making money as a professional web designer.

Now let me help you earn more money, get that job and become more awesome!

What are the requirements?

  • You'll need a copy of Photoshop CC 2015 or above. A free 30 day trial can be download from Adobe here.

  • No previous Photoshop or web design experience is necessary.

What am I going to get from this course?

  • 49 lectures 3 hours of content!

  • Forum support from me. 

  • All the techniques used by professional website designers.

  • Ways to preview your designs straight to your mobile device.

  • Firm understanding of responsive web design.

  • Professional workflows and shortcuts. 

  • A wealth of other resources and websites to help your new career path.

What is the target audience?

This course is for beginners. Aimed at people new to the world of web design. No previous experience is necessary. 

This course is NOT suited to people highly experience in the world of website mockups in Photoshop already.

Course duration 2 hours 43 mins

Get the completed files here
Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

Downloads & Exercise files

Transcript

Hi. In this video we're gonna look at Artboards. So Artboards is a new feature  that came out in Photoshop CC 2015. Now if you're using a later version, it's gonna work fine. If you're using an earlier version, though,  there was no such thing as Artboards in 2014. So what you are gonna have to do is you are gonna have  to use just separate pages.

But if you are using my version  or later, essentially all they are is a way  of having multiple pages on the one document rather than  separating them into separate Photoshop documents. So to do it, let's go to file. Let's go to new and let's pick  art board from the new document window. And let's put in our wits that we discussed earlier in terms  of the physical sizes of our, let's start  with our desktop view. So our desktop's going to be nine 60 pixels by a height of,  now the height doesn't really matter, um,  because websites change height  depending on what the content is. So I'm gonna put in, let's say, uh, 1500 and click.

Okay. So this is my first outboard. It's called Outboard one. And you can see in my layers here, it's a slightly new one. If you're used to using, uh, Photoshop  before, there's a slightly new kind  of grouping system with Artboards. So I'm gonna double click art board one to rename it.

And I'm gonna call this one. This one's gonna be called desktop  and it's going to be nine 60 pixels wide. Great. And you can see the name changes along the top here. And so to add another view,  so let's work on our tablet view. Next.

We, there's a couple of different ways of doing it. The easiest way I've found is using Layer New  and using this one that says art board. Okay, so this one's gonna be called tablets  and it's going to be seven 20 pixels slide. Okay, I'm gonna make sure it says seven 20 pixels down here  and use the same height click. Okay. And it slips it in next to it there, right?

So the last view we're gonna do is the mobile view. So we're going to go along to layer new, we're gonna go  to art board and we're gonna pick mobile. And this one is going to be, uh, 360 pixels. Okay? That's just the name along the top there. I need to actually change the pixels down the bottom here  and we'll use the same height and we'll click.

Okay, great. So we've got tablet view, desktop view,  and mobile view all next to each other. Now, where it becomes quite useful is when you start  designing across all three  and you wanna make sure they're all consistent. So let's say that I'm gonna use my rectangle tool. I'm gonna pick a swatch color in here,  any old random color and not that color. So one of the big perks for using artboards is the fact  that I can, um, draw something  that's actually quite far over the edge here.

Can you see? It's quite over the edge of here and I let go. You see it crops it down to my desktop view, okay? It's a nice little feature. Now the next thing I wanna do is  I want to, I want the same, let's say this is my nav bar. Um, so I'm gonna double click.

This is my big navigation bar along the top. Okay, so I've double clicked the name  down the bottom and renamed it. I now wanna move it across. Now I'm gonna switch back to the Move tool. It defaults to this art board tool quite a bit when  you're working with Artboards. Okay, so I move the Move tool  and what I'd like to do is I'm gonna duplicate nav bar.

I'm gonna right click it and click the  one that says duplicate. I'm gonna call it nav bar now. So I've got two of them. Now I'm gonna use the Move tool  and I'm gonna click hold and drag  Across the tablet. Now what can happen when you're dragging it, I'll undo  that just to show you again, is  I'm gonna drag nav bar across. And initially it doesn't actually move across.

Sometimes you get a give bit, a bit of a wiggle, okay? Um, just to get it to appear in the tablet view. Then I can let go and it's in there. You can see now I've got this nav bar in my desktop view  and I've got it in my tablet view. It's the last one. I'm gonna duplicate it again.

Okay, duplicate layer. Gonna call it Neva. And in the mobile view, I'm gonna click hold  and drag it member, give it a wiggle  and it'll appear in my mobile view. Now you can see the benefits  for this, I'm gonna pop 'em in there. It allows you to, if you were working on  separate documents, okay? And you have to switch between them, it's really hard  to know is it the same color, is it lined up the same way?

Is it looking consistent across all the different views? Um, upwards is a really nice little new perk for Photoshop  and that is upwards.
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2025