FINAL Tue Dec 9th 9-11am

today is the final!

you are required to have your site folder (httpdocs) on your thumbdrive ready to hand in to me to be put up on the web by 9:15am.

* videos from 9:30am-10am

* websites from 10ish to 11am

* knowledge and a feeling of accomplishment, forever!


ALSO check out your websites with the links to the left -->

In Class Thur Dec 4th

Work on Project!

In Class Tue Dec 2nd

Dreamweaver:

* dreamweaver is for editing and manipulating HTML.

* Imageready creates an HTML file when you use the 'Save Optimized As' command


First we need to create a site folder!
- follow me for step by step instructions

Setting up the document
--> Modify --> Page Properties
- Set up font size, color and style as well as text link attributes

Type on your "Title"

Aline your visuals on the screen

Create Links to other pages
- links to pages off your site need to start with 'http://'.
* ie....... http://www.hartwickdigital.com
- links to pages on your site are arranged in folder hierarchy
* ie........ mineself/index.html
- remember to choose 'blank' or 'self' as a Traget

In Class Tue Nov 25th

Check out the Final Projects Distructions!

using ImageReady Day 2

- File-->New then Choose a size something between 900 w & 680 h at 72 dpi
- Save your file as 'index.html' (all lower case, the internet is case sensitive)
- Optimize either JPEG or GIF
- Slice your image
- Create your roll-overs

new stuff
- Animations (GIF only)
- Output Settings
--- Background
--- Saving Files
----- 'file naming' needs to be changed (shorter file names are best)
----- change the image folder name
- Save Optimized As (remember to save the files into a folder labeled with your first initial and last name as one word, no spaces. this file should be on your desktop)


Work on Project

In Class Thur Nov 20th

The great internet
* lets look at examples


ImageReady
Set up your website:
- general sizing should be 900 pixels wide by 680 pixels tall

Optimize
- 2 up view
- Jepgs vs Gifs
--- Jpeg = Photographic quality & Small image sizes
--- Gif = Animations & Transparency

Slice
- you can only control slices you have cut out yourself

Roll-Overs
- check out the roll-over window
- there are different different roll-over states

Preview
- check out your site in a Browser

Save for Web
- put your files in a Folder
- keep your file names short

In Class Tue Nov 18th

Talkin' 'bout the great interweb!
hows it work?
* Physical
* Software
* Language
* Ideology

Who runs it?
* Ask the Ninja about Net Neutrality!











Introduction to ImageReady (Photoshops little hip web sister)


Export (Share) your Video form iMovie!

1 - as a 'Full Quality' .dv file
2 - as a 320x240, 30FPS, MPEG, .mov file

In Class Thur Nov 13th

Project 3 Crit! (no really)

The next part, Interactive media!

Import your sound
edit your audio

Export your video
- as a full quality .dv file
- as a 320x240, 30 fps quicktime video file with MPEG4 compression at full quality


Hand your .dv video file in to me, upload your .mov video file to your Youtube account (upload video)

In Class Tue Nov 11th

Edit your Video in iMovie
Import your video clips into iMovie

Edit your movie
* 'Clip Videoclip at Playhead'

Add Audio?

Put titles at the beginning and end of your video
- the title of your video in the beginning
- credits, including your name and ART213 Digital Art & Design I, Fall 08

Export your video
- as a full quality .dv file
- as a 320x240, 30 fps quicktime video file with MPEG4 compression at full quality


Hand your .dv video file in to me, upload your .mov video file to your Youtube account (upload video)

In Class Thur Nov 6th

iMovie
- importing your video
- using the time line view & clip view
- editing your video * Split Video Clip at Playhead

work on project

In Class Tue Nov 4th

Work on Project 4

.

In Class Tue Oct 28th

Critique Project 3

Stopmotion Animation examples

"Early Abstractions" (1946-57), Pt. 4 by Harry Smith













Animation in Photoshop
1) setting up the template
--- 720 x 480 pixels @ 72 dpi


Work on the Project!
- you should have an idea at this point
- storyboard you idea. think about angles and point of view
- collect your imagery in one template psd file

In Class Thur Oct 16th

Critique Project 2

look @ examples


Makin' an animation in Photoshop Example
- guides & grid
- makin' a set in the layers window

In Class Tue Oct 14th

Photoshopmotion Animation examples

- student examples
-real world examples

Makin' a Photoshopmotion Animation
1) come up with an idea
2) plot out your story
3) make a storyboard (think about point of view)
4) gather/create the images you need for your story (backgrounds, foreground objects, characters)
5) layout your template in Photoshop 720x480 @ 72 dpi
6) bring all your images from step 4 into photoshop on different layers
7) layout your first scene then start Animating
8) Move your characters and foreground/ mid-ground objects & Save for Web
9) repeat step 8 about 120 times
10) save all your images in numeric order in a folder on your desktop (naming convention a001.jpg, a002.jpg)


things to keep in mind
* FPS = frames per second
* the smaller the movement, the smoother the animation
* the higher the frame rate, the smoother the animation
* feature films are 24 fps, feature animation has traditionally been at 12-18 fps
* there is a 1" safe area around the outside edge screen



DV & DVD Digital Video
- 30 FPS
- digital
- Aspect ratios 4:3 or 16:9 (wide screen)
- screen resolution is always 72dpi
- DV codec resolution is 720 x 480 pixels for NTSC
--- when translating animation from Flash make the resolution 720 x 534

In Class Thur Oct 9th

Project 3 Due

Show me some Digital Media examples from your blogs!


Examples of manipulated images




Project 4 Assigned


Photoshop
- Layers
-- lock layers
-- modes
-- opacity
-- naming layers
-- changing layer order
-- folder

- Masks

- Adjustment layers

In Class Tue Oct 7th

Question Of the Week:
for this week i want you to find and post images that you believe are manipulated and talk about WHY.


Photoshop
Vector Tools
- Line (and other shapes) tool
- Pen Tool
- Patch Selection Tool

In Class Thur Oct 2nd

Photoshop

Color Correction
Image --> Adjustments -->

What is a vector?

Vector Tools
- Text tool
- Line (and other shapes) tool
- Pen Tool
- Patch Selection Tool

In Class Tue Sept 30th

Pet Cat Lost!

Question of the Week: What would American society be like if there was no media?


Become part of the group in Flickr


Photoshop Basics 3
- Healing brush/ Patch tool
- Clone Stamp/ Pattern Stamp
* how to make a pattern

In Class Wed Sep 25th

Project 1 Due

Project 2 Assigned

Photoshop Basics 3
*Selection tools
- circular / rectangle marque
- move tool
- magic wand
- lasso, magnetic lasso, polygonal lasso

* Clone Stamp Tool
* Patch Tool

In Class Tue Sept 23th

How does Digital Media effect your daily existence?

Photoshop Basics 2

- Preferences
- Pencil/Paint Brush
- Paint Bucket/Gradient
- Erase/Magic Erase/Back Ground Eraser
- Burn/Dodge/Sponge
- Sharpen/Blur/Smudge


Work on Project

In Class Thur Sept 18th

How Aware are you?


Photoshop Basics 2

* File Types

- Image size / Canvas size
- Preferences
- History / Undo function
- Foreground/Background Color
- Eyedropper


Printing on the Phazer 780.
- what is a laser print

In Class Tue Sept 16th

Question of the week?
Where do you see digital media used in society?
- who's using it?
- for what purpose?


Photoshop Basics 1
- Opening a file
- Save / Save As a file
- File Types
---- Photoshop = .PSD = working file, the one you keep
-- End Product Files
---- JPEG = .JPG = web and email (Flickr) file
---- GIFF = .GIF = web file
---- TIFF = .TIF = full quality print file
---- Portable Document File = .PDF = compressed print file
- Windows

In Class Thur Sep 11th

USB Thumbdrive test!

What is Digital Media?



Photoshop Basics 1
- Starting the Program / Quit
- Opening a file
- Save / Save As a file
- Windows

Art event opportunity

Visiting Artist in Residence

9.12.08-9.18.08 Ceramics Studio-ACA 122

Lecture: Tuesday 9.16.08 7pm Johnstone RM 202

Printmaker Ina Kaur will be in residence in the ceramics studio each day from 9-5 working on a collaborative project with Hartwick Assistant Professor Stephanie Rozene which explores cultural identity and hybridity. Ms. Kaur is currently faculty at Bowling Green State University in Ohio and has shown her work widely both nationally and internationally.

All are welcome!

In Class Tue Sept 9th

* Lab Fee Form

Make McCain Interesting




Lets take a quick look at Flock!

Flock ---> Preferences

Flocks Options Bar
- My World
- People
- Feeds
- Mail
- Favorite
- Accounts
- web clip board
-blog editor uploader

* make sure you put a link from your blog to your Flickr & Youtube accounts

Flickr
-- uploading an image
---- JPGS only at a Quality of 65%
---- no bigger than 1600 x 1200 pxl at 72 dpi


Assignment of Project 2


Lets talk about the Mac

What questions do you have for me?

the Dock - where most everything you need is.
the Desktop - just click on the background while in program
the Finder - to know where you are
Applications Folder - where all the software is

File ---> New Folder - to make a new folder
Finder ---> Empty Trash - to remove files from the trash forever
File ---> Get Inf0 - to find out how big a file is and other info

*remember to ALWAYS log out of your Web 2.0 accounts when you are done!


Flashdrive info
to eject your flashdrive you need to drag it to the Trash

do not use files while they are on your flashdrive. drag them off the drive onto the desktop before working with them in a program

to remove files from your flashdrive, drag and drop them into the Trash, then Finder ---> Empty Trash

In Class Thur Sept 4th

Question for next Week: What is digital media?










In class:
Class Lab Fee $75

Assignment due today! Bring in your Laptop. Have the class blog bookmarked in your browser!

Web 2.0
Lets look at web 2.0 sites
Youtube
Flickr
Blogger
Del.icio.us
Photoshop Express
Pixlr
Picjuice


Artistic uses of web 2.0 sites
Self Portrait, "Tag Self"
Digital Minimalists Painting


The BACK END of your web 2.0 site
Blogger
- Post
- Settings
- Layout

Flickr
- Home
- You
- Organize
- Contact
- Groups
- Explore

Youtube
- Account
--- Customize your Youtube Channel
- Playlists
- Favorites

First Day

Hello and Welcome to the Art213 Intro to Digital Media blog. This blog contains up-to-date information on the class, assignments & projects. There are also important links from this blog to other class resources. This blog is the hub of the class don't forget to check if frequently. I usually updated the blog within 24 hours of class.

Part of your first assignment is to bring your laptop to class and show me the bookmark to this site.


The Intro to digital media class is an overview of Print based media, Time based media and Interactive Media. These areas of media are explored through the use of Adobe Photosop 7, ImageReady 7, iMovie, & Dreamweaver MX as well as a hand full of useful shareware and web applications(YouTube, Flickr & Blogs).

We will investigate the mechanics of creating Digital Media as well as consider the roll of media within American society and it's potential to alter peoples perceptions. We will also look to define 'Digital Art' as a medium for art.

* This class has a $75 Lab fee & you will need a 1 GB thumbdrive.

In Class Thur May 15th

It is the Last Day!












work on your websites


the final is 4-6pm on tuesday the 20th

In Class Thur May 8th

Setting up the structure for your web site
- Set up a folder on the desktop labeled your last name
- inside the folder with your last name make another folder labeled 'mineself'
* remember to keep the names lowercase and make sure there are no 'spaces' in any of your names
* this folder system is your web sites structure.
- your home page must be labeled 'index.html' and will be in the folder labeled your last name
- the first page of your mineself site must be labeled 'index.html' and will be in your mineself folder

Dreamweaver
- creating and setting up a site
- page elements (setting up text, the background and text links)
- linking pages
- titles
- centering

In Class Tue May 6th

SUMMA

Take a look at Dreamweaver
- program layout
- widows and tools
- changing the background color
- putting on a title
- centering on the page

Defining a site!

In Class Thur May 1st

Collect your Images

Start creating your web site.
* pick a size smaller then 960x640, keep this size for every page of your site
* 72 dpi
* make your layout in Photoshop then open it in Imageready to optimize, slice and make roll-overs
* pay attention to the important things to remember on tuesdays blog

In Class Tue Apr 29th

Imageready
1) Optimize
- Get your images ready for the web
* JPEG = good quailty and small file size best for photographs
* GIF = need for animations & transparency, limited to 256 colors (bigger file sizes especially with animations)

2) Slices
- use the slice tool to select areas to become roll overs
- the slices will turn into a 'table' with background images when saved as HTML
- if you would like to change the optimization of a slice, choose the slice you want to change and click the optimize tab, then select the new file type for that slice

3) Animations
- an animation should be contained in one slice
- animations need to be Optimized as a GIF
- you animate by changing layers size, transparency and position
- change the rate of speed for your animation

4) Roll overs
- slices define roll over areas
- you must cut out the slice to access it as a roll over
- a roll over is made of at least 2 layers, the normal layer and the over layer (you only show one layer at a time)
* select a slice
** click on new roll over state
*** turn off the visibility of the layer for the normal state, turn on the visibility of the layer for the over state
**** click back on the normal state and continue.
- there are other states besides 'over', keep clicking on the 'new roll over state' button to se the different states
- you can make links from roll overs

4) Image maps
- used to invisibly define an area on an image
- can be used as an invisible button (you can make a link from it)
- can create circles and odd shapes (unlike slices)

5) Set your file up for the web
- the name of the PSD is the name of the slices, so kep your names short, ie... index, pg1, bio
- when you 'save optimized as' when your finished with your project Imageready will create an HTML file and a folder full of images. you need to remember to change the name of your image folder for each page you create


Things to keep in mind for the web
* always try to keep your file sizes smaller then 600 K, you can check this when optimizing
* the first page of your website MUST be named 'index.html' (your home page)
* the web can only understand numbers, letters and the '-' & '_'
* you can not have spaces in the names of your HTML files or image folders
* caps matter! the web sees the letter 'A' as being different then the letter 'a', therefor save all your file names as lower case. joe.html instead of mixed Joe.html
* remember your imageready PSD is your working file. it is the file you need if you want to make changes.

In Class Thur Apr 24th

How the web works!
- a massive network of interconnected computers
- your conection is through an ISP. (the school acts as your ISP)
- web space = hard drive realestate
- cost for web space and where to get it
--- godaddy
--- 10 best free web host
- want your own .com, but want to connect it to free web space, check out namesecure

HTML ref

Size Guide lines for websites:
- the average screen resolution is 1024x768 of this about 940x620 is useable if you want your website to fill the screen.
- web site resolution is always 72 dpi.

In Class Tue Apr 22nd

The Art213 & Art216 class Photoshopmotion Animation is up.



Lets Talk about the Web!
- what does it do?
- how does it work?
- what do you use it for?

Lookin' at Image Ready
- what can it do?
--- Optimize
--- Animations
--- Slices
--- Roll overs
--- Image maps

- whats where?
--- tools, options & other windows

- Optimize
--- always do it first!
--- pick a file type

File types
gif - animations, transparency & 256 colors or less
jpg - photo quality, small file size
png - use for getting images into flash, transparency & photo quality

Save as a PSD, this is the working file

In Class Tue Apr 17th

Your Folder(s) full of images are due today at the beginning of class!

Lets take a look at Framed.
- opening Framed
- give it a name
- set the size
- set the frame rate
- test your movie
- save your movie


Next is iMovie
- opening iMovie
- importing your video
-- clip view / timeline view
-- moving the marquee
-- 'split video clip at playhead' = editing your video
- importing audio
-- editing audio
- effects and transitions
- titles
- export "share"


* Remember you need to export a video for DVD (a DV-Stream) and for Youtube 320x240 at 30fps

In Class Tue Apr 15th

Photostopmotion Animation

You need to have all your images ready in a folder on thursday at the start of class. Today is your last day to get your images together and ready.

Ask questions, I will be checking your progress.

In Class Tue Apr 8th

Work on your photoshopmotion animation!

ASK QUESTIONS!!

In Class Thur Apr 3rd

Today I will be asking each of you about your animation and taking a look at your images.


MAke sure you read the project 4 instructions for specific details

In Class Tue Apr 1st

MAkin' an animation in Photoshop.

Quick rundown:
* Collect your characters (get the images or draw what you need)
* Separate the characters, background and other elements on different layers
* Your image size should be 720 x 480 pixels at 72 dpi.
* Your animation must be at least 20 seconds long @ 6 fps.
* Move the layers and use 'Save for Web' to save each image as a separate JPEG file

In Class Thur Mar 20th

Time Based Media
* some more examples
* lets talk about what we have seen

Framing shots, perspective and angle, different sceens/cuts, special effects, storyline, abstraction

In Class Tue Mar 18th

Project 4 Lets take a look

Some examples

Creating an Animation with Photoshop
- Layers
- Foreground / Background
- moving characters
- saving your movie

In Class Tue Mar 13th

Project 3 is Due!

You need to print your Images.

Photoshop Printing Images
- Print with Preview
- Page Setup
- Print

In Class Tue Mar 11th

Photoshop Color Correction
Image --> Adjust -->
- Levels
- Curves
- Desaturate
- Replace Color
- Invert
- Posterize


Work on Projects

In Class Thur Mar 6th

Project 2 Due!
* I will collect the Project as Full Quality Jpegs on your thumbdrive


Project 3 Assigned


Advanced Photoshop
- Cloning Stamp / Pattern Stamp
- Healing Brush / Patch Tool

In Class Tue Mar 4th

Photoshop Tools
- Text Tool
- Blur Tool
- Dodge Tool
- Shape Tools
- Path Selection Tools
- Pen tools

Layers
- Selecting and working on layers
- viewing / linking / locking
- modes / opacity
- editing Layers, Edit --> Transform
- Flattening your image (important to do before you save a JPEG)



Saving your project for Flickr and For me!
Flickr = 1024 x 768 @ 72 dpi saved as a JPEG quality 7
Joe = 1024 x 768 @ 72 dpi saved as a JPEG Quality 12 (full quality)

In Class Thur Feb 28th

Where are your Blogs?
we are making a link list today!

Photoshop Tools
-- Rectangle & Elipes Selection Tools
-- Laso, Polygon Laso & Maganitic Laso
-- Move Tool
*- Advanced Selection manipulation
---- +/- from a selection
---- selections have there own section in the file menu under 'Select'
------- Deselect, Inverse, Modify --> Smooth, Transform

You have been accepted to the Art213 Flickr group, you can now 'send an image' to the group

Work on Project

In Class Tue Feb 26th

Sign up for the art213 Flickr group!
* here's how

Photoshop Tools
-- Ian - zoom & hand tools
-- Brianna - brush & pencil
-- Danielle - eraser
-- Chelsea - paint bucket & gradient

--- Cut/Copy/Paste

What Photoshop tools not to touch
-- Slice Tool
-- History Brush Tool
-- Notes Tool / Audio Annotation Tool
** Crop Tool

In Class Thu Feb 21st

*Image Qualities

Photoshop Basics 2
- Image size / Canvas size
- Preferences
- History / Undo function
- Foreground/Background Color
- Eyedropper

In Class Tue Feb 19th

USB THUMBDRIVE TEST TODAY!

Communication:
- How do we communicate?

let try some of them out!


Using the web 2.0 sites
Youtube
-- uploading a video
-- making a Playlist
-- favorites
-- changing the pages look

Flickr
-- uploading an image
---- JPGS only at a Quality of 65%
---- no bigger than 1600 x 1200 pxl at 72 dpi
-- makning a 'set' (a folder), you are limited to 3

del.icio.us

Project 2 Assigned


Lets look at Photoshop Basics
- Starting the Program / Quit
- Opening a file
- Save / Save As a file
- File Types
---- Photoshop = .PSD = working file, the one you keep
-- End Product Files
---- JPEG = .JPG = web and email (Flickr) file
---- GIFF = .GIF = web file
---- TIFF = .TIF = full quality print file
---- Portable Document File = .PDF = compressed print file
- Windows

In Class Thur Feb 14th

RSS Feeds and Web 2.0

lets take a look:
Popurls
Go2Web2.0
TracknGraph

Remote Desktop:
myGoya
zimdesk

Search:
retrievr
SortFix
FilesTube

Bring it all together:
Bloglines

Web Apps (give us a RSS feed)
Youtube
Flickr
Blogger
del.icio.us

Lets get ourselves hooked up!
* make sure you write down your name and passwords


Digital Media Fun



what style is this video in? what conventions does it use to trick you?

In Class Tue Feb 12th

Hello and Welcome to the Art213 Intro to Digital Media blog. This blog will contain up-to-date information on the class, assignments & projects, so bookmark this site and check it frequently. There are also important links from this blog to other class resources!

Here are some digital media art pieces to get you thinking!









What was that all about? What kind of media did we see? What conventions were used? What did the creator do? Where have we seen media similar to one of these examples?


The Machine is us/ing Us

.

.

.