Photoshop Layering Exercise

Jenna Bush Has Wedding at Crawford Ranch
President Bush’s daughter Jenna Welch Bush married Henry Chase Hager, a graduate student and son of a former Virginia lieutenant governor, on Saturday.

Photos of the Wedding

White House Memo

Complete Coverage: On Why Jenna Chose the Family Ranch over the White House

Video: Laura and Jenna's battle Against Illiteracy

Rescuers Continue Efforts to save Quake Survivors

Tens of thousands of people across southwest China remained buried beneath rubble on Tuesday as rescuers struggle to save them. The powerful earthquake left thousands dead and and hundreds of thousands injured and homeless.
Photos After the Deadly Quake
Over 13,000 Dead
Interactive Map of Sichuan Province-the site of the deadly disaster

Video: Raw Footage of Quake

More coverage: 'No hope" for the Children Buried in Quake

Previous Assignments

web #2

http://mysbfiles.stonybrook.edu/~ebolte/aprilhtml/aprilhtml.html

____________________ Photoshop #2

I got this picture off of the official Hillary Clinton Website

The article that this would go well with is:

http://article.nationalreview.com/?q=NjA5OTJmZDZhM2ViMGNmNjE2MTVlMzkyNTE3NTU5Njg=

I got this picture directly from the Politico campaign profile for John McCain

This would go well with this article: http://www.newsday.com/news/nationworld/ny-usgop205584369feb20,0,770400.story

______________________________________


Photoshop #1





This Champion Sandplum Ridge Pot of Gold named Pogo from Azle Texas shows off after the show at the 132nd Westminster Dog Show at Madison Square Garden in Manhattan, NY WILLIAM PERLMAN/THE STAR-LEDGER

What I did: curve to lighten, Despeckle, and then I cropped it. After cropping I then sharpened it.

____________________________________________________

Miley Cyrus on stage performs during her concert at Prudential Center, Newark. 12/29/07 Mia Song/THE STAR-LEDGER

What I did: Despeckle, Noise, Sharpen

______________________________

Web Critique

http://erickabjrn320.blogspot.com/search/label/Web%20Critique <---- web critique here (I don't want to lengthen down the entire blog w/ it)

Layered Photoshop flag exercise

According to The New York Times, Gov. Eliot Spitzer has been caught on a federal wiretap arranging to meet with a high-priced prostitute, according to a person briefed on the inquiry.

• Wiretap Recording Said To Implicate Governor As Client
  
• Affidavit: Client 9 and Room 871
  
• It Wasn't Sex; Suspicious $$ Transfer Led To Spitzer
  

Gov. Eliot Spitzer, with his wife, Silda, made a statement to the news media on Monday.



Read or post comments here.

Layered flag exercise - Example

Europeans horde Oscars

Top acting awards go across the pond on a night of diverse winners and ho-hum comedy.
• No Country takes Best Pic
• List of all the winners |  Winners slideshow
• Blog: A review | Was Stewart funny? Comment

Layered Photoshop flag exercise

Photoshop layer practice

1. Open one of the docs in the JRN320 Liss folder called “Photoshop templates” These are layered templates for 175x126 images that include various effects and a text overlay. Save-as the image with your name on it so you are not modifying the base image the class is working with
   
2. Toggle the eyeball icon for some of the layers to become familiar with what each one does to the image
   
3. Double-click some of the effects and play around with them.
   
4. Cut an image of your own and paste it in as a new layer. Most of the templates have a “paste image here” layer that should be selected when you paste. Otherwise, paste it in anywhere and experiment with dragging layers up and down in the layer menu to get it “under” the various effects. (Be prepared to delete steps in your “history” if you get stuck.
   
5. Experiment with the text layer. (Go to Window > character to make sure the character window is visible) – font size, letting, color.
   

When you have practiced enough, create two layered images of your own starting from one of the templates. Your overall mission is to create a pair of “flags” that each tease a story and create a package as if it were going to go on a Website homepage.

• Select an image and text that start to tell a story. Create your layered image
  
• Upload the image to your blog and position it in a blog entry along with a headline and some copy that teases a story for a reader to read and interact in some way – comment, upload their own photo, etc.
  

Photoshop practice exercise - Part I

Cropping, resizing, simple adjustments, saving for web

In your own blog, create an entry for this exercise and call it Photoshop practice exercise I.  We will use part of class on Feb. 11 and Feb. 13 to work on this.  Use the tips we have discussed in class and that are available in this blog

Using 5 images in our class space on the Journalism drive "Photoshop practice images," practice cropping and sizing images for maximum effect. Create 10 images by cropping each source image two different ways.  Under each image, write a caption that includes a credit (look in "file Info"). In italics below that, indicate what Photoshop tasks you performed on each image and what you were trying to do to tell a story with that image.

Notes: 

1. Your images should all be one of the following dimension configurations: (width x height) 332 x 220, 220 x 332, 135 x 101 or 280 x 100 - and you must use all of these sizes at least once
   
2. These images may NOT be distributed beyond this class and the assignment you are doing. They are the property of the Star-Ledger.

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.