skyfonts.com
The simplest way to try, install, and manage fonts.
Install fonts from participating sites with a single click. Fonts are installed from the cloud on your computer in seconds.
Font Management
Leave a reply
Author Archives: John De Santis
Type Challenge 4
Type Illustration
1. In order to experiment with typography in a quick, immediate way, create text variation using type as the illustrative “brush” Size 8”x8” Black and White Use Helvetica vary the weights
Text to Use:
Brooklyn Historical Society, DUMBO. Step back in history! Waterfront is an exhibition that
brings to life the vibrant history of Brooklyn’s coastline. On view at BHS’s location in Brooklyn
Bridge Park’s Empire Stores.
2. Utilize the image as the BASIS for you type illustration it will not be visible
Be free loose explore scale repetition etc. One hour time limit
Save your work to class OpenLab page named:
last name_Firstname_TC4
tag it Type Challenge 4
insert jpgs “last name_Firstname_TC4.jpg”
http://www.typeroom.eu/article/interview-sam-winston-typographic-artist-unlike-any-other
Type Challenge 3
Type Sprints
 In order to experiment with typography in a quick, immediate way,
create four posters in a “design sprint” in time given.
Size 8”x8” Black and White Use Helvetica
Text to Use:
Brooklyn Historical Society, DUMBO. Step back in history! Waterfront is an exhibition that brings to life the vibrant history of Brooklyn’s coastline . On view at BHS’s location in Brooklyn Bridge Park’s Empire Stores.
Save your work to class OpenLab page named:
last name_Firstname_TC3
tag it Type Challenge 3
insert jpgs “last name_Firstname_TC3.jpg”
Save
Project 5
“2427 Eats” Website
Homepage Design
Create a static homepage layout mockup for the
2427 Eats Publication
Research some examples of restaurant guide sites
Make a new post named: “last name_Firstname Project 5”, categorize it Project 5.
Homepage design using
InDesign 1200 px x 900 px
Users should know what the site is about and where calls to action are immediately.
With typography hierarchy, layout, you can guide users in the direction you want them go.
Remember design principles such as alignment, proportion and white space when working with type.
Type is more effective than anything else to get your message across on the web .
Design Resources
Indesign Wireframe tools
Homepage Sketch File
12 colum grid
Creative Brief Sample
 Pinterest Page Web Design
http://pin.it/BDTGgPi
http://pin.it/Oz6x_AR
InDesign Tools
Indesign Wire Frame Web Design Guide:
InDesign User Guide:
Grid Design Guide:
Guide to use of grid for web
gridpak.com
http://gridr.atomeye.com/
http://sneakpeekit.com/
https://webdesignledger.com/grid-design-for-website-mockups/
Restaurant Sites
https://www.zagat.com/
http://eat24.com/
https://www.yelp.com/nyc
http://www.renzell.com/
https://www.theinfatuation.com/new-york
https://www.zomato.com
https://www.opentable.com/new-york-city-restaurants
https://www.viamichelin.com/web/Restaurant/New_York-10007-Little_Park-468095-41102
Web Typography
https://www.awwwards.com/websites/
https://www.awwwards.com/inspiration/search?text=typography
http://www.nurturedigital.com/
http://oudolf.com/
http://culture.pl/multimediaguides/
http://dada-data.net/en/
https://www.awwwards.com/sites/susa-ventures
Type Web Sites
http://typographyhandbook.com/
https://fonts.google.com/
http://justcreative.com/2016/10/17/the-power-of-typography-in-web-design/
http://justcreative.com/2015/05/05/15-stunning-font-combinations-for-your-inspiration/
http://www.webtype.com/catalog/
Web Design Sites
http://thegridsystem.net/
http://www.modularscale.com/
Free to script to save InDesign files as a layered PSD.
https://indesignsecrets.com/save-indesign-files-layered-photoshop-files.php
http://www.zenodesign.com/forum/PageToPSLayersV6.zip
Type Challenge 7
COVER Version
for 2427 Eats Book
Take your Final front cover design file
Duplicate it
Make single page
Explore a Completely Different Version of Your Final Cover
Using same design elements you selected final
PLAY! with existing elements
            Â
Be Loose
Come up with dynamic new layoutÂ
Explore extreme Scaling, repetition, white space, color changes, etc.
Post JPG to OpenLab:Â Â Â Â NAME:Â Last name_type7
TAG it Type Challenge 7
Type Challenge 5
Multiple Master Grids
for your2427 eats publication
grid_sample
Step 1: Create an Indesign File
Name it “lastname first name _grid TC”
Your file should be set up
File >New >Facing Pages >Number of Pages: 8
Size: 5.5x 8.5 inches.
• 4 vertical columns with .25-inch gutters.
• .5-in. margins
Step 2: Create New Master Spreads
We will create three new grid options
5×4 Grid
4×8 Grid
6×6 Grid
Other option to consider for this book project
9×9 grid, Rule Of Nine
3×6 Grid
3×3 Rule Of Thirds
Two Column
Manuscript
Three Column
Golden Section Spread
Open the page panel click top right to add new master spread. Option window will appear select 2 page master.
Step 3: Double Click On The Master Page To Activate It.
Now that you’ve selected your master pages, you can adjust and create grid columns by going to your menu and selecting (Layout > Margins and Columns).
Step 4: Now that you have your columns set, it’s time to create your modules for your grid.
Add horizontal guides to create a modular grid by going back to menu select (Layout > Create Guides).
Step 5 Insert new pages into your document with your new master pages. Select master page icons for pages menu and drag them in pages layout window
Step 6: Select one grid page layout
Add sample text from sample or import your own put the grid into action
Create one initial layout
Text
Barolo
398 West Broadway
New York, NY 10012
212.226.1102
www.nybarolo.com
by John De Santis
Barolo Restaurant transports you to the Barolo wine region of northern Italy. Walk down West Broadway in Soho past the boutiques and art galleries, until you get to the entrance of Ristorante Barolo. As soon as you enter you leave SOHO behind.
Paolo Secondo, the owner of Barolo Restaurant, is from Genoa, Italy. He opened his first restaurant in New York, I Tre Merli in 1989. Buoyed by the success of Tre Merli, Secondo opened Barolo and several other restaurants. If you want to visit Italy with out the air fare try Barolo. Every dish is completely authentic as is the service. No Chicken Parmigiano here!
Step 7: Export you document as a PDF select the
“Visible Guides and Grids” option to show your grid in PDF name it “lastname first name _grid TC5.pdf
Upload to Openlab category Type Challenge 5
Type Challenge Thread/Styles
Master Pages and Style sheets
Step 1: Create an Indesign File
Name it “lastname first name _masterThreadTC”
your file should be set up
File >New >Facing Pages >
Size: 5.5Ă—8.5 inches.
Step 2: Design your pages create Paragraph styles
https://helpx.adobe.com/indesign/using/paragraph-character-styles.html
Step 3: Create New Master Spreads based on design
Layout master
Step 4. insert 2 facing pages into your document
insert master, spreads
Step 5: Import and thread text.
To thread text in.
https://helpx.adobe.com/indesign/using/threading-text.html
To flow your master text file into your document mater page text boxes
Preferences>General>type
Select Smart Text Reflow and Limit to master text frames
and delete empty pages
A. Create master spreads . create text boxes on BOTH pages as per your layout.
B. Link text boxes ACROSS both pages of spread
You have to link the text boxes IN THE MASTER SPREADS!!!!!! or it will only add odd pages not left right.
Go to your document first page
Go to File>Place place text place text file
Do not activate text box on page
You will have a loaded text icon
Hold Shift key
The icon will change to flowing arrow
Click on page
text will flow into yore pages master text box
Step 6: Set Style sheets apply to text
Step 7: Export you layout as a PDF
Select the “Visible Guides and Grids” option to show your grid in PDF name it
“lastname first name _Thread/TC”
Step 8: Upload PDF Layout to OpenLab page”
Type Challenge 2
Design Typographical Poster
Create dynamic poster design utilizing the typography as main design element
Be fast and loose do four layout studies
Think poster design principles
Simplicity, contrast, scale, color repetition, negative space symmetry asymmetry
Use layout file to start:
2427TypeChallenge_grid.Ind or PSD
You must include:
Text:
Brooklyn Historical Society
Waterfront
Visit
www.brooklynhistoricalsociety.org
The logo bhs-logo.png
Type Challenge 1
 Exercise in Typography
1.Set your name in three case configurations: initial cap, lowercase, uppercase. The two Initial combination: caps and lowercase
Your Name
your name
YOUR NAME
YN
yn
2. Using InDesign create an 11×17 document
Place your words within oversized bounding boxes that will allow their letters to get bigger or smaller
Also, to help streamline the upcoming exploratory work, place your set of words in the upper left corner of a relatively large document.
3. Search through your font menu to see which ones might work best
You should have 30 or more typeface variations
Make copies of the words you typed in the previous step going through your font list from top to bottom, and applying any that seem like they have the slightest chance of working out.
You’ll come across clear and expected winners, and other times you’ll discover unexpected choices that offer themselves irresistibly well to what you’re designing.
If a certain font looks good, keep it within your document and move on to additional possibilities.
You’ll have a document that you can conveniently refer to—and sample from—when you begin assembling your logo or word graphic.
4. Save your work to class OpenLab create a new post page named:
Firstname last name Type Challenge 1
Give it Category “Type Challenge 1”
insert jpg of you explorations “last name_Firstname_typeC1.jpg”
The Vignelli Canon
Poetry Logos
Logotype Poetry Foundation
Review this case study on logotype/typography done by Pentagram’s Michael Bierut. for Poetry Magazine.
Observe the variety way in which the typography is the concept, illustration, only element. It can help to look at these successful solutions for your logotypes
http://www.typeroom.eu/article/pentagram-s-michael-bierut-poetry-foundation-s-new-typography
Save
Add To This Site
Build This OER
Contribute to this Typography 3 OER Resource. Submit posts pages, links, PDF files or any other media
Typographic posters
Typographic Posters
Typograpic Poster Designs
A curated gallery of posters from around the world
Graphis Posters
The Best of International visual Communications
OER to check
Deck one 6-6-18
https://docs.google.com/presentation/d/1kba694XJ1bhX0F6iaJxOB3i7nXcfGgkWMouzeBKk7D8/edit?usp=sharing
http://www.easybib.com/
Attribution Builder
https://library.citytech.cuny.edu/research/permalinker/index.php
https://creativecommons.org/choose/
https://openstax.org/subjects/science
http://libguides.citytech.cuny.edu/oer
https://openlab.citytech.cuny.edu/fairuse/
_____
http://www.oercommons.org/courses/creative-typography/view
https://www.oercommons.org/courses/creative-typography
https://ocw.mit.edu/courses/media-arts-and-sciences/mas-962-digital-typography-fall-1997/
http://thinkingwithtype.com/
https://practicaltypography.com/
https://www.merlot.org/merlot/webHitlist.htm?keywords=typography&discipline=&rights=0&timePeriod=7
https://www.merlot.org/merlot/webHitlist.htm?keywords=typography
https://www.merlot.org/merlot/materials.htm?keywords=typography&sort.property=relevance
http://www.oercommons.org/courses/creative-typography/view
https://library.citytech.cuny.edu/research/articles/subject/Art%2C-Art-History%2C-Advertising-Design-%26-Graphic-Arts
https://www.oercommons.org/courses/what-is-typography
http://libguides.citytech.cuny.edu/OER/find#s-lg-box-8239329
https://creativecommons.org/choose/
https://library.citytech.cuny.edu/research/permalinker/index.php
https://www.lib.umn.edu/copyright/fairthoughts
http://librarycopyright.net/resources/fairuse/index.php
https://copyright.cornell.edu/publicdomain
https://creativecommons.org/licenses/
http://libguides.citytech.cuny.edu/OER/find
https://academicworks.cuny.edu/oers/
http://network.bepress.com/explore/?q=typography
https://www.ted.com/search?q=typography
https://ebookcentral.proquest.com/lib/citytech-ebooks/showSharedBookshelfFolder.action?sKey=a3738440dcab463595168762e1d1ff7e&tm=1526328635096
Ebook central
Creative Commons website:Â https://creativecommons.org/
Examples of OER sites developed by faculty:
https://openlab.citytech.cuny.edu/evangelista1130fa2016tth/
https://openlab.citytech.cuny.edu/amaller1441sp2016/
http://www.stacyasher.com/GRPH223_Typography_UNL_Fall_2017.html
https://www.creativebloq.com/typography/top-typography-resources-912816
https://practicaltypography.com/
http://thinkingwithtype.com/
https://www.springboard.com/blog/best-resources-typography-design-online/
https://speakerdeck.com/search?utf8=%E2%9C%93&q=typography
https://speakerdeck.com/search?utf8=%E2%9C%93&q=typography
https://opencampus.newschool.edu/courses
https://www.skillshare.com/classes/Typography-That-Works-Typographic-Composition-and-Fonts/1694217981?studentRef=3961574&via=student-referral&utm_campaign=student-referral-1980968673-old-layout&utm_source=Twitter&utm_medium=student-referral
LIBRARY BOOK ON RESEVE
Glassary
http://www.oert.org/en/category/part1/
https://www.fontshop.com/glossary
https://speakerdeck.com/search?utf8=%E2%9C%93&q=typography
http://www.smartcopying.edu.au/open-education/open-education-resources/where-to-find-cc-licensed-material
http://www.smartcopying.edu.au/open-education/open-education-resources/where-to-find-oer-materials
WIKI
https://commons.wikimedia.org/wiki/Category:Typography
https://en.wikipedia.org/wiki/Main_Page
Google
https://www.google.com/search?hl=en&as_q=typography&as_epq=&as_oq=&as_eq=&as_nlo=&as_nhi=&lr=&cr=&as_qdr=all&as_sitesearch=&as_occt=any&safe=active&as_filetype=&as_rights=%28cc_publicdomain%7Ccc_attribute%7Ccc_sharealike%7Ccc_noncommercial%7Ccc_nonderived%29
https://doaj.org/search?source=%7B%22query%22%3A%20%7B%22query_string%22%3A%20%7B%22query%22%3A%20%22typography%22%2C%20%22default_operator%22%3A%20%22AND%22%7D%7D%7D&ref=homepage-box#.WvX5eIVhSN0
OER indices
http://www.smartcopying.edu.au/open-education/open-education-resources/international-oer-guides-and-toolkits
http://www.gutenberg.org/
http://www.rarebookroom.org/Control/bodtip/index.html
https://openlibrary.org/
https://archive.org/
https://archive.org/search.php?query=Typography
https://archive.org/details/amctra?q=giambattista+bodoni
https://library.citytech.cuny.edu/research/articles/subject/Art%2C-Art-History%2C-Advertising-Design-%26-Graphic-Arts
https://ebookcentral.proquest.com/lib/citytech-ebooks/showSharedBookshelfFolder.action?sKey=a3738440dcab463595168762e1d1ff7e&tm=1526328635096
CUNY city tech
https://library.citytech.cuny.edu/research/articles/subject/kanopy
jdesantis@citytech.CUNy.edu
22477236056556
PW Gaqq1914?
22477236056556
https://ebookcentral.proquest.com/lib/citytech-ebooks/home.action
https://ebookcentral.proquest.com/lib/citytech-ebooks/bookshelf.action?folderOption=BOOKSHELF_FOLDER&folderId=1337101
https://ebookcentral.proquest.com/lib/citytech-ebooks/showSharedBookshelfFolder.action?sKey=a3738440dcab463595168762e1d1ff7e&tm=1527724568205
https://www.aiga.org/guide-whatisgraphicdesign/https://www.aiga.org/guide-whobecomesdesigner/https://www.aiga.org/guide-designersneedknow/
http://thinkingwithtype.com/
Letter
http://thinkingwithtype.com/letter/#topbar
PAge layout book
http://thinkingwithtype.com/text/
gzrid
http://thinkingwithtype.com/grid/
Tools teachers
http://thinkingwithtype.com/extras/#tools-for-teachers
Thinking with Type: A Critical Guide for Designers, Writers, and Editors
by Ellen Lupton
ISBN-10: 1568989695 •ISBN-13: 97815689896
Golden Ratio in use
http://thinkingwithtype.com/grid/#golden-section
How to Use the Golden Ratio to Create Gorgeous Graphic Designs
http://www.markboulton.co.uk/journal/design-and-the-divine-proportion
https://www.smashingmagazine.com/2008/05/applying-divine-proportion-to-web-design/
How to Use the Golden Ratio to Create Gorgeous Graphic Designs
http://www.hongkiat.com/blog/golden-ratio-in-moden-designs/
Grid
https://en.wikipedia.org/wiki/Grid_(graphic_design)
Mark Boulton: Five Steps to Designing Grid Systems.
http://www.markboulton.co.uk/journal/five-simple-steps-to-designing-grid-systems-part-1
http://www.markboulton.co.uk/journal/five-simple-steps-to-designing-grid-systems-part-2
http://www.markboulton.co.uk/journal/five-simple-steps-to-designing-grid-systems-part-3
http://www.markboulton.co.uk/journal/five-simple-steps-to-designing-grid-systems-part-4
http://www.markboulton.co.uk/journal/five-simple-steps-to-designing-grid-systems-part-5
Tutorial Grids
http://thinkingwithtype.com/grid/#golden-section
http://www.typophile.com/node/47265
http://www.thegridsystem.org/category/tutorials/
Canons of Page Construction
https://en.wikipedia.org/wiki/Canons_of_page_construction
How to Use the Golden Ratio to Create Gorgeous Graphic Designs
Page layout
Fibonacci
http://type-scale.com/?size=16&scale=1.414&text=A%20Visual%20Type%20Scale&webfont=Libre+Baskerville&font-family=%27Libre%20Baskerville%27,%20serif&font-weight=400&font-family-headers=&font-weight-headers=inherit&background-color=white&font-color=%23333
Assignments
Assignment 14 FINAL Project4/5
FINAL DUE Project 4
Typography in Motion
Continue work on kinetic typography
Upload to Google Drive
FINAL DUEÂ Project 5
Homepage Design
“2427 Eats” Website Homepage Design
Create a static homepage layout mockup
Uploaded to OpenLab
This will be a static homepage to promote your 2427 publication . Users should know where to look at and what the site is immediately. With typography hierarchy, layout, you can guide users in the direction you want them go.
Remember design principles such as alignment, proportion and white space when working with type. Type is more effective than anything else to get your message across on the web.
Project 5
DUE NEXT WEEK
Part 1
A. Create jpg of your final layout use InDesign
Size 1200 px x 900 px
name it “Lastname Firstname_P5.jpg”
B. Create a new post on OpenLab
Name it “Lastname Firstname Project 5”
Place a jpg of your layout into post full size
Part 2
Bring a print out of your layout to class
References Â
Class Pintrest Pages
http://pin.it/UTcfxxt
Class Pintrest Page Web Design
http://pin.it/BDTGgPi
http://pin.it/Oz6x_AR
Online tutorials
Â
Other Reference
Restaurant Guide Sites
https://www.zagat.com/
http://eat24.com/
https://www.yelp.com/nyc
http://www.renzell.com/
https://www.theinfatuation.com/new-york
https://www.zomato.com
https://www.opentable.com/new-york-city-restaurants
https://www.viamichelin.com/web/Restaurant/New_York-10007-Little_Park-468095-41102
Web Typography Design Examples:
https://www.awwwards.com/websites/
https://www.awwwards.com/inspiration/search?text=typography
http://www.nurturedigital.com/
http://oudolf.com/
http://culture.pl/multimediaguides/
http://dada-data.net/en/
https://www.awwwards.com/sites/susa-ventures
Typography for Web Sites
http://typographyhandbook.com/
https://fonts.google.com/
http://justcreative.com/2016/10/17/the-power-of-typography-in-web-design/
http://justcreative.com/2015/05/05/15-stunning-font-combinations-for-your-inspiration/
http://www.webtype.com/catalog/
Web Design Sites
http://thegridsystem.net/
http://www.modularscale.com/
InDesign User Guide:
https://helpx.adobe.com/indesign/user-guide.html
InDesign Keyboard Shortcuts:
 https://helpx.adobe.com/indesign/using/default-keyboard-shortcuts.htmlIn
Free to script to save InDesign files as a layered PSD.
https://indesignsecrets.com/save-indesign-files-layered-photoshop-files.php
http://www.zenodesign.com/forum/PageToPSLayersV6.zip
FINAL DUE Project 4
Typography in Motion
Upload to Google Drive
A. Create a NEW FOLDER
your “Lastname_FirstName_Project 4”
B. Final version of your type in motion project
Name file: “lastname_firstname_p4.gif”
“lastname_firstname_p4.swf” or “lastname_firstname_p4.html”
Type in Motion
Kinetic typography is different from static typography
Assignment: Visually represent your selected quote or verb by expressing the content with typographic elements.
Consider variables and spoken word as it related to your animation
Variables:
typeface, type size, weight, color, focus, orientation, location;
entrance, performance, exit; sequence, speed, transition, transformation,
emotion, feeling, atmosphere, interpretation.
Read your copy out loud, hear how it sounds Then think about sounds, any breaks or pause in pronunciation. you can work from that to visualize your text.
______
I. Design Process
The animation should be no shorter than 15 seconds and no longer than 60 seconds.
1. Select a short quote, a verb or noun, you will animate. Start concept sketches
2. Type Research: Find examples of simple type in motion
Get a job folder to place all research, sketches reference and related items.
3. STORYBOARD –
The first step rough sketch or storyboard a sequence of panels showing main steps. You are showing what is going to happen in main steps. The drawings don’t have to be great, just clear.
4. CREATE DIGITAL ASSETS –
Create the artwork for the steps that is to be animated.
5. PRODUCTION
Use InDesign or Photoshop
II. Final will be Upload to Google Drive Folder
 Project 4 Google Drive
A. Create a NEW FOLDER
your “Lastname_FirstName_Project 4”
B. Final version of your type in motion project
Name file: “lastname_firstname_p4.gif”
“lastname_firstname_p4.swf” or “lastname_firstname_p4.html”
Kinetic Typography
References Class Pinterest Page samples
http://pin.it/17K6YhS
https://www.youtube.com/watch?time_continue=6&v=J59n8FsoRLE
Vimeo motion Type Section
https://vimeo.com/channels/kinetictypography
http://www.artofthetitle.com/title/oceans-eleven/#
http://www.creativebloq.com/typography/examples-kinetic-typography-11121304
https://www.creativebloq.com/typography/examples-kinetic-typography-11121304
Animation InDesign
https://indesignsecrets.com/indesign-basics-your-first-animation.php#
http://blogs.adobe.com/contentcorner/2016/12/22/create-animations-using-adobe-indesign/
Annimated GIFÂ Tween fade between fades
https://helpx.adobe.com/indesign/using/animation.html
Annimated GIFÂ Photoshop
Animated GIFÂ Photoshop
http://blogs.adobe.com/contentcorner/2016/08/10/create-animated-gifs-with-photoshop/
Fade in Fade Out Animated GIf
https://blog.hubspot.com/marketing/how-to-create-animated-gif-quick-tip-ht#sm.001gtlrmj1d33dijr521ai81433kk
Animation InDesign
https://indesignsecrets.com/indesign-basics-your-first-animation.php#
https://helpx.adobe.com/indesign/using/animation.html
Combining Multiple animation effects InDesign
References Class Pintrest Page samples
http://pin.it/17K6YhS
Vimeo motion Type Section
https://vimeo.com/channels/kinetictypography
https://giphy.com/search/kinetic-typography
http://www.creativebloq.com/typography/examples-kinetic-typography-11121304
http://www.artofthetitle.com/title/oceans-eleven/#
Animation InDesign
https://indesignsecrets.com/indesign-basics-your-first-animation.php#
https://helpx.adobe.com/indesign/using/animation.html
Annimated GIFÂ Photoshop
http://blogs.adobe.com/contentcorner/2016/08/10/create-animated-gifs-with-photoshop/
Save
Save
Save
Assignment 13-P4-P5
Due Next week
Project 4
Typography in Motion
Continue work on kinetic typography
Bring any native files to class we will work in class
Finals Due Last Class Uploaded to Google Drive
Project 5
“2427 Eats” Website Homepage Design
Create a static homepage layout mockup
Final layout Due Last Class Uploaded to OpenLab
This will be a static homepage to promote your 2427 publication . Users should know where to look at and what the site is immediately. With typography hierarchy, layout, you can guide users in the direction you want them go.
Remember design principles such as alignment, proportion and white space when working with type. Type is more effective than anything else to get your message across on the web.
DUE NEXT WEEK
Research
Examples of restaurant guide sites
Make a new post named: “last name_Firstname Project 5”, categorize it Project 5.
Insert two jpg images of homepages with urls into post
Layout
Create an initial homepage document sketch using
InDesign 1200 px x 900 px bring in native file
References Â
Class Pintrest Pages
http://pin.it/UTcfxxt
Class Pintrest Page Web Design
http://pin.it/BDTGgPi
http://pin.it/Oz6x_AR
Online tutorials
Â
Other Reference
Restaurant Guide Sites
https://www.zagat.com/
http://eat24.com/
https://www.yelp.com/nyc
http://www.renzell.com/
https://www.theinfatuation.com/new-york
https://www.zomato.com
https://www.opentable.com/new-york-city-restaurants
https://www.viamichelin.com/web/Restaurant/New_York-10007-Little_Park-468095-41102
Web Typography Design Examples:
https://www.awwwards.com/websites/
https://www.awwwards.com/inspiration/search?text=typography
http://www.nurturedigital.com/
http://oudolf.com/
http://culture.pl/multimediaguides/
http://dada-data.net/en/
https://www.awwwards.com/sites/susa-ventures
Typography for Web Sites
http://typographyhandbook.com/
https://fonts.google.com/
http://justcreative.com/2016/10/17/the-power-of-typography-in-web-design/
http://justcreative.com/2015/05/05/15-stunning-font-combinations-for-your-inspiration/
http://www.webtype.com/catalog/
Web Design Sites
http://thegridsystem.net/
http://www.modularscale.com/
InDesign User Guide:
https://helpx.adobe.com/indesign/user-guide.html
InDesign Keyboard Shortcuts:
 https://helpx.adobe.com/indesign/using/default-keyboard-shortcuts.htmlIn
Free to script to save InDesign files as a layered PSD.
https://indesignsecrets.com/save-indesign-files-layered-photoshop-files.php
http://www.zenodesign.com/forum/PageToPSLayersV6.zip
Type in Motion
Kinetic typography is different from static typography
Assignment: Visually represent your selected quote or verb by expressing the content with typographic elements.
Consider variables and spoken word as it related to your animation
Variables:
typeface, type size, weight, color, focus, orientation, location;
entrance, performance, exit; sequence, speed, transition, transformation,
emotion, feeling, atmosphere, interpretation.
Read your copy out loud, hear how it sounds Then think about sounds, any breaks or pause in pronunciation. you can work from that to visualize your text.
______
I. Design Process
The animation should be no shorter than 15 seconds and no longer than 60 seconds.
1. Select a short quote, a verb or noun, you will animate. Start concept sketches
2. Type Research: Find examples of simple type in motion
Get a job folder to place all research, sketches reference and related items.
3. STORYBOARD –
The first step rough sketch or storyboard a sequence of panels showing main steps. You are showing what is going to happen in main steps. The drawings don’t have to be great, just clear.
4. CREATE DIGITAL ASSETS –
Create the artwork for the steps that is to be animated.
5. PRODUCTION
Use InDesign or Photoshop
II. Final will be Upload to Google Drive Folder
 Project 4 Google Drive
A. Create a NEW FOLDER
your “Lastname_FirstName_Project 4”
B. Final version of your type in motion project
Name file: “lastname_firstname_p4.gif”
“lastname_firstname_p4.swf” or “lastname_firstname_p4.html”
Kinetic Typography
References Class Pinterest Page samples
http://pin.it/17K6YhS
https://www.youtube.com/watch?time_continue=6&v=J59n8FsoRLE
Vimeo motion Type Section
https://vimeo.com/channels/kinetictypography
http://www.artofthetitle.com/title/oceans-eleven/#
http://www.creativebloq.com/typography/examples-kinetic-typography-11121304
https://www.creativebloq.com/typography/examples-kinetic-typography-11121304
Animation InDesign
https://indesignsecrets.com/indesign-basics-your-first-animation.php#
http://blogs.adobe.com/contentcorner/2016/12/22/create-animations-using-adobe-indesign/
Annimated GIFÂ Tween fade between fades
https://helpx.adobe.com/indesign/using/animation.html
Annimated GIFÂ Photoshop
Animated GIFÂ Photoshop
http://blogs.adobe.com/contentcorner/2016/08/10/create-animated-gifs-with-photoshop/
Fade in Fade Out Animated GIf
https://blog.hubspot.com/marketing/how-to-create-animated-gif-quick-tip-ht#sm.001gtlrmj1d33dijr521ai81433kk
Animation InDesign
https://indesignsecrets.com/indesign-basics-your-first-animation.php#
https://helpx.adobe.com/indesign/using/animation.html
Combining Multiple animation effects InDesign
References Class Pintrest Page samples
http://pin.it/17K6YhS
Vimeo motion Type Section
https://vimeo.com/channels/kinetictypography
https://giphy.com/search/kinetic-typography
http://www.creativebloq.com/typography/examples-kinetic-typography-11121304
http://www.artofthetitle.com/title/oceans-eleven/#
Animation InDesign
https://indesignsecrets.com/indesign-basics-your-first-animation.php#
https://helpx.adobe.com/indesign/using/animation.html
Annimated GIFÂ Photoshop
http://blogs.adobe.com/contentcorner/2016/08/10/create-animated-gifs-with-photoshop/
Save
Save
Save
Save
Save
Save
Save
Save
Save
Save
Save
Save
https://www.pinterest.com/pin/171488698296878894/
test
Kinetic Typography
Kinetic Typography Resources
ReferencesÂ
Pintrest samples
Related Videos
Word as Image
Vimeo Type
Kinetic type Channel
Art of the Movie Title
Kinetic Type Examples
Day O Kinetic
Animation InDesign
InDesign basics
adobe.com/contentcorner
InDesign: Creating Animations
Animated GIFÂ Photoshop
Fade in/out GIF
fadein out animated GIF
Animated Loading GIFs
Animated GIFÂ Tween
LYNDA.COM
play list animation Brooklyn Public Library
