visual resourcing guide

7
Visual Resourcing Guide for Non-Profits november 2013 charityexpress.com

Upload: netsquared-vancouver

Post on 27-Jan-2015

104 views

Category:

Design


1 download

DESCRIPTION

Charity Express's Jen Cook shows you where to find good images and fonts, how to brainstorm interesting images, and the specs required by sites like Facebook.

TRANSCRIPT

Page 1: Visual resourcing guide

Visual Resourcing Guide for Non-Profits

november 2013charityexpress.com

Page 2: Visual resourcing guide

Visual Resourcing Guide – Fall 2013

Image Sourcing

General Tips

use your own imagesHaving a photographically-inclined colleague or friend take photos is best when you can manage to do so - you will have more control of the content, won’t have to worry about useage rights, and can tailor the content as you like. Obtain a model release form for any-one whose image appears in your photos, however (you can find templates online). You can also try contacting local student photographers to see if they might be willing to work with you.

brainstorm some search wordsStart with a 5-minute brainstorm or word cloud exercise to help generate some potential search terms that might help you find more interesting images.

create a bank of imagesFinding images can be time-consuming! Grab images as you go and keep them organized in a folder, even if you won’t use them right away.

pay attention to useage rightsWhen using images from the internet, be aware of the source and what the creator’s stip-ulations are for using the image, since you are re-publishing the image. Pulling any image off of Google is, at best, poor etiquette, and at worst, could result in legal action.

read the image for subtextJust as you would choose your words carefully, use the same awareness when choosing images. Images can be loaded with historical meaning, emotion, and subtext both positive and negative. Taking a minute to step back and ask yourself who is in the image, and how are they being represented is worthwhile to avoid inadvertently reinforcing stereotypes, offending your audience, or even offending those you are trying to help.

go with your gutYou know your cause and organization better than anyone. If something just feels right, go with it! The more practice you get the quicker and more confident you will be with finding images.

Stay specificNothing is less effective than an overused, general image. Focussing on specific aspects of your organization, cause, or message helps you avoid overly general images that end up meaning very little.

Page 3: Visual resourcing guide

Visual Resourcing Guide – Fall 2013

Image Sourcing

Sources:

freePublic domain or Creative Commons sources. Creative Commons is a licensing structure that has many tiers and each image will have its own specifications. Often these images are free to use in a non-commercial context in exchange for crediting the photographer. Below is a list of sites to get started, but be aware that the sites do not guarantee all of the images are copyright free, and there may be some legalities such as model and property releases that could still be your responsibility. Check the fine print before proceeding!

morguefile.com/archiveArchive of photographs contributed by photographers for use in creative projects, though are not in public domain.

compfight.comA Flickr search tool that filters your Flickr search to Creative Commons-licensed images. Different licensing filters (ie. non-profit, commercial, etc) on the left hand side help you sort through which are acceptable to use for what purposes.

flickr.com/commonsA catalog of public photo archives from institutions around the world, including NASA, Library of Congress, and various cultural archives with “no known copyright restrictions”.

pixabay.comFree account lets you search photographer-uploaded images.

commons.wikimedia.orgWorldwide media file repository licensed under the Creative Commons Attribution/Share-Alike License.

paidThere are lots of pay-for-use sites out there that are often quite affordable for low-res (web only) use. Some of these sites even have a “free” or “sale” section as well. These sites are often the easiest option in finding high quality images quickly, and you don’t have to attribute the photographer. There are often limitations on how many times you can use the image, or duration, so check the licenses before buying. Below are a handful that are good places to start for not-too-stock-imagey photos and artwork.

veer.comalamy.comistockphoto.com

Page 4: Visual resourcing guide

Visual Resourcing Guide – Fall 2013

Finding Fonts

General Tips

keep it simpleIf you’ve got more than 2-3 fonts on your page, you’ve probably got too many

readabilityReadability is key - distressed or embelleshed fonts won’t scale down well and may have problems with readability across print and web platforms. A good size range for body copy (paragraphs) is usually between 10-12 points, depending on the font. Older audiences may need a slightly larger size, but for long blocks of text anything more than 16pt will begin to tire the eyes.

flexibilityChoosing a font family that has different weights (bold, italic, semibold) as your main font will give you lots of flexibility for subtitles, etc. Then pair it with a display font to add more character.

heirarchyContrasting fonts against each other (using size, style, or weight) helps the eye jump from point to point on the page. Think about where you want emphasis to be to help organize the information into scannable pieces.

system fontsEvery computer comes with a set of fonts - some common ones for Mac and PC are Times New Roman, Georgia, Garamond, Arial, Helvetica, and Futura. These font families are gen-erally quite robust and have various weights (bold, italic, light).

it’s all in the nameIt’s not a hard and fast rule, but when considering whether or not to use a font, look to the name of the font to get a better idea of the appropriate useage for it. “Champagne and Limousines” is probably trying to get across a feeling of luxury. “Comic Sans” is meant to be a comic book font. “Varsity” is probably inspired by a college football team.

Sources:

freefontsquirrel.comlosttype.comfontfabric.comdafont.com

paidfontshop.comfontspring.com

Page 5: Visual resourcing guide

Visual Resourcing Guide – Fall 2013

Finding Fonts

Kinds of FontsHere is a very general guideline to just a few of the categories of fonts out there;

serifSerifs are the little “feet” at the end of the characters if you look close (“n” is a good example to look at). Serif fonts are gener-ally the easiest to read when used for long paragraphs.

displayDisplay fonts are often the most decorative kind of font. These are good for headers and large-scale uses but should never be used for long bits of text.

sans serifSimply means, without the serifs. There are many many subcategories of sans serifs, but generally they are more modern-look-ing, can be used for long bits of text, and are good when paired with serif fonts and used as headers.

scriptScript fonts simulate handwriting, but are usually quite regular and readable, though not suitable for long bits of text.

Garamond

Times New RomanGeorgia

BLANCHROSEwood

Marker Felt

Trebuchet

HelveticaVerdana

Edwardian ScriptSofiaLavenderia

Page 6: Visual resourcing guide

Visual Resourcing Guide – Fall 2013

Further Info

This document only scratches the surface of some of the principles you might find useful when creating images. Below are a few places to start if you want to learn more.

Typographyilovetypography.com

typographyserved.com

typeinspire.com

thinkingwithtype.com

fontsinuse.com

Sizing Images for FacebookGeneral Facebook dimensions (cover photo, profile pic, etc)

http://havecamerawilltravel.com/photographer/images-photos-facebook-sizes-dimen-sions-types

In-depth differences in how Facebook sizes photos uploaded to Business page vs. Per-sonal timelines.

http://inlinevision.com/blog/choosing-best-image-size-facebook-photo-posts/#down-load

Finding your Facebook Audience

Page 7: Visual resourcing guide

Visual Resourcing Guide – Fall 2013

Image Spec Guide

Web

resolution72 ppi (pixels per inch): This is the resolution that most screens are capable of rendering. This is what is generally referred to as “low-res”.

1MB or less: Most images should be quite small in filesize so as not to cause loading time problems.

colour spaceRGB: Images on screens are rendered as a mix of red, green, and blue, known as an addi-tive colour space. This is due to the way light is projected from the screen.

file formats.png, .jpeg, .tiff, low-res PDF

Print

resolution300 ppi (pixels per inch): Anything lower will compromise the image clarity when printed. This is generally referred to as “hi-res”.

colour spaceCMYK: Printers (desktop and commercial) print using cyan, magenta, yellow, and black inks in layers, known as a subtractive colour space. The CMYK colour space is somewhat more limited than RGB, very bright colours such as neons won’t print in the CMYK space, and would require special inks known as spot colours.

file formats.jpeg, .tiff, hi-res PDF