Web Design – week 5

Classroom

  1. Presentation: Sue
  2. If you are interested in helping someone create/maintain a neighborhood association website as a pro bono project, contact Faye at this e-mail address gfgoodspeed@q.com
  3. Check out this humorous article about how best to design websites
  4. Discuss the online CSS tutorial and Chapter 3 – CSS Basics
  5. Show how sample website was cut up and discuss how to optimize designs  for Bootstrap websites

Assignments

  1. Work on Chapter 4 in the book
Advanced

  1. Go over database assignment and talk about how PHP and MySQL code work and what they’re doing
  2. Show how code can be changed to work with a new database created in class.
  3. Create your own database in class
  4. Go over the following WordPress information:
    1. Dashboard
    2. Cleaning out pre-installed stuff
    3. Quick edits to posts
    4. Deleting posts, pages and widgets
    5. Updates
    6. WordPress Settings

Assignments

Beginning

    1. Do chapter 4 in book
    2. Make a Bootstrap website according to the video tutorial

Advanced

  1. Customize the code from the last assignment to interact with the database you created in class

Animation – week 5

Classroom

Tuesday

  1. Presentations: Josue, D’Andre
  2. Work on Cognitive Drawing download pages 15, 16, and 17
  3. 12 Principles of Animation: 3. Staging
  4. In-class exercise – staging at the circus – download this file

Thursday

  1. Presentations: Ed
  2. Work on Cognitive Drawing download pages 18, 19
  3. Introduction to Storyboard Pro
  4. Begin work on storyboards

Assignment

  1. Make sure you have a colored character and background, plot, and music/audio for your project
  2. Work on storyboards

After Effects – week 5

Classroom

Tuesday

  1. Adobe tutorials – start working on these tutorials. The videos are here. Download these files
  2. Work on Project 1

Thursday

  1. Presentations: Carlos
  2. Look at finished versions of Project 1
  3. Describe Project 2 – The Secret History of Halloween
    1. Do a project where you relate a story (real or imagined) about the Halloween holiday. It can be anywhere from 30 seconds to 2 minutes long. Use any combination of text, video, music, audio, sound effects, animation, and images to create your project. Due October 11th.
  4. Begin looking at chapter 4 together – finish it on your own

Assignments

  1. Do and turn in chapter 4 in the book.
  2. Work on Project 2

Animation – week 4

Classroom

Tuesday

  1. Presentation: Josue
  2. Work on Cognitive Drawing, download page 9
    pages 15 and 17
  3. 12 Principles of Animation: 2. Anticipation
  4. Do example animation for principle #2 – animate the “squash and stretch head” that uses anticipation
  5. Work on your backgrounds, character, and plot

Thursday

  1. Presentations: Nick
  2. Cool characters to check out (Disney Princesses as armored warriors)
  3. Work on Cognitive Drawing pages 11, 12, 13
  4. Look at coloring Wildchord background, before, after, color
  5. Adobe Audition tutorial.  For audio – download this file
  6. Point out 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)
  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

  1. Presentations: Kobe, Max
  2. Take a look at  Vecteezy.com to use as a resource for game artwork
  3. Talk about creating a “mega-team” consisting of members of multiple teams – to advise on printed games
  4. Continue to discuss Chapter 1: The Basics
  5. Class time to work with your team on your game

Assignments

  • Textbook: look over Chapter 1
  • Work on your game with your team – a Paper Prototype is due next week

After Effects – week 4

Classroom

Tuesday

  1. Presentation – V. Aviles
  2. For ideas on using different angles in your presentations, look at these camera shots
  3. Adobe Audition tutorial.  For audio – download this file
  4. In-class time to work on Animated Text Project

Thursday

    1. Presentation – B. Bosse
    2. Do chapter 3  together
    3. Time to work on your project

Assignments

  1. Do and turn in chapter 3 in the book
  2.  Work on Animated Text Project, which is due next Thursday

Interactive Design – week 4

Classroom

    1. Look at ad mock ups you made. Make suggestions for changes
    2. Adobe Audition tutorial – download this file
    3. Look at Chapter 1
    4. Discuss Multimedia Formats & Funding Options:
      1. Presentation
      2. Web apps
      3. Mobile platforms, Mobile apps, Proprietary
      4. Crowdfunding: Kickstarter, IndieGoGo, Patreon (Jason Brubaker), TLC

Assignments

  • Make suggested changes to your mock ups and do partial animation
  • Turn in Chapter 1 to your Google Drive and work on Chapter 2

Beginning

  1. Look at final animations for ads
  2. Adobe Audition tutorial – download this file.
  3. Download this file and demo how to create a simple Motion Path
  4. Look at masks, importing music and/or sound fx, motion presets, ActionScript (download and work on this file)
  5. Assign Rodeo Project:
    1. Create an ActionScript 3 project that will be presented on a video kiosk in a mall. Make it an advertisement for a Rodeo-related product or service, such as: cowboy hats, rodeo clown makeup, pony rides, etc.
    2. Make your stage 960px wide x 600px high
    3. Use motion paths, motion tweens, music and/or sound effects
    4. Don’t forget a call to action

Assignment

  1. Work on Rodeo project
  2. Do Chapters 3 and turn your work in to your Google Drive folder

Advanced

  1. Look at final animations for ads
  2. Download this video and discuss strategies for importing video and audio into projects, including ActionScript for stopping sounds
  3. Assign Rodeo Project:
    1. Create an ActionScript 3 project that will be presented on a video kiosk in a mall. Make it an advertisement for a Rodeo-related product or service, such as: cowboy hats, rodeo clown makeup, pony rides, etc.
    2. Make your stage 960px wide x 600px high
    3. Use motion paths, motion tweens, music and/or sound effects
    4. Your project should have a “homepage” and three additional tabs (or buttons) users can click on to go to other “pages” of the ad. You should use video on one page and music on another.
    5. Don’t forget a call to action

Assignment

  1. Work on Rodeo project
  2. Do chapter 9 in the book and turn in your work to Google Drive

Web Design – week 4

Classroom

  1. Presentation: Daniel
  2. Demonstrate how DiffNow website works
  3. Look at any changes you made to Photoshop mockups of a homepage
  4. Finish building HTML page from scratch using DIVs
  5.  Look at Chapter 2 “B2 HTML Bonus” in the book

Assignments

  1. Do the first 4 pages of this online CSS tutorial
  2. Work on Chapter 3 in the book
Beginning

  1. Presentations: Trace, Francisco – post comments in forum
  2. Look at DiffNow website
  3. Move CSS from sample HTML page to stylesheet.
  4. Show how JavaScript works
  5. Introduce BootStrap

Advanced

  1. Look at websites (you should have started creating the pages from your site map)
  2. Discuss Top 20 Must-Have WordPress Plugins
  3. Create a db with MySQL DB Wizard, and create a table in the db with PHPMyAdmin, and edit the PHP code to interact with the new table (we’ll do this together in class)
  4. Go over the following information:
    1. Dashboard
    2. Cleaning out pre-installed stuff
    3. Quick edits to posts
    4. Deleting posts, pages and widgets
    5. Updates
    6. WordPress Setting

Assignments

Beginning

    1. Do chapter 3 in book
    2. Do the first 3 pages of this JavaScript tutorial

Advanced

  1. Make the suggested changes to pages in your website
  2. Download these files and do the assignment according to the Instructions page. FYI – here is an image of the table structure

Basic Audio Production – week 4

Classroom

  1. Discuss chapter 1 – Here are my notes for tonight
  2. Adobe Audition tutorial – download this file. (Note: you can use whatever audio software you want to do projects, but I want to make sure you at least know how to use Audition)
  3. Split into teams – make sure you have some video people on your team, unless you choose to be an audio only team
  4. Begin work on Project 1 with your team

Assignments

  • Buy the book – Modern Recording Techniques – and look at the information we discuss in Chapter 1
  • Work on Project 1

Game Design – week 3

Classroom

  • Presentation: Arturo
  • Look at team presentations for Assignment 2:  change the elements of an existing game to integrate a new aesthetic (the emotional response you have to playing a game)
  • Discuss Ludology and  Ludemes
  • Take a look at Ludum Dare, example game “Reverse” (note: Ludum Dare is Latin for “to give a game”)
  • Continue to discuss Chapter 1: The Basics
  • Explain Assignment 3: team project – create a board game using chance to make it solvable, and skill to make challenging. Example: Scrabble – the chance element is the letters you get and the skill is the words you spell. In two weeks, a paper prototype of your game is due, and in 3 weeks, a printed version is due
  • Take time in class to work on assignment with your team

Assignments

  • Textbook: download the textbook pdf from last week’s post and go over the stuff we talked about in chapter 1
  • Create a free account at Ludum Dare and check out the games
  • Work on Assignment 3 with your team

Web Design – week 3

Classroom

  1. Presentation: Liz
  2. Look at Photoshop mockups of a homepage
  3. Go over what DIVs are, then build an HTML page from scratch using DIVs
  4. Look at Chapter 2 together in the book

Assignments

    1. Do the Chapter 2 “B2 HTML Bonus” in the book
    2. Make suggested changes to your mockups and upload to Google Drive

Animation – week 3

Classroom

Tuesday

  1. Do Cognitive Drawing – first exercise – together. Download page  5 and 7
  2. Critique plot summaries and any character turnaround changes
  3. On your own time, check out the Artstation website
  4. Look at Adobe Color Wheel and Colourlovers websites, and associated features in Adobe products

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. Work on backgrounds, plot summary, and characters

Assignment

  1. Color and turn in your final character turnarounds
  2. Make suggested changes to plot and turn it in
  3. Start working on a color palette for your background and make suggested changes to background

 

After Effects – week 3

Classroom

Tuesday

  1. Presentation: Gabe
  2. Go over how to use animation presets for text, which you can use on Project 1
  3. Begin looking at Chapter 2 together – finish it on your own

Thursday

  1. Presentation: Omar
  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 (also discuss how to mask text)
  4. Work on Project 1 – animated text, which is due next Thursday

Assignments

  1. Do and turn in chapters 1 and 2 in the book
  2. On your own time, look at this post explaining frame rates
  3. Work on Project 1

Animation – Week 2

Classroom

Tuesday

  1. Look at schedule of when presentations/reports are due on forum page
  2. Look at turnaround characters assigned in previous class
  3. Take a look at these tips on character design
  4. Discuss these basic character body types (Lynda.com)
  5. Discuss character drawing issues
  6. Do a character drawing exercise (create four views of a character from scratch, using guide lines)

Assignment

  1. Work on updates to your character turnaround. The final character is due Thursday. Upload it to your Google Drive folder

Thursday

  1. Discuss the software we’ll be using (Harmony Advanced & Storyboard Pro), plus online resources (http://www.toonboom.com)
  2. Here’s where you can get the Harmony animation program for $9/month
  3. Critique final character turnarounds (for those who have made significant changes).
  4. Discuss plot-writing strategies for animated scene and how to use the 12 principles of animation to build your story
  5. Talk about backgrounds and look at this article
  6. Do background drawing exercise
  7. Watch this animation while you work

Assignments

  1. Upload final character turnaround file to Google Drive
  2. Write a short summary of the plot of your animated scene (a couple paragraphs) and turn it in on Tuesday
  3. Start sketching out a background for your scene

After Effects – Week 2

Classroom

Tuesday

  1. Load book exercise files on all computers from USB drive
  2. Look at schedule of when presentations/reports are due on forum page
  3. Discuss the After Effects interface
  4. Go over how to animate text, import audio/video, how to render files
    1. audio
    2. download video from here
    3. image
  5. If there’s time, start looking at Chapter 1

Thursday

  1. Extract the exercise files on your computers (I’ll show you how)
  2. If necessary, continue to discuss Chapter 1 in textbook
  3. Talk about how to use text presets
  4. Look at examples of student work for Project 1
  5. Discuss and assign due date for Project 1

Assignments

  1. Buy the book – do Chapter 1
  2. Work on Project 1

Game Design – week 2

Classroom

  • Click on the following link to access the GAM101 Service Bureau Print Folder. Drop the files you want in here, then fill out the form in the service bureau to have Mike print your files
  • The Pima game club is called the Game Development Guild and their e-mail address is gamdevguild@gmail.com. They meet in this classroom from 1-5pm on Fridays
  • Look at the rules and images for the Ancient Roman Board game
  • Begin to discuss Chapter 1: The Basics in textbook (Challenges)
  • Discuss individual game assignment (Assignment 2):  change the elements of an existing game to integrate a new aesthetic (the emotional response you have to playing a game). Example:  Corruption Chess –  use gold pieces to buy people in the opposing team’s court, so they will turn against their ruler
  • Take time in class to work on your newassignment

Assignments

  • Textbook (Challenges pdf above): read Chapter 1
  • Work on Assignment 2: change the elements of an
    existing game to integrate its aesthetic, due next Thursday

Web Design – week 2

Classroom

  1. Look at schedule for  forum posts/presentations and note when yours is due
  2. Discuss the HTML tutorial I assigned online
  3. Begin to discuss the introduction (Getting Started) and Chapter 1 in the book
  4. Explain Assignment 1 (and look at examples): create a Photoshop mockup of a homepage of your choosing. Create three versions of it: phone, tablet and desktop, conforming to these sizes (download template):
    1. Desktop: 1366px (wide) x 768px (tall)  
    2. Tablet: 1024 x 768 
    3. Phone: 1280 x 720  Note: a good practice when designing media queiries would be to start with three breakpoints : smaller than tablet (max 768), tablet (min 768 max 1024) and desktop (min 1024).
Advanced

  • Discuss free and commercial themes and plugins, Woo Commerce (storefront and child themes)
  • Talk about how and why to make a site map (hand-drawn, illustrator, etc.)
  • We’ll discuss the stuff below next week:
  • Learn about how WP works with PHP and MySQL databases
  • Watch the following Lynda.com video in class: PHP video
  • Watch the following Lynda.com video in class week: MySQL databases

Assignments

    1. Look through Getting Started and Chapter 1 in book. Make sure you know how to setup a Site using Dreamweaver and understand how the interface works
    2. Work on Assignment 1 –  create a Photoshop mockup of a homepage of your choosing – due next week. Try to create a layout that will work within the confines of the web (look at existing websites for reference)

Advanced

    1. Let’s all use the 2016 theme on our websites (you can also have additional themes installed that you can play around with)
    2. Find 2 great WP templates and 2 useful plugins and bring the information about them in next week to share with other students. Install them on your site.
    3. Create a site map for your website and upload to Google Drive

Web Design – Week 1

Classroom

    1. Attendance, introductions and review syllabus. Turn in  syllabus acknowledgement form
    2. Create an account on the Dreamco website. Create a Google Drive folder called “DAR256 your name” and share with me (gjloumeau@pima.edu). Talk about presentations
    3. You are going to 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

Resources for you to check out on your own time

  • 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

    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.
  • 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.

Interactive Design – week 2

Classroom

  1. Attendance, introductions and review syllabus. Turn in  syllabus acknowledgement form
  2. Create an account for the Dreamco website. Create a Google Drive folder called “DAR252 your name” and share with me (gjloumeau@pima.edu). Talk about reports and presentations. Show schedule.
  3. Check out Bannersnack
  4. HTML 5 banner ad examples
  5. Article about creating banner ads in 2018
  6. 50 tips for designing the perfect web banner ad
  7. No class next week – Labor Day

Discussion (we’ll talk about some of this in two weeks)

  1. Presentation
  2. Discuss Multimedia Formats & Funding Options (we may discuss these topics next week, if we run out of time today)
    A. Web apps
    B. Mobile platforms, Mobile apps, Proprietary
    C. Crowdfunding: Kickstarter, IndieGoGo, Patreon (Jason Brubaker), TLC

Assignments

  • Buy the book, read the introductory pages and do the first chapter – turn in any work to your Google Drive folder
  • Make a mock up for an ad that will eventually be animated for a website (create some elements that can be animated like text and object and think about how you want to animate them). Here are some examples:
    1. Non-animated, use for reference – example ads
    2. Non-animated, use for reference – I made these for you to download and they are at the proper sizes – sample ads. Use Photoshop and format your ad for 3 different sizes:
      1. 728 x 90 px (desktop)
      2. 468 x60 px (tablet)
      3. 234 x 60 px (mobile)
    1.  

Lecture

Lecture video

Basic Audio Production – Week 2

Classroom

  1. Introductions
  2. Create an account for the Dreamco website and Google Drive and talk about reports and presentations
  3. Discuss syllabus
  4. Watch History of Audio video to 5:55. For more information, check out the Wikipedia page
  5. We need a note taker for this class – any volunteers? Pima will pay you to take notes
  6. No class next week – Sept. 3rd – Labor Day

Assignments

  • Buy the book – Modern Recording Techniques  – Read chapter 1

After Effects – Week 1

Classroom

  1. Attendance, introductions and review syllabus. Sign last page and hand in
  2. Cintiqs, pens, checkout process
  3. Create a Google Drive folder and share with me.  Talk about reports and presentations
  4. Create an account on the Dreamco website
  5. Look at example of great After Effects Projects (Forest, Stuxnet, Buenos Aires) with more here (Procrastination, Breaking Bad) Ira Glass, From Paper to Screen, 29 Ways to Stay Creative)
  6. Terminology video
  7. Interface drive-by tour

Assignment

  1. Buy the book. You will need to download the exercise files and have access to the After Effects software to do the homework.
  2. Do chapter one and upload your finished work to your Google Drive folder. We’ll go over it together during the next class.

Animation – Week 1

Classroom

  1. Attendance. Introductions and review syllabus. Sign last page and hand in.
  2. Here’s where you can get a  monthly subscription to the animation software we’re using for $9/month https://store.toonboom.com/students
  3. Create a folder on Google Drive and share with me. Talk about reports and presentations
  4. Demonstrate how to use Cintiqs and pen checkout process. 
  5. Create an account on the Dreamco website
  6. Discuss the long-range view of the projects this semester – start planning now for the final project.
  7. Discuss history of animation, watch video
  8. Share physical and virtual examples of Zoetrope, 3D Zoetrope & Flipbook (Pixar), Thaumatrope, Praxinoscope

Assignment

  1. Sketch the turnaround view of a character that you want to animate this semester. It can be black and white or color. Here’s a video of how to do it. Scan it in or take a digital picture of it that we can share with everyone during the next class. Upload it to your Google Drive folder. Due next class.
  2. Example below (click to enlarge):

kumaclone

 

 

Game Design – week 1

Classroom

  • For week 2: check out this article
  • Introductions
  • Syllabus
  • Make a Google Drive folder called “gam101 your name” and share it with me: my e-mail address is gjloumeau@pima.edu
  • Discuss presentations
  • We need a note taker for this class – any volunteers? Pima will pay you $120 to take notes
  • Cintiqs and pen checkout process
  • Create an account on the Dreamco website
  • Some board games are available in the library
  • Form four teams, with each team having a diverse makeup (some people who are good at graphics, ideas, organization, etc.)

Assignments

  • Come up with your own rules and a name for this Ancient Roman Game – due next class (next Thursday). Write the rules on an electronic document (like Microsoft Word or Google Docs) and store it in your Google Drive folder. You may also do artwork for the game.
  • Please note that the game is described as “… over 1,600 years old, (and) consists of chess-like squares with green and white  glass playing pieces of different sizes …”
  • Read this article about the history of board games.

Instructor: Greg Loumeau