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 Software

There are lots of software from Adobe you can use for designing your website. My two personal favourites are 'Adobe Illustrator' and 'Adobe Photoshop'.

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.

"Save for Web" Photoshop tool

Some students have asked me (Cara) to help them with this. I thought it would be easier to put it on the Wiki here, as a general reference for those who are going to do the PHP module with me.

I know Matthew has mentioned GIMP here, however this step- by- step is for Adobe Photoshop. I suggest you try the tutorials mentioned below for GIMP.

1. Open up Adobe Photoshop.
2. Open up your image.
3. To resize your image: Click on the "Image" menu, and on "Image Size". Change the Pixel Dimensions to 'Pixels'. If you are not sure what size you want your image, keep repeating these steps, altering the width and height. Make sure that the 'Constrain Proportions' checkbox is checked or your image will be distorted.
4. Once you have the image the correct size, save a copy of the original document.
5. Click on the "File" menu, and then "Save for Web". You should see a new window with 4 previews in it. Depending on the type of image, use the drop- down menus to select the file extension e.g. .png. The top left box shows a preview of your original image. The top right box shows a preview of what your image will look like with your chosen file type (so you can compare the quality). The two bottom boxes shows your images in .jpeg format, the left with 30 Quality, the right with 10 Quality. You can use my file type guide below to help you.
6. Make sure the 'Optimise' checkbox is checked. This optimizes your image, therefore compresses the file. The smaller the file the quicker it is too load on your website.
7. Click 'Save'. A pop up box with appear. Choose where your image is to be stored (preferrably the same folder as your webpages), and an easy-to-remember file name. Click 'OK'.
8. Click 'Done'.

How you put the image on your webpage is up to you. If you find that your image is still too big or small, open up the original document and play around with the pixel dimensions until you are satisfied.

GIMP (GNU Image Manipulation Program)

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

Inkscape

Inkscape is similar to Adobe Illustrator, as in it allows you to create vector based designs. It is free(Major selling point) and Open Source. http://www.inkscape.org/

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 lose any quality. This file is a good replacement for bitmap images and supports 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 (I've added the step-by-step tutorial to help you all. If there is anything else I can help with I will try to add it- if that's ok with Matthew).

(minor mods and addition of GIMP by Matthew Green) - well done to Cara for the addition - very useful!

Related Pages

<categorytree mode=pages>HTML</categorytree>