Production video - adding images

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

Alright, welcome to the image production video  where I'm gonna go through, do a few  of the manual things or monotonous things. So I've got my first circle. What I wanna do is make two other circles  and then I wanna get rid of this rounded corner. So first of all, I'm gonna use my trick by command  or control clicking the layer. That's my guy here. What I wanna do is I wanna bin that layer, okay?

The rounded corner layer. So I've got my team two. Now I want to use the same circle size. So if I grab this team, circle one and I right click it  and go to duplicate, and I'm gonna call it team circle  two, it's gonna wreck it. Why? Because this team circle two has appeared in between  that clipping mask that I had, okay?

And it split it apart and receded it all. So what I need to do is move that guy back down  and join them back up by holding down the Alt kinu PC  or option Kinu Mac. And click the these two again to get my clipping mask. Now this team circle two  and he's here sitting right over the top. What I'm gonna do is use my move tool, hold down shift  so it drags it straight and I'm gonna drag it. So it's about in the center of my document wear center.

I'm gonna turn that layer off, drag it, there's center. Awesome, great. And I'm gonna turn this guy back on  and I'm going to make a clipping mask. Okay? Remember holding down the older option key,  I'm gonna scale this top one using control T. I'm gonna get it.

So he's filling up as much as we can  with this cropped image. Looks good. All right, I'm gonna do the same thing,  duplicate the circle, but  again, we're gonna have the same problem. If I duplicate this guy, right click duplicate, want it  to be two circle three. It's split these two apart. So I'm gonna drag him back up there, drag those two up,  grab circle three, drag him across to the edge,  and I'm gonna bring in my next image.

So I'm gonna go to file  place in bed in my exercise files is one called team three. Bring in this one, I'm gonna scale it down. Holding shift, get it lined up, okay about there. Head enter, make a clipping mask, bump it around. Here's my keyboard. That's about right for me.

What you'll notice is these guys aren't uh, lined at all. Even though I thought I was doing it,  I was putting two columns outside, one column, that side. So what happens with, uh, I'm trying  to break it into threes. What I'm gonna do is I'm gonna turn on my  helpful, where is it down here? Right down the bottom. Here's my helpful column guides  and I'm gonna break it into three columns.

I'm gonna turn that on and you'll notice  that this is an easier way to get things  to line up rather than trying to count them. So I'm going to select that layer. So team one and team, team one, circle and team one. So I'm gonna go into the center of this. We use this one here, team member two. And I'm gonna grab team member three  and get them in the middle there.

Great. I'm gonna do add some type to them. So actually I'm gonna select you, you, you,  you bump 'em up a little bit,  add some type, grab the type tool. I'm gonna click escape there. Hit click once over here. I'm gonna make sure it's centered.

And I'm gonna type in my name. Daniel Got,  I'm gonna select the text, make it black. Click okay. Use my move tool, move it in, zoom a little bit,  move it around, zoom it in, it's in the center of there. And that's going to be black. That's all right sort of size.

I'm going to duplicate that layer. I'm gonna use the tricky way by using my move tool. Hold down the AL option key, click and drag it  and you'll see it makes it duplicate. I'll change this one. And I am, I'm the founder. I do CAPS for that found.

Uh um, and I'm going to make it roboto,  but I'll use just regular size wise. Let's make it a little smaller. Let's make it down to 17, bump it up. Next bit of text, I'll put in my Twitter address. Dan love Adobe. Actually I might not do that in caps.

And this one here is going to be,  it's gonna be the bold, lovely. So I wanna duplicate these so I use them again and again. So I'm gonna grab all three of these  and I'm gonna hold down the alt key on my keyboard. I'm on my move tool and I'm gonna drag it across  holding shift as well. Shift an alt bit of finger gymnastics,  but it means it's made duplicate of that whole chunk. You can see that's the original copy, that's the new one.

I'm gonna change this one. Switch to my type tool. This one here is this guy's John Smith. He is going to be, I'll work on this layer here. He's gonna be our developer maybe. And his Twitter address is going  to be at John Smith.

Okay, I'm gonna do the same for this lady here. I'm gonna grab all three of these guys. Hold down alt, drag it across the centered. She is definitely not John Smith. She's gonna be Jane. I don't wanna call her dough.

That means she's dead. Let's call Jane Smith, Jane even. And she's going to be our designer,  Jane Smith. Awesome. All right, so there's text for those. I'm gonna turn off my, right down the bottom here.

I'm gonna turn off my helpful column guides. Okay, especially just the third one there. So amount next we're gonna do is there's  a bit of portfolio here. So it's gonna look like this, okay, with lots  of different images around this little rectangle. So with my guides on, it's gonna help. I'm gonna grab my rectangle tool.

So I want my portfolio images to, to be into four columns. So I wanna span just three of them each. It doesn't really matter what color the rectangles are  because you're gonna be clipping, uh, using clipping masks,  do the images, but it's painful when they're  the same color as the background. So I'll switch it to red. Don't move your guides. I want to edit.

Undo. If you are finding your guides are  moving and they shouldn't, it's gotta  lock guides, they don't move. So I've got my first rectangle. I'm going to, instead of doing them one at a time,  like I did the circles, I had the problem with the circles  where I keep duplicating the um, the ellipses  and it broke my clipping masks. So I'm gonna do it slightly different this way. I'm gonna duplicate the rectangles  before I go through and add my images.

So I've got both of these two images. I'm gonna grab both of those and where should they go? Them across there. Okay, grab those ones. Let's grab this one. Oh, let's grab this last chunk.

Close it down. I'm gonna bring 'em images. Let's name these before we get too far along,  which ones we dealing with? This be number one now? Nope, this was number one. So this one's gonna be called um, portfolio One.

Copy up. It's gonna be portfolio two. Portfolio Three,  Portfolio Four,  Portfolio Five. Portfolio six. Portfolio Seven. Portfolio Eight.

To be honest, when I'm working  by myself and I don't do this kind of naming till the end,  I'm doing it now to make it a little easier for you  to follow along, but quite often the left is just  rectangle copy 15. As I'm going along, I'm gonna bring in some images. So I'm gonna go to file and I'm gonna go place embedded  and I'm gonna bring in thumbnail one. Okay, he's roughly the right size. I'm gonna scale down, enter,  and I'm gonna make sure he is above portfolio  one and clip him. Same again, place embedded.

Yep. Get him down to the right size  roughly, not quite. And I'm gonna stick 'em above. Portfolio two, clip it. Let's bring in another one. If you are finding it's taking  forever to do things or at least, uh, quite min honest  and you wanna shortcut, so place embedded as something  that I use quite a bit, it's gonna edit, create shortcuts.

And you can go into here  and say, I'd like this one that says, uh, file. There's one in here that says place  embedded and make a shortcut. So I'm gonna go command shift I, okay, it's already in use. It's select inverse. Actually I like that one. So I'm not gonna do that one.

I'm gonna try command  option shift E. Okay, it's already been used by merge a copy  of all visible layers. I don't use that shortcut, so I'm gonna accept it. Okay? And just go over the top of that one. So it means that now I can go command option shift E.

Okay? And I'll go to my place in bed. So I'm up to what? We're up to the third one so  that you don't fall asleep and get super bored. This is essentially the same thing  over and over eight times. So I'm gonna skip along until we get to this last one.

Right here or here. Now it's here. All right, back to regular speed now. And that's the end of this production video where we've gone  through, done some clipping mouse, add some texts,  and kind of got us up to speed.
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2025