Developing Multimedia Assets using Fireworks and Flash

Size: px

Start display at page:

Download "Developing Multimedia Assets using Fireworks and Flash"

Jade Boyd
6 years ago
Views:

1 HO-2: IMAGE FORMATS Introduction As you will already have observed from browsing the web, it is possible to add a wide range of graphics to web pages, including: logos, animations, still photographs, roll-over and swap images. Many of these will be added in one of two file formats: GIF or JPEG. The focus in Multimedia Assets is on creating your own still images, logos, animations, roll-over/swap images, etc, for use on your web pages and their subsequent publication on your student website. In the next few hands-on exercises you explore the use of different image types and learn how to: Edit and modify image attributes (crop, size, transparency, colour optimisation, etc) in order to control the appearance of your images on the web. Add your optimised images to web pages and publish these on your BBK student website. The overall aim of these exercises is to help you design and develop multimedia assets which minimise bandwidth requirements of web pages containing images and other multimedia assets, such as audio and flash. Use of Images There are a number of ways that we can use images on the web: Simple static images: a static image that adds decoration or information such as a company logo, an illustration or a photograph. Animations: an animated series of images that adds decoration or information such as a button or a simulation. Links: a clickable image that links to another page as an alternative to text links. Image Maps: simple image with several "hotlinks" each of which links to another page. Background: a tiled image though this is increasingly rare because it is difficult to get good enough contrast with text on a textured background. Image formats on the Web Images must be in a format that computer operating systems can recognize. The two most widely used image formats on the web are GIF and JPEG/JPG, with PNG (the Fireworks default file format) gaining in popularity. There are also a number of other images formats that you may encounter, such as BMP, TIFF, PSD and RAW. The following links provide more information about the image file formats you find on the web: GIFs (Graphic Interchange Format) Images: GIFs are compressed images with between 1 and 256 colours. Best for images with horizontal areas of uniform colour (e.g. posters, cartoons, line drawings) because compression works by compressing horizontal bands with the same colour. GIFs support interlacing. Non interlaced GIFs load one line at a time. Interlaced GIFs display a fuzzy picture of the image as it is gradually downloaded and rendered. Although interlaced images actually take longer to download user perception is that images appear quicker. mm-0020.doc Page 1 of 6

2 GIF compression is "lossless", i.e. there is no loss in image quality with compression. GIFs support animation and transparency (transparent GIFs are used as spacers to achieve a well balanced layout). JPEG (Joint Photographic Engineers Group) Images: JPEG is a method for compressing colour bitmapped images that allows for variable compression. The higher the compression the worse the image quality. High compression is gained at the expense of poorer quality image (as you will see shortly). JPG are compressed images with the potential of including large number of colours. (24 bit colour = 16 million colours, 16 bit colour = 65K colours, 8 bit colour = 256 colours). JPG are best for complex images such as photographs with subtle colours, soft edges and continuous tone. JPG compression can involve reducing the number of colours and/or the resolution of the image. JPG compression is "lossy" and creates smaller files at the cost of image quality. JPG is not good for images with sharp edges or for text images. JPG files of the same size as GIF files take longer to download because they have to decompress in the browser. Smaller is better (provided the image quality is acceptable). As a general rule of thumb when you are faced with many colours or photographs: choose JPEG otherwise GIF should be fine. PNG (Portable Network Graphic) Images: A newer, but less used format that improves on GIF is the PNG (Portable Network Graphic). Portable, lossless RGB file format Not yet well established but growing. PNG is Fireworks default file format. Creating and Editing Images Most graphic images are created/edited using special image editing software, such as Photoshop, Paint Shop Pro or Fireworks (which is the package you will learn to use here). There is also an open-source image editor called GIMP ( Google also has a free image editing package called PICASA ( Although we won't discuss GIMP or PICASSA in this module the techniques we will use to manipulate images can also be performed using these, and other image editing packages. The following Wikipedia links explain more about raster and vector graphics editors and also provide a comparison of the different software packages available: Manipulating Different Image Formats in Fireworks The best way to get to understand the different image formats and their properties is through direct hands-on experience. This hands-on exercise explores how to manipulate and edit BMP, GIF, JPEG and PNG graphic images. mm-0020.doc Page 2 of 6

$Editing GIF Images and Converting to Different File Formats: 1. If you haven't already done so, create a sub-folder called ho2 in your myfiles folder (I:\myfiles\mm\ho2\).$ When you open the bitmap file you will notice that it contains a lot of white space on the left hand side of the image (see below). Your first task is to crop the image to remove this white space. 3.

When you open the bitmap file you will notice that it contains a lot of white space on the left hand side of the image (see below). Your first task is to crop the image to remove this white space. 3.

3 Editing GIF Images and Converting to Different File Formats: 1. If you haven't already done so, create a sub-folder called ho2 in your myfiles folder (I:\myfiles\mm\ho2\). Use this folder to save all the work you do in this ho exercise. 2. Select File Open and open the bunch-grapes.bmp file in Fireworks (you previously saved this to your \mm\resources folder). When you open the bitmap file you will notice that it contains a lot of white space on the left hand side of the image (see below). Your first task is to crop the image to remove this white space. 3. Click on the image to make it the active object (remember an object is 'active' when it has a light blue border with handles at each corner), then select the Crop Tool and drag this out over the image [Alternatively on the main menu select Edit Crop Selected Bitmap and drag the handles to select the required dimensions for the image], as shown below: 4. If you used the Crop Tool then double click on the image to crop it to the required dimensions [Alternatively select Edit Crop Document on the main menu to do the same thing]. Use File Save As to save the file as bunchgrapes_01.bmp. Note: you also use File Save As if you want to save the file in a different format, e.g. PNG, GIF, JEPG, etc. 5. Another method to crop the image and perhaps the simplest, is to select Modify Trim Canvas on the main menu. You may find that the Trim Canvas method is much simpler and more accurate way of cropping? 6. The DOCUMENT WINDOW (above) displays the document name and file type, bunch-grapes.bmp (in the top left hand corner) and the image dimensions = 512 x 401 pixels and current magnification = 100% (in the bottom right hand corner). mm-0020.doc Page 3 of 6

The ORIGINAL tab displays the original file. The PREVIEW tab displays the graphic as it would appear in a web browser, based on the current file export settings.

4 7. In the top left hand corner of the window, underneath the file name, you will see four tabs: Original, Preview, 2-Up and 4-Up. Each tab provides a different view of the file, which you can use to examine the impact of different optimisation settings on the quality and size (KB) of the image. 8. The ORIGINAL tab displays the original file. The PREVIEW tab displays the graphic as it would appear in a web browser, based on the current file export settings. The 2-UP and 4-UP tabs enable you to see different versions of the same document and compare previews of the same file based on different export settings. This enables you to compare different versions of the file before selecting the optimised version you want to export for use on the web. Note: In Preview or 2- Up and 4-Up mode you change the export settings using the Optimise Panel (we explore this below). 9. Select the 2-Up tab and if it isn t already visible open the Optimize (Document) panel by selecting Window Optimize on the main menu. Examine the effect of changing the file type, e.g. GIF as shown, and reducing the number of colours on the properties (quality and file size) of the image to be exported: 10. With the File Format set to GIF, use the File Save As command to save the file in GIF format (bunch-grapes_01.gif) to your ho2 sub-folder. Note: the original bitmap image has been reduced in size from ~616K to ~7K by saving in GIF format (this will reduce the time taken for the image to load in a web browser). 11. Select Index Transparency and use File Save As to save the file as bunchgrapes_01t.gif (adding the suffix T to indicate transparency). 12. With the 2-UP tab selected experiment with changing the settings to display 'different' optimised images, noting how the image quality and file size varies as you change the settings. In particular note the effect of changing file type to JPEG and the impact of reducing the image quality. 13. Change the File Format: PNG8, Adaptive, 16 colors, No Transparency and save the resulting file as bunch-grapes01p.png in your ho2 sub-folder. mm-0020.doc Page 4 of 6

ITApps 2009/10 14. Finally create a thumbnail image. Open your file bunch-grapes_01.gif, select ModifyÆCanvasÆImage Size, and set the image width to 90 pixels.

$JPG file in Fireworks (Note: you previously saved this to your \mm\resources folder). You should recognise the location? 2.$

5 ITApps 2009/ Finally create a thumbnail image. Open your file bunch-grapes_01.gif, select ModifyÆCanvasÆImage Size, and set the image width to 90 pixels. Save the resulting thumbnail as bunch-grapes01thma.gif in your ho2 sub-folder. Repeat, but this time adding index transparency and saving the files as bunchgrapes01thmb.gif 15. We will use all of these files in a later ho exercise. Editing JPEG Images and Converting to a Different File Formats: 1. Select FileÆOpen and open the IMG_4887.JPG file in Fireworks (Note: you previously saved this to your \mm\resources folder). You should recognise the location? 2. Select the Crop Tool and drag it out over the photograph, selecting an appropriate crop area. Double click on the image to crop it. 3. Then select ModifyÆCanvasÆImage Size and change the dimensions of the photograph to a width of 600 pixels (ensuring that the Constrain Proportions box is checked): mm-0020.doc Page 5 of 6

4. Use File Save As to save the file as senate-house_01.jpg. 5. Select the 4-Up tab and if it isn t already open the Optimize panel by selecting Window Optimize on the Main menu. 6.

6 4. Use File Save As to save the file as senate-house_01.jpg. 5. Select the 4-Up tab and if it isn t already open the Optimize panel by selecting Window Optimize on the Main menu. 6. Select JPEG as the file type and examine the effect of changing the Quality of the image on its file size. Export the following files to your ho2 sub-folder: JPEG Quality 90%, Save As: senate-house90.jpg JPEG Quality 60%, Save As: senate-house60.jpg JPEG Quality 30%, Save As: senate-house30.jpg JPEG Quality 10%, Save As: senate-house10.jpg 7. Look carefully at the images. How would you describe their quality? What can you conclude about the relationship between quality and file size? 8. Change the settings in the 4-Up tab and examine the effect of changing the file type on file size and image quality, using the following settings: GIF Adaptive, 16 colours, No Transparency, Save As: senate-houseg.gif PNG8, 128 colours. No Transparency, Save As: senate-housep.png 9. Look carefully at the 6 images. How would you describe their quality? What is the relationship between quality, file size and file type? 10. Finally create a thumbnail image. Open your file senate-house_01.jpg and select the Crop Tool, but rather than dragging it out over the image, set the dimensions in the Properties Panel to be the same as the bunch of grapes thumbnail that you created above, e.g. W: 90 pixels, H: 94 pixels. Then position this over the area of the image you would like to use as a thumbnail: 11. Double click to crop the image and save the resulting thumbnail as senatehouse_thma.jpg. As mentioned above you will use these images in a later ho exercise. ADDITIONAL READING AND RESOURCES Serif's Free Photoplus Image Editor: Image Formats on the Web: Understanding Image Formats: Speed up your Website: Web Site Optimisation: Colour Theory: mm-0020.doc Page 6 of 6

Bitmap Vs Vector Graphics Web-safe Colours Image compression Web graphics formats Anti-aliasing Dithering & Banding Image issues for the Web

Bitmap Vs Vector Graphics Web-safe Colours Image compression Web graphics formats Anti-aliasing Dithering & Banding Image issues for the Web Bitmap Vector (*Refer to Textbook Page 175 file formats) Bitmap