Subtitles of the Movie

Welcome to this lesson on Web Graphics. Paint Shop Pro Photo excels at creating web graphics of whatever type or for whatever purpose you want. I've got my local copy of my web page loaded up here and you can see I use graphics in the form of different fonts, of thumbnails throughout my home page here and in my name and then a photograph of me here and I created really all of this in Paint Shop Pro Photo and you can do more than this, much, much more. This is just a little preview to get you thinking and get you started. Each one of these thumbnails is a separate image, but if you click on it, takes you to the actual file, a larger file so that you can call that up. If you wanted to, you could create an entire, you could leave this as it is, create separate thumbnails which link separately to different, larger graphics. You could also use the Image Mapper Routines in Paint Shop Pro Photo to create one graphic which has sub-sections which link to different areas of your website or you could create the Image Slicer to split this out into, from one graphic into three or as many as you want to smaller graphics. So I'm going to just quickly run through some of those options. Let's go back to Paint Shop Pro Photo. I'm going to call up just a picture here. We're going to just create a thumbnail out of this. And you can do it however you want to. I have found a good way is to first resize it. And my, at the moment, I resize to 90 pixels whether that's on the maximum side. So I might have to put that in height. But it just depends. Resize it to 90, which really shrinks it down quite a bit and then I will increase the canvas size to 100 pixels width, 100 height with a gray background. Leave that centered, click OK and boom. It looks like a nice, little slide holder. You can see that over here. That's exactly what that looks like. So I do that for each one of my thumbnails and save those files independently. I'm good to go. Now, when you're dealing with web graphics, you're not saving these as Paint Shop Pro Photo files. You're saving them in one of three types and what I would recommend is exporting those and using either the JPEG, the GIF or the PNG optimizer. You can click that, get that started and each one of the options are going to be different, but basically you're looking at quality, size and color depth on these for jpegs specifically; setting a compression value. For small little thumbnails like this, I could compress maybe 40 to 50 and it won't degrade very much, won't be noticeable. I could also change other options in here but I covered those, some of the differences between these graphic types in other lessons. So I'm not going to go into that now; just to say when you're dealing with web graphics, you will be using this much more than let's say you were just creating photographs to print out. You don't have to use the optimizers. You can go straight to Save As and then choose your type and choose your options there. Alright. Let's close this and open up my Image Map version. I just created, I took a screen shot of the web page and created one file here with all of these separate thumbnails. Choose File, Export, Image Mapper. That opens the Image Mapper Routine, which I'll maximize here and I'm not going to show you absolutely everything to do with it, but basically you identify cells. You can just click the rectangle and draw a cell and resize or reshape it, draw a new cell, actually I need to probably delete that one. There we go. So I've created a cell that covers this top left thumbnail and I can enter in a new URL, the alternate text, create different target as if I wanted it to open up into a new window let's say or the same window. You can create rollovers. You can change the different formats, optimize each one, save and load settings so you don't have to finish this all at once. Click on your Preferences to see the Map Colors, History List. Now, once I would save this, it's basically going to save the image and an image map. Let's just do that. Save it to the Desktop, call it Test, Save. It's going to ask me where to put the image. Just put that on the Desktop. Close this, minimize that, minimize that. I'm just going to right click here and send to Notepad so we can see this. Maximize. Now you can see the image name, source is imagemap.gif. Didn't choose to optimize it in any way so none of this is changed really. Original width and height, border, zero. Use Map tells it to use that as the image map and now we have an area, shape and the coordinates within the image correctly entered here. So this would function as an image map. If I created ten areas, they would show up, each one after the other. Experiment with that and play around with it. It's pretty cool. You can also choose the Image Slicer. So instead of one, if you've got a large, complex image, you want it to load as separate images, use the Image Slicer. Virtually the same kind of options only instead of creating image maps for links, you're turning one image into smaller sub-images. In here I can just create columns and rows perfectly proportioned here. Everything looks good. I can change Cell Properties just like my Image Mapper. Press Save, decide file name and we'll close this out and go look at what happened. So you can see all of my image maps pieces that have been saved out. Those slices were created from the one large image and they show up just fine. OK. Better wrap this lesson up. That's some information on creating web graphics in Paint Shop Pro Photo.