Visual Images on the Web

Art 003 · Fall 2020

Syllabus

Text

Grading policy

August 24 to 28

The first week is an introduction to the course and the online tools to be used. These include the PSU Libraries, Web browsers, like Chrome, Firefox, Opera, Safari and Internet Explorer, and search engines like, for instance, Google, Bing and Yahoo.

Using your access account, sign up for Web space and be sure you know how to post to your PASS space. (All your course work files should be in the www folder in your PASS Space.)

Reading assignment:

Simple & Useful: A Guide to Web Design, Introduction, Basics, HTML5 Elements and Structure, Cascading Style Sheets, pp. 1-18, Small Graphics using Unicode, CSS, and SVG, pp. 47-52

First assignment: Make a very simple web page including the information shown in this example, title it index.html and send it to your web space. This will be the site from which you class work may be accessed by using your user id - the address will look something like this: http://www.personal.psu.edu/xyz123

Use at least one graphical element in it, like those presented in the reading assignment chapter, Small Graphics using Unicode, CSS, and SVG.

The 1st Assignment is due by August 28.

August 31 to September 4

The second and third weeks you will be working with photographs by taking them with a digital camera (the camera on most smart phones will work), transfer the files from it to a computer, make selection of those images ready for the Web and post them to your Web space as a slide show.

Here are three slide show examples, all of which were laid out using Style Sheets:

Photographs from a trip to Indiana

Ten Sets

Husks, shucks & cobs

Become familiar with Photoshop:

Photoshop Help

If you view the source of Husks, shucks & cobs, save it, you can use it as a template for your slide show. You may save the source of the other examples and use them as templates for your slide shows.

NB - Save all your photographs at as high a resolution as you can and keep them in an image file. You will need them for the sixth assignment later in the course.

Be sure to look into the different ways you can set up your slide show and the tools to do them from simple HTML to Photoshop to JavaScript.

Reading assignment:

Simple & Useful: A Guide to Web Design, Availability and Efficiency, pp. 25-28

Labor Day, September 7

September 8 - 11

Second assignment: Make a slide show Web site of the images you took with a digital camera. There should be at least 10 photographs.

This assignment is due on September 11

September 14 to 18

Review the slide shows of other class members in your working group, give and ask for criticism of the sites and revise yours if you believe you have ideas that will improve it.

September 21 to September 25

Go to the computer labs and do more hands on experimentation with Photoshop and look for information in the Help section which you can find at the top of the Photoshop screen.

September 28 to October 2

Third assignment: Make a Web site of the images using three file formats - gif, jpg and png - in ways that are appropriate for the strengths and weakness of the different formats. Write a short essay linked to the image site explaining your choices and the reasons for them. To find additional information about each format do a simple web search for it.

The images may be developed in either Photoshop or Illustrator (or other vector-based drawing program). Be sure to use the save for the Web feature that is in Photoshop and Illustrator to keep the sizes of your files as small as possible. Here is one example.

The third assignment is due by October 2.

October 5 to 9

Review the work of other members of your working group, offer criticism of it and apply the criticism of yours to improve the sites you have posted.

October 12 to 17

There are many different tools in Photoshop - few have used them all because it is very rich and deep software. One is the text tool with can be used alone or in combination with other drawing tools.

Photoshop / Creating type effects

October 19 to 23

Fourth assignment: Make a series of headings for your sites, using Photoshop and the text tool. Save them as gif or png files. This is an example in the title for the index page, and here is a second. You should create a graphical heading for your first three assignments.

Reading assignment:

Simple & Useful: A Guide to Web Design, Text & Typography , pp. 29-34, Presentations & Projection, pp. 35-40, Information Graphics, pp. 43-47

The fourth assignment is due by October 23.

October 26 to 30

Another of many different tools in Photoshop is filters and in the next assignment, 5, you will explore them.

Photoshop Help / Filters and effects

November 2 to 6

To work with filters you need to open a photo file in Photoshop and go to the filters menu - try the different ones out there, that will take a little while because there are more than 50 and each can be customized in different ways. After you have tried them out pick 10 to apply to an image and make slide show of them.

Here is an example of the filters slide show, the fifth assignment.

Fifth assignment: Make a slide show of at least 10 images showing some of the ways the filters can transform an image.

This slide show is due on November 6.

November 9 to November 13

Sixth assignment: Return to the photographs you took for your second assignment. Use them make a series of collages - 5 to 10 images - in which you combine parts of at least three different photos in each collage. Using Masks and Layers, as well as Filters, is one of the way to do it. Collage example.

The collage, Assignment 6, is due on November 13.

November 15 to November 20

This week you will review the slide shows other students in your working group and revise your own if you find things to improve. Everyone should also use this week to catch up, complete assignments that are unfinished and tighten up those which were done in haste.

You should also use this week to organize for the final assignment, Assignment 7, a group project. A face to face meeting of the Working Group members is often the best way to do this, but you can also use texting, chat, Twitter or email.

Thanksgiving, November 22 to 28.

November 30 to December 4

Review the photo files of of other members of your group and comment on them.

Seventh assignment: This is a group assignment. Each working group is required to jointly design a site which will be the opening site for the group and contain links to the course work by each of the members. This site should include at least two examples of using small graphics - from Unicode, Scalable Vector Graphics or Cascading Style Sheets.

Reading assignments:

Small Graphics

Simple & Useful, Small Graphics using Unicode, CSS, and SVG, pp. 47-52

Assignment 7 is due by December 4.

December 7 to 11

Classes end - there is no final exam.

Grading policy

Your grade for the course will be based primarily on the quality of your individual work on your personal sites and on your work in collaboration with your group. Your contributions to class discussion will give added credit. You will have a one week grace period after the work is due to turn it in with no reduction in grade, every week after that will mean a reduction of one grade point.

Each individual assignment receive a grade within a week after it is posted, if it is submitted by the end of the grace period.

You will also need a “keychain” USB drive which work on any computer that has USB ports, which most do.
These are available at many bookstores, computer stores and large discount stores, and are relatively inexpensive for 4GB to 16GB of storage ($2 - $10).