Monday, February 11, 2008

Photoshop cheat sheet

Here are some of the basics that we discussed in class.  Remember, these are the absolute basics.  To unleash the true power of photoshop, unnecessary for most web publishing, I recommend a graphic design class.

Workspace brightness: Be sure that the brightness on your monitor is turned all the way up before you get started.

When working with images from the Journalism network: Be sure to save the image first to your desktop or someplace that's yours.  Otherwise you will be modifying the base image we expect everyone to start with.  When you save your "final" version of the image, save it to the "JRN 320 Liss" folder with your name as part of the filename.

File info: Under File > File Info you will often find caption and credit information.

Resolution and page load: Almost all images on the Web are set at 72 dpi or pixels/inch - technically not the same term, as you'll see if you investigate further at techsoup.  When you do a "file > save for web and devices" this will optimize your images to 72 dpi.  Even large images on the web (500x300 is pretty big) shouldn't be more than 60K.  While high-speed internet connections have obviated most concerns about overloading, you should still take care not to weigh down a page with much more than 100K of image load, unless the page is specifically set up to display a bunch of large images (and your users are prepared).

Resolution and cropping: Your source image may well be higher-res than 72 dpi. It's often a good idea to start with as hi-res an image as possible so you have minimum constraints when cropping for a particular photo slot on a web page.

Measurements and rulers: Best to use pixels as the global measurement when working in photoshop for the Web.  Photoshop > Preferences > Units & rulers -- then under "units" set ruler to "pixels" and set "type" to "points"  

Crop tool: Use the crop tool to pre-set the pixel size (and h/w ratio) for the photo slot you are cropping for.  Click on the crop tool and set hight and width dimensions in pixels in the boxes near the top of the screen.  Then drag the tool over your image, noting that the proportion is perfect for your desired result.  When you stop dragging, right click for a crop/cancel menu, or go to Image > Crop.

Rectangle highlight: Use the rectangle highlight tool to select part of an image. That part may then be cropped (Image > crop) or singled out for various other effects and filters.  

Image size: To find out the size in pixels of any image you are working with, do a select-all on the image and then look in th "info" box in the right rail of your Photoshop desktop.  To re-size an image, go to Image > Image Size, then set the image dimensions to what's desired. Note that once you change one dimension, PS will automatically adjust the other to keep the correct proportion.

Lightening, darkening, contrast, color adjustment: There are many options for these types of adjustments in PS.  The simplest and quickest (even if it may not be the most advanced and precise tool) is Curves (Images > Adjustments > Curves).  Making sure the preview box is checked, drag the diagonal bar up and left to lighten an image.  Sometimes slight adjustments are all that's required, and you should always be careful not to washout an image by sliding too far.  If curves don't get the job done, consider some of the "auto" adjustments under Image > Adjustments (Auto Levels, Auto Contrast, for example).  Dive in for manual adjustment as you have time to practice.  It's not likely you'll ever need to go beyond curves and the auto adjustments for basic adjustment for web work.

Sharpening images: Any time you make an image smaller than the original, you will lose sharpness.  Use Filter > Sharpen as your final step before saving to get the image as sharp as possible.  If you have only slightly decreased the image size, Sharpen could leave you with some odd shine around the edges of faces or other borders. If this happens, consider not sharpening.

History and Undoing steps: Make sure the History window is open in the right rail of your desktop. If it isn't, go to Window > History.  You can then select any action you've taken since opening it and delete it, reverting back to a prior state of your work.  Undo will work for your very last step only.

Save for Web: You will want to configure this feature to allow one save box to create a 60 percent quality - usually just fine. Make sure the file type being saved is jpg.

SoundSlides manual

Here's a link to the online manual for SoundSlides

Wednesday, February 6, 2008

Web-only news sites

Working on a list - comment in with others.

Web eval: Liss example

Here's a mini, mini example of a very focused Web site evaluation, along the lines of what I'm expecting for your first assignment.
Comparing cnn.com and abcnews.com on the topic of Super Tuesday results.
I. Content & value adds
A. CNN - Politics page - organizing principle is a grid of state-by-state results, with out much setup or any context-adding set of stories
B. ABCNews - results page - similar setup, but more of a list.  All the numbers you could want, projected winners, etc.
C. Analysis: This was not what I was looking for in a results page.  Sure, I wanted to be able to see the numbers, but I would have much preferred a page that gave me access to the numbers while giving me the context of what happened Super Tuesday, some 24 hours after the polls closed on the East coast.





II. Interactivity

A. Analysis story - CNN - McCain clear leader; split decision may help Obama The bar across the top offers "Interactive" but click on it, and there's not much that's clearly interactive - no place to comment, no evidence of other user comments
B. ABC analysis story - How did Hillary capture the Hispanic vote? - No clear link on top to interactivity, but this is a blog with user comments clearly indicated at the bottom of the page
C. Analysis - Both of these are clearly analysis items, ripe for soliciting user comments.  Neither goes too far out of the way to invite user input.  ABC's does have clearly labeled "User comments" at the bottom of the page.  I find it a little disappointing that user input doesn't appear to be valued at all on CNN, at least in this context.  CNN's blogs may have more clear opportunity.  ABC's user opportunities were a bit more clear, and users were taking advantage - there were dozens of user comments below the blog entry.

III. Navigation/design
A. CNN homepage - way down, almost below the fold, a tiny, somewhat vague "Your Super Tuesday" - also a tiny text link on top - popular links
B. ABC homepage- Higher on the page, but about the same size "Super Tuesday results - See all Super Tuesday results here" - same real estate, but much clearer and more effective
C. Analysis: On CNN, I initially followed the wrong link at the bottom of the page to an I-report, CNN's way of doing citizen journalism.  On ABC, I followd the link to the results, but that's all I got. I wanted more.

Monday, February 4, 2008

'A Reported Blog'

Interesting masthead on a blog on the Atlantic monthly's website.

What do you make of the term "A reported blog on politics"?

Feb. 4 Classwork: Super Tuesday Website evaluation

Similar drill as last week's Super Bowl eval:

  • Pick two sililarly categoried sites from the following list: NYT, Wash Post, ABCNews, Huffington Post, politico.com, cnn.com, slate.com – suggestions?
  • each person in group has a role for reporting to class – content, interactivity, value-adds, nav/design



Taking and using screenshots

This is a reference for how to take screenshots.

There are any number of tips out there for how to take screenshots on a Mac.  Just do a Google search for "Mac screen shot.  One simple result is at Youthtech.com

Once you get the "picturex.png" on your desktop, open it up in Photoshop and edit it for the web - i.e., get it down to 72 dpi resolution and size it for your purpose.  Save it as a jpg and then it's ready to be uploaded to a blog or some other web purpose.