Learn how to add Thumbnail Images in Adobe Photoshop CS3.
Tags:adobe,adobe cs3 web design,thumbnails images,total training,tutorial,web design
Grab video code:
So the next part of the layout is our Subfeatures section and this area, basically, will consist of two sections each of which will have an image and some accompanying text. So I am going to start by setting up some additional guides to help me divide the screen up a little bit, go down to my left ruler and I am going to create a guide at about 20 pixels or so and I am going to keep an eye on the Info Palette on the right-hand side and I can see that I am at 20 pixels. So I'll just let that go. I'll create another one at 370 pixels or so and I'll create another one at 390 pixels and I can remember that we can create these guides by also going to our View Menu and selecting New Guide and since I have that selected, I am actually going to go ahead and input a value of 740 pixels to create a vertical guide, click OK and there we go.
So this area, here, is what we are going to be drawing the Subfeatures elements into. One more guide to go and this happens to be a horizontal guide. Then we'll actually place it at about 365, oh, that's good enough. Okay, select our Marquee Tool by pressing the M key and in my Layer Panel, I am going to go ahead and twirl the Features Layer group up and select the content_bg layer. So now we'll go ahead and create a new layer by clicking on the New Layer icon and with our Marquee Tool still selected, I am going to go ahead and create a selection. That much should do it, okay, and what I wanted to do is, I am going to fill this with a white background and this is going to be the place where all of my Subarticles or Subfeatures are going to be highlighted. So in order to fill with the Background color, which is currently selected as white, I am going to press Ctrl+Backspace and this would be Alt+Delete on a Mac and what we are going to do next is add a few more guides, so it's a never ending series of guides. We'll go ahead and hide one with about 10 pixels padding on each side of this white box that we've created. So over here, that looks about right, okay.
So, basically, the Subfeatures is going to have a thumbnail image right here and some text accompanying it and the thumbnail image, I've decided, it's going to be about 60 pixels or so. I am going to create another guide at 90 pixels, that looks about right and I just clicked on that layer to get rid of that selection and I am actually going to press V for our Move Tool and make sure that this guide is actually at 30 pixel which is exactly where I want it, there we go.
Okay, so now I am ready to bring in the thumbnail images and if we go up to our File Menu and we'll go to Open and here we are going to look for a file called thumbs.psd and click OK and you'll notice in our Layers Palette, we have a number of layers already included in this document. So we'll Shift+Select all of these layers and we want to drag them into our Layout document. So I am going to tile these images for a second. You'll notice that we have a number of images open from previous things that we've done. So, I want to go ahead and close those out since I don't need them. Just get rid of that one, like there's one back here, get rid of that and there's one more, we'll get rid of that as well.
Okay, So here we have our thumbs.psd file and we've got our Layout document behind that. So we are just going to take these selected layers and drag them on to our Layout document. Now let's maximize our Layout document again and you can see that the layers have been inserted in the Layout document. So we'll go ahead and just move them while they are still selected, we'll move them approximately to the area that they are going to go to and also the thumbnail images are a little bit larger than what I need. So I am just going to press Ctrl+T to bring up the Free Transform Tool or Command+T on a Mac, make these a little bit smaller by clicking on the bottom right-hand corner of the Free Transform Tool box and Shift+Dragging the images, so they retain their original proportions and now we'll click Enter to accept those and there we go.
In order for me to create those thumbnails, I am going to go up and select my Marquee Tool and position it in the right place using my guides, going to hold Shift down and drag so that I am creating a perfectly square selection that will snap to my other guide. We'll let go up of the button on the mouse and what we are going to do is, again, select our bike layer here and add a mask. We are going to unlink the Layer Mask from the image layer, we'll click on that Link icon to toggle it and I am going to make sure that I have my Layer Mask selected and again you can tell by the hairline outline here and I am going to Alt+drag the Layer Mask on to the other layers. On the Mac, you can do this by Option+Dragging, okay, one more and there we go.
So we'll go ahead and work on our top layer which is the bike layer and we'll make sure that we have the image selected this time. We'll press the V key for our Move Tool and we'll just go ahead and move the bike image on to that mask and that looks pretty good. We'll toggle the visibility of this layer by clicking on the Eye icon and we'll select the next image and we'll again press the V key to highlight the Move Tool and move this image. This image, actually, needs to be resized a little bit, so we'll do a Ctrl+T to bring up the Free Transform Tool, go down to the bottom right-hand side of the Transform Daunting box and hold Shift down and just resize that image. That looks about right and we'll press Enter to accept that and move this just a little bit, perfect! We'll toggle the visibility of this layer again, go down to the skate layer and now press V to make sure we have our Move Tool selected and just move this layer, okay, that's perfect. Again, toggle the visibility, select the image below it and simply move the image to where we want within the mask, okay, perfect!
Now what I need to do is, obviously, move these and space them out. So I'll start doing that. I'll just press V again and make sure that our masks and layers are linked.
Okay, now I want you take these images and distribute them. So I am going to enable the visibility for the top layer here and while I have my climb layer selected, I am just going to press the V key to get the Move Tool and just Shift+Drag the image down. Holding Shift down allows us to move this image down the vertical path, okay. We'll go to the next form, we'll select Surf, toggle it's visibility and we'll Shift+Drag that down and then we'll go to our skate layer, move down that a little bit and we'll toggle the visibility and I am going to press the V key again to make sure that I have my Move Tool and rather than using the mouse this time, I am going to hold the Shift key down on my keyboard and press the Down arrow and you can see that I am starting to move the image down. So I'll just move that down, not too much, there we go.
So, now I just have to tweak these spacing so it looks like my climb image needs to be moved down a little bit and that's not too bad, so we'll stick with that.