AMAT Animation/Game Design - Principles A/V Tech

May 27, 2016

Semester Exam - Minimalist Cover Art

Before you begin, check out these links:

• Minimalist Book Covers
• Minimalist Movie Poster

For your design, you'll create a minimalist poster design using Illustrator. The design should involve

• The print design preset we've been using recently instead of the Video/Film one.
• The game's title, utilizing a Typeface approved by me. For an starting point, be sure your typeface doesn't appear on the banned fonts list page of this site. There are definitely others, as that is an old list that is also based off of Windows machines.
• At least two (but no more than three) items designed in Illustrator signifying key elements of your game/animated film's story. I'm not expecting incredible works of art here, but I'm also not going to let you slide by just making a circle or rectangle, either. In the spirit of a certain breakout Marvel superhero this year... "Medium effort."
• A background shape/color that also involves added texture. This is a new (but very simple) step you can find instructions for partway down the page here. --> Scroll down to the heading "texture creation based on bitmap images" for instructions, and download some sort of texture image (google image search for a Large size texture of sandstone, papyrus, thatch, stone, etc....)
• A smaller sub-text of the month or season and year for your "release date."

Finished early? Copy and paste the elements onto new, blank documents, and then export them as PNG files with the settings left as you find them in the export boxes that pop up. Drop them into after effects and animate it!

May 17, 2016

Period 1 and 8 - While I'm Gone

Before you click on the link below, keep in mind the following:

• You do not need the file the guy is using to draw the tomato. Just do the work within a blank document, and don't worry about the green stem at the end.
• It's much easier to see exactly what he's clicking on if you watch the video full-screen. Use Command+Tab keyboard shortcut to switch between the video and illustrator while doing so.
• If you get stuck later on, then use a neighbor or do a few undos and start back when he first applies the gradient mesh.
• If you succeed with your tow-may-toe, then create an object of your own and apply a mesh afterwards. There shouldn't be down time after you're done.
• If your computer is acting funky, then grab another computer. There's plenty extras.
• Here's the link to the tutorial on gradient meshes.

April 28, 2016

Period 8 - While I'm Gone

Go to the following Lynda Course, and scroll down to chapter 5 of the course. Watch and practice the material from the first 5 videos (through the end of "draw polygons and stars).

When I return, I'll expect you to know the specifics of how to work and change basic shapes and lines. Anybody can grab the tool and drop a shape on the page, but there's so much more to these tools.

Give Mrs. Christopher ZERO PROBLEMS, unless you'd like a weekend essay. This could be a classwide assignment if you guys are out of control as a whole, or an individual assignment if it's confined to one or two responsible parties.

Illustrator CC Lynda Course

April 17, 2016

After Effects Project 2

Create a 'kinetic typography' animation using a phrase or sentence (or multiple phrases/sentences) including at least eight words. Your animation should showcase the following technical elements:

• keyframed animation utilizing AT LEAST THREE DIFFERENT animated properties (for example: scale, rotation, position)
• at least one element that benefits from the anchor point being offset from the actual object itself (for example, rotating around an imaginary central point)
• Manipulating 2D objects in 3D space (aka 2.5D) by enabling the 3D 'cube' in the composition for at least 2 objects.
• Shape layers, as well as type layers
• Effects of some sort from the effect panel (you can do external research about some effects if need be.
• Varied speed of animations by way of graph editor
• Use of a PNG image that allows for transparent background elements.
• A length of at least ten seconds

April 7, 2016

After Effects Mini Project 1

create a 10-second animation using at least two shapes, two text items, and at least one track matte. What it does during that 10 seconds is pretty much up to you, as long as you use those three items. They should have at least animated position changes, as well as one other aspect you keyframe and animate (such as scale, rotation, or opacity; it's up to you).

March 22, 2016

Pixel Dimensions, Aspect Ratios, Resolution Pt 1

For your reference, check out the image in the files section at the bottom of this page named 'PixDimensions VGD'. You will need to know the following:

• How do we calculate aspect ratio?
  • Divide the width by height
    • The two basic ones are 16 / 9 = about 1.78, and 4 / 3 = 1.33
    • Knowing that, you can take any other pixel dimensions and divide them the same way: 1280/720 = about 1.78, 640 x 480 = about 1.33
• The closer an aspect ratio is to 1, the more square the display will be. The farther it is, the wider/more rectangular it will be.
• Begin to memorize the exact dimensions associate with 720p and 1080p.
  • You need to eventually know off the bat that they are 16:9 aspect ratios, but for now you can at least calculate them if you forget.
• Total pixels in a display are calculated just like area: length times width.
• Understand that 4k is FOUR times the pixels of 1080p, as it is twice as wide and twice as tall... 2x2 = 4.

Also, check out this video again if need be:

March 9 - 11, 2016

Animation History and 12 Principles Assignment

Before we even get to your assignment, remember one thing.

Your substitute teacher is here for three days, and you had better be sure you do just as he/she says. Act better than you

would on any normal day, even if it's something I'm usually okay with. Put that phone away if asked. Don't be even the

least bit rude. They don't know every single rule for every class in every school in the district, so you need to make things as

easy and as simple as possible for them. DO NOT let me come back to sub notes that tell me you caused problems. Plain and

simply. Show up, do work, and don't distract your neighbors. If you have a problem with something that took place, take it

up with me when I return. But for now, be perfect for your sub.

For the 3 days that I am gone, you will need to complete the following:

1) Attempt to complete any edits remaining for your conversation videos. If you have any trouble, ask a neighbor. If you are still stuck, just wait to finish this until I get back and

move on to #2.

2) Finish watching the 12 Principles of Animation videos found here - know that you will need to be able to identify/describe these by name after the break (Hint, hint), and more importantly, for the rest of your life as an animator/game designer.

3) Check out this quick video for one more take on the principles.

4) Begin learning about the history of animation by

• Logging in to your school google account. Plain and simply, no exceptions.
• Going to this Google Doc and MAKING A COPY TO YOUR DRIVE, OTHERWISE YOU CANNOT TYPE ON THE DOCUMENT. (HOW? READ THE DOC!)

4.5) Not finished? Keep working on it over the break, especially if you haven't hit at least question 15 or so.

5) Finished that? Log in to Lynda and start watching the GETTING STARTED WITH AFTER EFFECTS CC 2015 COURSE.

Feb 08, 2016

Formatting your screenplay

Oscars.org sample screenplay

Feb 03, 2016

Shot Lists

Google Drive - Shot List Template - Right off the bat, go up to File --> Make a copy

Commercials to Shot List:

Joe Green - Coca Cola

Napoleon Dynamite Scene

Close Encounters of the Third Kind Scene

Batman (1989) Trailer

Resource for Types of Camera Shots

Download the AVST shot list at the bottom of the page, then add it to your Google Drive. Fill it out in there.

Other Resources:

• http://www.mediacollege.com/video/camera/angles/ - A large list of camera angles.
• http://www.mediacollege.com/video/shots/movement.html - A large list of camera movements.
• http://www.mediaknowall.com/camangles.html - List of shots, angles, etc. with reasons for using them
• http://www.stevestockman.com/how-to-shoot-video-that-doesnt-suck-official-book-trailer/ - video trailer for the book we will study; it contains a few great, easy tips for shooting quality video people will watch.
• http://www.thewildclassroom.com/wildfilmschool/gettingstarted/camerashots.html - A good visual for camera shots.
• http://www.youtube.com/watch?v=ZwbsYgZ7d-8&list=PLC79531D28EBF3988&index=4&feature=plpp_video - a Youtube video going through many shots, angles, and movements
• http://www.youtube.com/watch?v=tbeVSx1Gf4k&list=PLC79531D28EBF3988&index=3&feature=plpp_video - a fun video about creating big camera movements in small-scale environments
• http://www.youtube.com/watch?v=d1japIhKU9I - Only the first 3:30 is really relevant at this point, but it's a set of angle/movement/shot examples in movie format.

Submission Link - Drive Folders

January 12, 2016

Semester Exam Review

For your exam, check out the image below, and then also make sure you are aware of the following terms and their place in photoshop:

Layer Masks

Character Panel (text tool must be active)

Feathering

Refine Edge

Dodge and Burn

Blending Mode

Gradient map

Clipping Mask

Clipped Adjustment Layer

January 4, 2015

Submit your assignment (eventually here)

Photoshop Tutorials - Part ii

Photoshop Tron Grid

Dispersion Effect

Tilt-Shift ("minitaturize") a landscape photo (use a photo taken from an above-ground angle, but not a top-down angle) - Now that you actually know what's happening, you can use this version instead.

Halftone Comic Effect - we can set up and take a photo for you to use.

Turn a photo into a painting with the Mixer Brush

Creating a double exposure in photoshop

December 7, 2015

Submit your assignment (here)

Sculptris - Head Project

For this assignment, you will use what you have learned so far to create a 'bust' of a character/creature. This could include the head/shoulders, or simply the head. Your bust could be inspired by (and to be honest, I recommend it) a real world creature/photo. In the end, your sculpture should be able to demonstrate use of multiple tools. It should include eyes, ears, and separate details/ridges.

If you complete this well ahead of your counterparts, return to your viewing of Lynda's premiere pro training.

TO SUBMIT YOUR ASSIGNMENT:

On a Mac,

• use CMD+SHIFT+4 to activate the screen shotting tool.
• Then, draw a box around what you want to screenshot.
• The moment you let go of the mouse, it will create a JPEG on your desktop.
• Screenshot your work from at least 2 but up 2 6 angles, rotating it to show me the features you wish to display.
• Add these JPEGs to an evernote note, and submit as usual.

October 31, 2015

Submit your assignment HERE

Repainting with Blending Modes

NOTE: Be sure to send a 'before' JPEG with your painting layer hidden, and an 'after' with it turned on IN THE SAME NOTE.

October 26, 2015

Submit your assignment HERE

Dodging and Burning VIa Blending Modes

For this assignment, you will use your knowledge of blending modes to 'dodge' and 'burn' an image non-destructively.

• Take or aquire a photo and open it in photoshop.
• Use the new layer dialog box (hold option key and click on the new layer button) to create a new layer that uses the Overlay blending mode, and is filled with 50% gray. Name it 'dodge.'
• Duplicate this layer, and name the second copy 'burn.'
• Use the BRUSH tool to paint a lighter version of gray on the 'dodge' layer, which will increase contrast and lighten any areas you paint.
• Painting darker than 50% gray on the 'burn' layer will darken and increase contrast.
• Another example that is very similar but relies on changing the opacity of brushes may be found HERE.

October 20, 2015

Submit your assignment here

For this assignment, you will create a single photoshop document to display concept art/inspiration for assets within your game. To do this, you will utilize all you have learned so far in Photoshop.

• Create a document that is 1920x1080 pixels, 300 ppi, RGB, with a white background. Name it game assets (your name here).
• Be sure nothing exists on the background layer as you add/build your design.
• You will need to include multiple elements from multiple sources across the Web for this project; you're basically collecting images to help define the aesthetics of your game.
  • These assets don't have to be the exact representations of what you want your items to look like, but they should loosely represent the look and feel.
• This should include at least the following:
  • A larger, landscape photo to represent your game world. This must be a photograph of a real world place, and you must document WHERE that place is. Example: Victoria Harbour, Hong Kong
    • The photo doesn't have to fill the background of your design, but should be large enough to show us the details.
  • At least six, but no less than ten 'assets' that will be part of your game world. They must include at LEAST ONE OF EACH OF THE FOLLOWING:
    • A character
    • A non-weapon item
    • A building
    • An environmental asset (trees, animals, etc)
    • Clothing
• Utilize masking to 'remove' them from their source images AFTER pasting the whole image into the main document.
• Consider highlighting the objects individually by 'enclosing' them in shapes.
• Use filters to give these items a more common look.
• Use Text tools to give these items a larger, more prominent label, and a smaller sentence or two description.

October 1, 2015

Submit your assignment here

Brushes, Text, Layer Styles Practice Project

For this project, you will be creating two separate Photoshop documents: one as an example of a monochromatic color harmony, and the other an example of analogous color harmony. If you have forgotten what the color harmonies are, then you may GO HERE. The following are the specifics for the design:

• Each document should be created with dimensions of 7.5 inches by 10 inches (or 10 inches by 7.5 inches), at 300 pixels per inch resolution
• Include uses of the various dynamics of brushes (the options on the Brush Panel) to create unique shapes and designs
• Include brushes used as single stamps (clicking once), as well as to create strokes/lines
• BE SURE TO COLOR ITEMS FROM EACH BRUSH IN A DIFFERENT LAYER, AND DO NOT PAINT ON THE BACKGROUND LAYER.
• NO EXTERNAL IMAGES ARE USED IN THIS DESIGN. Your work should come from your own original creations/content.
• The text on the page should include a large title that is the name of the harmony, and then much smaller text that includes the definition of the harmony.
  • Modify at least the heading text using the various aspects of the Character panel to alter the standard appearance of the text used. Also use the layer styles (fx button at bottom of layers panel)
  • the definition text should be much simpler, standard, and quick/easy to read. It should not include any layer styles, except for possibly a soft drop shadow to help make it easier to read.

You may also incorporate your name into this design.

• Save both in the end as a both a PSD (do this first), and then also as a .JPG or .PNG. The files should be saved in a 'color harmonies' project folder within your 'photoshop' folder. Name one 'name-harmony,' where name is your last and first name without spaces, and harmony is the specific harmony that file depicts. (for instance, i would have Joshgaston-analogous and joshgaston-monochromatic

September 25, 2015

Finishing Mrs. Christopher's Assignments

The following are the links for Mrs. Christopher's Dirk and Steve Videos. You need to download the two word documents at the bottom related to 'dirk' and steve' as well.

http://www.ted.com/talks/steve_jobs_how_to_live_before_you_die

https://vimeo.com/109147447

September 22-23, 2015

Brushes Practice (2 parts; be sure to read!)

The following assignment essentially has two parts. The project will involve two daily grades, and one summative. You will proceed through a guided practice of sorts, and then move on to more of a free-roaming assignment thereafter. If at any time you need help finding an item or menu, consult the image at the bottom of this assignment. Or, you know, you could always consult a classmate.

Part 1: Learning the Brushes Panel.

• Open up Photoshop, and go to the menus at top. Click on File --> New.
• Create a document with the following settings in the boxes you see:
  • Name: (your name here) Brushes Practice - (for example, 'Joshua Gaston Brushes Practice')
  • Document Type: Custom (it will change to custom from any other options you pick as we punch in the settings below)
  • 1920 pixels wide by 1080 pixels high, 72 ppi, RGB color.
  • Background contents - white
  • Leave everything else as you see it, and hit OK.
• Now that you're in photoshop, click on the Brush Tool on the brushes Panel. You can alternatively hit the 'B' key on your keyboard and it will select it.
• Open up the Brush panel (see image below if you don't know how), and in the list of options on the left, make sure all options are unchecked. If smoothing is checked, though, that is okay.
• Select the standard Hard Round brush (the solid circle that is second in the list of brushes). If you place your mouse over a brush, it will tell you the name of it.
• Make a new, blank layer. Why? Because we always paint in a new layer.
• Set the size of your brush to about 60 pixels. Doesn't have to be exact, but close.
• Set your brush color to a bright version of a color of your choosing: red, blue, green, orange... doesn't matter.
• In the left-hand side of the brush panel, make sure that 'Brush Tip Shape' is highlighted, and that the following settings are correct:
  • Angle: 0
  • Roundness: 100%
  • Hardness: 100%
  • Spacing: 1%
• Click and hold the left mouse button, but don't move it. Hold the SHIFT key and then move it to paint a straight, solid line.
• Increase the spacing to 200%, and then paint another straight line. it is key that you press shift AFTER you first click. To be sure, your spacing will STAY AT 200% FOR THE REST OF THE ASSIGNMENT.
• Change the roundness to 60%, and then paint another straight line.
• Change the angle to 45 degrees, and then paint another straight line.
• Return your angle to 0 degrees, but leave the roundness as it is.
• Change the hardness to 50%, and paint a straight line.
  • Remember that you can change hardness on the fly by pressing ALT and the RIGHT mouse button at the same time, and then dragging up and down. Dragging left and right with these held was the way to quickly resize the brush.
• Change the hardness back to 100%. If this makes no sense to you, don't worry; i will show you when i get back.

your progress will look something along the lines of this:

• At this point, you're going to save a screenshot of your progress.
  • If you haven't already, make a Photoshop folder inside of your named folder on your Mybook (or your named folder on your desktop, depending on if you are in 1st or 8th period). You can do this within photoshop, but it might be easier to do it by simply going to your Named Folder in bFinder.
  • Now, go back into Photoshop. Go to the menus at the top and select File --> Save as.
  • When the Save As... box appears, make your way to your new Photoshop folder and the file will show the name you put in when we first made the document. Keep it.
  • From the 'Format' field beneath where you type the file name, pick 'JPEG.' Not JPEG 2000, but JPEG. Who uses JPEG 2000, anyway? This is 2013.
  • Save the file.

If at any point from here on out you have to save at the end of the period, then make sure you save where you are using a PSD (photoshop) file. BUT, when the instructions below indicate, save your work as a JPEG so I can see your progress along the way.

• Set your hardness back to 100%.
• Press Command + option + Z a few times (this is the keyboard shortcut for undoing actions in photoshop; command + z only lets you undo one step back, then redo that same step. you can also do this by going to Edit --> Step Backward) until you only have one painted line remaining on the page. If you don't like keyboard shortcuts, go to Edit --> Step Backward instead.
• In the Brush Panel, Click on 'Shape Dynamics.' Do not just click the check box, but the actual word.
• Make sure all your 'jitter' values on this page are set to 0%, except for size jitter. Set it to 30%, and paint a line.
• Set the size jitter to 100%, then paint another straight line.
  • Notice that the higher the jitter is set, the more variation in size occurs.
• Set the size jitter back to 0%.
• We will talk about the 'control' drop-downs when I return. The minimum diameter settings set a minimum size for each tip the brush paints... like a floor it can't go under. The ceiling is the max brush size.
• Raise the Angle jitter to 50%, and paint a straight line.
• Set the Angle jitter back to 0%.
• Set the Roundness Jitter to 100%, and paint a straight line.
  • Since your constant roundness was already changed on the Brush Tip Shape menu, it's already been affected. Take note of the fact that these two settings affect one another. The constant roundness is a 'starting point' for the jitter, so to speak. This is kind of like how your specific brush size is a starting point for size jitter.
• Go to File --> Save As again, and save another JPEG in your named folder titled '(your name) Shape Dynamics.'
• Do some CTRL+ALT+Z's again to remove all but your very first painted line.
• In the Brush Panel, Un-check Shape Dynamics (this quickly turns off all settings we had for the angle/size jitters), and then click on 'scattering.'
• Set your count jitter to 0%, count to 1, and Scattering to about 75%. Paint a straight line. Or try to, muahahaha!
• Set your scattering to 300%, and then paint again. Even better!
• Step backward (as in CTRL + ALT + Z) a couple of times to get rid of the scattered lines.
• Set your count to 4, leaving the scattering at 300%.
• Wow.
• Step backward again, and then paint at 90% scattering with a count of 4.
• Basically, each time the brush would have painted a single circle that was part of the dotted line, it's painting 4 (because the count is 4)... and it's scattering them at random.
• Save a JPEG of this step called 'scattering.'
• Do a few m ore CTRL +ALT+ Z's to clean up everything but that very first painted line.
• Un-check Scattering, and then click on the name 'Color Dynamics.'
  • Be sure 'APPLY PER TIP' is checked. This means every 'dot' of paint the brush paints will be affected by the options below. otherwise, the jitters and such affect every stroke/click of the mouse instead.
  • SKIP Texture and Dual Brush for now... you can mess around with it after you finish this, and I'll show you more of how it goes down later this week.
• Set all sliders to 0%
  • Note that the 'purity' slider is at 0% when it is in the middle.
• On your Tools Panel on the left-hand side of the page, set your background color (the swatch behind your color of choice) to another bright color.
• Turn foreground/background jitter up to 100%, and paint a straight line.
  • Notice how your paint includes both of your selected colors, as well as various mixes of the two.
• Turn foreground/background jitter back down to 0%.
• Turn 'hue jitter' to 30%, and paint a straight line.
  • Low hue jitter samples colors that are near your chosen color on the color wheel. When you use colors that are close to one another/touching on the color wheel, this is called an analogous color scheme
    • You need to know 'analogous' (look up or ask for the pronunciation) color scheme from this day forward. Trust me.
  • Turn hue jitter up to 100%, and any color is game.
  • Notice that the lightness/darkness of the colors are the same, as well as the saturation (how bright or dull the color appears).
• Turn hue jitter to 0%, and then saturation jitter to 30%. Paint a straight line.
  • The colors vary in richness, but are all the same color.
• Turn saturation jitter to 0%, and then Brightness jitter to 30%. Paint a straight line.
• Don't worry about the 'purity' slider. You can look it up on google and read about it, but for now it's more of a pain than anything. It can really screw up how your colors actually appear when painting, and then we'll be very confused when trying to put things back to normal.
• Save a jpeg of your screen named 'color dynamics.'

YOU SHOULD NOW HAVE FOUR JPEG IMAGES SAVED IN YOUR NAMED FOLDER, IN THE PHOTOSHOP SUBFOLDER.

• Lastly, turn on some brightness/hue jitters, size jitters, roundness jitters, etc, and then set your brush's spacing to about 45%. Paint a line.
• Cool!

The Bristle Brushes (the ones whose icons look like actual paint brushes) work with some different settings under 'brush tip shape.' We'll look at those later on.