Graphic Design - Arizona Education Association · PDF fileDesign means a graphic has a reason to be where it is; ... Communications Session :: Graphic Design Elements of Design Colors

Summer Institute :: Communications/Graphic Design :: Monday, June 1, 2015

1

Slide 1

Welcome

Communications

Graphic DesignRoxanne Rash

AEA Graphic Designer


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


3

Slide 3


Credit: www.5cubecommerce.com


4

Slide 4


Relationships

Images and Graphics have

• Purpose

• Intention


5

Slide 5


Credit: www.stocklayouts.com


6

Slide 6


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.


7

Slide 7


Funny and obvious… but… it’s the same thing as this…


8

Slide 8


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.


9

Slide 9


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


10

Slide 10


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.


11

Slide 11


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.


12

Slide 12


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?


13

Slide 13



14

Slide 14


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


15

Slide 15


A}Emphasize

A items

using size

or color


16

Slide 16


Layout


• B = second most important item

• 2 - 3 B items

• Could be subheads or pictures

Show B item samples;

Discuss what B items are


17

Slide 17


A}2 - 3 items

Could be subheads or pictures

B


18

Slide 18


Layout


• 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.


19

Slide 19


A}C items should be relative to the media being used AND the message goals

B


20

Slide 20




21

Slide 21



C C


22

Slide 22


Layout

Pitfalls that undermine proportion

• Trying to get everything to standout

• Too many B and C items

• Fonts/pictures too big for space


23

Slide 23


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


24

Slide 24


Leonardo Da Vinci, 1503-1507


25

Slide 25


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


26

Slide 26


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.


27

Slide 27


Using It!

Canva.com

• Web based design factory

• Create original art or modify their

art for your use legally!

• It’s FREE!

Canva.com


28

Slide 28


• 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.


29

Slide 29


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


30

Slide 30


Explore Canva

• Play with the layouts, text and

background options

• Try some of the filters

• Save any elements you like to the

desktop


31

Slide 31


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


32

Slide 32


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.


33

Slide 33


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

Documents

Graphic Design - Arizona Education Association · PDF fileDesign means a graphic has a reason to be where it is; ... Communications Session :: Graphic Design Elements of Design Colors