Module 3: Creating a Button

Overview

In this module, students will learn basic graphic skills, including creating shapes, choosing colors, adding text, image transformation, and working with layers. Using these skills, students will create a set of buttons and will add those buttons to their portfolio website.

Lesson 1: Basic Shapes and Colors

• Estimated time required: 60 minutes
• Link to student Lesson 1 page

Tips for Delivering This Lesson

• The graphics software features described in this module (and throughout this unit) are standard features that are widely supported by most graphics software applications. We recommend that instructors preview this lesson, and all subsequent lessons in this unit, to be sure they're familiar with how to use these features in the graphics software they've chosen.

Lesson 2: Working with Layers

• Estimated time required: 60 minutes
• Link to student Lesson 2 page

Tips for Delivering This Lesson

• As with many of the lessons in this unit, you may wish to supplement these materials with online tutorials specific to your graphics software program. There are many excellent tutorials available online covering specific processes using most graphics software.
• Some students by now will have likely demonstrated a stronger aptitude for graphic design than for web coding. These students should be encouraged to explore this topic more fully, and should be presented with options for doing so.
• This lesson provides a good time to remind students to save a backup copy of files. This is especially important when working with graphics. Graphics software typically has a default file type to which it saves all layers of the image. However, when that image is saved to a file format such as a JPG, GIF, or PNG the file is flattened and looses its flexibility for future adaptations. Therefore, it's important for students to frequently save a current working copy in the software's default format.

Lesson 3: Optimizing GIF Images

• Estimated time required: 60 minutes
• Link to student Lesson 3 page

Tips for Delivering This Lesson

• In this lesson students will be optimizing and exporting the two images/buttons they've created (an email button and a camera button), then adding both of these images/buttons to their portfolio. Both buttons will be added to graphics.html in a new section with heading "Sample Buttons". Both buttons will also be added to index.html, in different places explained on the student lesson page. On the lesson page, students are encouraged to figure out the coding on their own, but if they get stuck they can refer back to Module 2 Lesson 4, in which they learned how to add images to their web page. All the code they need for the current exercise (a heading element, an <img> element, and an <a> element) was provided in that earlier lesson. To see that code applied to this particular exercise, see the example output, linked below.

Example Output

When this lesson is complete, students will have added a new section to graphics.html that includes their email and camera buttons. They will also have added those same buttons to index.html, and wrapped each button in an anchor tag so the button becomes a link.

Lesson 4: Creating a Favicon

• Estimated time required: 60 minutes
• Link to student Lesson 4 page

Tips for Delivering This Lesson

This lesson is very interesting to students, and was designed to provide a simple yet highly practical application of graphics on the web. However, be warned that we have created a simple lesson from a not-so-simple process. In reality, favicons are fairly complex due to variations in browsers' support. As is pointed out in the lesson, Internet Explorer (as of IE9) only supports the original .ico file format. All other major browsers support a wide variety of formats, including .png, .gif, and .jpg. Unfortunately many graphic software applications do not natively save to .ico format. If you're using software that is not able to export to .ico, you're options are:

• Export images to another format (e.g., .png) and have students test their pages in a browser other than Internet Explorer.
• Export images to another format (e.g., .png) then convert them to .ico using a third party conversion tool such as convertico.com.

This lesson is also overly simplified in that students are creating 16 x 16 pixel images. Historically that has been the most common and most reliable size for a favicon image, but there is growing support for higher resolution icons, as well as multi-resolution icons, in which a single .ico file contains multiple resolutions of an icon for supporting browsers and devices to use as they see fit. For curious instructors and/or advanced students, there are several online tutorials that delve into the finer details of favicon creation. One good example is Jennifer Apple's Mysteries of the Favicon.ico tutorial on PhotoshopSupport.com.

Example Output

When this lesson is complete, students will have created a favicon.ico image and linked to it from the <head> section of index.html.