Interactive Design – week 8

Classroom

Monday

  1. Presentation: Aspen
  2. Check in with everyone about grades
  3. View latest mock up of ads – assign next step
  4. Continue work on Lynda.com tutorial
  5. Work with your partner on your ads

Wednesday

  1. Look at next step for collaborative ads
  2. Continue work on Lynda tutorial

Assignments

  • Beginning – do the next chapter in the book – turn in all work to your Google Drive folder
  • Work with your partner on your collaborative ad

Animation – week 8

Tuesday

  1. Cognitive Drawing: view page 26, draw page 27
  2.  12 Principles of Animation: 6. Slow In and Slow Out
  3. Do Slow-in, Slow-out class exercise
  4. Work on storyboards

Thursday

  1. Presentation:  Latiece, Rebekah
  2. Discuss grades
  3. Cognitive Drawing: view page 28, draw page 29
  4. Download this audio file and download this thumbnail and save them both on your desktop (Note: here’s a video on how to do lip syncing)
  5. Work on storyboards

Assignment

  1. Work on your storyboards

Animation – week 7

Tuesday

  1. There is a meeting at 3:00pm Thursday, outside this classroom for the Nogales Video Project. If you want to go, but can’t attend, contact Tim at (520) 414-9978
  2. Frostiana Project: summary, video 1video 2
  3. Presentation: Liz, Jafeth, Jose
  4. Watch How “Spider-Man Into the Spider-verse” Was Animated
  5. Work on Cognitive Drawing download pages 20, 21
  6.  
  7. Work on storyboards

Thursday

  1. Presentation: Aleah
  2. Article every Oscar-winning animation short, ranked
  3. Look at this article about how animation does a good job of communicating feelings
  4. Watch this short film about the history of animation
  5. Work on Cognitive Drawing download pages 24, 25
  6. 12 Principles of Animation:  5. Follow-Through and Overlapping Action
  7.  In-class exercise – animate hair on a character as a class, using the pose-to-pose animation technique and show follow-through and overlapping action. Examples of stereotypical male hair and female hair
  8. Note: we’ll do the Lip Sync in-class exercise next week. Download this audio file and download this thumbnail and save them both on your desktop (Note: here’s a video on how to do lip syncing)
  9. Work on storyboards

Assignment

  1. Work on your storyboards

After Effects – week 7

Classroom

Tuesday

  1. There is a meeting at 3:00pm Thursday, outside this classroom for the Nogales Video Project. If you want to go, but can’t attend, contact Tim at (520) 414-9978
  2. Presentation: Rene
  3. Look at some examples of student cinemagraphs
  4. What’s the difference between a wireframe, mock up, and prototype?
  5. Discuss new project: Portfolio Presentation
    1. Create an After Effects portfolio of either your work or something that interests you (it can be photos, illustrations, graphics, film, music, etc.)
    2. Use all your After Effects superpowers (video, audio, animation, etc.)
    3. Make the dimensions of the presentation any size you like. Make it last between 1 and 2 minutes (approximately)
    4. Start by creating a simple wireframe of what your presentation will look like. Here are some online examples. Have it ready for the next class
  6. Download and extract the files for this tutorial and do it as a class
  7. Work on project

Thursday

  1. Presentation: Josue
  2. Look at wireframes for project. The next step is to create a Photoshop mock up of your project. Have that ready for the next class
  3. Continue working on UFO tutorial from Tuesday
  4. We’ll do the tutorials below next week:
    1. Tutorial 1: rotoscoping
    2. Tutorial 2: 3D text
  5. Work on project

Assignments

  1. Do Chapter 6 for this week and upload to Google Drive
  2. Create a wireframe of the next project and share it with the class this Thursday

Web Design – week 7

Classroom

  1. Presentation: Daniel
  2. Remember Liz’s presentation last week? Check out this article
  3. Advanced – work on your WP websites for the first hour of class, then we’ll work on databases
  4. Beginning – discuss WordPress – continue general tour, discuss HTML & CSS and what the book lessons are for

Beginning 

  1. Download and work on these files
  2. Second hour of class: start bringing elements of your Photoshop mockup into your WordPress site (logo, colors, images, etc.)

Advanced

  1. Talk about you’ve done to your website and discuss the next steps
  2. We will working on the stuff below:
    1. Creating a db with MySQL DB Wizard
    2. Creating a table in their db with PHPMyAdmin
    3. Edit PHP code to interact with the new table
    4. Here is an image of the table structure

Assignments

Beginning

  1. Do chapter 4 in the book – upload work they have you do in the book if they have you complete a project (if they’re just demoing something, you don’t have to upload anything)
  2. Continue to apply the design concepts from your mock ups to your WordPress site

Advanced

  1. Make suggested changes to website
 

Game Design – week 7

Classroom

Tuesday

Thursday

  • Presentation: Wade
  • Prep for quiz with this study guide
  • Note: please don’t worry about when the quiz is happening. I will let you know and give you time to study for it.
  • Discuss changes to be made to games from evaluation feedback

Assignments

  • Look at the next section in the textbook

Web Design – week 6

Classroom

  1. Presentation: Liz
  2. Advanced – work on database assignment
  3. Beginning – discuss WordPress – general tour

Beginning 

  1. Look at first section of the book

Advanced

  1. Talk about you’ve done to your website and discuss the next steps
  2. Discuss the second 5 pages of the PHP Tutorial
  3. We will start working on the stuff below:
    1. Creating a db with MySQL DB Wizard
    2. Creating a table in their db with PHPMyAdmin
    3. Edit PHP code to interact with the new table
    4. Here is an image of the table structure
    5. I will give you the files you need to do the assignment according to the Instructions page

Assignments

Beginning

  1. Do chapter 3 in the book – upload work they have you do in the book if they have you complete a project (if they’re just demoing something, you don’t have to upload anything)
  2. Start figuring out how to apply the design concepts from your mock ups to your WordPress site

Advanced

  1. Make suggested changes to website
  2. Do PHP database assignment
 

After Effects – week 6

Classroom

Tuesday

  1. Field trip – art gallery
  2. Look at examples of cinemagraphs
  3. Do a cinemagraph as a class, using the tutorial below (the video of water being poured into the cup is no longer available, so we will  download and use this video file instead)
  4. In-class exercise: now download a video from a site such as videezy.com and make your own cinemagraph
  5. Work on book chapters

Thursday

  1. No Class – Rodeo Vacation

Assignments

  1. Do Chapter 5 for this week and upload to Google Drive

Interactive Design – week 6

Classroom

Monday

  1. Presentation: Ryan
  2. View final ads
  3. Work on Lynda.com tutorial
  4. Discuss new project: Collaborative Ads
    1. Team project: work with at least one other person in the class. You are a small design firm. I am your client. You get to pick what business I’m in, or what service I provide (car mechanic, retail shop, poster gallery, etc.).
    2. Design two HTML 5 ads that will go on a website. Link them thematically. One ad will be 300x250px, the other 728x90px
    3. We’ll discuss how to do “polite loading” in the future. For now, make sure you create an extra image of your ad that is 40k, or smaller, to use as a “pre-loader” or “initial” image
    4. Use the ad specs of the HTML 5 standard unit on this page:
      • Rectangle gif, jpg, png, swf
      • 300×250, 728×90
      • File Size:
        • Initial- 40k
        • Secondary- Polite Download: 500k User-initiated: 2MB
      • Audio/Video: Yes
      • 3rd Party 1×1: No
      • Controls:
        • Audio: Must be user-initiated on click and include a “Mute” button
        • Video: May be user-initiated or auto-play; if auto-play video cannot exceed 30 seconds
        • Video: Must include “Play” and “Stop” buttons
    5. Have concepts for both ads on Wednesday

Wednesday

  1. Look at concepts for collaborative ads
  2. Work on Lynda tutorial
  3. Download these files to do the tutorial

Assignments

  • Beginning – do the next chapter in the book – turn in all work to your Google Drive folder
  • Work on collaborative ad

Game Design – week 6

Classroom

Tuesday

Thursday

  • No class – Rodeo Vacation

Assignments

  • Work on getting your game to the next stage with your team
  • Look at the next section in the textbook

Web Design – week 5

Classroom

  1. Any website mock ups we haven’t seen yet?
  2. Discuss WordPress – general tour
  3. Show class how to FTP into site

Beginning 

  1. Discuss latest  HTML tutorial
  2. Look at first section of the book

Advanced

  1. Talk about you’ve done to your website and discuss the next steps
  2. Discuss the first 5 pages of the PHP Tutorial

Assignments

Beginning

  1. Do chapter 2 in the book
  2. Start figuring out how to apply the design concepts from your mock ups to your WordPress site

Advanced

  1. Make suggested changes to website
  2. Do next 5 pages of PHP Tutorial
 

Animation – week 5

Tuesday

  1. Cool animation
  2. Work on Cognitive Drawing, download pages 15, 16, and 17
  3. 12 Principles of Animation:  3. Staging
  4. Do example animation for principle #3 – “The Prisoner’s Dilemma”
  5. Finish coloring your background and character. If you’re done with that, let me know and I’ll show you how to start on storyboards

Thursday

  1. Adobe Audition tutorial.  For audio – download this file
  2. Look at Ben’s Sound website and Flashkit
  3. Introduction to Storyboard Pro – start your storyboards

Assignment

  1. Pick a color palette at one of the websites I showed you last week or design your own color palette and color your background(s) and character
  2. Find some music and sound effects to use in your animation from some of the copyright-free websites I pointed out
  3. Start working on your storyboards

After Effects – week 5

Classroom

Tuesday

  1. Look at any remaining Project 1 files
  2. Discuss grades for 1st assignment
  3. Look at some of the shape layer exercises people did (any they care to share)
  4. In-class exercise – Frostiana
    1. Animate the lyrics of one of these Robert Frost poems

Thursday

  1. View in-class Robert Frost exercises
  2. Work on book chapters

Assignments

  1. Do Chapter 4 for this week and upload to Google Drive

Interactive Design – week 5

Classroom

Monday

  1. Discuss options for interactivity:
    1. Buttons
    2. Audio
    3. Video
  2. Work on finishing up ads up for Wednesday
  3. Discuss what you found out about placing ads on websites

Wednesday

  1. Look at final drafts of ads
  2. Discuss specs for placing ads
  3. Use this time to finish up ads for Monday

Assignments

  • Do the next chapter in the book – turn in all work to your Google Drive folder
  • Finish up your targeted ads 

Game Design – week 5

Classroom

Tuesday

Thursday

Assignments

  • Work on getting your game to the next stage with your team
  • Look at the next section in the textbook

Interactive Design – week 4

Classroom

Monday

  1. Discuss targeted ads – look at where they are with partial animation added (animatics). Suggest the next changes:
    1. Full animation
    2. Options for interactivity – buttons, rollovers, audio, video, triggering movie clips, etc.
  2. Work on next set of changes to ads – create a more complete animation for Wednesday

Wednesday

  1. Look at updates to targeted ads – suggest changes
  2. Work on changes – working towards making full animated ad

Assignments

Beginning

  • Do the next chapter in the book – turn in all work to your Google Drive folder
  • Work on finishing up your targeted ads 
  • Find a couple of websites where you could place your ads. Share the information with the class, regarding how much the ads cost, how big they are, how frequently they will be displayed, their expected “conversion” rate, the “specs” for designing them, etc.

Advanced

  • Work on finishing up your targeted ads
  • Find a couple of websites where you could place your ads. Share the information with the class, regarding how much the ads cost, how big they are, how frequently they will be displayed, their expected “conversion” rate, the “specs” for designing them, etc.

After Effects – week 4

Classroom

Tuesday

  1. Click here to view the presentation schedule
  2. Watch 2 short videos for Shape Layers Overview
  3. Do shape layers/masks in-class exercise: create a project using animation shapes and masks. Animate the shapes to synchronize to  an extremely short short snippet of music (a few seconds is fine – you can edit a sound clip using Adobe Audition) from a website such as Bensound.com or Flashkit.com

Thursday

  1. Project 1 due – give constructive criticism of work
  2. Spends some time making changes that were suggested to your project, then turn in the final version of it
  3. Work on book chapters

Assignments

  1. Buy the book – do Chapter 3 for this week and upload to Google Drive

Animation – Week 4

Tuesday

  1. Presentation dates have been posted here
  2. Work on Cognitive Drawing, download page 9
    pages 15 and 17
  3. Watch video about creating a fox for animation
  4. 12 Principles of Animation: 2. Anticipation
  5. Do example animation for principle #2 – animate a head that uses anticipation
  6. Work on your background, character, and plot

Thursday

  1. Cool characters to check out (Disney Princesses as armored warriors)
  2. Work on Cognitive Drawing pages 11, 12, 13
  3. Look at coloring Wildchord background, before, after, color
  4. Adobe Audition tutorial.  For audio – download this file
  5. Look at Ben’s Sound website and Flashkit
    Demonstrate different ways to do a walk cycle, to create a “attitude walk,” including: adding “accoutrements” and changing the number of frames each pose is held (watch changing weight video)

Assignment

  1. Pick a color palette at one of the websites I showed you last week or design your own color palette and color your background(s) and character
  2. Find some music and sound effects to use in your animation from some of the copyright-free websites I pointed out

Game Design – week 4

Classroom

Tuesday

  • Talk about the final games created for the game jam: are you happy with the results? What would you change?
  • Continue to discuss Chapter 1: The Basics (Challenges)
  • Take a look at thegamecrafter.com website. Talk about limitations (board sizes, available tokens, cards, production deadline, etc. and budget – $50, plus tax and shipping)
  • Meet with team to discuss whether you will continue to work on the game you made, or create a new board game to be published

Thursday

Assignments

  • Work on getting your game to the next stage with your team
  • Look at the next section in the textbook

Web Design – week 4

Classroom

  1. Discuss Homepage Mockups (Project 1a)
  2. Go over the concept of mobile-first (minimalist to profligate) design

Beginning 

  1. Demonstrate how DiffNow website works
  2. Discuss HTML5 Tutorial
  3. Look at first section of the book

Advanced

  1. Begin applying your Website Mockup design to your WP website

Assignments

Beginning

    1. Access your WordPress website via the link I provided (I will send it in e-mail)
    2. Join the wpbeginner website and take a brief look at their intro to WP videos
    3. Do the next five pages of this HTML tutorial. Test yourself as you go
    4. Make suggested changes to your Homepage Mockup (Project1a) and upload it to the Google Drive

Advanced

  • Access your WordPress website via the link I provided (I will send it in e-mail)
  • Create a homepage for your website with text and graphics. Put a title/logo on your homepage
  • Go through the first 5 pages of the PHP Tutorial and test yourself as you go

 

 

Web Design – Week 3

Classroom

    1. Attendance, introductions and review syllabus
    2. Create a Google Drive folder called “DAR256 your name” or “DAR257 your name” and share with me (gjloumeau@pima.edu). Talk about presentations
    3. DAR256 students will need the book for this class. You are going to have to download the lesson files. You will need access to the Dreamweavaer software.
    4. Cintiqs and pen checkout process
    5. A brief history of web design
    6. History of web design infographic

Beginning

Resources for you to check out on your own time

Advanced

  • We will watch the following video in class when there is time: PHP video
  • Review the PHP tutorials up to and including PHP 5 Variables
  • We will watch the following video in class when there is time: MySQL databases

Assignments

Beginning

    1. Buy the book for class (Adobe Dreamweaver Classroom in a Book 2018). You can get it on Amazon or at the bookstore.
    2. Look at the first chapter in the book. You will need to be at a computer that has Dreamweaver on it when looking at the book. Download the lesson files for this book.
    3. Do the first chapter (5 pages) of this online tutorial and then do the five simple exercises at the end of the chapter:

  • Project 1a: Create a website mockup using this Photoshop template,  Show what the page will look like in three formats: a mobile phone, a tablet and on a desktop computer. I suggest you do the mobile phone layout first. We’ll look at these next week.

Advanced

  • Access your WordPress website via the link I provided (I will send it in e-mail)
  • Create a homepage for your website with text and graphics
  • Put a title/logo on your homepage

 

 

Game Design – week 3

Classroom

Tuesday

Thursday

  • Discuss and make final changes to Game Jam. Take notes about what we discuss in class and make the appropriate changes
  • Submit your projects today by going to this link and clicking the “Join Jam” button and following the instructions (you will need to sign up for a free itch.io account)
  • Go through how to submit your files on itch.io

Assignments

  • Game Jam 
  • Look at next section in the textbook

Animation – week 3

Classroom

Tuesday

  1. Do Cognitive Drawing – first exercise – together. Download pages  5 and 7
  2. Discuss story summaries and character turnarounds we haven’t seen yet
  3.  On your own time, check out the Artstation website
  4. Look at this video about drawing backgrounds. Do a background together and pick a color palette. Look at Adobe Color Wheel and Colourlovers websites, and associated features in Adobe product
  5. Work on backgrounds, plot summary

Thursday

  1. Check out these cool character designs
  2. Discuss how 3D Printing has changed stop-motion animation
  3. Watch 12 Principles of Animation video: 1. Squash & Stretch
  4. Introduction to software: ToonBoom Harmony Advanced – do ball animation
  5. Look at how to do perspective (formally) and how gray scale and color are added to backgrounds
    1. How to do 1, 2, and 3-point perspective
    2. Animation background layout
    3. Using gray scale to paint backgrounds as a way to determine lighting
    4. Hand-painted animation backgrounds
  6. Work on backgrounds, plot summary

Assignments

  1. Finalize plot summary and background

Instructor: Greg Loumeau