critique of siteā€¦ The last day of class!

Organization:
description of links needs to be much more clear.
about link = needs to be about the site, not about zeppelin
booklet = going to by one
research = change to resources
Keep an about about the site….

Visual communication:
consistent…
blob on the upper left corner, remove, replace with a different image, bump up the text of the
don’t scroll left on the bigger images….

Other things, from other sites:
use special characters for elipses and stuff
check for usuability – bump up the font size and see what breaks.
captions for the images (put the float left,right for the div), make the images clear and consistent in image size.
tighten up the letting on blockquote and image captions (make the line height smaller)
sub-headings
no space around em or en dashes
NEED TO HAVE A PRINT CSS Style

Class comments on Image Assignment

Cropping needs some work. Needs some head space.

A little more skin color on the hand coloring.

On vignette, and clean up stuff, a little lighter tones. Darkness lost some of the detail. The background needs to be lighter.

Tips from others (That I need to do to mine too):
Amanda’s horse – the background is a bit too flat. Needs a little variation or gaussian fading.
Michael’s patterns on the photo – There’s a tool in Photoshop that get’s rid of patterns, something to do with the blur tool.
Nona’s pictures – They just use a link to the image file that opens in a blank file. Maybe link it to an html file that centers the image, or makes the window just the same size as the image.
Kurt’s images – When an image is ‘blown out’ (there’s too much white, over exposed), copy the image to another layer and mess with the copies opacity, or do multiply.

Design Project:
This needs to depict a different era than what your final project is. Tie it a time and place. Design a complete look and feel. A front page only with some decent text. Create an identity. Make an impact. Kind of bring it all to a crecendo.

A touching image of man and cat

Reconstructing the cat and man image:

-Take a good look up close and see what you have.
– scratches are not a job for the healing brush, use the stamp tool.
– healing brush for spots.
– come at a big spot with the rubber stamp tool (it takes a sampe and stamps it exactly) from different angles (both sides, top, bottom).
– to get a better oval, or to be able to position it where you want, use the ruler and move the ruler marks to the top and side of the oval you want to select. Then with the oval selection tool, put the crosshairs in the crossing of the ruler lines, draw an oval. Then you can ‘select->inverse’ and then delete the selection, which leaves you with the oval.

Class notes on Photoshop

These notes are good for line drawings…

Problems with old lithographs, wood carvings, line drawings….
– foxing: discoloration due to mildue, etc.
– yellowing of paper
– creases, folds, etc.

Things to try (tying to get rid of the background color):
– crop the image and put it on a layer.
– Auto color, see if you can do the auto colors.
– change the color levels (little graph thingy showing levels)
– add layers below the image, put the background as a bright solid color. A middle empty layer helps with the blending.
– Blend the layers so the bright color permiates the previous background. Then change the layer’s background color.
– You can erase any foxing, or other blemishes in the background from the image layer.

To play with and change the colors:
– Use the Selective Color tool, where you can slide the values of the colors in the image.
– To change to black & white use ‘Desaturate’ not gray scale.
– To switch colors, use the ‘Replace color’ tool. Mess with the fuzziness, and then the replacement options…

When changing the image size:
– Use ‘Image Size’ and set the Resample Image option to ‘Bicubic Sharper’.
– Change the size by using the ‘percent’ option, not ‘pixels’.
– to make sure it hasn’t lost any of detail, use the ‘Unsharpen Mask’ in the Filter menu.

Uncle Tom’s Cabin picture
– There are letters bleeding through in the background
– The faces are too dark.

What to do?
-Try the background trick from above.

A better world, without IE

Looking closely at the CSS for the typography project…. The class example shows some good stuff (the css).

Here’s some CSS tips and points to remember:

  • To get IE to float properly, use a text-align: center in the body and then text-align: left/right/whatever where needed.
  • Set the min-width in the body to prevent failures in Netscape.
  • There’s a cool way to do the foot notes on this example. They are in a span that is hidden unless the mouse rolls over, at which point they appear visible. Really Cool, I think.
  • The example also uses a small flash movie to add some pull text to the site. Kind of a neat way to add some different fonts and colors to the page.
  • Try these fonts: font-family: “Lucida Grande”, “Lucida Sans Unicode”, verdana, lucida, sans-serif

Octothorpe

Class discussion on February 7, 2006.

Big deal about footnotes? Scholars love them, and need them. Web people don’t want them, or think they are needed. They want to come up with a different way: links, sidebars, and such.

Tonight, we learn how to put good ol’ footnotes in the text, so they look good.

Here’s the practice page.

– The problem with the basic tag is that the line-height is all messed up. It’s about readability! Make it nice on the eyes, pal!
– all the values in the element? remember TROUBLE or TRBL (top right bottom left)

Ex. padding: 2em 2em 2em 2em

– Make the sup script stand out and not mess up the line-height by taking out the margin, padding, etc
– The image looks best when floated to the right. Because the image shows someone pointing. You want the eyes to be drawn to the text. Bad example: Little Professor. Her picture is looking away from the text.
– Can’t she just flip the image? Depends, what is the image for, copyright issues…
– images: use some floating and padding.
– menus: list-style-type: none, get’s rid of the dots.
– pull qoute: display: block, kind of makes it like it’s own little div. Also use the tag.

Octothorpe?
Luddite?