Masking and Morphing shapes in After Effects

Any problems submitting your Animated Type Poster?

DEMO:

  1. Masking Shapes Demo—Trkmat, Bezier Path, Parent
  2. Morphing—Shape Layer, Rotation

Work in Class:

Please Animate one of your logo—due at the end of this class, you may post it on your instagram @ me or submit via TCU Online

  1. Separate logo layers in illustrator
  2. Use anchor point/scale/position/opacity/ rotation/ mask/ morphing in AE to animate your logo
  3. Don’t forget to turn on your Sunshine *
  4. Save it for Instagram

Meeting Individually:

  1. Creative Brief
  2. App names
  3. Logo Drafts
  4. 8-10 Screen plans

Due on Monday 01/27:

  1. Finalized name and logo design
  2. 2-3 UI styles for the 1st & 2nd screens (Sketch or XD)

Project Deadlines:

  1. at least 7 screens developed for progress critique—Monday 02/03
  2. 8 screens poster (digital) Presentation—Monday 02/10
  3. poster printed and mounted is due—Wednesday 02/12
  4. DSVC submission—Friday 02/15

App Project

  1. Download Uber and Foursquare in the App store
  2. Discussion: Visual Design, please reflect on your journal later
  3. Weekend Reading assignment: iOS Human Interface Guidelines
  4. After Effects Recap
  5. Discussion: Uber & Foursquare
  6. Work in class today—Type animation, please keyframe position, rotation, scale, opacity and make it fun? It’s due at the end of class today.
  7. Individual consultation today—What’s your app ideas? 2-3 app ideas, be ready to show 3-5 inspirational journal entries or apps on your phone, popular apps, work sample

8. Due Wed 01/22

  • One final app idea—Design brief, app name, and logo drafts are due
  • Be ready to discuss thumbnails and plan for all 8-10 screens (Sketches on paper)
  • Logo Animation Exercise—Please bring a logo you designed to work in the next class

Intro to After Effects

Welcome!

This is Advanced Computer Application to Graphic Design course! A class with the purpose of introducing the design concepts and skills required to develop interactive content for the screen-based media. This class will focus primarily on the merging of aesthetics and functionality in interface design, designing information architecture, and designing for a satisfactory user experience.

I will be encouraging you to work both individually and in groups during the semester on various projects, across various applications. However, the course remains focused upon understanding and the application of basic conceptual and design skills. I intend to provide these required skills to you, in informative, fun, and creative ways!

Please check out and use the links on the right column☞ for help and inspiration!

  1. Reading Assignment this weekend: UI Design Basics Visual Design, please put down your reading notes on your journal.
  2. Download: Exercise file
  3. Demo:
    • Inputting footage from Ai & Ps
    • AE interface
    • Shortcuts
    • Path editing
    • Timeframe
    • Graph editor
    • Rendering
    • Loop gif
    • Keywords for tutorials: after effects move on a path, bouncing ball, looping gif

Assignment:

  • Create an animated type poster by the end of Wed class/Jan 15, you may post it on your Instagram and tag me @yvecao, or submit it in Exercise folder on TCUOnline.
  • 2-3 app ideas/flow maps due on Mon/Jan 15, be ready to show 3-5 inspirational journal entries or apps on your phone
  • One app final idea—Design brief due on Mon/ 01/20, be ready to discuss thumbnails and inspirations on your journal

Intro to Bootstrap

Bootstrap is a free front-end framework for faster and easier web development
Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins
Bootstrap also gives you the ability to easily create responsive designs

HTML Template DEMO:

Coffee Blend HTML Template

Inspect elements
Edit source code
Find and replace in CSS

Extended learning on Bootstrap

https://getbootstrap.com/

https://www.w3schools.com/bootstrap4/default.asp

Small Business Site Project

Event Website Presentation

http://chalfantcreative.com/Event/

http://hunglp.com/event/

www.cassschmidt.com/event

http://www.raesblog.com/event

http://www.scruggsdesign.com/kusama/

http://hanwils.com/event/

http://cfischerdesign.com/event/

http://lizzieireland.com/event/

http://derekbdesigns.com/event/

http://malffdesigns.com/event/

http://mayagracek.com/event/

http://mirandashawsblog.com/event/

munozwright.com/event

http://www.rosehooverweb.com/event/

Final Project:

Small Business Site

Event Project New Schedule

T Oct 29——Work in class
Th Oct 31—User testing and critique (3 or 4 sections)
T Nov 5—Work in class
Th Nov 7—Event Website final presentation

You are expected to have their fully functioning website uploaded to their server and accessible via web browser. Reply to my group email with your URL. The website needs to be put on digital mock ups and submit on TCUOnline. Please include title, description, web fonts, colors and other graphic elements.

Please continue working on your Journal site.

Intro to Responsive Design and Jquery

Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors).

Viewport

Viewport—When using Media Queries you need to include a viewport otherwise you will not get the anticipated result.

Insert the following in head section:

<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>

Media Queries

Media Queries can be used to ensure that your site will work correctly regardless of the user’s screen size, origination, color and aspect ratio. Media Queries allow you to specify criteria that match the viewing device, a desktop/laptop, iPad, cell phone etc.

See Media Queries sample here.

Sample Breakpoint

@media screen and (max-width:980px)

@media screen and (max-width:768px)

@media screen and (max-width:480px)

DEMO

Learn more about Responsive Web Design (reading assignment)


  1. Lecture on Java & Jquery
  2. http://responsiveslides.com/
  3. http://stackoverflow.com/

Reading Assignment

  • Reading Assignment: Chapter 16, 17, 18, 19; CSS Quiz next class
  • W3S CSS outline —CSS float

CSS continued

  • DEMO continued
  • Meet individually—be prepared to discuss your creative brief and inspirational sites if time allows.

A name Attribute


Assignments

  • Reading Assignment: Chapter10, 11, 12, 13, 15
    W3S CSS HOME —CSS box model
  • Start on your thumbnails and layout in Sketch, have them ready for next consultation
  • Behance web design

Additional Reading