Computer Science 180
Web Design

Fall 2011, Siena College

Home     Syllabus     Schedule

This week's lab will focus on using graphics design tools. In lab, you will experiment with the Adobe Fireworks tool. This tool is available as part of the Adobe Creative Suite, so is only on the PCs in Roger Bacon 330.

While you will make use of Adobe Fireworks today and are welcome to do so throughout the semester, there are a number of options you may wish to consider. Adobe Photoshop is the most popular image editing software, but it is also a commercial product and can be quite expensive. It is available in Roger Bacon 330. The GIMP, the GNU Image Manipulation Program is a free and open source alternative which is also very powerful and popular, but with a steeper learning curve. Free downloads of GIMP are available for both Mac and Windows, but it is not installed on the lab computers.

You may work alone or with a partner for the in-lab tasks. For the "Custom Graphics" task, you may work in groups of up to 4, but you must produce three images per group member.

In Lab: Fireworks Introduction

At the start of lab, we will look at the basics of Fireworks. We will only touch on the basics. You will discover more of the functionality as you work through lab examples.

In Lab: Some Fireworks Tutorials

There are hundreds of excellent online tutorials that will help introduce you to Fireworks far more thoroughly than any in-lab demonstration could do. Please visit the blog page on http://slodive.com with their list of the 27 Finest Adobe Fireworks Tutorials. Run through a few of the tutorials and see if you can produce similar results.

Make an XHTML page showing your best results. Include images produced using the techniques in at least three of the tutorials. For each, include a link to the tutorial you used and a detailed description of the steps you went through to create your image. It should be detailed enough that a classmate (i.e., someone who has a similar amount of experience using Fireworks) could follow your instructions and reproduce your image.

In Lab: Creating "Web Appropriate" Images

There are several important considerations when creating or editing image files for use on a web page. We will consider two now: file format and image size.

There are a wide variety of graphical file formats, many of which are supported by all modern browsers. The most common are Graphical Interchange Format (GIF), Joint Photographic Experts Group (JPEG), and Portable Network Graphics (PNG). You will likely find all of these on many web sites. Each has its own advantages, and we will discuss these and other file formats in more detail later in the semester.

For now, you can get a quick overview of these files by reading the brief article When to Use the JPG, GIF, or PNG Formats for Your Web Images by Jennifer Kyrnin on about.com.

Fireworks can be used to save files in different formats, so I would like you to get a feel for the relative advantages and disadvantages of each.

1. Load this image, which is a simple PNG-format image. Save it in the other formats, using a large amount of compression (corresponding to lower image quality and smaller file size) with the JPEG image. You can do this from the "Options" button on the save dialog.
2. Create an image consisting only of some large text, black on white. Save it in each of the three formats, compare the file sizes, and see how the edges of the text differ.
3. Take a large, colorful, JPEG-format image. Save it in each of the other formats. Compare the file sizes and see if you can find differences in image quality. Find your own image, or use one of mine from my background image rotation.

Create a page showing your images, including your findings about file size and image quality.

Many of you have used the width and height attributes of the <img> element to change the dimensions of an image displayed on a page. If your original image is much larger than what you wish to display, this is an easy way to ask the browser to resize your image to fit. However, you are still retrieving the large image file from the web server. This means the web server, the network, and your browser all have to work harder than necessary. If you resize your image first and place that appropriately-sized image on the web server, you can reduce the load on the web server and network, and make your page load faster.

Create a page demonstrating this. Start with a large image, again you may use one of mine or one of your own. Display it in a smaller format by using the width and height attributes of the <img> element. Then resize the image to have the exact dimensions you wish to use for display, save it under another name, and also include that image in your page.

Custom Graphics

The remainder of the lab assignment is quite open-ended. Working individually or as part of a group, you are to create three custom graphics per group member using Fireworks or another similar graphics editing package. At least one of the images should use a tool or graphical effect you had not used in the previous images created for this lab. The following are possibilities, but you are welcome to propose other ideas.

• Create a graphical title bar for use in an existing or new page.
• Create a billboard or movie poster-style image for a real or fictitious entity.
• Create a photo collage that you might be able to send as a Christmas card or party thank-you.
• Manipulate a photographic image in some interesting way.

Create one or more web pages to showcase the images you have developed. Describe how each was created in enough detail that your classmates could reproduce your results. While you are not expected to spend hour upon hour developing these images, they should be complex enough that there is some effort involved.

Submitting Your Work

Before 1:30 PM, Monday, October 24, 2011, submit your files for grading. There are three things you need to do to complete the submission: (i) make sure your pages and images are uploaded properly to the class web space and are available at your URI, (ii) update your main index on the class web space to have links to all documents you have created for this lab, and (iii) email a copy of your files to me at jteresco AT siena.edu. If you worked with a partner on the first few items, you need only upload to the account of one of the team members, but each team member should link to the pages on his or her own main index. Make sure all of your pages validate properly as XHTML Strict.

Grading Sheet

This lab is worth 30 points, which are distributed as follows: