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.

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!