Tapping the visual web

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

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

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.

Razoo provides the web platform
that powers GiveMN.

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.

visual branding
• Elements of visual branding:
– Colors
– Logo
– Font
– Layout

visual branding
• You can do anything. You just can’t
do everything.
• What are you branding? Cause? Org?
Project? Campaign?

visual branding
• Align your visual branding with overall
branding (voice, style, mission, etc.)

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

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

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

file types | sizes
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.

file types | sizes
Photo sizes for
Facebook:
Cover photo = 851
x 315 pixels
Profile picture =
180 x 180 pixels
Tab buttons = 111
x 74 pixels

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

photography
Considerations for choosing a photo:
– Perspective
– Cropping
– Your subject’s expression
– The Eyes
– Direction
– “Negative” space

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

The eyes! Subjects facing in, not off the page

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

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

graphics
• Software: Adobe Illustrator or
Photoshop
• Types of graphics
– Organizational Logo
– Event logo
– Infographics
– Memes

graphics

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/

video
• Equipment: web
cam or phone
camera
• Software for
editing &
publishing your
video: YouTube
Webcam:
$15-$80

video
Types of videos
you can
produce
• Thank you messages
• Report on progress, impact
• Testimonial
• Photo slideshow
• Video tour of a place or event

Questions?
video
photos
infographics
logo design
branding

Tapping the visual web

More Related Content

Viewers also liked (8)

Similar to Tapping the visual web (20)

More from Jeff Achen (20)

Recently uploaded (20)

Tapping the visual web