Creating .pdf Files

When the formatting of a document is critical, or you want to control how a document will be printed out create an Adobe Acrobat file. This is recommended for online resumes.

The procedure is simple:

1. You have to have to Adobe Acrobat software installed. (This software is installed in all of the ITS computer labs.)
2. Open your document.
3. Choose
   File > Print.
4. Choose Acrobat Distiller from the Printer Name selection menu.
5. Click OK, and specify a filename and save location for the .pdf file.

The Acrobat Distiller or Acrobat PDF printer will print your document, not to a piece of paper but into a .pdf file that you can include and link to in your e-Portfolio. You can link to this file directly but remember to refer to the exact name of the file including the .pdf extension.

How the Web Handles Images

The web treats images as separate files. They are not automatically inserted and saved as an integral part of the page like a Word document. The HTML file is used to tell your browser where it should locate graphics for each page. There is a separate file for every graphic. You use the web page to tell the browser where to find the graphic. The browser then loads it and inserts it into the page.

Image files should be compressed or optimized to speed downloading. Raw image files are HUGE! Even with a fast connection they can slow the download of your page. To overcome this, special types of graphic files were created to make these files as small as possible.

Each type of image has different needs. 'Photographic' images require larger file sizes because of the range of colors these images contain. Line art requires a sharper quality that fewer colors provide. The compromise is to use different types of compression for each type of image. There are two main image compression formats that web browsers handle well: .GIF and .JPEG.

General Tips for Taking Digital Photos

Digital cameras are notorious for going through batteries. Check to see if there is an AC adapter, if there is, take it with you. Also, grab a tripod as well. It is the only real way to get a crisp shot!

Tried and True Photograph Composition Tips from Kodak

1. Simplify
   • move in close
   • have a strong center of interest, a colorful subject
   • choose a simple background
2. Control the placement of subject within the frame
   • have subject off center
   • use lines to lead viewer to subject
   • use foreground to frame subject and add depth
   • try unusual camera angles
3. Add energy and depth
   • use dramatic lighting, early and late in the day, sidelight and backlight
     - strong shadows
   • diagonal lines and patterns can fill an image with energy
   • use foreground to build depth and perspective

A Few Web Composition Tips

1. Crop even tighter than usual to keep file size small
2. Keep pictures small
3. If you use lots of images, spread them out over several pages.
4. Use tables with borders to create an HTML "picture frame"
5. Crop images to the shape that best displays the subject
6. Consider using a fine border around images to offset from the background

Optimizing Images for the Web

Most cameras or scanners are set up to give you a large size, high quality master files. The smallest picture size on most digital cameras is 640 x 480 pixels, (about 9 x 7 inches)! To help you reduce the file size there are three basic web graphic skills that will help you: cropping, resizing and optimizing.

1. Cropping - the process of cutting away the unimportant edges of an image, reducing the size of image, therefore reducing the size of the image file.

2. Resizing - the process of reducing the overall dimensions of an image. Resizing an image smaller works well. Everything is retained in the image, it's just smaller. Using resizing to enlarge usually results in an ugly distortion. Remember, the smaller the image the quicker the download.

3. Optimizing - the process of saving an image file in a compressed format, reducing the file size by reducing the amount of information used to display it. Reduction in file sizes can be dramatic, however, adjustments can be made that allow you to select the balance between quality and size of file that suits the image's individual needs.

VIEW - Cropping, Resizing and Optimizing Using Photoshop - Movie

Need Help? Your first step should be to select the Help Menu within your graphics application and search for the words, crop, resize or optimize. Most graphics applications are good at providing you with the steps you will need to know to understand and apply these processes.

Capturing and Using Images

COPYRIGHT -- Information you NEED TO KNOW!

Remember, using your web space means you are now a PUBLISHER and the images that you use, according to the Policies and Guidelines of Penn State, must comply with all copyright regulations. Basically, if you didn't make it you can't use it on your web pages unless you have obtained permission. This pretty much goes for everything. There is such a thing as 'fair use', but you had better check out the specifics of this clause to be sure. A good explanation of this is provided at the Resource Page: Ethical and Legal Use of Digital Media FAQ. Check it out! You are responsible!

Capturing Images displayed in Web Pages - Right-click... "Save as..."

Any image that is displayed in your web browser can be saved as an individual file. Here's how:

PC users - Place your cursor over the image that you would like to save. Right click and select the option "Save Image ...." or "Save Picture As". This will provide you with a Save dialog box. Change to the directory in which you would like to save the image and save.

Mac users - Place your cursor over the image that you would like to save. Hold the mouse button down. After a short time an option box will appear. Select the option "Save Image ...." or "Save Picture As". This will provide you with a Save dialog box. Change to the directory in which you would like to save the image and save.

Taking a Picture of Your Computer Screen

Perhaps you would like to 'grab a screen shot' of something that you have created on your computer. This might be the opening slide of a powerpoint presentation that you would like to use as a link to the presentation on your web site.

PC users - Typing the 'Alt'+ 'PrntScrn' keys captures a picture of the active window on your computer screen and puts it into your clipboard. To capture a picture of the entire screen use just the 'PrntScrn' key. This copies a picture of your entire computer screen and puts this into your clipboard. Now, launch a graphics application, such as Paint or Adobe Photoshop, and 'Paste' this into a new document. Edit your image by cropping, resizing and optimizing so that it fits your web page well.

OS X Mac users - Typing 'Ctrl' + 'Shift' + '3' captures a .pdf of your entire computer screen and saves this as a picture on your desktop. Or, be more precise and type 'Ctrl' + 'Shift' + '4' to get a 'cross hairs' where you use your mouse to click and drag this 'cross hairs' over just the section of your computer screen that you want to capture. Now, launch a graphics application, such as Adobe Photoshop, and 'Open' this .pdf file, (typically called "picture1.pdf" which is saved on your desktop or root level directory). Edit your image by cropping, resizing and optimizing so that it fits your web page well.

Finding Copyright Free Images Already on the Web

A good strategy for finding copyright free images on the web is to do a Advanced Google Image Search with the results only from sites that end in .gov. This takes advantage of the fact that any work produced via the Federal government and taxpayer dollars is copyright free. This includes maps, brochures, datasets, graphic images,
etc..

There are two basic ways to include sound as a part of a web page. Most sounds in a e-Portfolio you will want to play only when someone requests to hear the sound and clicks a link to hear it. Other sounds can be played as a
background.

Sound as Evidence

There is a range of evidence that is best captured using sound. Performances of any kind usually involve a spoken or performed component. Broadcast journalists and musicians immediately come to mind, however, these might not be the only majors that might want to add sound to their portfolios. Recording the words from an interview, a speech, poem, or something from a field experience might also be something you might want to include.

Link to an audio file

Create a link just as you would to any other file type. When the user clicks on the link, the audio file will be downloaded and played by the user's computer. Applications such as Windows Media Player, or Apple's Quicktime or iTunes will automatically recognize the audio file and play it but you may want to note on your site that a player is needed to play this file.

Embedded background audio

Check the Help menu in the web editor that you are using in order to choose the manner in which the background audio is embedded. Also note that this is sometimes different for different browsers. Make sure that background audio is not for a page that the user will regularly have to reload. This background audio can get tiresome easily.

There are new services available that will provide you with the ability to place a player in your web page that will play music from their site. This involves copying the HTML code the provide into the HTML code of your page.

Video as Evidence

You can use digital video applications like iMovie or MovieMaker to capture video from a video camera and then edit and format it so it plays in your
web page. You can also add transitions, titles, still photos and special effects to your video files.

Challenges for including video in your e-Portfolio?

Access to Software - All of the student ITS computer labs at University Park have the software you will need to edit video. There are a number of special computer labs that have additional equipment that you might
need to capture your video evidence from a VHS tape. This is not the same at all of the Penn State campuses. Check with your Information Technology Services to see what kinds of software and equipment is available for your use. Without access to video editing software you can not include video evidence in your e-Portfolio.

File Sizes - Because of the volume of information that video stores for all of the frames included in your video, file storage becomes an important consideration immediately. You need to plan to have room to store not only your working files, but also the compressed final version as well. Plan on using video clips of 1 minute or less.

It takes Time - Working with video evidence and including this as a part of your e-Portfolio is not a difficult process, however, it does take more time than you would think! Plan way ahead, especially if this is the first time that you are working with video!

Duration of the Video - The longer the video, the bigger the file! Get right to the point, be concise or present your video as an abstract of a longer, higher quality video that you have saved onto a CD and can share a copy on a CD. More than 1 minute is too long!

Remember! - When you link to your video you should also provide a link to where users can download any plugins they might need to play the movie, (e.g., QuickTime,
RealPlayer, Windows Media Player, etc.). It is also polite to provide the file size along with the link, so users will know how big of a download they can expect.

Dreamweaver and other web authoring tools will add movie media with the click of a button and some additional parameters. Consult your software help files for more info. Included here is the basic code that can be copied and
pasted into the HTML of your web page.

<embed src="moviename.mov" width="240" height="196" controller="true" autoplay="true" type="video/quicktime"></embed>

Where:

• src is the name of the movie file.
• height and width correspond to the dimensions of the movie.
  (Add 16 pixels to height for a movie controller.) A controller can be true - present, or
  false - absent
• autoplay set to true lets the movie begin playing without user intervention
  if so saved.
• type helps browsers recognize QuickTime when the page is opened locally, not
  from a web server.

Where can I get help?

Studio 204 on the University Park campus or your local Digital Commons is the best place to go when you need help with a video project.