HTML:Multimedia

Introduction

This isn't part of the workbook, just a few tricks and tips to help with your website. This has been created by a student for other students. If you know about Photoshop and or want to add something to my contributions, please feel free.

Multimedia on the web

There are lots of different types of multimedia on the web including, but not limited to, Flash, JavaScript, graphics, photographs and games. It can be fun to include on your website, but not many people consider the important keyword: ACCESSIBLITY.

Accessiblity

People hate it when they have to wait for an image or animation to appear. Don't forget- some browsers may not support it (your chosen image type), the user may not have the plugin installed, the user could be using a screen-reader, etc.

Some people use dial-up connections or are connected to a slow network, so waiting for an image means they have to waste more time. TIME IS MONEY, and if they don't want to pay, they might leave your site altogether.

Macromedia Flash

If you love Flash, you may be tempted to decorate your website with flashing pictures, scrolling text, animated buttons and bouncing smilies. Although it can be fun for some, it's annoying for others who are visually impaired or would much prefer quality content.

My advice - if you're going to include it, use it wisely and don't ever put your content in Flash. If you do use Flash, consider accessibility concepts.

There are hundreds, if not thousands of Flash tutorials on the web. Try Google search.

Adobe Illustrator

This program from Adobe is perfect for graphics and illustrations. If you are very hands-on with designing I recommend this program. I create a lot of Vector-based designs using this.

Find tutorials, downloads and more information at [adobe.com]

Adobe Photoshop

This is a must-have for designers. It is a perfect image editing program that lets you do loads of creative fun things with photos. If you are using images in your website you should use the "Save for Web" command in Photoshop.

A FREE alternative to Photoshop is GIMP (Image Manipulation Program) that has all the necessary tools without the cost - check out [gimp.org] for details of how to get this FREE application.

Before you save any image, you should decide on the file format. As mentioned on the other image page, the most common file types are .JPEG (or .JPG), .GIF and .PNG

File Formats- What's the difference?!

If you want good quality images, it is important to understand what file format you need. You don't need to know what they all mean, but here are some points to help you:

.JPEG-- This is the default image format for digital images. It is stored as a 24-bit full-colour image. It is perfect for photographs with lots of colour and/or detail. The only disadvantage is that every time you edit and save a .jpeg, it alters the quality because data is lost every time it is re-saved.

.GIF-- Unlike .jpeg, .gif files only store 256 colours as an 8-bit image. The resolution is very low. This format is better for logos and designs with a lot of the same colours. They can be created as static logo and banner designs or small animations. If you have a small image and want to minimise the file size, you can use .gifs.

.PNG-- Very similar to .jpeg, and is up to 30% smaller than a .gif. You can compress high resolution images with .png and not loose any quality. This file is good for bitmap images and transparency. You can create transparent images with smooth edges instead of jagged, white outlines.

Transparency on Images

Transparent images means that it is an image with no background, or is replaced with another background colour or image. Photoshop allows you to do this easy. The link below provides really good tutorials to do this.

[absolutecross.com]

[sluniverse.com]

Please note - some browsers (especially older browsers) do not support transparency. If you are using an image on a plain colour background, remove the image background and replace it with the same colour as the web page background. Then use CSS where necessary to layout your image on the page.

Get creative!

The link below provides really easy step-by-step tutorials to create really fun, creative images. [elated.com] for Photoshop

or [GIMP.org Quick Tutorials] for GIMP

---

I hope this helps! Created by Cara Hughes 0615410 (minor mods and addition of GIMP by Matthew Green)