Graphics 25: Digital Skills for Multimedia

Time Based Media - Day Two

2012-03-19T16:00:00.000-07:00

Topics

Flash symbols
frame-by-frame animation
Insert Keyframe
Insert Frame
Shape Tween
Motion Tween

Lab: Basic-Animation.zip

Symbols

Flash animations were originally developed for the web (although people have developed Flash for tv and full feature length films). Thus one thing about creating for the web is the idea of keeping file sizes small. Small files sizes are key to any Flash animation. One way Flash does this is by being a vector program. Vector files are smaller than bitmap files (usually) thus if you are looking to save on file size using vectors images as opposed to bitmap images made sense. The other way Flash saves space is by using something called symbols.

To understand what a symbol let's use an anthology. Let's say I draw a highly rendered drawing the drawing on the right. Let's say it took 3 hours to draw that image and do the inking. Let's say I show my friend and they want a copy. So I redraw a copy for him and it takes another 3 hours. Then my friend show three more friends and they each want a copy. Instead of speading 9 hours (3 peoples X 3/hr per drawing) I use a copy machine and make a quick easy copy. In this anthology a symbol is like a copy from a copy machine. It saves Flash time because instead of having to calculate every drawing separetly if it a symbol its just a symbol and therefore easier for Flash to remember and therefore takes up less file space.

To create a symbol simply drawing a vector drawing in Flash. Highlight the drawing and choose modify>convert to symbol. Give the symbol a name, make sure it set to Graphic ( as opposed to button or movieclip) and press the "OK" button.

Convert to Symbol

Frame by Frame animation is when you draw a character over and over and over and over again. Each time changing the character just a little bit. This is how traditional animation such as Disney films, Hanna Berbera cartoons, Warner Brothers cartoons were produced.

Click the link below. This person created a simply frame-by-frame of a man smoking. Changing the character slightly every drawing. Then when played back the character seems to full of "life" is appears "life-like."

frame-by-frame animation example

Insert Keyframe/Blank Keyframes/Insert Frames

Understanding Tweens

Official Adobe Tweens Explaination: Link

Official Adobe Creating Shape Tween Tutorial: Link

Official Adobe Motion Tween Tutorial: Link

Open Source Graphics Talk

2012-03-19T11:26:00.002-07:00

Hey class,

I'm giving a short demo about free open source graphic programs for the school's Linux department (although the programs work on OSX and Windows are well). I'll be covering some of the programs I'm mentioned in previous examples of "other" software that creates graphics besides Adobe products.

If you are interested in seeing some Adobe alternatives I recommend you stop by.

Rosenberg Library, room 304, 4:10-4:40

I'll be demo-ing

GIMP (alternative to Adobe Photoshop)
Inkscape (alternative to Adobe Illustrator)
Kompozer (alternative to Adobe Dreamweaver)

You can download these programs for free from my website: link

Time Based Media - Day One

2012-03-14T16:00:00.000-07:00

Time Based Media - Day One

Topics discussed today include:

difference between 2D/3D/rotoscoping/stop-motion animation
Flash drawing
shape tool
pencil tool
paintbrush tool
eraser tool
property panel

Lab: Download and watch "how a cartoon is produced." Write a half-page description of what the pipeline process is for animation.

Animation

Animation is the rapid display of a sequence of images of 2-D or 3-D artwork or model positions in order to create an illusion of movement. 2D animation use flat drawings either drawn by hand or using a computer program to create the flat images. Adobe Flash is a 2D animation tool.

3D animation is similar to 2D except creates three dimensions drawings with weight and dimension. 3D animation requires the use of a 3D animation program such as Maya, 3D Studio Max or Blender.

Adobe Flash can also be used to create simple games and applications referred to as web games/flash games or web apps.

www.kongregate.com

www.newgrounds.com

www.flashgames247.com

Flash Drawing Tools:

Paint Brush Tool

Paint Bucket/Ink Bottle

Pen Tool

Time Based Media - video lab

2012-03-12T15:00:00.001-07:00

Download and watch "How a cartoon is produced." It is a short 17 minute video about producing an episode of the tv show "Futurama." You can watch the movie via Quicktime Player, I-tunes, VLC, or Window's Media Player.

Write a short half-page response to the video describing a rough outline of the pipeline involved in producing an animated tv episode. Name the document with lastname_firstname.

Drop-in Figure Drawing

2012-03-12T11:13:00.002-07:00

A friend of mine runs the Jean-Henry School of Art. Every third Thursday of the month he hosts an open figure drawing session from 6-10pm at his campus on 2640 Ocean Ave (at 19th Ave).

There is no registration or future committement. There is a one time $15 per session that goes to paying the model. Coffee and snacks are provided as well.

I highly recommend the class for students who are looking to character development for game design, or animation as knowledge of the human anatomy and form is important.

Vector - Day Four

2012-03-05T17:04:00.004-08:00

Topics Covered

Gradient Palette
Opacity/Blend Modes
Import Images
Text Tool
Text Area Tool
Text on a Path
Character Palette
Character Styles Palette
Outline Text Option

Text Area
Official Adobe Text Area Video Tutorial: Link

Text of a Path Tool:

Official Adobe Text on a Path Video Tutorial: Link

Character Styles:

Official Adobe Character Styles Tutorial:Link

Outline Text:

Vector Section Review

2012-03-05T12:38:00.002-08:00

Vector Section Review
Assigned: March 5th
Due: March 19th

Link

Engrade

2012-03-05T08:16:00.003-08:00

Hey guys,

So, i'm trying out this new online grading system. Click the click below and setup a username and password with engrade. You'll need your student ID (not your CCSF id) which I've listed below. You can use this to check your quiz, assignment and lab grades (hopefully).

http://wikis.engrade.com/help/studentaccount

Alford, Alexa L. 01

Bright, Ryder B. 02

Chow, Sandy 03

Collyer, Ian 04

Cushman, Aiko 05

Danekas, Aviana M. 06

Danseco, Noel 07

Garver, Joshua A. 08

Gonzalez Junco, Mariela A. 09

Guerrero, Miguel A. 10

Kwan, Jessica W. 11

Lam, Calvin W. 12

Liu, Chia-Wen 13

Lopatina, Natalia A. 14

Lopez, Tiffany S. 15

Owyang, Kimberly A. 16

Pradier, Todd 17

Shalar, Natasha L 18

Sole, Madonna S. 19

Svensson, Johan 20

Taylor, Kirin J. 21

Thomas, Abigail R. 22

Volok, Veronica 23

Wong, Theresa 24

Bordon, Kimberly 25

Chan, Raymond 26

Chang, John 27

Chen, Ying Tong 28

Cheremeteff, Nicolas 29

Conlen, Caitlin 30

Dela Cruz, Emiliana 31

Friocourt, Jean-Francois F. 32

Hall, Erica L. 33

Handley, Spencer 34

Lam, Philip C. 35

Lau, Jennifer H. 36

Lei, Sally 37

Macabeo, Christel 38

Malmuth, Isaac H. 39

Mccloud, Morgan 40

Melnikov, Noleen 41

Melnikov, Sergey 42

Miller, Chloe 43

Perez, Marian T. 44

Raju, Vandhana 45

Surhoff, Donna M. 46

Velarde, Daniel M. 47

Watson, Whitney 48

Yu, Wai K. 49

Vector - Day Three

2012-02-29T16:00:00.000-08:00

Topics covered in today's class

Custom Lines
Custom Shapes
Path/Join
Scissor tool
Knife tool
Pathfinder Palette

The major subject was being able to create custom lines (straight line, curve line and spiral), and custom shapes (square, circle, polygon, star, lens flare). Creating custom shapes saves us time and gives us a starting point for complex shapes.

Official Adobe Shape/Line tool: Link

The scissor/knife tool allows us to break apart shapes and paths. While the object>path>join option allows us to connect paths and close shapes.

The Pathfinder palette allows us to easily create complex shapes by adding/subtracting and overlapping shapes.

We also briefly discussed other vector editing programs such as Inkscape, which can be downloaded for free at inkscape.org

Scissor/Knife Tool:

Path Join:

Pathfinder Palette:

Vector - Day Two

2012-02-27T15:52:00.001-08:00

Topics covered during today's class

Pen Tool
Bezier Handles
Add/Delete Anchor Point Tool
Convert Anchor Point Tool
Direct Select tool

Labs:
Pen Practice Lab (handout): link

Pen Tool:

So we've already have experience working with vector paths from the last class. The pen tool allows us to create our own custom vector shapes. It creates a shape, referred to as a path by creating anchors. Anchors are where the path of our shape goes

Use the pen tool to plot anchor point to create vector shapes.

Official Adobe Pen Tool Tutorial: Link

Direct Select Tool:

Vector: Day One

2012-02-22T16:00:00.001-08:00

Here are the topics covered

Vector graphics vs bitmap graphics
Illustrator User Interface
Select and Transform
Stroke and Fill
Color Palette

Labs:

Basic Object Editing, p.104-105

Raster/Typography Section Review:

Assigned: February 22nd

Due: March 5th

link

Vector vs Bitmap:

Rotation and Transform

Select Tool:

Stroke and Fill:

Official Adobe Stroke and Fill Video Tutorial: Link

Color Palette:

CCSF web group

2012-02-22T13:00:00.001-08:00

When: Next meeting is on Thursday, February 23 at 4:30pm
Where: The Crepe House, 1132 Valencia St (at 22nd) - across the street from the CCSF Mission Campus
Who: Anyone interested in joining a group of developers and designers who will create web sites together and learn from each other A new group of web designers of all different skill levels is forming at CCSF. Hosted by Claudia Da Silva, a teacher in the CNIT program, and launched by some students (including me) in her CNIT 132 class, we plan to join forces with web designers of all departments to create some real web sites together.

The group will serve as a platform on a couple of levels:

1) When one of us receives an opportunity to create or redesign a website, that person can submit the job to the group and all of us can enlist our individual strengths to create the site together through graphic design, coding and programming, along with all the other roles involved in website design.

2) We can bridge the divide between programmers and graphic designers, supporting each other and answering each other's questions.

Raster Labs due February 22nd

2012-02-21T12:00:00.002-08:00

Hey everyone,

just a reminder that your labs are due tomorrow in class. You'll be asked to upload a folder with your labs in it to the class server and to the Hills account.

Please be sure to label your folder "lastname_firstname."

No Class February 20th

2012-02-19T12:00:00.000-08:00

Monday February 20th is Washington's B-day, so no class guys. Enjoy your new mattress sales

typography

2012-02-15T16:00:00.000-08:00

Typography

Topics Discussed:

serif/sans serif
monospaced/proportional
tracking/kerning/leading

Suitcase Fusion

Installing Fonts
Activating/Deactivating Fonts

Labs:

Serif vs Sans-Serif handout, download link
Setting up Suitcase Fusion: p.88
Loading Fonts, (minus the last paragraph) p.91

Typography Explained in Wikipedia: Link

Typography Basics:

Type Basics:

Kerning:

Suitcase Fusion is a font management system to organize your fonts as well as activiate/deactivate fonts to make your computer run smoothly.

Additional Resources:

Download a trial version of Suitcase Fusion 3: link

Free font sites:
dafont.com
1001freefonts.com

Articles:

20 Best fonts for Print use: Link

Assignment: Creative Self-Portrait

2012-02-09T11:47:00.000-08:00

Assigned: February 8th

Due: February 15th

p. 71-74

This assignment is designed to give you an opportunity to put all your new Photoshop skills to work in building a file where you will make most of the creative decisions . The idea is to create a self- portrait using an image that you supply.

Your are not required to use a photo of yourself for this exercise: if you’d prefer, you can make your best friend, your favorite celebrity or politician, or even your pet the star of your file . Let’s get started!

Raster - Day Four

2012-02-08T16:00:00.000-08:00

Topics covered today

layers

Blend modes
Opacity
Merging layers
Groups

Adjustments

Hue/Saturation
Levels
Color Balance
Adjustment Layers

History
File Formats

Labs:

Making Tonal Corrections: p.66-67
Working With Color Balance: p.68
Exploring Hue/Saturation: p.69
Creative Color: p.70

Hue/Saturation

Color Balance

Levels

History

Raster - Day Three

2012-02-07T14:24:00.001-08:00

Topics covered yesterday

server/FTP
basic color theory
paint brush/paint bucket/gradient
eraser/background eraser/magic eraser
blend modes/layer lock/opacity

lab:

Painting in Photoshop, p. 64-65

Server: think of a server like a virtual thumbdrive. A server's job is to store files just like a thumbdrive, however instead of inserting directly into our computer, we connect to it via the internet. In class we connect to servers such as the class server by going to go > connect to server (grph.ccsf.edu).

In addition, as Graphics Communication students you get your own private server space called hills.ccsf.edu. It is private storage space that you can access via the internet using a process known as FTP.

FTP is an acroymn for File Transfer Protocol. It a system in which one computer connects to another computer.

In GRPH25 you guys have a server called hills.ccsf.edu. It a place that is private to you that you can store files. To access it you'll need a FTP application. At CCSF we use Fugu, which is a free FTP program that you can download here. There other FTP programs that will work just as well. You can find alternatives on my website at the bottom of the page.

To use an FTP program you'll need the following

IP address: The IP address is the "address" of the computer that you are connecting to. In the real world people have addresses like 123 main st. The reason for having an address is so people or business can contact you,usually with bills ;) In the same way computer have addresses, sometimes they may look like this. 172.65.140.52 or they may use words. At CCSF you server IP is hills.ccsf.edu

You'll also need a username/password for your account. The reason for the username/password is to prevent random people from uploading content to your server space. Your username/password was setup during school.

Color Theory: We discussed the colors are made up three properties: hue, saturation and brightness.

Below is a good article discussing the concept in detail

Drawing Tools in Photoshop: Photoshop can be used not just as a photo manipulation tool, but also as a drawing tool. The benefit is that you can create your own content as well as drawing original content.

Photoshop Brushes:

Photoshop Paintbucket

Photoshop Gradient

Layer Opacity/Blend Modes

College Transfer Fair - February 8th

2012-02-03T12:30:00.000-08:00

**** Official CCSF statement ****

---

Students thinking about transfer will have the opportunity to meet representatives from over 40 colleges and universities from across the country. There will be representatives from both public and private colleges.

The College Information Fair will take place on Wednesday, February 8th from 10:00am-1:00pm in MUB 140.

Don't miss out on this great opportunity! If you have any questions, please email: outreach@mail.ccsf.edu.

----

Monday February 6th - Batmale 301

2012-02-02T11:39:00.000-08:00

Hi students,

Remember that GRPH 25 will be meeting in Batmale 301, in the Mac lab on Monday February 6th.

Please be sure to bring a copy of your school id card. ID cards can be obtained for free from the registration office.

David Hurwich

Raster - Day Two

2012-02-01T16:06:00.001-08:00

Topics covered today

Selection Tools

Rectangular Marquee tool
Circular Marquee tool
Lasso
Polygonal lasso tool
Magnetic Lasso Tool
Magic Wand
Quick Selection Tool

Selection modification Tools

Inverse
Contract
Expand
Feather
Save

Labs

Exploring Manual Section Tools: p.57-58
Exploring Automatic Selection Tools p.59-60
Building a Complex Composition p.61-63

The labs for the Raster/Photoshop section will be due Monday February 20th.

Homework

Syllabus/OSX Section Review was assigned today.
It will be due February 8th.
You can download a copy here: Link

Marquee Tool

Lasso Tools

Raster Day - One

2012-01-31T09:16:00.000-08:00

Here are the topics covered today

Opening an image file
Creating a Photoshop document
Resolution
CMYK vs RGB
Resampling/up-sampling/down-sampling
Introduction to Photoshop Layers

Labs:

Prepare an Image for Print p 48 - 49

When creating a document in Photoshop there are certain factors to consider

Dimension: Define what size you want your document to be. You can use inches, millmeters, centimeters and pixels.

Resolution: Resolution means how many pixels there are per inch or per centimeter. To have good quality for your image you'll need a minimum number of pixels per inch/centimeter.
If you are working on a project that will be broadcast on a screen (such a tv, computer screen, cellphone screen) you'll need a minimum resolution of 72 ppi (pixels per inch). If you are going to print the design you'll need a minimum of 300 ppi (pixels per inch)

Color Mode: There are two main color modes. RGB and CMYK.

RGB stands for Red, Green, Blue. These are three primary colors of a screen. You should use this color mode when designing media projects for the screen (websites, tv graphics, video game graphics)

CMYK stands for Cyan, Magneta, Yellow and Black. These are the four primary colors of a printer. You should use this color mode when designing media projects that will eventually be printed. This includes posters, business cards, book covers.

RGB vs CMYK explained

Photoshop Layers explained

OSX

2012-01-26T12:35:00.000-08:00

OSX

During the class we covered topics such as

Computer hardware CPU, RAM, Hard Drive
What is an operating system?
launching an application
Using/customizing the dock
Copying/Pasting files
Using a thumbdrive
Connecting to the class server (grph.ccsf.edu)

Watch this video about computer hardware ( CPU, RAM, Hard Drive)

How to check what computer hardware and which version of the operating system you are using on a Mac computer

This is a good video that explains what an operating system is

This is a good diagram that displays how the user (you) interacts with the application, operating syste m, and hardware. For instance, let's say you (the user) hits the "b" key on your keyboard while using Microsoft Word. Microsoft Word is an application. Microsoft Word then contacts the operating system (let's say Microsoft Windows Vista). Microsoft Word (the application) tells the operating system that you have just pressed the "b" key. The operating system understands that you press the "b" key in order to write and record the letter b in a text document. Microsoft Windows Vista then tells your hardware CPU that you want to create the letter b and it the CPU (the hardware) computes it. The hardware then sends the calculation to the operating system which sends it to the application, and the application (Microsoft Word) responds by displaying the letter B in the program.

Grph25: Syllabus Day

2012-01-17T15:00:00.000-08:00

Hello, this is the official blog for David Hurwich's sections of GRPH25: Digitial Skills for Multimedia.

During the semester I will be uploading information to this site including what subjects were covered during class and general video and links that are relevant to the day's activities. I recommend using this site as a way to review what topics were taught during class as well as a useful tool if you miss class to catch up.

You should have received a syllabus in class today. If you need another copy you can download a copy here.

Remember to purchase the GRPH25 Reader which can be found at the bookstores at both the Ocean and Mission campus.

Also it is recommended that you purchase a flash drive or external hard drive for this course. You will use these to store your work and projects given throughout the semester. The cost of a Flash drive depends on the size it can hold, but you can obtain one for as little as $25 from Best Buy or any place that sells computer technology. Below are a few websites that sell flash drives/external harddrives.

Best Buy: http://www.bestbuy.com/site/olspage.jsp;jsessionid=732283634253BB40C51197D04A9256C4.bbolsp-app06-11?_dyncharset=ISO-8859-1&_dynSessConf=-731769765330717339&id=pcat17071&type=page&st=flash+drive&sc=Global&cp=1&nrp=15&sp=&qp=&list=n&iht=y&usc=All+Categories&ks=960

Nextag: http://www.nextag.com/flash-drive/shop-html?nxtg=36670a1c0516-61D96887FF03E97E

Newegg.com: http://www.newegg.com/Store/SubCategory.aspx?SubCategory=522&Tpk=flash%20drives