Portfolio 1 - Create a Portfolio

Over the course of this class you will be completing a variety of projects that will become the elements of your final project, an online portfolio. This portfolio will include a home page (links to all other pages), your autobiography page, and a gallery of work you’ve accomplished. Throughout this class you will learn techniques for creating original Web graphics, and for including them in a Web page. For now, you should collect images to use in your portfolio. Begin with an image of yourself to use in your autobiography, and continue by making a list of Web sites or original illustrations or photographs you’ve created. Additionally, look at other online portfolios and think about ways you could imitate the design or graphics that you like.

To create your web site, you can use any WYSIWYG editor or a simple text editor.

Deliverables:
1) Home Page (first draft of home page) - send html file and any support graphics.
2) Include on the home page two links to online portfolios – in addition to the links, include what you like and don’t like about them.

Portfolio 2 - Autobiography

For the first page of your portfolio, create your autobiography. Keep it simple; do not include anything of a private or legal nature. In addition to your picture, include pictures of things important to you (friends, family, pets, and hobbies). Later, you will want (I will insist) that you update your graphics as you learn more about graphics for web site.

Deliverable:
One html page and graphics. I must be able to open the file and see the graphics.

Portfolio 3 - Optimize Graphics

All of the images that will appear in your online portfolio need to be optimized. Use 6 images (3 gif and 3 jpg) images you have gathered for your portfolio, and optimize them. Think about how you will lay out the images in different pages of your portfolio. Determine a target size for each page, and make sure that the total file size of all the images on each page does not exceed the target size.

Deliverable:
Create a page for your portfolio. Title is “Optimizing Graphics”. Show all 6 graphics in a 3 column table. In the left column, show the before graphic, in the right column, show the after graphic. Use the center column to describe what you did to optimize the graphic (include before and after file size).

Portfolio 4 – Acquiring Images

Many graphics used in web sites come from other sources. For your portfolio, you should have at least one photograph of yourself and several scans or digital photos of visual work you’ve completed.

Deliverable:
Create a web page named “Acquiring Images” for your portfolio. For this page you are to acquire several graphics from the following sources.

Digital camera
Scanned image (photograph, magazine article)
Print screen from a computer
Captured from a web site

Optimize the graphics for this page. Cite the source and details of how you acquired the image.

Portfolio 5 - Background Images

Background images are powerful additions to web pages. Many web designers have files of background images ready to insert into a web site. For this part of your portfolio, you will begin your collection.

Deliverable:
Create a web page named “Background Images”. On this page, show 5 background images that you can use on a web page (two of them you must create yourself). Use these background images throughout your portfolio. Indicate the source for each image and link to a page in your portfolio in which you use the image. On at least one page, use a background image in the body of the page. On at least one page, use a background image in the body of the page – tile the image vertically, but not across. On another page, use a background image in a table. All background images should have reduced contrast so that text that appears over the image can be easily read.

Portfolio 6 - Logo

Design and create a logo for your site. Study logos used on other sites for ideas about size, shapes, and color schemes. Think about what you want to express with the logo. If someone links to your site, they might use your logo as a link. The logo needs to clearly identify your Web site even when it stands alone. Modify the logo to use as a favicon. Use the applet available at www.favicon.com or some other software, such as Icon Forge, which generates favicon files.

Deliverable:
Create a web page named “Logo”. On this page display an enlarged copy of your logo (400 pixels horizontal). Describe your logo, what it means and how you created it. Add your logo to every page of your portfolio.

Portfolio 7 - Navigation Buttons

Create the navigation buttons for your site. Use them to create a navigation bar for your site. You should be able to link to any page in the site. Create navigation buttons for your site that communicate their purpose.

Deliverables:
Create a web page named “Navigation”. For this page, create examples of three (3) styles of navigation buttons. Show the normal and over state (what it will look like when a mouse hovers over the button) of the button. The rollover versions should change color in a way that highlights the text and distinguishes them from the non-rollover buttons. You will create the rollover affect in Portfolio 10. Use one of these styles to create the navigation buttons for your portfolio. Add navigation buttons (navigation bar) to every page of your site. I should be able to navigate from any page to any page in the site.

Portfolio 8 - Photo Galleries

Many web sites contain large numbers of photos. As a web designer, you have three choices to create these galleries. You can create them on your own, you can use graphics software to create them, or link to another site that that allows you to create and store galleries (usually at a fee). Find at least three Web sites that contain picture galleries. Note how the images are displayed.

Deliverables:
Create a web page named “Galleries”. This page will display three galleries.

Design a gallery of your own (at least 5 photos), keeping in mind the total size and number of files the user will have to download in order to see the gallery pages. Creating thumbnails and HTML pages yourself.

Generate a gallery pages and images, either by using the Web Photo Gallery command in Photoshop, or another graphics program – place a link on this page to the gallery.

Find 2 web sites that allow you to create and store galleries on their site (one free and one for a fee). Provide links to these sites.

Portfolio 9 - Animated Graphics

Animated graphics can add value to a web site. They can also distract from the primary message.

Deliverables:
Create a web page named “Animated Graphics”. Create two animated ads for your Web site. One should be 468 X 60 pixels, and the other should be 125 X 125 pixels. Both should be under 10K each. They can have as many frames as you need, but should loop a finite number of times. The last frame in both animations should contain all the important information about your Web site, including a very brief description and the URL. The last frame of each animation should have a delay of at least a second and a half.

Portfolio 10 - Rollover Buttons

By this point, your portfolio should almost be finished. It should contain pages for your gallery and pages for your (backgrounds ?) and autobiography. The pages should be linked together using a navigation bar with buttons. Now you should add rollover effects to the buttons in the navigation bar.

Deliverables:
Add rollover action to your navigation buttons. You created a set of navigation buttons in #7. Use JavaScript (web authoring tool such as Dreamweaver will create it or you can create it manually) to convert your static buttons to rollover buttons.

Portfolio 11 - Image Map

For the home page of your portfolio, create an image map to use as a splash screen. The map should contain links to all the main sections of the portfolio, and should use the same color scheme used in the navigation buttons and other images on the home page. Any text on the home page should be placed in a colored box with a different colored border that displays in both Netscape and IE. Try making the colored border one pixel thick.

Deliverables:
Create a web page named “Image Map”. On this page, create a graphic (your own design) that is 400 x 400 pixels. Include four symbols/ text that refer to your home page, your autobiography page, your photo gallery page, and your background images page. Create “hot spot” that link the symbols to the appropriate pages.

Portfolio 12 – Multimedia

Deliverables:
Create a web page named “Multimedia”. On this page, include the following:

A picture with an audio file attached – record in your voice, a description of the picture
A short/simple flash movies
A movie (15-30 seconds) recorded and edited by you