This is an OLD course website. It was used from July, 2003 to October, 2003. Use the courses page to find a more recent offering.

Welcome to the MMST11003 Workshop Page for Week 1.

In this first week we will be looking at some basic technical material. First, I want to talk about how these pages relate to the rest of the course material and give you some tips on how you should approach the hands-on component of this course.

The Workshop Pages
Design Perspectives has been designed to give you an understanding of design - design principles, the design process and an appreciation for good design. In this course you will need to come to terms with some fairly sophisticated software. These pages will help you. Bear in mind that this is University study, and that means that you will need to do some work of your own.

There are many resources on the Web and some excellent textbooks available in most bookshops that will also help you. I suggest that you look to these pages to get you started, but get used to the idea of looking to online resources and the help and tutorial files of your software packages to take you further.

There are communications forums set up for you in this course, and I suggest that you make good use of them to share any useful resources you have, and to ask your colleagues for help if you get stuck. Of course, depending on the mode of your enrolment you will have a variety of other places to seek help - your tutor, the technical mailing list, your on-campus lecturer. Make good use of these resources, but try to develop an attitude of initiative, exploration and collaboration. If you do, it will stand you in good stead for the rest of your studies and beyond.

One more thing: this is fun. One of the best ways to learn a software package is to play and explore.

Attitude
I have been teaching Multimedia Studies long enough now to realise that a student's attitude towards the course material can make a big difference to her or his success. I encourage you to approach the design tools we will be using without fear, and with a sense of adventure. Here are a few points that I think will help.
Don't be trapped by the familiar

While those with prior experience of graphics software will find some foreknowledge a great help, be careful not to let your familiarity with one area hinder your approach to another. The first graphics application I learnt to use was Adobe Photoshop. I found it very exciting learning to manipulate photographs and images with this powerful tool. When I came to learn Adobe Illustrator my proficiency with Photoshop and my DIY attitude was a small stumbling block. Illustrator looked so much like Photoshop, and seemed to work in a very similar fashion. However I found it was much harder to do the things I wanted to, because I was not placing enough significance on the different types of things Illustrator was good at. If I approached Illustrator as an unexplored territory, instead of trying to use it like Photoshop, it would all have made sense much more quickly.

Perhaps you are used to preparing images for the web with Macromedia Fireworks. Perhaps you are a proficient Desktop Publisher. Always remember that what you know well already works in a specific context in order to produce specific types of design.

Don't be afraid to ask questions. Don't ever be afraid to ask questions, it's the only way to progress efficiently. Similarly, don't be afraid to offer others help and possible solutions to their problems. People coming to this course will have wildly differing levels of experience - some will be experts in particular applications, for some this course may be their first significant exposure to computer-based work. As I've hinted above, lots of technical knowledge in one area may not always be a great help to learning something new.

Don't think you know it all. Some of you will already have a lot of experience with the software involved in this course. That doesn't mean that this course will be any easier, as the skills you have learned may not have been developed within a design-sensitive framework such as we are offering in this course.

Don't be afraid. Computers are just tools. The software packages we are using are just tools. The more you use them, the easier they will become. If you are used to using a Mac and have to use a PC in class, don't be scared. What we are teaching you are a set of skills and approaches that will be applicable across a wide range of software and hardware systems.

Resist the temptation to bend your approach to this course to suit your existing, familiar skills. Make the most of the material and help on offer to extend yourself.

Keep your eyes open. Design is all around you, and the course notes encourage you to look out for good (and bad) instances of design. You should also keep the technical aspects of this course in mind. Try to imagine how some of the posters, ads, book covers, web images and the like might have been put together.

Have fun. You can do a lot with these tools, much, much more than we have the space to cover in this course. It is very important to play in this new environment we are showing you. Use these tools for as many purposes as you can: postcards to your family back home, invitations to birthday parties, cartoons. The sky's the limit, and if your explorations take you outside the boundaries of this course you're getting that bit extra.

About the software packages
In this course we are covering three major types of design applications: paint packages, illustration packages and web graphics packages. There are many different types of package, and on the Getting Started page there is plenty of information about this.
These workshop pages have been prepared using Adobe Illustrator 9, Adobe Photoshop 5.5 and Macromedia Fireworks 4.
If you are using other software, do not despair. The principles involved are the same and are applied in a very similar manner. If you have to resort to your package's help file in order to apply some information to your package, don't be too perturbed. It's all part of the process of learning software packages.

Resources
Remember, there is a lot of information on the Web to extend these workshop pages and help you learn your particular package. I encourage you all to explore the web and see what you can find. I want to suggest one resource. To use it you need to register by giving your email address, so you need to decide whether you want to use it, I make no formal recommendation.

The InformIT site contains on online library of applications textbooks from reputable publishers such as SAMS, QUE and Peach Pit Press. There is an extensive design/graphics section in the Free Library which contains comprehensive titles on Illustrator, Photoshop, Corel Draw, Fireworks, Freehand, even Linux based packages like GIMP.

That's enough by way of introduction. I'd like to move on to some important technical issues that will help orient you to the packages and techniques you will be using.

WEEK 1: FILES AND FILE FORMATS
Working in design means working with files. Before we begin working with the design applications covered in this course I would like to introduce you to some of the different types of files you will be working with, and give you some tips about organising and naming your files.

Vector and Raster graphics
There are two main types of graphic files: raster (or bitmap) and vector files. Raster and vector files represent images very differently and are suited to quite different contexts.

Simply put, a raster image is a computer-friendly way of representing a two-dimensional grid of coloured points (pixels). This format is useful for images with many colours and regions of shading, such as a photograph. A vector image is a collection of curves, shapes, fills, strokes and text. A vector image file contains a series of mathematical descriptions that the computer can use to build up a shape.

Here we have two files, one a raster image and the second a vector image. To the eye, at certain resolutions, there is sometimes no difference in appearance between the two file types, both can look equally as good. The above images have been made to look good at the resolution of a computer screen. A computer monitor image is nominally made up of a grid of 72 dots to the inch. In practice this varies, but considering a $200 printer will print at 600 dots per inch or more, computer monitors have a low resolution.

We can only see the difference between the two file types when we take a closer look.

When we look at the raster file when it is enlarged greater than 100%, we can see the pixels that make up the image. Ideally, the human eye should not see the pixels, it should see a smooth seamless picture.

The vector file in comparison looks the same. Because the vector image is created from a set of instructions, a diamond is always described by four straight lines, no matter at what size the computer draws or prints it. If you zoomed in 800% on a vector file, it would still look smooth and the same as above.
If we zoom in even closer to the raster file we can see the limitations of this file format.

You can see how the raster image is made up of a grid of pixels, just like a tiled floor. If you were to double the resolution - that is, represent the picture using tiles that were half the size, you would need four times as many tiles. That is, the file size would be four times greater.
File size is always an important consideration, in particular for web design. While you need to be aware of it, issues of efficiency are secondary to the design focus of this course.

The above image gives us a conceptual snapshot of part of an image file. What might a similar section of the vector portion of the image look like? While a raster based file is like a set of instructions to a tile layer, a vector file is essentially a series of mathematical descriptions of shapes - a blueprint for making a drawing according to precise definitions of curvature, shape, line thickness etc.

We could imagine that part of the vector file describing the card could "look" something like this:

• 5% right and 4% down from the top left draw a diamond:
  [a diamond is four points joined by line segments (etc..)]
• fill the diamond with red
• use the shapes described in the "arial" font file to draw the letter shapes "v,e,c,t,o and r" starting at the top of the image 40% across from the top left. The letters must be 5% the height of the total card. Fill the letters with black ....
  

For a vector file, clearly the size of the image bears no relation to the size of the instructions - the same image is reproduced by the computer for display at 72 dots per inch (dpi) or for print at 300 dpi or photo quality print at 1440 dpi.

For a raster file, to make an image that looks good at 72 dpi be clear when printed at 1440 dpi, the resolution would have to be increased. Conceptually, this means using lots more, smaller tiles to create the image, and the file, which is like a set of instructions for laying the tiles, would be larger.

You may be thinking that vector files are a preferable file format because they are smaller files, and because the image is resolution independent. However there are limitations to the vector file format.

Line drawings, simple artwork, text, shapes and cartoon imagery are best produced as vector images. Vector files typically contain well-defined elements such as curves and shapes of various colours. Vector files are not good at displaying photo-realistic imagery such as photographs. Photographs and complex artwork are not so easily broken down into simple, mathematically described shapes.

For example, consider the following raster image:

Let's try converting this bitmap to a Vector image and see how successful the result is.

Photographic images are not suited to representation as vector images. To even approach decent quality the image must be broken down into a huge number of shapes, with very complicated mathematical descriptions. In contrast, the raster file compiles the above image like a mosaic of very small coloured tiles (pixels).

Working files (or native file format)
You should be aware of a third category of graphics file, which I will call the working file. Producing design on a computer requires you to use a range of file formats, and tools like Illustrator help you assemble them into a finished design. Software like Adobe Photoshop, Adobe Illustrator and Macromedia Freehand all work with proprietary file formats. In general, these formats, such as Illustrator's .ai files and Photoshop's .psd file contain a mixture of vector and raster graphics information as well information about how they fit together. For instance, if you were designing a poster, you might work with an Illustrator document called “poster.ai”. This would contain your design and all the vector and raster images you use in it. This is the file you would open and work with and save in Illustrator. When you were finished and wanted to send the design to a printer, you would need to export the design to a standard vector format, for instance “poster.eps”.

Say you also wanted to put a smaller version of the poster on a web site, you would need to export the work to a standard raster format, for instance “poster.jpg”. If you wanted to make changes later, you would work on the .ai file, make changes in illustrator, and then export to .eps and .jpg.

Don't be bothered by these file format names. You'll get used to them. I'd like to finish off these workshop notes by listing some of the common file formats you encounter in design work.

Common formats
Raster images come in a variety of formats. Some are uncompressed, representing the best possible quality at a given resolution. Some are compressed, sacrificing image quality for file size.
Some common uncompressed file formats are:

• Windows bitmap (e.g. myfile.bmp)
• TIFF (myfile.tiff or myfile.tif)

Some common compressed file formats are:

• JPEG (myfile.jpeg or myfile.jpg)
• GIF (myfile.gif)

Some common vector formats are:

• EPS (myfile.eps)
• Shockwave Flash (myfile.swf)

Want to find out more? Have a look at the webopedia entry of graphics file formats.

Naming conventions and housekeeping issues.
It is very important that you develop good habits of housekeeping and naming. It is a good idea to give your files descriptive names, and avoid capital letters. It will also help you and your client or anyone else who might need to work on your design if you structure your workspace intelligently.

Let's say you are working on a large advertisement for a car manufacturer called DaikonCo. Here's an example of how your files might be named and stored.

In the folder called daikonco is the working document, “daikon_advert.ai”. Copy for the advertisement is stored in a subfolder named copy. The daikonco folder also contains a subfolder for storing the graphics involved in the design. This is further divided into folders for the raster and vector images.

Take note of how the files have been named so they can easily be identified, and so there is no confusion between, say, the full sized image of the blue sedan and a smaller picture of the blue sedan.

Bear in mind that this is only an example. Maybe you would organise and name your files differently. The important thing is to develop the habit of giving thought to how you should name and arrange you files.

Activity: Raster file formats

These workshop notes will contain some exercises. They are not part of the formal coursework, but are included to help you develop the skills you will need to carry out the set class exercises.

This week, I suggest you try the following.
The thumbnail picture below links to a large image file. Download the image (right click and select "save target/link as")
Open your image editing package (e.g. Photoshop) and play with the image. Resize it, and save it in a variety of formats, such as gif, bitmap, jpeg. Try compressing some files and see how good it looks on screen, and look at the file sizes different formats and dimensions produce.

Hint: in Photoshop, "Image -> image size" allows you to resize the image.

In all packages the "File -> save as" command should give you a range of file format options for saving the file.