© Hugh McCabe 2000 Web Authoring Lecture 7 Paint Shop Pro Easy to use image manipulation program. The screen contains the following components. The Toolbar - A row of icons which launch specific features. The Select Toolbox - A set of tools for selecting parts of an image. The Paint Toolbox - A set of drawing tools The Tool Control Panel - Customises the specific tool currently selected (I.e. if the zoom tool from the Select Toolbox is currently selected then the Tool Control Panel can be used to specify the amount of zoom). Opening Files Can open files in up to 30 image file formats from the file menu. © Hugh McCabe 2000 Web Authoring Lecture 7 1 1

© Hugh McCabe 2000 Web Authoring Lecture 7 Resampling/Resizing Images Resizing an image means that pixels are simply deleted or reproduced as appropriate. So, it generally results in a loss of quality. Resampling however is a more complex procedure which, when new pixels have to be generated, ‘guesses’ appropriate values for these pixels and results in a sharper, more focused image. It takes longer however. Both of these procedures can be done from the Image menu. Changing the Colour Depth Images may be stored with different numbers of colours. E.g. a GIF file will have at most 256 colours, a JPEG may have 16 million. Paint Shop Pro allows you to change the colour depth of an image. © Hugh McCabe 2000 Web Authoring Lecture 7 2 2

© Hugh McCabe 2000 Web Authoring Lecture 7 E.g. change the colour depth from 16 bit colour (approx 64,000 colours) to 8 bit colour (256 colors). This could be done to decrease the file size (useful for the web). The Colors menu allows this (and the inverse operation to increase the colour depth) to be done. To resample an image it must have a colour depth of at least 16 bit. Making Selections We can easily select areas of an image to work on. These selections can be rectangular, square, circular and several other shapes. The Select Toolbox makes this straightforward. For example click on the rectangle tool in the Select Toolbox and use the mouse to select a rectangular area of the image. Once selected we can crop the image (image menu) to discard those pixels outside the selection or apply further operations to the selected area. © Hugh McCabe 2000 Web Authoring Lecture 7 3 3

© Hugh McCabe 2000 Web Authoring Lecture 7 Filters There are a wide variety of filters on the image menu which allow you to apply various image processing operations on your images. Your image needs to be converted to at least 16 bit colour to get these to work. Among the available ones are …. Blur Soften Enhance Sharpen Edge Enhance Emboss Mosaic Add Noise …and many morev © Hugh McCabe 2000 Web Authoring Lecture 7 4 4

© Hugh McCabe 2000 Web Authoring Lecture 7 Creating New Graphics New blank images can be created from the file menu. You will be asked to supply a colour depth and a width and height in pixels. The Select Toolbox provides a set of tools for basic manipulation of images (we have explained the selection tools already). It looks like this : zoom dropper magnifier mover Select rectangle Select circle Clone area Adjust selection Magic wand lasso Background colour Foreground colour © Hugh McCabe 2000 Web Authoring Lecture 7 5 5

© Hugh McCabe 2000 Web Authoring Lecture 7 The background colour dictates the basic colour of a newly created image. Click on it to change it. The foreground colour dictates the basic colour of things which are drawn on an image. Click to change. When these are clicked the colour picker is invoked. This looks like this: © Hugh McCabe 2000 Web Authoring Lecture 7 6 6

© Hugh McCabe 2000 Web Authoring Lecture 7 You can use this to pick colours directly, or you can enter RGB values for colours you wish to use. You can also load colour palettes, like Netscape’s colour palette and choose colours from this palette only. The dropper is used to pick up colours from an image. A right-click sets the background colour and a right-click sets the foreground colour. The Paint Toolbox The Paint toolbox is used to draw on an image, alter colours, add text and add shapes. This is shown on the next slide. All of the tools which place something on the image (e.g. the brush tool) do so using the current foreground colour. © Hugh McCabe 2000 Web Authoring Lecture 7 7 7

© Hugh McCabe 2000 Web Authoring Lecture 7 brushes floodfill airbrush pen pencil marker crayon chalk charcoal Undo brush Colour replacer Text tool line rectangle Filled rectangle oval Filled oval smooth sharpen © Hugh McCabe 2000 Web Authoring Lecture 7 8 8

© Hugh McCabe 2000 Web Authoring Lecture 7 The text tool allows you to enter any text onto the image in any font and any size you want. Remember the text will appear in the foreground colour. We can easily use the colour replacer tool on the paint toolbox in conjunction with the dropper tool on the select toolbox to alter the colours in an image. Supper we have a two-colour image with red text on a blue background. Suppose we want to change this to red text on a white background. TITLE The first thing to do is to select the colour we wish to replace, in this case the blue background colour. Do this by selecting the dropper tool, placing the cursor over the blue part of the image and left-clicking. The background colour on the select menu will change to blue. © Hugh McCabe 2000 Web Authoring Lecture 7 9 9

© Hugh McCabe 2000 Web Authoring Lecture 7 Now select the colour you want to replace the blue with, in this case white. Double click on the foreground colour on the select toolbox to invoke the colour picker. Pick white from this screen and the foreground colour will change to white. Now click on the colour replacer on the paint toolbox, drag the mouse over and back across the image and it will replace all blue pixels with white ones. So we get this. TITLE Image backgrounds can be set to fit in with web page backgrounds in this manner. © Hugh McCabe 2000 Web Authoring Lecture 7 10 10

© Hugh McCabe 2000 Web Authoring Lecture 7 The Colour Menu This menu allows a wide variety of colour alteration operations to be performed on images. For example Adjust brightness/contrast Adjust Red/Green/Blue Colorize Histogram Stretching etc….. Conversions Paint Shop Pro can be used to convert from one image file format to another. Simply open the file and use the save as.. Menu option to save it in a different format © Hugh McCabe 2000 Web Authoring Lecture 7 11 11

© Hugh McCabe 2000 Web Authoring Lecture 7 Screen Capture Paint Shop Pro can be used to capture areas of the screen and save them as images. This means that anything which can be displayed on the screen of your computer can be captured, saved as an image and (for example) incorporated into a web page. Versions 3 and 4 This lecture focussed on the capabilities of version 3 The newer version 4 has a greatly extended set of capabilities including transparent background creation, tiled backgrounds, gradients and much more ….. The even newer version 5 is much better again …… And believe it or not, version 6 is ….. © Hugh McCabe 2000 Web Authoring Lecture 7 12 12

© Hugh McCabe 2000 Web Authoring Lecture 7 HTML tricks Left-Hand Margins There are many web pages with graphic margins along the left-hand side of the page (much like the margin along the left hand side of this slide). The next slide shows an example of this. How is this done ? Firstly we need to create a background image to use. Luckily background images are tiled by the browsers. So if our background image is 50x50 pixels it will be repeated across the page to from a recurring pattern. This is essential because loading an image to cover the whole background would take too long (e.g. an 800x600 image). © Hugh McCabe 2000 Web Authoring Lecture 7 13 13

© Hugh McCabe 2000 Web Authoring Lecture 7 Look at http://homepage.eircom.net/~huma/Jun16Jun30.htm However to create an effect like the above we must create a background image that spans the width of the page but only a fraction of the height. © Hugh McCabe 2000 Web Authoring Lecture 7 14 14

© Hugh McCabe 2000 Web Authoring Lecture 7 The background image in the previous example is 1000x50 pixels in size. => it’s width will cover the width of most browser windows. When tiled we get a solid column down the left hand side of the browser window. The problem remains that any text we place on the page will overwrite the coloured margin. Solve this by using a table for layout. The table has one row with two cells. The left-hand cell has an explicitly specified width which exceeds the width of the coloured section of the background image. © Hugh McCabe 2000 Web Authoring Lecture 7 15 15

© Hugh McCabe 2000 Web Authoring Lecture 7 In this case the width is set to 110 pixels. No text is put in this call. Then, all of the text, images etc… are placed in the right-hand cell. So they won’t overlap with the background image. These type of background images are easily created in Paint Shop Pro. Create a new image and set it’s width to be 1000 and it’s height to be 50 (or maybe less …). Make sure that the background colour is set to white (assuming your page has a predominantly white background). Use the rectangle selection tool to select an appropriate left-hand region of the image. Use the flood-fill tool to fill this region with some colour. Save the result and use it as a background. © Hugh McCabe 2000 Web Authoring Lecture 7 16 16