Author Archives: John De Santis

Font Management

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.

Type Challenge 4

Leave a reply

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

Leave a reply

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

Leave a reply

“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:

Creative Cloud Libraries

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

Leave a reply

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

Leave a reply

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

Leave a reply

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

Leave a reply

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

Leave a reply

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

Leave a reply

Massimo Vignelli. The Vignelli Canon.
Lars Muller, 2015

Poetry Logos

1 Reply

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

https://www.pentagram.com/work/poetry-foundation?rel=search&query=poetry%2520society&sector=&discipline=&page=1

http://www.typeroom.eu/article/pentagram-s-michael-bierut-poetry-foundation-s-new-typography

Save

Add To This Site

Leave a reply

Build This OER

Contribute to this Typography 3 OER Resource. Submit posts pages, links, PDF files or any other media

Make your submissions to this OER
Post Category*
- Course Reading
- OER Work
- Real World Type
- Resources
Website
Website
Post Image
Accepted file types: jpg, jpeg, png, gif.
Post Image
Accepted file types: jpg, jpeg, png, gif.
Post Image
Accepted file types: jpg, jpeg, png, gif.
Name
First Last
Email

Typographic posters

Leave a reply

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

Leave a reply

Deck one 6-6-18

https://docs.google.com/presentation/d/1kba694XJ1bhX0F6iaJxOB3i7nXcfGgkWMouzeBKk7D8/edit?usp=sharing

Open Attribution Builder

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

Open Attribution Builder

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

Open Attribution Builder

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/

https://textbooks.opensuny.org/

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/

The Enormous List of Web Typography Resources

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

https://www.webdesignerdepot.com/2010/06/30-of-the-best-web-typography-resources-online/

The Enormous List of Web Typography Resources

https://www.shillingtoneducation.com/blog/50-free-resources-graphic-design-projects/
Glassary
http://www.typeclub.org/resources/
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
http://www.companyfolders.com/blog/golden-ratio-design-examples
http://www.markboulton.co.uk/journal/design-and-the-divine-proportion
https://www.smashingmagazine.com/2008/05/applying-divine-proportion-to-web-design/
http://www.companyfolders.com/blog/golden-ratio-design-examples
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

http://www.companyfolders.com/blog/golden-ratio-design-examples

Page layout

The Secret Law of Page Harmony

https://www.designersinsights.com/designer-resources/using-layout-grids-effectively/

Fibonacci
https://3.7designs.co/blog/2010/10/how-to-design-using-the-fibonacci-sequence/
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

https://3.7designs.co/blog/2010/10/how-to-design-using-the-fibonacci-sequence/

Assignments

Leave a reply

Assignment 1- Project 1

Assignment 2 Project 1

Assignment 3 Project 1,2

Assignment 4- Project 2

Assignment 5- Project 2

Assignment 6- Project 2 Final

Assignment 7 – Project 3

Assignment 8 – Project 3

Assignment 9 – Project 3

Assignment 10 – Project 3

Assignment 10 – Project 3 FINAL

Assignment 12 – Project 4

Assignment 13 – Project 4/5

Assignment 14 FINAL Project 4/5

Assignment 14 FINAL Project4/5

Leave a reply

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

2427_WebPage Mockup Boards

12 colum grid PDF

Creative brief_CUNY_2427

References

Class Pintrest Pages
http://pin.it/UTcfxxt

Class Pintrest Page Web Design
http://pin.it/BDTGgPi
http://pin.it/Oz6x_AR

Online tutorials

Indesign wireframe guide

Comprehensive Web Grid Guide

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”

2427_StoryBoard

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
http://blogs.adobe.com/contentcorner/2016/08/10/create-animated-gifs-with-photoshop/

Fade In & Fade Out an Animated .GIF in 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#

http://blogs.adobe.com/contentcorner/2016/12/22/create-animations-using-adobe-indesign/
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#

Create animations using Adobe InDesign

https://helpx.adobe.com/indesign/using/animation.html

Annimated GIF Photoshop
http://blogs.adobe.com/contentcorner/2016/08/10/create-animated-gifs-with-photoshop/

https://blog.hubspot.com/marketing/how-to-create-animated-gif-quick-tip-ht#sm.001gtlrmj1d33dijr521ai81433kk

Save

Assignment 13-P4-P5

1 Reply

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

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

2427_WebPage Mockup Boards

12 colum grid PDF

Creative brief_CUNY_2427

References

Class Pintrest Pages
http://pin.it/UTcfxxt

Class Pintrest Page Web Design
http://pin.it/BDTGgPi
http://pin.it/Oz6x_AR

Online tutorials

Indesign wireframe guide

Comprehensive Web Grid Guide

Other Reference

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

2427_StoryBoard

Type in Motion
Kinetic typography is different from static typography

______

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.

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

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
http://blogs.adobe.com/contentcorner/2016/08/10/create-animated-gifs-with-photoshop/

Fade In & Fade Out an Animated .GIF in 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#

http://blogs.adobe.com/contentcorner/2016/12/22/create-animations-using-adobe-indesign/
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#

Create animations using Adobe InDesign

https://helpx.adobe.com/indesign/using/animation.html

Annimated GIF Photoshop
http://blogs.adobe.com/contentcorner/2016/08/10/create-animated-gifs-with-photoshop/

https://blog.hubspot.com/marketing/how-to-create-animated-gif-quick-tip-ht#sm.001gtlrmj1d33dijr521ai81433kk

Save

https://www.pinterest.com/pin/171488698296878894/

Leave a reply

https://developers.pinterest.com/tools/widget-builder/?type=board&boardHeight=240&boardWidth=400&imageWidth=80&template=square&url=https%3A%2F%2Fwww.pinterest.com%2Fjbdesant1%2Ftypo-bierut-yale-posters%2F

Type Illustration

Type Sprints

“2427 Eats” Website

Design Resources

Pinterest Page Web Design

Grid Design Guide:

Restaurant Sites

Web Typography

Type Web Sites

COVER Version

for 2427 Eats Book

Explore a Completely Different Version of Your Final Cover

PLAY! with existing elements Be Loose

Come up with dynamic new layout

Multiple Master Grids

for your2427 eats publication

Master Pages and Style sheets

Design Typographical Poster

Exercise in Typography

Build This OER

Typographic Posters

FINAL DUE Project 4 Typography in Motion

FINAL DUE Project 5 Homepage Design

Project 5

DUE NEXT WEEK

Part 1

Part 2

References

FINAL DUE Project 4

Typography in Motion

Upload to Google Drive

Due Next week

Project 4 Typography in Motion

Project 5

DUE NEXT WEEK

Research

Layout

References

Kinetic Typography Resources

References

Related Videos

Vimeo Type

Animation InDesign

Animated GIF Photoshop

The OpenLab at City Tech:A place to learn, work, and share

Support

Accessibility

Copyright

PLAY! with existing elements

Be Loose

FINAL DUE Project 4
Typography in Motion

FINAL DUE Project 5
Homepage Design

Project 4
Typography in Motion