Designing a form for your website

This lesson is exclusive to members

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

Questions

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

All right, in this video we're gonna look  at how to start a form. So forms are essentially just a group of rectangles. In this case we're gonna use a rectangle tool. We'll put a fill of white. Now the big thing to check with strokes is that  by default the set two points, which is more  of a printing term, what we wanna do is we want  to do one pixel. Okay?

Or two pixels or three pixels. You can just type it in there over top  of whatever's in there, okay? And I'm gonna draw out my rectangle. Now I'm gonna turn on my guides to make sure  that they're within everything. Okay? So I'm gonna have it going from this outer guide all  across to about the middle.

I'm gonna turn my guides off and take a look  and see what I think of the edges here. So you can see here it's got a kind of a dark gray edge  with a white center. Do I like it? Yeah, it's all right. I'm gonna add some text to it. So I'm gonna grab the type tool.

Now remember, I'm not gonna click inside of this  'cause it's gonna turn this rectangle tool box. So it's not really what I want. What I wanna do is click off down here  and this one's gonna be my name, okay? I'm gonna select it all and I'm gonna make it robot  and I'm gonna make it roboto light. And I'll make it uh, kind of a dark gray color here. Go back to my move tool, put 'em in.

What size should it be? Here's a bit big. So I'm gonna turn it down to 20, okay? And just have it sitting in about there. Now grids back on. I'm going to select both the name of the rectangle.

Actually this is gonna be my uh, form, name, lowercase  form name, okay? And I wanna select both of these. And I'm gonna hold down my alt key, my option key  and hold and drag it down. And I'm gonna give myself three of those. Okay? And this one's gonna be name,  this one's gonna be email.

Email. And this one here is going  to be phone number. Okay? I'm gonna get them all to line up,  um, on the left hand side. So I'm gonna have name, sorry, phone,  email, and name selected. And I'm going to go back to my move tool  and then I can use this one here, which is,  we're gonna line left edges, okay?

And they all should line up. Okay? I'm gonna do one of the box, okay? Gonna go with the rectangle tool,  make sure everything's still set. I'm gonna go back to my full color of white. I'm gonna grab a box and it's gonna start up here  and it's gonna go down to the bottom of my phone box.

And I'm gonna grab one of these guys maybe phone, actually,  you know, I'll grab him name 'cause he's lined up. I'll have down my old key and drag him across holding shift. He's behind where I need 'em to be. So I'm gonna drag him up and drag  him back across a little bit. Actually, I'm gonna change this. First I'm gonna call this  one message my Move tool and move them along.

So lines up there, try name everything. So I've got this box, which is  form email. This one here is form phone. And this one here is called form message. Next, I'm gonna add a submit button. So my submit button is  just gonna be another little rectangle.

Okay? In this case it's gonna be down here. It's gonna cross three of them. Okay? I'm gonna give it a fill color of my,  I'm gonna use that kind of dark purple. I'm gonna grab my type tool.

Click once down here. I'm call this one submit. And I'm gonna make it roboto,  but I'll make this one Roboto, slab Bolds. Actually, what do we use up here? This one here. So I'm gonna grab my type tool  and just click in here to check.

So grab my type tool, click inside this one. Waso Slab 24. Okay, so I'm gonna do the same with this one. Grab my type tool kick inside Otto Slab Bold 24. And I'll make it a color of white. Grab my move tool, drag it up if it's behind it.

Nope, it's in the right position. Great. Turn my guides off. Close that up. Great. And there's our little contact box.

Put them all inside their own group. Okay, so remember using our trick auto,  select on drag a box across all of them  and we're gonna move them all inside. Contact box. Okay? Toilet it up, go on and off. There, they all are.

Alright. And that's how to mock up a form in P.
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2025