1. Tapping the visual web
Using photos, video
and graphics to raise
more money online
video
photos
infographics
logo design
branding
@jeffachen | @danielpwalls | @givemn

2. jeffachen
danwalls
Who we are and what we’ll cover:
1. Intro to visual branding
2. File types, web sizes and the jargon of
digital photography
3. Simple tips and tools for creating
compelling infographics, memes & logos
4. How to produce simple, but compelling
videos with minimal equipment &
budget
@jeffachen | @danielpwalls | @givemn

3. GiveMN is a collaborative nonprofit venture to grow charitable giving
in Minnesota and move more of it online.
We do this through fundraising training and outreach, our annual Give
to the Max Day event, and by providing innovative online tools to
help you raise more money.
GiveMN is an independent 501c3 support organization
of the Minnesota Community Foundation, which is an affiliate of
Minnesota Philanthropy Partners.
@jeffachen | @danielpwalls | @givemn

4. Razoo provides the web platform
that powers GiveMN.
@jeffachen | @danielpwalls | @givemn

5. visual branding
• Visual branding is what a brand feels
like. Devoid of tag lines & mission
statements, a brand must be able to
represent itself as a snapshot.
@jeffachen | @danielpwalls | @givemn

6. visual branding
• Elements of visual branding:
– Colors
– Logo
– Font
– Layout
@jeffachen | @danielpwalls | @givemn

7. visual branding
• You can do anything. You just can’t
do everything.
• What are you branding? Cause? Org?
Project? Campaign?
@jeffachen | @danielpwalls | @givemn

8. visual branding
• Align your visual branding with overall
branding (voice, style, mission, etc.)
@jeffachen | @danielpwalls | @givemn

9. file types | sizes
Standard image files (store information about the file by identifying
each pixel and it's color, the result is that if you stretch or resize the
image, it looks unnatural and pixilated)
• .jpeg = (Joint Photographic Experts Group) used for photos online
• .tiff = (Tagged Image File Format) used mainly for photos in print
materials
• .png = (Portable Network Graphics) used for photos online, and
the main advantage is this file type can be rendered for
backgrounds to show through
• .psd = (Adobe PhotoShop Document) used for sharing with other
photo editors during the editing process, including for use in video
editing programs, but .psd files should be saved as .jpegs or .png
files for use on a published website or social network
http://en.wikipedia.org/wiki/Image_file_formats
@jeffachen | @danielpwalls | @givemn

10. file types | sizes
Vector image files (made up of points, lines and curves related to
one another using mathematical formulas and can be scaled to
any size with no loss of detail or sharpness)
• .ai = (Adobe Illustrator Document) use for sharing with other
graphic designers or video graphics editors, but .ai or .eps files
should be saved as .jpegs or .png files for use on a published
website or social network
• .eps = (Encapsulated PostScript) use for sharing with other
graphic designers or video graphics editors, but .ai or .eps files
should be saved as .jpegs or .png files for use on a published
website or social network
http://en.wikipedia.org/wiki/Image_file_formats
@jeffachen | @danielpwalls | @givemn

11. file types | sizes
dots per inch (dpi)
• Another number you will see used in addition to the pixels
dimensions is dpi. It will likely be either 72 dpi or 300 dpi.
• Basic rule of thumb:
72 dpi = web & video use
300 dpi = print use
@jeffachen | @danielpwalls | @givemn

12. file types | sizes
@jeffachen | @danielpwalls | @givemn
Standard website
size is 786 pixels
wide.
Typically, there is
a column on the
right, leaving you
with about 580
pixels to fill. This
is a great standard
width for
photos, graphics
or video.

13. file types | sizes
@jeffachen | @danielpwalls | @givemn
Photo sizes for
Facebook:
Cover photo = 851
x 315 pixels
Profile picture =
180 x 180 pixels
Tab buttons = 111
x 74 pixels

14. file types | sizes
Key takeaways:
1. For online purposes, use .jpeg or .png files for your photos and
graphics at 72 dpi
2. For print purposes, use .ai or .eps files OR .jpeg, .psd, .tiff files at 300
dpi
3. For photos and graphics on the web, the optimal size is 580 pixels
wide (unless the photo runs the width of the site, or requires other
specified dimensions)
4. For graphics, make sure you have an .ai or .eps version on file
somewhere and use that version (vector graphic) to send to
printers, web editors, and other creative partners
5. Whatever your use, take the time to find out the dimensions and
create photos to match them
@jeffachen | @danielpwalls | @givemn

15. photography
Considerations for choosing a photo:
– Perspective
– Cropping
– Your subject’s expression
– The Eyes
– Direction
– “Negative” space
@jeffachen | @danielpwalls | @givemn

16. Image tells a story
Cropped properly
Subjects facing in, not out
Sized properly for the page

17. The eyes! Subjects facing in, not off the page

18. Good Use of
Negative space to
compliment with
text/logos
Subject facing
toward the
headline, not
away

19. photography
Considerations for choosing a profile
picture or avatar:
• Does it fit 180x180 pixels?
• Person or logo?
• Keep it simple
@jeffachen | @danielpwalls | @givemn
vs.
vs.
vs.

20. graphics
• Software: Adobe Illustrator or
Photoshop
• Types of graphics
– Organizational Logo
– Event logo
– Infographics
– Memes
@jeffachen | @danielpwalls | @givemn

21. graphics
@jeffachen | @danielpwalls | @givemn

23. graphics
Meme – an
element of a
culture (often
an image or
video) that may
be imitated
widely
Memes = fun
Make your own:
http://memecrunch.com/generator/

24. video
• Equipment: web
cam or phone
camera
• Software for
editing &
publishing your
video: YouTube
@jeffachen | @danielpwalls | @givemn
Webcam:
$15-$80

26. video
Types of videos
you can
produce
@jeffachen | @danielpwalls | @givemn
• Thank you messages
• Report on progress, impact
• Testimonial
• Photo slideshow
• Video tour of a place or event

27. Questions?
video
photos
infographics
logo design
branding
@jeffachen | @danielpwalls | @givemn