Category: Academic

Writings, research, and findings that have to do with history, scholarship, and everything in my academic sphere of life.

Little noties for Weekly Posties – March 7

Cameron Moll, That Wicked Worn Look
Part Four: Expert Guest Gala

Academics of Worn
Greg Storey, airbagindustries.com
This guy has some good advice. Take shapes from the times. Like signs, airplanes, cars, etc. Also take the colors from the times, and then apply hues/saturation filters to get the other tones that make the image look old and authentic.

Aged Aesthetic
Jason Santa Maria, jasonsantamaria.com
Does the ageing support the concept of the site, or are you just doing it ’cause it looks cool. “The better you understand what it is you are emulating, the more realistic the effect will be.” Touch it, taste it, feel it, smell it, study it. Be creative, and make weathered looks from things around you.

The Awesome Antiquated Look
Blake Scarbrough, blakems.com
Use a brush tool that has the look you want. Add that style to any tool; brush, eraser, clone, etc. Then apply blending, colors, and filter affects.

Weathered: Subtle. Restrained.
Ryan Sims, justwatchthesky.com
Not there, couldn’t track it down….

Time Traveling
David Hellsing, monc.se
Four easy steps to make something look old.

Analogue
Dave Rau & Josh Bertrand, redlabor.com
Use source files, scanned in images for textures.

Paula Petrik, Scholarship on the Web: Managing Engravings

This is the tutorial for what we did in class last week. A good reference.

Poysonal thoughts:

These were all good tips and tricks for editing images and making them ready for the web.  The “Wicked Worn Look” (making a new image look old) was doing to an image in reverse of what we learnt in class last week, making an old image look new.

The most helpful tips were to look at the purpose of ‘ageing’. Will it add to the concept of the site, or is it just because it looks cool.  For inspiration, look at shapes and colors of signs, airplanes, cars, houses, anything of the time period. Use things commonly handy for tools to make your own filters and textures.

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.

Redo! on the typography.

Despite spending a couple of days in the hospital with my 3 year old son, I totally revamped my project.  The new typography project (with no changes happening during class time, I promise! I’ll sit on my hands the whole time!) can be found at http://gmu.mossiso.com/697/assignments/index.php?page=book The text for this page is taken directly from the introduction of Strauss’s book. I’m using it as a filler, so that I can focus on the typography side of the project.  The “Home Page” has a brief introduction to the project.
I couldn’t resist using a little bit of PHP to make my life a bit easier.  Just simple page includes and an if…elseif…else statement.  Elementary stuff…. 🙂

Colors and such

The color sites intrigued me the most. It always fascinates me how the change of colors can affect so many things. And how the good sites use only a few colors effectively.

The ideabook.com article had a lot of good points: KISS (keep it simple stupid), low tones, and few colors. Everything we read seems to point back to the first thing anyone learns about architecture: Form Follows Function. But I like to add Frank Lloyd Wright’s insight to that:

“Form follows function—that has been misunderstood. Form and function should be one, joined in a spiritual union.”
—Frank Lloyd Wright  [source]

Mr. Wright is a great architect, although I do think a lot of his stuff (like modern ‘art’) was a bit wacked, but I totally agree that form and function aren’t separate things that fight for the outcome of the project. Like so many things in life, it takes a combination of things to make a whole. (Boy, that sounds deep. I sure am on my way to being a scholar with comments like that. 😉 )

Anyhow, the more I code and design, the more I like things to be simple and plain. This is for a couple of reasons. One, it makes it easier to read, follow and learn. Two, it’s easier to build and maintain. Three, I can’t design worth beans anyway. Hence my awaiting the future classes with great anticipation.

It’s awesome to see everybody (especially me) turning clunky first drafts into blooming works of art. Keep at it y’all!

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?

Front page get's new design

I updated the front page for http://gmu.mossiso.com

I’m using a content management system that I built myself. Looks pretty cool, I think.

I just need to fix a few things with the links, how they’re displayed. I need to be able to order them how I want.

Anyhow, the code is available for anyone who wants it.

And to fulfill the CSS assignment, I made sure that the site validates as standard compliant CSS and HTML (don’t worry about all of the warnings in the CSS, who wants to add all of that extra stuff anyway).