assignments

Here are some examples of artist/musician sites:

• Example 1
• Example 2
• Example 3

YOU HAVE BEEN HIRED TO CREATE THE ART AND GRAPHICS ONLY FOR A SINGLE PAGE SITE.

An art director has already determined the layout of each page. Your job is to create the artwork to fit within the grid. It is crucial to the programmer/coder that you create graphics to exact sizes indicated on “map,” and use naming scheme as shown in two documents:

• Musician_map.pdf
• artist.html

OBJECTIVES

Explore using Photoshop and Illustrator and Dreamweaver to:

• create static comps for web pages;
• turn static comps into sliced and optimized images for use in a web page;
• create simple Javascript behaviors to enhance the interactivity of a web page;
• create gif animations.

GUIDELINES

MAIN ILLUSTRATION:

• Choose any entertainer, group, artist, author influential person past or present.
• You may use photos for illustration reference only. Any photos must be dramatically altered to be included.
• Illustration style is open. However, it should reflect the mood/personality of subject. For example, a nice peaceful pastel color portrait of Marilyn Manson would probably not be appropriate.
• Consider caricatures, satires, collages, found objects, non-literal interpretations. The only rule is that the illustration must bear some resemblance to your subject(s).
• Illustrations must be created to fit within layout.

NAVIGATIONAL BAR:

Could contain the following choices, and there must be at least three:

• Bio
• Influences
• Body of Work
• Photo Gallery
• Home

Prepare as one graphic to size. We’ll go over how to slice the nav graphic into separate buttons and how to make them change on hover in class.

BACK/NEXT BUTTONS:

The “back” and “next” elements must also be rollover buttons. You’ll prepare them using the same methods we learned preparing the nav buttons.

TITLE BAR:

Must contain the name of artist/group. Be creative. Consider warp and special effects features in Illustrator and photoshop and traditional media for creation. Font choice and colors are very important for consistency within page.

ANIMATION:

This is an accent graphic that should reflect something about the artist or group. For example, if you choose Elvis, your animation could be of a little swiveling pelvis.

OVERVIEW OF TASKS

1. Choose artist and gather images
2. Using Photoshop, create a static comp of your artist page.
3. Slice up the comp into the required areas: titlebar, navi, etc. Slicing, BTW, is a Photoshop term that means cutting up a comp,
4. Optimize each slice appropriately for the web. We will cover slicing and optimizing thoroughly.
5. Open the Artist.html page from the materials folder in TextWrangler. Save it as your Artist webpage. In this html page, place the images you created in the slice/optimize process in their correct divs.
6. Returning to the ani slice, we’ll make a gif animation using Photoshop.
7. Returning to the navi and back and next slices, we’ll make rollover animations using Photoshop.
8. We’ll plug the ani, navi, and back/next slices into their areas.
9. W00T! We’re done! Time for the crit.