Summer Institute :: Communications/Graphic Design :: Monday, June 1, 2015
1
Slide 1
Welcome
Communications
Graphic DesignRoxanne Rash
AEA Graphic Designer
Summer Institute :: Communications/Graphic Design :: Monday, June 1, 2015
2
Slide 2
Communications Session :: Graphic Design
Relationships
Words & Graphics
• Words tell the story
• Graphics add to the story
Images say a lot, make sure they speak to the goal of your message.
Good quality underscores professionalism
Don’t use images with watermarks or too pixelated or blurry
Fits the content appropriately
Images should ADD to the message; not distract
Design means a graphic has a reason to be where it is;
Images are not random
Summer Institute :: Communications/Graphic Design :: Monday, June 1, 2015
3
Slide 3
Communications Session :: Graphic Design
Credit: www.5cubecommerce.com
Summer Institute :: Communications/Graphic Design :: Monday, June 1, 2015
4
Slide 4
Communications Session :: Graphic Design
Relationships
Images and Graphics have
• Purpose
• Intention
Summer Institute :: Communications/Graphic Design :: Monday, June 1, 2015
5
Slide 5
Communications Session :: Graphic Design
Credit: www.stocklayouts.com
Summer Institute :: Communications/Graphic Design :: Monday, June 1, 2015
6
Slide 6
Communications Session :: Graphic Design
Elements of Design
Typography
• Simple is GOOD
• Less is more
• Gimmicky fonts are distracting to your message
Fonts are very important, don’t let them distract from message.
Summer Institute :: Communications/Graphic Design :: Monday, June 1, 2015
7
Slide 7
Communications Session :: Graphic Design
Funny and obvious… but… it’s the same thing as this…
Summer Institute :: Communications/Graphic Design :: Monday, June 1, 2015
8
Slide 8
Communications Session :: Graphic Design
Credit: Monday Morning Kick Start and Tebo Design Studio, Inc. © 2015 http://mondaymorningkickstart.com/better-font-usage-for-better-designs/
The ‘crazy font’ choice isn’t as glaring in the context of a newsletter,
but just as bad for message.
Summer Institute :: Communications/Graphic Design :: Monday, June 1, 2015
9
Slide 9
Communications Session :: Graphic Design
Elements of Design
Font Selection
• One Serif – Times, Garamond
• One San-Serif – Arial, Verdana
• Check out: Google Fontshttps://www.google.com/fonts
One or two font styles is all you need.
I like one serif font like Minion or Garamond,
and one san serif, like Century Gothic.
(The font that is in all the slides)
Google Fonts
Summer Institute :: Communications/Graphic Design :: Monday, June 1, 2015
10
Slide 10
Communications Session :: Graphic Design
Elements of DesignColors
• 2 – 4 color palette
• 2 colors +an accent works great
• Remember what color ‘says’ to
the reader
Color doesn’t have to be intimidating or overwhelming.
Summer Institute :: Communications/Graphic Design :: Monday, June 1, 2015
11
Slide 11
Communications Session :: Graphic Design
Credit: Digital Information World 2015, Irfan Ahmad
The psychology of color is fascinating… you don’t need to know a lot, but it can
be an interesting read. That way your layouts don’t ‘say’ the wrong thing with
color.
The link to this article is in the handouts under resources.
Summer Institute :: Communications/Graphic Design :: Monday, June 1, 2015
12
Slide 12
Communications Session :: Graphic Design
Elements of DesignColors
• https://color.adobe.com/create/
color-wheel/
• http://www.colr.org/
• www.design-seeds.com
Who needs to learn color theory when everyone is doing it on pinterest?
Summer Institute :: Communications/Graphic Design :: Monday, June 1, 2015
13
Slide 13
Communications Session :: Graphic Design
Summer Institute :: Communications/Graphic Design :: Monday, June 1, 2015
14
Slide 14
Communications Session :: Graphic Design
Layout
A, B, C Hierarchy of Proportion
• A = most important item
• Only one A item
• Emphasize A items using size or
color
Show samples of A items;
Discuss what A items are: headlines, pictures
Summer Institute :: Communications/Graphic Design :: Monday, June 1, 2015
15
Slide 15
Communications Session :: Graphic Design
A}Emphasize
A items
using size
or color
Summer Institute :: Communications/Graphic Design :: Monday, June 1, 2015
16
Slide 16
Communications Session :: Graphic Design
Layout
A, B, C Hierarchy of Proportion
• B = second most important item
• 2 - 3 B items
• Could be subheads or pictures
Show B item samples;
Discuss what B items are
Summer Institute :: Communications/Graphic Design :: Monday, June 1, 2015
17
Slide 17
Communications Session :: Graphic Design
A}2 - 3 items
Could be subheads or pictures
B
Summer Institute :: Communications/Graphic Design :: Monday, June 1, 2015
18
Slide 18
Communications Session :: Graphic Design
Layout
A, B, C Hierarchy of Proportion
• C = third in importance
• The number of C items should be
relative to the media being used
AND the message goals
Show C items; discuss too many c items;
the need to fill all available space with “something” even though not relevant to
goals is tempting, but white space is good.
Summer Institute :: Communications/Graphic Design :: Monday, June 1, 2015
19
Slide 19
Communications Session :: Graphic Design
A}C items should be relative to the media being used AND the message goals
B
Summer Institute :: Communications/Graphic Design :: Monday, June 1, 2015
20
Slide 20
Communications Session :: Graphic Design
Credit: www.5cubecommerce.com
Summer Institute :: Communications/Graphic Design :: Monday, June 1, 2015
21
Slide 21
Communications Session :: Graphic Design
Credit: www.5cubecommerce.com
C C
Summer Institute :: Communications/Graphic Design :: Monday, June 1, 2015
22
Slide 22
Communications Session :: Graphic Design
Layout
Pitfalls that undermine proportion
• Trying to get everything to standout
• Too many B and C items
• Fonts/pictures too big for space
Summer Institute :: Communications/Graphic Design :: Monday, June 1, 2015
23
Slide 23
Communications Session :: Graphic Design
Best Practices• Used purchased/licensed images,
videos and music
• Every image found on google has
an owner
• “… but, I’m not selling anything”
Google Demo: Mona and Johnny Depp
Summer Institute :: Communications/Graphic Design :: Monday, June 1, 2015
24
Slide 24
Communications Session :: Graphic Design
Leonardo Da Vinci, 1503-1507
Summer Institute :: Communications/Graphic Design :: Monday, June 1, 2015
25
Slide 25
Communications Session :: Graphic Design
You are free to:Share — copy and redistribute the material in any medium or format Adapt — remix, transform, and build upon the material for any purpose, even commercially. The licensor cannot revoke these freedoms as long as you follow the license terms.Under the following terms:Attribution — You must give appropriate credit, provide a link to the license, and indicate if changes were made. You may do so in any reasonable manner, but not in any way that suggests the licensor endorses you or your use. No additional restrictions — You may not apply legal terms or technological measures that legally restrict others from doing anything the license permits.
License
Some rights reserved. This work is licensed under a
Creative Commons Attribution 3.0 License.
Jack Sparrow Mona Lisa
by ridgl http://ridgl.deviantart.com/art/Jack-Sparrow-Mona-Lisa-94240852
Summer Institute :: Communications/Graphic Design :: Monday, June 1, 2015
26
Slide 26
Communications Session :: Graphic Design
Best Practices• Artists are becoming very litigious
• It is easier for artists and lawyers to
find who’s using web grabbed art
• Give credit as matter of course
• Sources for stock art options are
in the handouts
Handouts have sources for stock images that are free or public domain.
Summer Institute :: Communications/Graphic Design :: Monday, June 1, 2015
27
Slide 27
Communications Session :: Graphic Design
Using It!
Canva.com
• Web based design factory
• Create original art or modify their
art for your use legally!
• It’s FREE!
Canva.com
Summer Institute :: Communications/Graphic Design :: Monday, June 1, 2015
28
Slide 28
Communications Session :: Graphic Design
• Login to Canva.com
• Create an account for free.
• Use a gmail, yahoo or hotmail
account or one you can access via
your smart device for verification.
• If you don’t want to create an
account, just watch with someone
and collaborate on the design.
Creating a canva account.
Summer Institute :: Communications/Graphic Design :: Monday, June 1, 2015
29
Slide 29
Communications Session :: Graphic Design
BREAK 10:45 – 11 AM
Canva Tutorial at www.canva.com
Go to Design School/Tutorials
Take the Beginners Challenge
Navigate the on screen design area
#1: Colors: Scroll down to the big red circle
Follow the instructions to change the color; use the “hint” button if
necessary
#2: Search: Monkey on screen
Follow the instruction to put a hat on the monkey using the search area of
the palette
#3: Backgrounds:
Choose a background from the options at left.
#4: Search/Drag: search for an image and drag onto the existing frame.
#5: Layout: Choose a layout
Summer Institute :: Communications/Graphic Design :: Monday, June 1, 2015
30
Slide 30
Communications Session :: Graphic Design
Explore Canva
• Play with the layouts, text and
background options
• Try some of the filters
• Save any elements you like to the
desktop
Summer Institute :: Communications/Graphic Design :: Monday, June 1, 2015
31
Slide 31
Communications Session :: Graphic Design
Experiment
• Play with the layouts, text and
background options
• Try some of the filters
• Save any elements you like to the
desktop
Experiment, get a feel for the navigation
Summer Institute :: Communications/Graphic Design :: Monday, June 1, 2015
32
Slide 32
Communications Session :: Graphic Design
USE WHAT YOU LEARNED
• Go back to the Canva Home area
(click the blue circle at the top of the page)
• Click the “+” sign on the right
and scroll down to “Email Header”
• #1: Choose a Layout
Select an image from the left, its okay if it has text on it… we’ll experiment in this area
Click on the image…you’ll see the navigation for the image pop up
At the top you’ll see “Forward and Back”
Click “forward”… the type should start dropping out.
Keep clicking until all the text is gone from the image.
Get your palette back if it has gone away.
Click on Filter
Experiment with something you like.
NOTE: you may have seen the circle spinning on the upper right…
Canva auto saves at intervals so you won’t lose your work.
Experiment with Text, add images if you like by searching for additional
imagery.
Select a type face you like, double click on the text.
New palette options show up, and you can start typing over the text
Experiment for the next few minutes.
Download the image, save it to the desktop. (we’re going to use it in our email)
If you don’t see it on the desktop, check the download folder and move it.
Summer Institute :: Communications/Graphic Design :: Monday, June 1, 2015
33
Slide 33
Communications Session :: Graphic Design
Lunch Break
Back at 1:45
• Creating an Email Newsletter with the
header created in Canva
• Using MailChimp to send emails
NEXT:
Lunch Break Return at 1:45