Lesson 8: Imagery

I am such a technophobe. This is how much: My husband has had Adobe Photoshop 3.0 for what seems like years, and I’ve never touched it. I am going to look at the tutorials for the first time.

Notes: Gimp: Open source software to edit and retouch photos and images. Photoshop Elements is Photoshop Lite, according to the first turtorial on YouTube. I just downloaded gimp in case I get overwhelmed by Photoshop.

The first tutorial went down very easily. I edited one of my pictures and compressed it enough to email. What I learned:

1. For brightness/contrast: go to colors

2. To sharpen: go to filters, enhance, sharpen

3. To compress, go to scale, image, percent. Make sure locked. Bring down to about 20% (451?)

4. When asks quality, choose around 70%. Lower means smaller file, but too small may lead to degredation.

The Joy of Painting with Gimp tutorial has no sound and is about 10 times to fast to follow. Waste of time.

Oh my God! I just spent so much time searching for an understandable tutorial for Gimp. Good Lord! If I ever learn how to do this, it will be my mission to make a tutorial that is understandable, i.e. visible, audible, and at the right speed. What’s the point of doing the tutorial at the speed of light? If I could process that fast, I wouldn’t be doing the tutorial.

I finally found one the right speed. I bookmarked it. To distill:

1. Scaling (I think this is like compressing) click scale tool, drag handles, or lock to keep proportional.

2. Cropping: Pick exacto knife icon. Click inside area when done.

3.Cutting with transparency. Get paths tool. Pick stuff you want. Shift V, Conrol I, Delete.

Chooe PNG format for images with transparency.

Part 2 of the tutorial shows how to make a button in Adobe Flex. ? I’m not that advanced yet.

I’ve been perusing a number of tutorials for Gimp on YouTube, and so many of them are talking about “dialog”. I don’t see that anywhere on mine, so that must be something old.

I’ll go on to the other websites for this week and see if they help.

Let’s try the Gimp User Manual: I don’t know why I have the tools screen but not the image screen. I’ll have to put an email out to the class. I have spent all day doing this. Gotta stop!

Chapter 5: Beaird

Imagery:

Things to remember: Is it relevant? Is it interesting? Is it appealing? I have to be careful that I answer these questions correctly with my imagery. If I take a picture of a bunch of teens hanging around Teen Lounge or playing games, how will I make that look intriguing? The backdrop of the library meeting room isn't that exciting. Hmm . . . I really want to use images of the actual library and people because using flashy, even slightly stylish images, would look like I was trying too hard. That is just NOT our library. Anything that looks commercial would look fake.

Maybe not for this project, but for future reference: get free stock photography from Stock.XCHG
I doubt I will ever be purchasing images in any form, royalty free or not.

Google Ganking: getting an image off a search and then manipulating them to fit your needs. Don't do it. Assume images are copyrighted. If an image is marked as free, let the creator know how you are going to use it.

Hotlinking is another no-no. That's when a site links to files on the designers' own servers.

Creative cropping. I don't often compliment myself in this course, but I have to say I do have an eye for composition. That is probably the ONLY time I will feel confident in this course. Maybe not, though. I could have a breakthrough.

I have GOT to look at my video tutorial on Photoshop. This is something that my husband has played with, but I haven't.

Typography Websites (Continued)

Microsoft Typography: Reading about TrueType. It looks like that's what is on my screen right now. It's a digital technology developed by Apple, but now used on both Apple and Microsoft platforms. The TrueType rasterizer is the program that reads the font description and generates the bitmaps.

Micorsoft ClearType: Technological innovation that improves screen readability.
The TrueType rasterizer is the program that reads the font description and generates the bitmaps.

This site doesn't do much for me. It's getting into detail that is beyond me at this point.
But, I'm looking to download some of the free fonts. I don't even know how to install a font. I need a tutor. What I really need is to have taken a basic "How to use a computer" class before this. This little things are big stumbling blocks simply because I don't have the basic knowledge.

ABC Typography (virtual museum). I'm a little confused by this site. I'm trying to look at the classical typefaces, but every link is dead. Okay, I was able to open the 20th century, and at least read about Albertus, Eras, and Rockwell. The links on the drop-down menu are dead. Same is true of the modern collection. Interesting to find that some fonts were designed, at least in part, to compensate for the difficulties of reading from a screen and laser printing. Lucinda Bright is an example, d.o.b 1991.

A List Apart:

Typography Websites

Typography Websites:

I Love Typography: My favorite part was the portion of found type. I did a little reading on the history of humanist type. I have never really thought of the historical and cultural influences of type. It shows how much I take it for granted. I was surprised to read in the Beautiful Web Design book that there was such an outcry against sans serif.

I Love Typography: 15 Examples of Excellent Web Typograhy:

I like the type and the whole look of the website of Jesus Rogriguez Velasco. There are a lot of elements mashed together in the graphics, but also a lot of white space so that you’re not overwhelmed. It makes you stop and take time to look at each graphical element. Oh, yeah – I like the font, too, the larger sloppy looking one that he must have put in as an image. I like the oddly shaped search box, too. Picture at the top: There’s an old floppy disk, a giant computer, and a monk tumbling down.

There’s Bearskinrug again. I remember that from our text.

Typographica: Typography Journal and News

Cyrus Highsmith, a designer and faculty member a the Rhode Island School of Design, points out in his interview that 1,800 new typefaces a year are introduced to the public and wonders what that effect will have on the people who see them. Will they become more sensitive to type design, or less? I have the feeling I always have: overwhelmed. I guess I like to look at all of the different designs, but when it comes to choosing one, what do I do? With so many choices, you really have to know what is appropriate for what you’re doing. I can just picture a designer looking at what I did and saying, “That’s awful.”

Oh, no! Now I’m reading about the importance of good handwriting! I’m so self-conscious about my handwriting, especially when I have to write something in large letters on a sign for the library. My writing has no energy or style. Weird.

I totally understand what Highsmith is saying about how writing on paper makes ideas flow better and different parts of his brain light up. I often feel like I’m wasting time by taking notes the old-fashioned way, but I feel more connected to what I’m trying to absorb. Maybe if I had been born 20 years later, that wouldn’t be the case.

Wow. I really like the different FF BeoSans OT by Rossum and Blokland that has a “shaken, distraught” appearance. It costs $54.

Notes on Baeird: Typography

My Internet is down again so I’ll do this in word and then cut and paste into my blog later.

Chapter 4 of Beaird’s text: Typography

Beaird says that “the majority of the decisions that need to be made in our work with type involve the space around the letter forms and text blocks rather than the actual type itself.” That is a new way of thinking of it for me.

The SAFE LIST consists of nine font families.

CSS allows you to choose multiple fonts in order of preference.

If you really want your font to appear in a certain way, use images to display.

If you want to replace text that changes periodically, the solution is “siffer” sIFR, scalable Inman Flash Replacement. It uses Flash and JavaScript

You can control spacing horizontally and vertically.

Kerning refers to adjusting the space between letters

You can use the CSS property to adjust a fonts tracking. Add pixels to make text more open, e.g.

Vertical spacing: known as leading. You can use CSS line-height property. The unit that measures the size of a font in CSS is an em.

Fonts:

Serif: provide horizontal line reference.

Sans serif: They stand out at headlines, esp. when the main text is serif. On the web, though, the opposite it true. Probably not a good idea to use as headlines these days on the web.

Handwritten: Convert to images or use sIFR to make sure everyone can see.

Fixed-width or monospaced font: not proportionally spaced.

Novelty fonts: Can be good for logo design.

Dingbat fonts: Many available on the web. Try ScrapiCons.

Choosing the right fonts: Define feelings trying to evoke in target audience. Rule of thumb: don’t use more than four different fonts in a web design. Don’t combine two different serif with two different sans serif in same project.

Section on setting font size and em’s is going over my head ??? p. 122

The homepage should have a singular message that’s conveyed in large type. Not too much reading. It’s a hub.

Style Sheets: AGAIN

I will do my utmost to maintain external style sheets because there is a pretty strong warning in the book. Given my propensity to get tangled up with this new stuff, that's probably what I should do.
To review:
A selector id's what you want to format.
A property id's the type of format
The value sets the property.
It looks like this: selector { property: value}
You must include a link in the HEAD. There are three partas (see p. 143), the first and last of which never change.
Cascading: This term refers to the sequence of rules that are followed. They follow this order in terms of power: Inline, Internal, External, Browser.
Inheritance: Tags in HTML contain other tags. You can apply a rule to a tag that contains others. On the other hand, when they overlap, the rule closest to the tag wins.
Things to remember about color: There is COLOR and BACKGROUND COLOR.
In order to get around the plain old 16 color names, use the RGB values.

Colors on the Web:

Spinning the Color Wheel is like playing Roulette. My wrist hurts. What's interesting is that as I do this, and I happen on a color I happen to find pleasing, I then look at it again, think of how the teens would react to it, and have a crisis of confidence. Because colors go in and out of style just like clothing fashions, I worry that I'm picking a color that is "out." I'm sick of imagining being uncool.

Hmm. . . I just looked at other people's choices for colors, though, and I didn't really like theirs either.

Chapters 11 and 12: Notes

I am still back on Chapter 6 and style sheets. It's hard to believe. But, I've gone ahead and read Chapters 11 and 12 so that I can at least be timely in my note taking this week.

Chapter 11: Notes on Attracting Visitors:
Advice to heed: Entice visitors to come back with fresh content and add-on features.
Perfect you meta tags, both description and keyword. These go in the HEAD section. Put them in every page you create. Description should be a couple of sentences; keyword 25 words or less.
Submit site to web directories and search engines
Use hit counters and server logs to monitor traffic.
Find other websites like yours and establish reciprocal links. These will help your ranking.
Taking part in a web ring is another possibility, though you could end up in a ring with hideous sites. Be careful who you associate with.
Building a community, through forums, promo events, and newsletters help to keep your site viable.
Add a favicon (easily recognizable in a Favorites list)
Submit and application to ODP, the Open Directory Project. See page 299 for tips on how to do it the right way. Hint: don't be obnoxious. Other directories are Yahoo and Looksmart.
PageRank: the value of your site is determined by how many others link to it.
Another way to boost self: Google AdWords. Typical cost of a click is 35 cents.

Chapter 12 is about letting visitors talk to you and each other. In other words, give your site life by transforming it into a community.

Good tips: Be dynamic in the meta description part. Address what the site hopes to accomplish.
Add discussion forums and chat boards.
Advertise new content before adding it. Links to new content should be on first page.
Promote regular events.
The rest of the chapter explains the HTML necessary to create forms and check boxes, and how to manage a group.

I am far off from this last part. In fact, I can't imagine having the time to keep up with it. MacDonald suggests creating things like forums with threads that perpetuate themselves.

That's all for now. Back to remedial training.