Computer Basics
A Byte is 8 bits. A bit is either O or 1 (on or off). Bits occupy computer screen space.
Computer unit of measurement: 2 (bineries) to the 10th power =1024
1024 Kilobytes (K) = 1 Megabyte (MB)
1024 MB = 1 Gigabyte (GB)
Speed (cycles per second) is (measured the same 2 to 10th power) such as 1024 Megahertz (Mhz) = 1 Ghz
2 bits = b/w, 4, 16, 256 colors = 8 bits (Web safe colors), 72 ppi (pixel per inch)
A typical CD-Rom holds 650 MB, zip disks hold 100 MB, disks hold about 1 MB.

Bit Depth compared to the Number of Colors

1 (2)
2 (4)
3 (8)
4 (16)
5 (32)
6 (64)
7 (128)
8 (256)
16 (65,536)
24 (16,777,216)

PhotoShop Processes

PhotoShop basics
Creative Uses of PhotoShop
PhotoShop tips & tricks
Photoshop & Image Ready technical guide
When printing use inches (set up in preferences) and when preparing for Web use pixel rulers.

Use LAYERS:

to make changes without affecting other parts of the image preserved on other layers.
to dissolve, multiply, screen, overlay, or to change the light, color, saturation, or luminosity.
to remove and then paint back areas of an image.
for inverses or masking a shape with another object's contents.

Use Layer Effects (for text layers or any layer to make a change to the layer)

Use INVERSES:

To "mask an object." Fit the content/texture/color from one layer into the shape residing on another layer. (The masking object will be filled only where there are pixels selected.)
Magic Wand - click & select (Select "Similar" to get more.)
Go to another layer for content/texture/color & move with the magic wand tool still active to the part of the layer you want to insert or mask in to the object.
Under the Edit menu "copy" then "paste" (automatically it is pasted into a new layer)
Use Move Tool to move the masked object where you want it.

To create a dynamic between text and image. Fill a shape with handwritten or computer generated text/poem/autobiography/textual contradiction or text as verbal metaphor for the visual.

Inverses or reversals, masking, & juxtapositions are techniques used by many artists (i.e., Fred Wilson, Cindy Sherman, "Bad Girls" & Surrealists) to draw attention to human imbalance, to disrupt social beliefs, or to change the type & balance of power.

Use GRADIENTS:

as background blends of 2 colors
as a layer to blend color for inverses
to gradually fade one image into another

Set the color to black & white by clicking the smaller boxes in the color selector tool. Black indicates where the image will disappear.

Apply "Gradient Fill" tool by dragging it across the section you want to fade in the layer's mask.

Sponge tool (choose saturate, select a brush, drag sponge across tto saturate the color
Dodge tool (select highlights and drag back and forth to bring out highlights.
Rubber stamp tool (use to cover up area you wish to remove--it clones a section and replaces what you wish to remove)
Eyedropper picks up color. Scan in something from nature or other source and use the eyedropper to develop your color palette.

Paths can be filled with a color or texture. Use the pen tool to draw paths (if you have used Illustrator you will be familiar with the pen tool). If you hold down you will see plus an minus, an arrow for manipulating handles and individual points and a convert point ( let's you break the handles to pull pull them apart and mnipulate them separately) for changing the handles on a point. Clicking and dragging will enable you to make a curved path.

Press delete twice to remove the entire path.

Select the path with the arrow tool. From the pop up menu in the paths palette, chosse "make selection" and fill with paint bucket.

Stroking a path allows you to paint color along the path border.

Channels refers to channels of colors.

Printing on Alternative Surfaces

Where to find papers & canvas to use in Patterson printers:

Uncle Eli's on 129 East Beaver Ave. They ordered through Legion Paper, which has a website <www.legionpaper.com> see the sample and all selection of papers. Normally sold at 22x20 sheet, price ranges from $2.47 to $5.34.

Office Max and Office Depot has reams (500 sheets) of glossy, heavier paper(get more specifics for about $10) and 8.5"x11" canvas for laser and jet printers

To print larger than 11 x 17:

Use Kinkos services at 101 N. Atherton St, corner of College and Atherton. Bring your zip disk with finished PhotoShop image at the output size you desire. However they recommanded to save the file with PDF, since it is the set up that they have as default. Bring in the work Monday through Friday between 9AM-5PM. The order will be process on the same day and ready to be pick on the next day. Other format that will make it easier to print with KINKO's is Quark and Illustrator. They have three types of paper for large print. Regular is $9 per feet; vinyl paper at $7 per feet ; and Gloss surface is $12 per feet, the price will be calculate according to the length of the print.

Guidelines for Printing on Alternative Surfaces:

  • Don't use stiff heavy paper (e.g., nothing over 150#).
  • Don't use paper with large chunks of fiber that could get caught on the rollers.
  • Don't use surfaces that could melt (e.g., no plastics, vinyl)
  • Consider the paper as a part of the art--it should support its metaphorical content and enhance its visual expression
  • Try to pair up when printing a large format to cut down on cost.

Info on Using the Printers in Patterson:

In 401 select the printer by going to the Apple menu and chooser. Or drag document on to printer on desktop. The print sizes are 8.5"x 11" and 11"x14". B&W prints are best for the price. Color print with laser machine has average quality and tend to be darker when printed. To do a manual feed with color printer, it works best to cut the sheet down to 8.5x11 (or attach thin sheet to solid sheet, and put paper in the tray and have the machine take it up from the stack). There is a new color printer in 401 that has better color than those in 302 & 304 labs.

How to Scan Images

For the Epson flatbed scanners you will no longer be able to use the "Import" menu to scan images directly into PhotoShop. Instead, you will have to use the included "Epson Scan" utility, found under "All Programs" or under "Programs by Category: Scanners".

The Polaroid slide scanners do not have an "Import" option anyway, however, the defaults have been set to open the scanned picture directly into Photoshop. The program for working with the Polaroid scanners is called "PolaColor Insight 5.6" and is found in the same places as the Epsonu tility.

As with any SCSI device, if the computer cannot communicate with the scanners, make sure that the device was on before the computer was restarted. SCSI is not "plug-and-play." If the scanner appears to be on but the device will not scan, restart the computer to be sure that things weren't started up in the wrong sequence by another user before you.

To Scan (FLATBED SCANNERS) an Image:

1. Turn on scanner. (Bulbs are expensive so only have on when you are ready to scan and turn off when done.)

2. Click mouse 2 times to open software folder "Epson Scan" utility, found under "All Programs" or under "Programs by Category: Scanners".

3. Lay your image to scan face down in the top right color of the scanner.
(Make sure the size is set to "Max. Area" (top right of scanner screen)

5. Select settings: colorRGB, reflective, 200 dpi, 100% (general suggestions - you can try other ones depending on if you want it reduced in size or gray, etc., but keep reflective setting)

6. Click "preview"

7. Move marquee (dashes) to surround image you want scanned. Click and drag the moving dashed lines (i.e., the marquee) to change its size.

8. Click "scan"

9. Go to "File" menu and pull down to select "Save As"

10. Save on your U-drive. Open in PhotoShop and save as a PhotoShop document if you plan to manipulate the image, or "Save for Web" and change to gif or jpg depending on file size desired and type of image and if you want to save a smaller sized file ready for Web or to insert another program like a Word or PowerPoint document.

11. Type in the name of the image in all lowercase letters and seven characters or less so it works well on all servers.The format you selected (.psd, or .jpg, or .gif) should be retained in the name as the extension (cat.jpg). Click "save."

Preparing Images for Web Pages
Preparing image size: Open Adobe Photoshop to size and crop your images into separate elements. Standard screen displays at 640x480 pixels. More on optimizing Web Graphics.

Continuous-tone images save as medium or low JPEG for the smallest file size. If transparency is needed, save as GIF, using an Adaptive palette with the fewest number of colors.

Flat-color images (anti-aliased) use Photoshop's Indexed Color mode (with an Adaptive palette and a Dither of None) and save as a GIF to give best results with the smallest file size. The number of colors you need will depend on the image - try using the least number possible to get the smallest file.

Black-and-white images can be saved as a GIF with Photoshop's GIF89a Export Filter This filter alllows a low number of colors (six colors works well on an anti-aliased image), and previews to quickly see how the image will look. Download the latest GIF89a Export Filter (60 KB) for Macintosh, Windows, or Unix platforms.

Gradations look best with as many colors as possible, so JPEG Medium is the best option for gradations. (JPEG gives a much smaller file size than GIF with an Adaptive palette.)

GIF format reduces the number of colors to 256 or less.
Large areas of the same color compress very well.

When to use GIF:

1. Small, iconic and thumbnail images
2. Graphics, logos, logotype
3. Flat color areas
4. Some smaill-area photographic/continuous-tone images
5. When you absolutely want to support every browser out there
When to not use GIF:
1. Some small-area photographic/continuous-tone Images
2. Large-area photographic/continuous-tone Images
3. When .gif is bigger than .jpeg
4. Lots and lots of colors
Organization: Place all of your images into their final folder. The organization of your files must be the same as when it will be posted on the Web. Otherwise, the Web document will not be able to locate the image files.

Place images into a table cell. Insert your cursor into the top cell. To insert an image pull down the menu "INSERT", then "Image," Navigate through folders to find your image "title.gif" or" title.jpeg". Select place.

TO REDUCE IMAGE FILE SIZE in PhotoShop 6.0: Under "File," "Save As Web" and follow options for the lowest size and the quality you need. Check the transfer speed, try gif and jpeg for best choice. Gif allows transparent backgrounds.

Transfer Rate: Aim to have your page transfer in 30-45 seconds or less.
Guidelines concerning file size and transfer rates:

A 14.4 K modem transfers about 1 - 1. 5K per second
(a 50K file = 35+ secs.)
A 28.8 K modem transfers about 2 - 3. 0K per sec.
(a 50K file = 17+ secs.)
A network connection transfers about 5 - 9K per sec.
(a 50K file = 5+ secs.)
TO REDUCE IMAGE FILE SIZE using GraphicConverter: Download GraphicConverter to your computer (it's Shareware)
Under "File"
Click on "Convert More"
Open folder with images you plan to put in your Web site (i.e., jpg & gif formatted images)
Hold down "shift key" and move the mouse downward to select all images in the folder.
Hold down the "apple key" to get option to "del. resource"
Click on "del. resource"
This process reduces the image's file size by removing all sorts of resources attached to the image not needed in a Web site. Do not remove resources to your system, programs, etc.--only images saved as .jpg or .gif ready to be inserted into Web pages.
This site GraphicConverter provides basic instructions on how to use GraphicConverter.

To Animate Images with GraphicConverter (even if created in other image making software) follow these instructions:

Go to File menu and select "Convert more"

In the "convert" column select a folder filled with images named or "renamed" 1.gif, 2.gif, 3.gif, . . . 9.gif, x10.gif

Change to "gif"

make a new empty folder in the "Destination" column

Options click "create movie" , 89a, normal, optimize, and loop (if desire)

then click "convert"

 
Web Site Basics

Keep it simple: Your first page should represent your Web sites's layout and be scanned quickly by the user.
Color-code to organize.
Pattern with templates.
Use visual metaphors.
Promote your web site.

Use concise information.
Make organization clear.
Use an intuitive navigational scheme.
Keep graphic file and text file sizes small.
Limit the number of graphics on a page.

1. Images should be saved as gif or jpg. Use the format that uses less memory (and still preserves integrity) because this can drastically affect loading time.

2. If want to display personal works of art, recommend using thumbnails (smaller images that are linked to a large version). Most museum sites use this technique.

3. The image and the document MUST be on the same disk. These should be in a folder labeled with your name. An image copied/pasted into an editor will not appear on the web page unless it is on the server hard drive with the document files.

4. Be sure to view the pages using a browser (Netscape or Explorer). This is the best way to ensure how the page will look, although the user has ultimate control over colors, fonts, etc.

5. Use alternate text for ALL images because many 'surf' the Net with images turned off (it's faster!)

6. Make sure LINKS are correct (check spelling, file names). View the page to be linked to and check the URL in the location field.

7. Label documents using: seven (7) characters or less, all lowercase, ending in .html

8. Label images: seven (7) characters or less, all lowercase, ending .gif or .jpg depending on the format used. This labeling is required for Mac servers. All servers require the correct extensions (such as. htm or .html for pages).

9. Uphold copyright laws.

10. A SITE ON ACCESSIBLE WEB DESIGN: Design your Web pages to be generic, so all browsers can read them -- including browsers of visually impaired users.

Getting Started with HTML (hypertext markup language) to problem-solve source code for your Web site. Or go to A Beginner's Guide to HTML (either the full length version or the printable version).

Tips on creating "killer" websites.

Macromedia Dreamweaver support and Webmonkey's DreamWeaver tips.

A template for adding a Discussion section to your Website

How to create Web cascade style sheets (.css--reduces the memory size of your Web site & allows you to develop at template for the whole site.)

Intro to Flash 4 for animation.

Creating animated gifs.

How to transfer files (FTP) from your machine to PSU server for Internet accessibility to the Web site you create.

DEFINE YOUR SITE: To Start a Web site & Return to It (using DreamWeaver Web editor)

Create a folder on the Desktop labeled with your initials. Create another folder inside this one labeled "images." All web pages you create and images used in the pages need to be in these folders.

Open Dreamweaver
(1st time & subsequent times--unless always at the same machine in which you go to "open site" instead of "define sites." When in doubt or having problems use "Define Sites")
Site
Define Sites
New
Site Name [give folder a name]

Local Root Folder [HD:Desktop folder:kkb] click on folder to pull up your folder set up for pages and images you want on the Web.]

HD is whatever your computer's harddrive is called. Desktop folder is the name of the folder your folder is in, such as on/in the Desktop. Kkb is whatever your folder is called.

HTTP Address: you can leave this blank

Enable Cache (have this checked)

Click on page and put new text in it.
File
Save
Preview in Browser to test links and see how it will look on the web.

Document title: Remember to give your document a header. This is the name that will appear at the top of document in the viewer's browser. Do this by putting your cursor in the Title bar and entering the header name, then press Return/Enter. Save the file with the suffix.html.

Design using Tables: Web editors use tables for layout.

The spaces in a table are its cells.
Cell padding refers to the amount of space between the edge of the cell and its contents.
Cell spacing is the width of the shaded area between cells.
Standard screen displays at 640x480 pixels.

Open Web editor to a blank new page. From the "Insert" menu click on "table. "

 Use Tables (created in standard or layout views in DreamWeaver) to Arrange Layout

and/or layers (in DreamWeaver)

   Join cells when needed

Click in the top left cell and drag across the two adjacent cells. The three top cells should now be selected. Look in the table choices for "join cell" or "merge cells."

To change the color of cells
 In "Modify" menu on "page properties" select colors for "text," "background" or add a "background" created in PhotoShop and saved as ".gif" or ".jpg"

 Add images in cells

select it
use alternative label

in "properties" menu (DreamWeaver)
 Also in Modify "page properties" select colors for "links" "active," & "visited" links

change
 

to make an email link in DreamWeaver click on the envelope icon in the "Objects" "Common" Window and type in email there.

  Align Cell Object

"background"

Bg (in DreamWeaver)
FRAMES (in DreamWeaver):
A divided layout made of multiple documents in which a page is targeted to appear in a designated section of the framed layout.

1. Create the frame division layout on the first "index.html" homepage. Save it.

2. Create a new page for each frame and be sure to save each page. (If you begin with creating frames and working in the framed areas each area needs to be saved (save frame). Each is a separate page once saved.)

3. Click in the frame you want to bring a page into and then go the main menu bar, select FILE > Open in Frame

4. Locate file in "local root folder" and then click on Open (Choose) to attach the page to the frame you selected for it to appear.

5. You'll see the title of the page in the title bar when you are working in the frame that page now resides.

6. Type the meaningful filename in the File Name text box. This filename will be part of the URL or pathname, for the entire frames-based page. Be sure to save in the "local root folder."
Save all the files in a frameset in the same folder in order to keep those files separate from the rest of the HTML files and image folder. You can create several folders within your "local root folder" such as the "images" folder I had you make to organize those in one place. "Document-relative" files work in all browsers-so don't use the "site root" option.

LINK TO OPEN IN A SPECIFIC FRAME:
7. In Properties window, target link to open in main, new window, parent (same frame)--see choices.
Add text: Insert your cursor into a cell in which you want text. Type or paste in your text and format it. If you bring in text from an outside application that formatting usually is lost. Most new programs can save formatting if you save the document as an HTML file and copy and paste it into "View" "Source Mode."

  pop up fields are useful if you want to ask the viewer questions and have the viewer respond and send you their response (using the "submit" feature) Use the Insert "form objects" to do this.

 Application

Legal Name:
Are you applying as a freshman or transfer student?
Permanent home address:
Telephone at mailing address:
Birthdate: Citizenship Possible area of academic concentration/major Special college or division of applicable:
Possible career or professional plans:
Will you be a candidate for financial aid? yes no
 
How to Set Up Your Web Site So Search Engines Find It
MetaTags - Meta Tags are not visible on your page but read by many search engines.
      <head>
      <META name="resource-type" content=document>
      <META name="description" content="A full 2 or 3 sentence description in here">
      <META name="keywords" content="keyword, keyword2, keyword3, keyword4, keyword5, keyword6, keyword7">
      <META name=distribution content=global>
      <title>Web Site Title< /title>
      </head>
Search Engine Submission Tips & Site 2: How to publicize your work (how to tell search engines that your site exists). Llisting with Search Engines.
How Search Engines Rank Web Pages (important if you want potential clients & galleries to find your Web site.)
Submit your site to search engines by clicking here.
How to Copyright your Web site: Spell out the word "copyright" instead of using the copyright symbol because a number of Web browsers won't display the symbol. After the word "copyright," place the year and your name. This notice on your creative work is sufficient. If you wish to register your copyright, call the U.S. Copyright Office at (202) 707-9100. Or download the forms from the Web at lcweb.loc.gov/copyright. It costs $20 to file. If you register within 3 months of creation, you are entitled to seek statutory damages (up to $100,000), plus attorney's fees and court costs, if your copyright is infringed.
 
How to Burn a CD-ROM
Buy Write-able CD at Circuit City, Best Buy, Office Depot, etc.:
e.g., Memorex 24xmultispeed CD-R 80 min.--700MB

Put a write-able CD into the CD drive 401 Patterson (purple drive in 304)) and when it appears then name the CD, drag movie and website folder and all work you want burned onto the CD icon on the desktop.

Drag CD to trash, and a menu pops up, click "burn" and wait until it completes with the final steps "verify" as the CD spins in the drive (about 30 minutes to burn 650 MB).

Remove the CD and place it in the computer CD drive and test.

You will need to burn a CD of your final course work including the Web site with movie as a processfolio by the end of the semester. You will probably need to burn CDs while creating your video too since most movies in process, even 3 minute ones, require more space than a zip disk.

 
 
 
Updated January 24, 2003
KK-B@psu.edu