Transcript Photo Editing Making Images Work for you

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 (emails/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
 Emails
 Social
media (Facebook/Twitter, etc.)
Photo Imaging
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 – http://www.pixlr.com
Photo Imaging
PicMonkey.com – http://www.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 email 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.
Use this arrow to display
the menu for the
Properties command.
Note the default image
size indicated on the
status bar when you open
the Paint program.
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.
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
Use the Save
command to save
it as a *.png file.
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.
Paste your new templates into
PowerPoint Save yourself some steps and just use mine here:
Square
Nav pod
Tall
Nav pod
Original
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 HiTech
Layout what you need
ALA Training
Learning Session
ALA Training
Learning Session
Adobe Connect
for ALA Member Facilitators
Adobe Connect
for ALA Member Facilitators
ALA Training
Learning Session
Adobe Connect
for ALA Member Facilitators
Social Media Brown Bag 1
ALA Staff Brown Bag
ALA Staff
Brownbag
ALA Staff Brown Bag
Learning Session Topic:
ALA Staff
Brownbag
How Not to be a
Press Release
Learning Session Topic:
How Not to be a
Press Release
12pm CST
March 27, 2013
ALA Staff Brown Bag
Learning Session Topic:
ALA Staff
Brownbag
How Not to be a
Press Release
12pm CST
March 27, 2013
Informz Training
ALA Staff Training
Learning Session
Informz
Time to Get Started
Presented by: Dan Kaplan
Informz
ALA Staff Training
Learning Session
Time to Get Started
Presented by: Dan Kaplan
Informz
ALA Staff Training
Learning Session
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 Type
Details
Web Buttons and Logos
PNG
Allows for compression, alpha transparency, true
color and is great with straight lines and text
Web Photos
JPEG
High detail with small compression. Great with
gradual color changes in regular photos
Printing Images
TIFF
No compression for highest image quality
Editing Images
PSD/XCF/CRD
Standard file type for respective programs
(Photoshop, GIMP, Corel). Maintains extra data
like layers and effects
Images in Documents
PDF
Maximum compatibility in sharing with extra
security and saving features
Simple Web Animations
GIF
Small and simple web animations
http://www.inkfarm.com/Image-File-Extensions
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





<img> 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
E-mail vs. web pages
Wepages – browser more flexible
E-mail

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
