East Meadow Union Free School District

Curriculum Area Project

School Year 2010-2011

Studio Art

A Guide to Creating Student Web Galleries

for Studio Art Teachers

Part II

Superintendent………………………………………..Louis R. DeAngelo

Principal………………………………………………Richard Howard

Assistant Principals…………………………………...Joni Rochford

Edward Sergison

Scott Woerner

Dean of Students……………………………………...William Brennan

Director of Music & Art………………………...…....Abby Behr

Art Department Chairperson………………………….Heather Anastasio

Collaborators………………………………………….Carl Strand

Ingo Prangenberg

CAP Coordinator:……………………………....…….Ingo Prangenberg

Completed:

November 21st, 2010

Studio

Table of Contents

Table of Contents………………………………….….………….…………….…...……2

Abstract……………………………………………..…………….…………..….….……3

Rationale...………………………………………….…………….……….….…..………4

New YorkStateStandards……………………………………….…….…….…..……5-6

Photographing Student Artwork....………………………….….……………....……7-8

Image Correction With Photoshop………...…………….….…..……….…….……9-10

Basic Steps for Creating a Web Gallery……….………….….…..…..……………11-15

Step-by-Step Checklist………………………..…………...….....….…….……………16

FAQ’s (Frequently Asked Questions)…………………….…….…….……………….17

Abstract

The New York State Standards for the Visual Art curriculumrequire students to create 2 D and 3 D artwork. These hands-on projects can be digitally collected for a web-based Studio Art catalogue. As a webpage,various project examples can easily be navigated by allowing the webpage user to view different galleries with various examples of student work from multiple age groups. Ultimately this webpage can be universal, including all subjects within a given department.

In order to make this catalogue applicable for everybody we have created in Part II a guide for photographing images, preparing and editing them for slideshow format and using these to create an HTML encoded slideshow that can be easily embedded in any school website.

Rationale

A web based catalogue allows students and their parents to be better informed as to what a Studio program is. They have a chance to see what they will be doing in Studio which will help them make choices concerning their art electives. Counselors from Middle Schools can also direct students towards these web-pages in order to clarify questions and assist in making choices regarding art electives as they enter High School.

This online catalogue is also intended for the public to see what we do in the Studio Program at East MeadowHigh School. The results are intended to show the high level of creativity the students bring to the program as well as the academic skills that are taught in a carefully designed sequence.

Included with this website will be instructions for creating a student artwork slideshow. This allows for universal application of the information collected for this project, including other schools, departments and subjects.

Learning Standards for the Arts

Standard 1:Creating, Performing and Participating in the Arts

Students will actively engage in the processes that constitute creation and performance in the arts (dance, music, theatre, and visual arts) and participate in various roles in the arts.

Standard 2:Knowing and Using Arts Materials and Resources

Students will be knowledgeable about and make use of the materials and resources available for participation in the arts in various roles.

Standard 3:Responding to and Analyzing Works of Art

Students will respond critically to a variety of works in the arts, connecting the individual work to other works and to other aspects of human endeavor and thought.

Standard 4:Understanding the Cultural Dimensions and Contributions of the Arts

Students will develop an understanding of the personal and cultural forces that shape artistic communication and how the arts in turn shape the diverse cultures of past and present society.

Evidence of Standard 1:

1. Students will make works of art that exploredifferent kinds of subject matter, topics, themes, andmetaphors. Students will understand and use sensory elements, organizational principles, and expressiveimages to communicate their own ideas in works ofart. Students will use a variety of art materials,processes, mediums, and techniques, and useappropriate technologies for creating and exhibitingvisual art works.

Evidence of Standard 2:

2. Students will know and use a variety of visual artsmaterials, techniques, and processes. Students willknow about resources and opportunities forparticipation in visual arts in the community(exhibitions, libraries, museums, galleries) and use

appropriate materials (art reproductions, slides, printmaterials, electronic media). Students will be aware ofvocational options available in the visual arts.

Evidence of Standard 3:

Theatre Visual Arts

3. Students will reflect on, interpret, and evaluateworks of art, using the language of art criticism.Students will analyze the visual characteristics of thenatural and built environment and explain the social,cultural, psychological, and environmental dimensionsof the visual arts. Students will compare the ways inwhich a variety of ideas, themes, and concepts areexpressed through the visual arts with the ways theyare expressed in other disciplines.

Students will respond critic

Evidence of Standard 4:

4. Students will explore art and artifacts from varioushistorical periods and world cultures to discover theroles that art plays in the lives of people of a giventime and place and to understand how the time andplace influence the visual characteristics of the art

work. Students will explore art to understand thesocial, cultural, and environmental dimensions ofhuman society.

Photographing Student Artwork

Digital Camera:

  • A digital camera that combines lower pixel density with more mega pixel (8 to 12) should offer the best image quality for the documentation of student artwork in the webpage gallery.

Documentation of Student Artwork Procedure:

  • Make sure that there’s only one light source that’s illuminating the artwork. Overhead fluorescent lights or indirect afternoon sunlight seems to work best when lighting student artwork for documenting with an average digital camera.
  1. Set camera to close –up with the flash off.
  2. Secure the camera to a tripod or hold it so it is level and aimed at the center of the artwork.
  3. Set zoom lens to the middle range.
  4. Carefully align the piece of student artwork in the camera’s LCD view finder, so the sides are straight and tops and bottoms are level. If needed, in order to keep the entire piece of art in sharp focus you can keep more space around the art work, as you can always square and crop the image in Photoshop at a later date.
  5. Review the just taken image in the camera’s LCD slide show function, and make sure the artwork is in sharp focus and its colors are close to correct. Also check that the exposure shows the lights as lights and the darks as darks with in the artwork.
  6. If needed, for three dimensional artwork or details in two dimensional art work, several shots can be taken from the front view (at an even point of view with the piece), a one quarter view, three quarter view, side or profile view, even a back view if there is something back there that’s interesting for a detail shot, shoot details of noticeable features. For most flat work you’ll only need to use the best of the front images, and crop (in Photoshop) down to the detail to save as its own image.
  7. If the artwork shot on your camera looks under or over exposed (light or dark) on the LCD, you may want to manually adjust the exposure (for light images to bigger f numbers, and dark images to smaller f numbers). If the exposure of the image is slightly lighter or darker than desired,the Photoshop image adjustment application can be used to correct the brightness and contrast.
  8. Connect the camera to a computer for the process of uploading the images of just taken student artwork. Usually, through the “Computer” icon you can find the removable drive (which is the camera) to click open the image file and select all. Then drag to a student artwork file on the computer’s hard drive, external hard drive or a flash drive.
  9. Review the images to formulate what else will need to be accomplished in Photoshop.

Image Corrections with Adobe Photoshop

Finding and Retrieving Images into Photoshop Work Area

  • After Photoshop 7 or newer has been selected and loaded, the best way to find and review which jpeg images need work and to select them is through the Photoshop browser function.
  • By double clicking the jpeg image to work on, you can bring that jpeg image into the Photoshop work area.
  • Click the square at the jpeg images top right corner to create a gray mat around the jpeg image. The correction process of cropping, exposure and color correction can be more accurate with the gray value mat surrounding the jpeg image.

Cropping

  • The image of the student art work will need to be cropped down to the edges of the student art work, to eliminate all unnecessary background, to a tight crop.
  • Select the crop tool from the tool selection on the left side of the Photoshop work area.
  • Crop down to the highest corner (left or right) and crop the lowest corner (left or right) as most documented student art work, shot with either a hand held or a tripod supported camera, will be slightly out of perfect perspective.
  • Press enter to finalize the crop, and proceed to correct the perspective selecting edit, transform and then perspective; which brings up the perspective tool.

Correcting Image Perspective

  • With the perspective tool engaged, left click the mouse and pull up the lowest corner (left or right) so it is even with the highest corner.
  • Again, with the perspective tool still engaged, left click the mouse and pull down the highest corner at the bottom of the image so it is even with the lower corner. Now the image and the student art work are in perspective.

Correcting Values, Lightning and Contrast

  • If the image of the student art work is over or under exposed, Photoshop has an application to resolve these exposure issues.
  • Select image and go to adjustments and left click on brightness/contrast.
  • The brightness/contrast application is now engaged, and you can slide the brightness control (left click, left or right mouse movement). If the image is overexposed, move the mouse left and make the image darker. If the image is underexposed, move the mouse right and make the image lighter.
  • Below the brightness control you’ll find the contrast slider (move the mouse left or right) to pull the image into sharper focus.
  • The contrast control can also give the image a minor color correction as well.

Color Correction

  • Select image and once again go to adjustments and left click on auto color, and auto color will automatically correct the color.

Adding a White Canvas Border by Resizing the Image and Canvas Size

  • Select image and click on image size, and the image size application will be engaged. At the bottom of the image size application the document size needs to be changed to best fit at 10’’X7” or 7’’X10’’ size format. Change whichever is larger in size, as to make sure at most,the height is 10’’ or 7’’ or the width is at most 10’’or 7”.
  • Select image and click on canvas size, and the canvas size application will be engaged. Input new sizes for the width. 11’’ for landscape or 8’’ for portrait, and input size for the height, 8’’ for landscape or 11’’ for portrait.
  • Once the image and canvas have been resized to an 8’’X11’’ or 11’’X8’’ format, the image of the student artwork has been formatted to a printable 8’’X11’’ inches letter format with a white border.

Adding Text to Canvas Border

  • It is important to label each image of student art with pertinent information such as: student name, student grade, school year, art media, art course and art teacher name.
  • Select the text application for the tool bar on the left side of Photoshop work area.
  • Click the black for the color of text towards the bottom of the tool bar.
  • At the top of the Photoshop work area select type face and the point size (18pt for the portrait and 24pt for landscape is recommended).
  • Type pertinent information with the text application by selecting the horizontal typed tool.
  • Save the Photoshop image as a jpeg and it’s now ready for inclusion in a web gallery.

Basic Steps for Creating a Web Gallery

This step-by-step guide is intended to make creating your slideshow as easy as possible. These instructions have a screenshot underneath and include various arrows that show which buttons to press and include information on the function of that button.

1. The first step for creating your webpage slideshow is to open Adobe Photoshop CS3.

2. Select “File”.

3. Select “Automate”

4. Select “Web photo gallery”.

The next drop-down menu under “Web-Photo Gallery” will give you the choice of 20 galleries, all with a slightly different look and arrangement. While it certainly is worthwhile to explore each of these choices, these instructions will focus on “Flash – Gallery 1”. It is easy to navigate and provides an overall professional appearance.

Once you have chosen “Flash – Gallery 1” you will have three tasks to perform.

Each of these three steps will be explained next.

  1. Image Source: Browse for the folder containing the jpeg’s you want to use for this slideshow. Once found, just click on it and hit “Ok”.(To confirm that the correct folder has been chosen, you can now view that folder’s extension on the main page right next to the browse button).
  2. Destination: Browse for the folder in which you want to store this slideshow. Once found, just click on it and hit “OK”. (To confirm that the correct folder has been chosen, you can now view that folder’s extension on the main page right next to the destination button. Save the slideshow files in a new folder. The slideshow saves as multiple file components and will not function properly if any part is deleted).
  3. Options: There are a total of four main options to work with in order to customize this slide show. Banner, Large Images, Thumbnails and Custom Colors. Each will be explained below.( The other two options (General and Security) do not concern us at this time).

Once you have established the “Banner” (title) for your slideshow and chosen both the slideshow image and thumbnail sizes it is time to choose what colors you want to incorporate in your slideshow layout. “Custom Colors” really allows you to establich the character of your slideshow by choosing “Background”, “Banner”, “Text” and “Link” color options.

Upon clicking “Background” a window will open in which a large variety of shades of any color can be chosen, with thousands of variations ultimately possible. Once you have your color chosen hit “OK”. Repeat this process for “Banner” and “Text”. For “Link” you will need to choose a color that contrasts with your background color so that the control buttons on the slideshow will not be hard to see or hidden.

Congratulations, you are now done. Double-check your choices and press “OK” in the top right hand corner if everything looks good. The computer will now upload these images and create the slideshow. The amount of time this takes depends on the amount of images you chose to include (usually about one or two minutes).

Once created the slideshow will open automatically and you will see the results of your previous choices. Unluckily this program does not allow you to make changes at this time, because the slideshow has been converted to an html format (as indicated by the html URL extension). If changes are needed an entirely new slideshow will have to be created. This process is simplified though, since the program will have saved your settings temporarily.

Below is the slideshow as created above.

Step-by-Step Checklist

In order to make the process of creating this slideshow easier we have included the following step-by-step checklist which you can use to navigate through the process:

  • Open Adobe Photoshop CS3.
  • Select “File”.
  • Select “Automate”
  • Select “Web photo gallery”.
  • Choose “Flash – Gallery 1”
  • Browse for the folder containing the jpeg’s you want to use for this slideshow. Click on it and hit “Ok”.
  • Browse for the folder in which you want to store this slideshow. Click on it and hit “OK”.
  • Established the “Banner” (title) for your slideshow.
  • Chose both the slideshow image and thumbnail sizes.
  • Click on “Custom Colors”. Choose the “Background”, “Banner”, “Text” and “Link” color options.
  • Click “OK”.
  • Take the slideshow for a test drive.

FAQ’s (Frequently asked Questions)

Can I use files other than JPEGS?

Yes, but your slideshow might become quite large with no gain in image quality. Keeping the size of the slideshow smaller is a good idea, since it is fully portable on a flashdrive or disk.