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) Mac, 96 ppi Windows
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 5.5 Processes
 PhotoShop tips & tricks
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.

How to Scan Images

To Scan (FLATBED SCANNERS) an Image in the TTU School of Art Lab 204:

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 hard drive. Open "Adobe PhotoShop ®5.5"

3. Once in PhotoShop, pull the "File" menu down to "Import" and to the right select "Twain Acquire"

4. 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. Put your disk or zip cartridge in the computer or zip drive. Go to "desktop" if the name of your disk does not appear at the top of the save box and change it so the title of your folder "images" appears. Select either the file formats of "gif" or "jpeg" which can be placed in web editors. (You may need to flatten colors under "image" menu in Photoshop, "mode," and "Indexed colors" for Compuserv gif. To flatten for jpeg go to "window", "show layers", and "flatten." Use jpeg format to compress image -- usually compressed to medium works fine for most images.) Under "save file as" type in the name of the image in all lowercase letters and seven characters or less followed by .jpeg or .gif. 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.
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 PageMill document will not be able to locate the image files.

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

When you want your images to fit exactly, it's a good idea to set the image border in PageMill to "0". To do this, select the image and click the object tab in the Inspector. Enter "0" under Border. The extra space around the edges of the graphics will go away when viewed in an actual Web Browser.

TO REDUCE IMAGE FILE SIZE in PhotoShop 5.5: With image open click on the graphic editor (ImageReady 2.0) at the bottom of the tool box or use Cmd +Shift + M. You will see choices beyond the original. Select the one that looks good enough with the lowest file size (under 80K at least, the lower the better). Then under "File," "Save Optimized As"

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.

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.
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).
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 PageMill to a blank new page. From the "Insert" menu click on "table. "

 Use Tables to Arrange Layout

   Join cells when needed

To make the top row for your title bar, the large cell in the second row for your text and the bottom row for your navigation bar do the following: Click in the top left cell and drag across the two adjacent cells. The three top cells should now be selected. Click the join cell icon in the menu bar. Repeat to join the two left cells in the second row. Then again for the bottom three cells.

 

To change the color of cells
  In "inspector" on "page" select colors for "text," "background" or add a "background" created in PhotoShop and saved as "compuserv gif"

 Add images in cells

select it
use alternative label

in "inspector"
  Select colors for "normal," "active," & "visited" links

change "object"
  email: KarenKB@ttu.edu (see scripting below)  <A HREF="mailto:karenkb@ttu.edu">KarenKB@ttu.edu</A>

  Align Cell Object

"background"
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.)
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)

 Application

Legal Name:
Are you applying as a freshman or transfer student?
Permanent home address:
Telephone at mailing address:
Birthdate: CitizenshipPossible area of academic concentration/majorSpecial college or division of applicable:
Possible career or professional plans:
Will you be a candidate for financial aid? yes no
PageMill tips & tricks
 
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)
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 in the School of Art Computer Lab
Buy at Circuit City, Best Buy, Office Depot, etc.:
Verbatim * CD-R 74 min. (650 MB)

Art 3362 students burn CD-ROM with your semester work by 12/11/2000. Turn in by placing in Dr. Keifer-Boyd's mailbox by 4 p.m. on 12/11/2000.

Art 5366 students burn CD-ROM with the collaborative project to include HyperStudio Player, movies, and HyperStudio stack. Do this by 12/13/2000, 5 p.m. since it will not be saved after or set up for you to easily burn your copy.

Note: Lab hours during finals week is reduced to 12/7, 8, 11, 12, 13 from 8-11a.m. & 1:30-5p.m. (no weekend)

Ken Brown will move the movie folder from the Avid Cinema computer onto the computer with the CD burner so that you can include digital movies in case it does not fit on your zip disk for transporting from computer to computer.

Be sure to put a HyperStudio Player in your folder. Set up your folder with icons.

Turn power on CD (green light comes on)

Take disk out of case (blow off any dust ­ even new ones)

Put in label side up.

Apple
Programs
Adaptec Toast

Create a folder on the desktop
File
New Folder
-label what you want your CD to be titled.

Go to HD ­ drag data into folder on desktop

Go back to program (Adaptec Toast)
Drag folder into box (border lights up & tells time it will take to burn it)

Bottom right button ­ Write CD
Change speed to 2x (leave items unchecked)

Bottom button ­ Write disk
Done ­ CD comes out.

Rather than use the verify feature (which sometimes locks the system) remove the CD and place it in a machine nearby and test.

 
 
 
Updated September 8, 2000
Contact K.Keifer-Boyd@ttu.edu