Banner Design Instructions

User Manual:

Open the PDF directly: View PDF PDF.
Page Count: 8

DownloadBanner Design Instructions
Open PDF In BrowserView PDF
Banner Design
Instructions
Zach Bogart

Setup
1.Install Squarefont typeface:
1. Download: https://www.dafont.com/squarefont.font
Go to link, hit download, Open Folder, Open “Square.ttf”
2. If not showing up, manually add: Open FontBook,
Click Plus Sign, and open “Square.ttf”
3.Should now have access to Squarefont in Keynote (free
to use)

Basic Steps
1. Decide which color banner you are making
2. Navigate to corresponding slide and duplicate it (click slide in side bar,
copy/paste). Work on the copy you made
3. Zoom out (Shift + Command + > or dropdown to 25%) to see whole banner
4. Change left-side word to something related to page (replace testing). Try
to use seven characters or less. Limit to ten characters. (Ex. use HISTO
not HISTOGRAM). Double click twice to get access to the text. DO NOT
UNGROUP TEXT AND BANNER.
5. Add logo in center (see Logo slide)
6. Export to Preview (see Export slide)

Logo
Two options:
1. Make your own in Keynote: build from shapes and group together (Option + Command + G)
2. Use Noun Project: https://thenounproject.com/for-mac/ Have to create account and pay for
all icons (Only $20 a year: https://thenounproject.com/for-edu/ …worth it). Just drag and drop,
also can customize color in-app
Either way,
1. Make it white
2. Reduce size to below 340px by 650px: can make it smaller or square, but don’t exceed
this
3. Delete black placeholder square
4. Center logo with grouped banner: Select both items and go to Arrange > Align Objects >
Center and Arrange > Align Objects > Middle. Make sure your logo is grouped as one item if you
made it in Keynote. Again, DO NOT UNGROUP BANNER AND TEXT! Your icon should fit where
the placeholder was. If you don’t move the banner, you can also use the yellow crosshairs to
align the icon in the center.
5. Select all items (banner_text and icon) and group them together
Yay! You have a grouped banner ready to go. Let’s export it…

Logo
Additional notes (Joyce):
1. https://www.iconfinder.com/ has a built-in online editor which I used to change the DATES
icon to white.

Export
1. Select grouped banner/text/icon and copy
(Command + C or Edit > Copy)
2. Open Preview. Select File > New From Clipboard
3. Banner will be pasted there! Hooray!
4. Export it as a PNG and you can reference it in EDAV
repo like any other image
Note: Banners are placed by convention in images/
banners folder

Reference
•

Repo: https://github.com/jtr13/EDAV

•

Noun Project: https://thenounproject.com/

•

Color Hex Values:

•

Blue: #51C8EC

•

Green: #4CA274

•

Red: #E95762

•

Yellow: #F8C37C
Source Exif Data: 
File Type                       : PDF
File Type Extension             : pdf
MIME Type                       : application/pdf
Linearized                      : No
Page Count                      : 8
PDF Version                     : 1.4
Title                           : _banner_design_instructions
Producer                        : macOS Version 10.14 (Build 18A391) Quartz PDFContext
Creator                         : Keynote
Create Date                     : 2019:03:05 21:43:52Z
Modify Date                     : 2019:03:05 21:43:52Z
EXIF Metadata provided by EXIF.tools

Navigation menu