This lesson is exclusive to members

Photoshop - How To Design A Website In Photoshop

Production video - adding images

Daniel Walter Scott || VIDEO: 35 of 49

Download Exercise Files



This is a great question.

This is another production video. In this one we’ll be adding all the various images we’ll need to complete our web design layout in Photoshop. Skip it or you can play through it at double speed if you’re familiar with the techniques already.

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

Alright, welcome to the image production video, where I’m going to go through to do a few of the manual things or monotonous things.

So I’ve got my first circle. What I want to do is to make 2 other circles, and I want to get rid of this rounded corner. So first of all I’m going to use my trick, - my command or control clicking the layer , that’s my guide here.

What I want to do is, I want to bin that layer, that rounded corner layer, so I’ve got my team 2. Now I want to use the same circle size, so if I grab this team circle 1, and I right click it, and go to duplicate, and I’m going to call it team circle 2, and it’s going to wreck it. Why, because this team circle 2 has appeared in between that Clipping Mask that I had. OK, it’s split it apart, and wrecked it all. So what I need to do, is move that guy back down, and join them back up by holding down the alt key on a PC or option key on a Mac, and click these 2 again to get my Clipping Mask. Now this Team circle 2, he’s here sitting right over the top. What I’m going to do is use my move tool, hold down shift, so it drags it straight, and I’m going to drag it so it’s about in the centre of my document. Where’s centre? I’m going to turn that layer off, drag it - there’s centre. Awesome. Great, and I’m going to turn this guy back on, and I’m going to make a clipping mask. OK. remember, holding down the alt or option key. I’m going to scale this top one, using the control T.

I’m going to get it so he’s filling up as much as we can with this cropped image, that’s better. Alright, I’m going to do the same thing. duplicate the circle, but again we’re going to have the same problem. If I duplicate this guy, right click duplicate, I want it to be team circle 3. It’s split these 2 apart, so I’m going to drag him back up there, drag those 2 up, drag circle 3, drag them across to the edge, and I’m going to bring in my next image, so I’m going to go to file - Place Embed. In my exercise files there’s one called team 3 and this one. I’m going to scale it down, holding shift, get it lined up, Ok, about there, hit enter, make a clipping mask bump it around using the keyboard, that’s about right for me. What you’ll notice these guys aren’t lined at all, even though I thought I was doing it. I was putting 2 columns that side, one column that side.

So what happens with - I’m trying to break it into 3’s. What I’m going to do is, I’m going to turn on my helpful, - where is it, down here, right down the bottom here’s my helpful column guides, and I’m going to break it into 3 columns.

I’m going to 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 1. And team 1 circle and team 1, is going to go into the centre of this. I’ll use this one here, team number 2, and I’m going to grab team member 3, and get them in the middle there. Great. I’m going to add some type to them, so actually I’ll select you, you, you, you, bump them up a little bit, add some type, grab the type tool.

I’m going to click this guy there, and click once over here. I’m going to make sure it’s centred, and I’m going to type in my name, Daniel Walter Scott, and I’m going to select the text, make it black, click ok, and use the move tool, Move it in a little bit, move it around, zoom it in , - it’s in the centre of there, and that’s going to be black, and that’s the right sort of size.

I’m going to duplicate that layer, - I’m going to use the tricky way by using my move tool. Hold down the alt or option key, click it and drag it,and you’ll see it makes a duplicate, I’ll change this one, and I am making it the founder. I’ll do caps for that founder, and I’m going to make it Roboto, and I’ll use just regular, size wise, Make it smaller, make it down to 17, and put it up next to the text, and put in my twitter address, @danlovesadobe. Actually I might not do that in caps, and this one here is going to be bold. So I want to duplicate these, so I can use them again and again. So i’m going to grab all 3 of these, and I’m going to hold down the alt key on my keyboard, and I’m on my move tool, and I’m going to drag it across, holding shift as well. Shift and alt, a bit of finger gymnastics. What it means it’s made a duplicate of that whole chunk. You can see that’s the original, that’s the new one. I’m going to change this one, switch to my type tool.

This one here is John Smith, OK. He is going to be - on this layer here - He’s going to be our developer maybe, and his twitter address is going to be @johnsmith. ok, I’m going to do the same for this lady here. I’m going to grab all 3 of these guys, hold down alt, drag it across, get it centred, She is definitely not John Smith, she’s going to be Jane, don’t want to call her Doe, it means she’s dead. Call her Jane Smith, Jane even, and she’s going to be our designer @janesmith.. Awesome. Alright, so there’s text for those. I’m going to turn off my - right down the bottom here, I’m going to turn off helpful column guides. ok. especially just the 3rd one there, zoom out. Next thing we’re going to do is, there a bit of portfolio here, so it’s going to look like this, ok. There’s lots of different images around this little rectangle, so with my guides on, it’s going to help.

I’m going to grab my rectangle tool, so I want my portfolio images to be into 4 columns, so I want to span just 3 of them each. It doesn’t really matter what colour the rectangles are because you’re going to be using clipping masks to do the images but it’s painful when they are the same colour 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, let’s go to lock guides so they don’t move. So I’ve got my first rectangle.

I’m going to, instead of doing them 1 at a time, like I did with the circles, - I had a problem with the circles, where I keep duplicating the ellipses, and it broke my clipping mask, so I’m going to do it slightly different this way. I’m going to duplicate the rectangles before I go through and add my images. So I’ve got both of these 2 images. I’m going to grab both of those. Where should they go? I'll send them across there. Grab those ones, let’s grab this one, and let’s grab this last chunk. Close it down.

I’m going to bring in my images. Let’s name these before we get too far along, - which ones we’re dealing with, as we numbered one there, nope, this is number 1, so this one is going to be called portfolio 1. I’ll copy it, it’s going to be portfolio 2, portfolio 3. portfolio 4, portfolio 5, portfolio 6, portfolio 7. and portfolio 8. To be honest, when I’m working by myself, and I don’t do this kind of naming till the end of doing it. Now to make it a little bit easier to follow along, but quite often they are left as just rectangle copy 15. As I’m going along I’m going to bring in some images, so I’m going to go to file, and I’m going to go to place embedded, and I’m going to bring in thumbnail one, ok he’s roughly the right size. I’m going to scan him down, enter, and I’m going to make sure he’s above portfolio 1, and clip him. Same again, place embedded, get him down to the right size roughly. Not quite, and I’m going to stick him above portfolio 2, and clip it. Bring in another one. If you are finding it’s taking forever to do things, or at least, and be quite honest and you want a shortcut. so place embedded is something I use quite a bit. Let’s go to edit, and create shortcuts. You can go into here and say I’d like this one in here that says file, there’s one in here that says place embedded, and make a shortcut. So I’m going to go , - command shift I, ok. it’s already in use , it’s select inverse. Actually I like that one, so I’m not going to do that one.

I’m going to try command, option shift E. ok. It’s already been used by “Merge a copy of all visible layers”. I don’t use that shortcut, so I’m going to accept it, ok, and just go over the top of that one. So it means that now I can go command, option, shift E, ok, and it will all go to my place embed. So I’m up to what, where up to the 3rd one. So that you don’t fall asleep, and get super bored, this is essentially the same thing over and over 8 times. So I’m going to skip along until we get to this last one right here, or here, now it’s here. Alright. back to regular speed now, and that’s the end of this production video, where we’ve gone through, done the clipping mask, add some text, and kind of got us up to speed.