PHOTO EDITING MAKING IMAGES WORK FOR YOU Dan Rude, Pam Akins, Dan Kaplan

Overview Part 1 Photo imaging (presented by Dan Rude)  Photos at conference/practical applications  Uploading and storage  Quick editing solutions (Pixlr, PicMonkey) Part 2 Ins and outs of web editing (presented by Pam Akins)  Resizing, cropping, creating images using apps already on your desktop,  web-based editing options  royalty-free images Part 3 Working with Images (presented by Dan K.)  Images with HTML ( s/web pages),  Image positioning in content,  Understanding image URLs,  resizing in html, acceptable formats and when to look for pro advice

Photo Editing Basics: Preferred Formats  JPEG, TIFF, PNG, GIF  Resolution: 92 dpi (web), 300 (print) Basics: Resizing  Resize down, not up  Save your original file! Basics: I Am Not a Graphic Designer

Photo Imaging Why Take Photos?  Human side of association work  Excitement of events/activities  Use in org marketing:  Website  s  Social media (Facebook/Twitter, etc.)

Photo Imaging

Photos at Conference  BYOC  No Wasted (Digital) Film  Have Fun

Photo Imaging Uploading  USB Cord  External Card Reader  Conference PC vs Laptop

Photo Imaging Storage  USB/Thumb/Flash Drive  External Hard Drive  Cloud Storage (i.e. Dropbox)

Photo Imaging Web-Based Photo Editing  Pixlr  PicMonkey  iPad Photoshop App

Photo Imaging Pixlr.com –

Photo Imaging PicMonkey.com –

Slap Together Effective Graphics Using Microsoft Office

Size it up!

Image Sizes Needed for Adobe Connect Events Note the image sizes you will need for the and web page presentation of your event.

Template sizes

Create your Own template sizes

STEP 1: Paint - Create image template at pixel level Why Start Here? Since it is can be a hassle to get and tweak pixel sizes in any Office product, we start with Paint to create, command and control the exact pixel sizes we need for each image. Open Paint Using Start in Windows on the Windows menu and searching under Accessories (or type in “Paint” under Programs search in Windows 7 and beyond. Note the default image size indicated on the status bar when you open the Paint program. Use this arrow to display the menu for the Properties command.

Step 2: Define the needed pixel size For each image that you need at a precise pixel size, you will need to do this step. From slide one, the Large Event Banner size was 740x300. Indicate the template size you need in pixels. Click OK. Select Pixels and enter the size values needed for your image.

Step 3: Make it easy to work with Choose a color from the palette and then the bucket to fill your image background. Use the Text tool to add a size note to your template. Use the Save command to save it as a *.png file.

Paste your new templates into PowerPoint Save yourself some steps and just use mine here: Original Nav pod Square Nav pod Tall Nav pod

Crop or Resize to Suit

Templates Exist for You! Ala.org/support/photo

Slap Together Effective Graphics Using Microsoft Office

Layout the Elements

Use Word Art & Text Effects to build art

Build the elements you need

Acquire the elements you have

Mix in images

Arrange & Group

Arrange it all together Lo-Tech Meets Hi- Tech

Layout what you need Adobe Connect for ALA Member Facilitators ALA Training Learning Session Adobe Connect for ALA Member Facilitators ALA Training Learning Session

ALA Staff Brownbag ALA Staff Brown Bag Learning Session Topic: How Not to be a Press Release March 27, pm CST ALA Staff Brown Bag Learning Session Topic: How Not to be a Press Release March 27, pm CST ALA Staff Brownbag ALA Staff Brown Bag Learning Session Topic: How Not to be a Press Release ALA Staff Brownbag Social Media Brown Bag 1

Informz Training Informz Time to Get Started Presented by: Dan Kaplan ALA Staff Training Learning Session Informz Time to Get Started Presented by: Dan Kaplan ALA Staff Training Learning Session Informz Time to Get Started Presented by: Dan Kaplan

Group your created images Use the Group command to join all the elements of your new banner images together.

Picture It

Save and Upload Right click to Save As Picture, so you can Upload it into Adobe Connect or Drupal or ALA Connect or wherever

Slap Together Effective Graphics Using Microsoft Office

Working with images Basics of electronic images  Formats –  Vector vs. bitmap  Raw vs. compressed (tiff vs. jpg, gif, png)  Resolution – dpi  Transparency, Animation, Background  Layered images

Working with images What's The Image For?Recommended File TypeDetails Web Buttons and LogosPNG Allows for compression, alpha transparency, true color and is great with straight lines and text Web PhotosJPEG High detail with small compression. Great with gradual color changes in regular photos Printing ImagesTIFFNo compression for highest image quality Editing ImagesPSD/XCF/CRD Standard file type for respective programs (Photoshop, GIMP, Corel). Maintains extra data like layers and effects Images in DocumentsPDF Maximum compatibility in sharing with extra security and saving features Simple Web AnimationsGIFSmall and simple web animations

Working with images Understanding image URLs  Where’s that image stored?  Local drives vs. servers  Relative vs. absolute URLs  Embed vs. download (like in press release)  Transferring– FTP, Dreamweaver, web editors

Working with images Advanced image use in HTML  tags what’s it all mean  Alignment - positioning in content  Padding  Borders  Resizing in HTML –  keeping proportions  Big > small, not small > big  Alt-tags keep it accessible

Working with images vs. web pages  Wepages – browser more flexible   Stick to the basics  No movies, use screen shot  No Flash/Java script  Check acceptable formats and sizes

Working with images When to look for pro advice  Need layered images  Need transparencies  Need vector image (scaling) -- like logos  Image used for printing / high resolution  Layers and specialty fonts