Class Final

The Class Final is Monday from 4-7pm

If you borrowed equipment from the lab, you need to bring it back today!


1) TA's presentations

2) Videos

3) Websites

In class Wed Dec 5th

SUMMA's

What's due!

Project 1 the blog is due by 5pm on the day of the final.


Project 4 is due by the end of the class on Wednesday. You need a .mov file labeled with your name.

Project 5 Mineself is due by the end of the class Wednesday. You need a folder named "mineself" which contains the html and image folders of your website.

Project 6 Home Page is due by the end of class Wednesday. You need a folder named your first initial/last name ex. "jvonstengel". Inside the folder should be the hompages index.html file and it's image folder as well as the 'mineself' folder. Your homepage needs to link to :

1) your blog
   - your blog should link to each of your sites below.
2) your flickr photo stream
   - your images from the CD assignment, Project 2 and Project 3 should be uploaded to flickr
3) your youtube channel
   - your video should be uploaded to your youtube channel
4) your 'mineself' website




Work on Projects


The class final is 4-7pm Monday 12/10

In class Mon Dec 3rd

How to make a homepage.
- Design a page
- make links to important information about you on the web. This could include your Tumblr, Twitter, Facebook, DeviantArt, Soundcloud, or other sites.
connect your Flickr, Blog, Youtube & Mineself sites.


What is due, when.

Project 1 the blog is due by 5pm on the day of the final.


Project 4 is due by the end of the class on Wednesday. You need a .mov file labeled with your name.

Project 5 Mineself is due by the end of the class Wednesday. You need a folder named "mineself" which contains the html and image folders of your website.

Project 6 Home Page is due by the end of class Wednesday. You need a folder named your first initial/last name ex. "jvonstengel". Inside the folder should be the hompages index.html file and it's image folder as well as the 'mineself' folder. Your homepage needs to link to :

1) your blog
   - your blog should link to each of your sites below.
2) your flickr photo stream
   - your images from the CD assignment, Project 2 and Project 3 should be uploaded to flickr
3) your youtube channel
   - your video should be uploaded to your youtube channel
4) your 'mineself' website







Work on Projects

The class final is 4-7pm Monday 12/10

In class Wed Nov 28th

Assembling your pages, Slicing and your sites structure

- Open up a new document in Photoshop, 72dpi sized 960x620 pxls or smaller

- Save the doc with, 'Save As'

- Open your images and bring them into your new document

- Layout and Design your Images

-- Rulers & Guides

- Slice your image

- 'Save for web' your doc, include both images and HTML

Introduction to Dreamweaver
-Whats Where

the Order of Dreamweaver
- Make a folder on your desktop with your name all in lowercase.
ex. - joevonstengel as my folder name

- Open Dreamweaver

- Make a new site and hook up the folder with your name to it

- Open your HTML files from Photoshop in Dreamweaver one at a time

- Change your 'Background Color'

- Change your 'Title'

- 'Center' your image

- Make your 'Links'

- Save your pages in the 'mineself' folder inside the folder with your name.

Creating Rollovers in Dreamweaver

How to get your own web space and .com

- check out namesecure for domain names

- URL Grabber (domain forwarding)

* there are a lot of places to purchase web space up on the internet.

- I use Richmond Internet Technology but a quick web search will uncover many other possibilities.

To get your files up on the web you need a FTP program

* FTP = File Transfer Protocol

- The FTP program can connect your computer to a server so you can copy your files onto the server for distribution on the web.

*For Mac I like Fetch. On the PC try CuteFTP.

Work on Project!

In class Mon Nov 26th

The Web

'Structures of Experience'

.

.

- The structure of the experience on the web is created through linking.

- How and What you link too, in What order changes the viewers experience.

* Choose your own Adventure

* Web Structures

* Love is Patient

* Sofake

* Send Me Something

* Spider

* One Bit Increment

* Freecycle

* Gapminder

Lets look at how a Web site is set up on a server

- Only Folders, JPEGS, GIFS and HTML/HTM are used on the web!

- Servers are case sensitive!

- Keep file names simple & relevant, all lower case, no spaces!

- File names can only be alpha numeric with "-" and "_"

- The first file of all web sites is labeled "index.html" all lower case

- You can seperate files on the server with folders

Assembling your pages, Slicing and your sites structure

- Open up a new document in Photoshop, 72dpi sized 960x620 pxls or smaller

- Save the doc with, 'Save As'

- Open your images and bring them into your new document

- Layout and Design your Images

-- Rulers & Guides

- Slice your image

- 'Save for web' your doc, include both images and HTML

In class mon Nov 19th

Introduction to the web

The web gives us the ability to break the bounds of 'Space.'

It also helps us control 'Time.'

The ability to control Time & Space are 2 of the main aspects of digital as an art medium.

The web is all about interaction and the Journey.

Have you ever read a "Choose Your Own Adventure" books?

Lets try it out.

Internet Lingo
the language of the Internet:

* Web2.0, The Semantic Web, Social Networking, Tags, Links, Embedded Code, RSS Feeds, Servers, Web Applications,

HTML

How does it work?

- Head & Body model

- Head contains meta data, the title, and other info

- Body contains the content

- Created through the use of tags.

(b) = open

(/b) = close

to make a word 'bold' surrond it with the  tag. ex...  Hello I'm Bold

Web page sizes
- the web is measured in Pixels

-- these 'pixels' are related to the actual amount of pixels there are across & down a screen
- the 'Resolution' of images on the web is 72dpi
- the Average MAX size of your web pages should be smaller then 960x620 pixels

Creating web pages using Photoshop

- First go in to 'Preferences' and change the units from 'inches' to 'pixels'

- The first page of all websites is call 'index'

* It is important to make sure 'index' is in lowercase because web servers are case sensitive.

- Go to: file --> new

-- name the document 'index'

-- make sure the 'Resolution' is set to 72dpi

-- choose a page size no bigger then 960x620 pxls

-- 'Color Mode' = RGB

- Save your file

- Drag & Drop images from one of your folders into Photoshop

* This is your work space. Collage, blend, cut out & interact. Make sense or chaos out of the images you found on the internet. DO NOT USE TEXT!

- Save your file

- Slice up your file

* Slices have many advantages like a faster and more dynamic load time

* You can make links from slices in Dreamweaver!

- Save for Web (and Devices)

Web File Types

JPG - RGB - Photorealistic, small file sizes

GIF - Index Color - limited to 256 color, can be animated, can have transparency

PNG - is the best of both worlds but currently PNG files can only be used in Flash

Project 5 Assigned

Work on Projects!

In class Wed Nov 14th

Introduction to the Web

Introduction to the Internet
.

..

.


Internet (Framework for Interconnections)
- Peer to Peer
- Ftp
- Instant Messaging
- Emil
- Online Gaming
- World Wide Web
-Websites
--- Flash
--- HTML
-- Web 3.0 = 'interpersonal computing', 'web services' and 'software as a service' (SaaS) as the three key aspects of Web 2.0. they appear on the web as:
--- Blogs (Personal Broadcasting)
--- Flickr, Picasa, Photobucket (Image Storage & Presentation)
--- Picknik, Sumopaint, PicJuice (Image editing)
--- Youtube, Hulu, Sidereel (video)
--- Podcasting, Pandora, Musicovery, Amie Street (music/audio)
--- Internet Archive, CCMixter (Creative Commons Licensed Media Content)
--- Facebook, Myspace, Friendster, Linkedin, Twitter (Social Networking)
--- Delicious (links)
--- Bloglines (RSS Feeds)
--- Digg, Stumble, Technorati, PopUrls (Aggregators)



How Does the web work?



Net Neutrality
.

.
.

.

Work on Project 4

.

In class mon Nov 11th

Your folder full of images is due today!


Make Video clips from your folder full of images.
(see directions in previous post)


Use Final Cut to edit your animation. add audio and transitions

(see directions in previous post)

Your video needs the following titles:
- Your Name
- Name of the Animation
- Semester
- Art 213 DA&D II
- Hartwick College



Work on Project Ask Questions.

In Class Wed Nov 7th

Once your images are saved from Photoshop into a folder they need to be processed into a video. Use QuickTime Player 7 or Framed to do this.

Making an Animation

Assembling your Folders full of images into Video


Check out Quicktime Pro 7
- Open Image Sequence
--> pick your frame rate try between 6 and 12.

- Export
--> choose Quicktime Movie

-- Options
---> Size HD1920 x 1080 (or 1280 x 720 16:9)
--- Choose 'perserve aspect ratio' - letterbox
---> Settings
-- H.264
-- Frame Rate 'current'
-- Key Frames 'auto'
-- Quality - set to the highest
-- Encode ' Best Multi pass'
-- Data Rate 'Auto'

- Choose the Desktop
- Click 'Save'

Now that you have your video file you need to edit it in a video editor. You can use Final Cut Express or iMovie to do this.

Make a folder on your desktop and name it with your name and drop your video file and audio files in it.

Final Cut Express

Make a file on your Desktop labeled: your name_final_cut

Open a file and save it

- Close old projects

- file --> new Project

- file --> save Project (put it in the folder with your name on the desktop)

Import your media

- file --> import --> files (locate your video file and audio files)

Manipulate your media on the timeline

- drag and drop your video file on the timeline in the "V" section

- drag and drop your audio files on the timeline in the "A" section

* note you can use the "arrow" tool in the toolbar to move the video or audio tracks

- If you see a red bar at the top of the timeline you need to render. use 'command+R' to do this

Edit the film and audio

- use the "blade" tool in the toolbar - 'B' is the Hotkey

- click on the track you wish to cut to select it.

- place the marquee where you want to cut the movie and click the mouse.

-- the timeline will now be in two pieces

-- you can delete part of a track by selecting it and clicking "delete"

-- get to the selection tool by pressing the "A" key

* Don't forget to hit SAVE a few times during the process.

Export your video

- When your video and audio are ready goto file --> export

- choose the QuickTime option and save it full size and 'self contained'

- export it to the desktop, this is your final video.

- Make sure your name is on the file. This one is the full size and goes to Joe

-Use iMovie for titles and fades

Open a file and save it

- Close old projects

- file -->new Project

* choose the 16x9 aspect ratio

- file --> save Project (put it in the folder with your name on the desktop)

- file -->import movie

- create a "new event" labeled with your name

- make sure the optimize check box is checked

- make sure 'copy files' is checked

* you can make titles and transitions

Titles

- You should have the name of your video at the beginning of your video

- You need to have the following info at the end of your video:

* your name

* the name of the person or place you got your audio from

* Art 213 Fall 2012

* Hartwick College

Export the Movie as large as you can.

- this video you will put up on youtube.

Work on Project 4

in Class Mon Nov 5th

MUTO

Making an animation in Photoshop
- Move layers / change content
- Save for Web and Devices
- Number images yourname-001, yourname-002, ect..

* You can save different scenes from your animation in different folders if you want.

How to turn your folder full of images into a video.
- Quicktime Pro is best to use because of the HD size

- "Import Image Sequence"

- Frames Per Second - FPS

Video Formats
- contain both a video and audio trac
- not all codex's are cross platform
- NTSC & PAL

Finding legal content
- CCmixter
- Archive.org

*What is Creative Commons

- cc
- check out Flickr



Work on Project 4

Digital Lab Open Hours

Digital Arts Lab Open Hours
Fall 2012

Mon
10am - 12 noon Lauren
11:30am - 1:45pm Luke
1:45pm - 5pm Class   
5pm - 7pm Joe

Tue
9am - 12 noon Class
2pm - 4pm Lauren
5pm - 8pm Class

Wed
12:30pm - 1:45pm Kiera
1:45pm - 5pm Class
5:30pm -7:30pm Class

Thur
9am - 12 noon Class
2pm - 3pm Luke
3pm - 5pm Lauren
5pm - 8pm Class

Fri
10am - 12 noon Joe
12:30pm - 3:30pm Kiera
3:30pm - 6:30pm Alexis

Sat
10am - 1pm Alexis
1pm - 2:45pm Luke

Sun
10am - 1pm Luke
1pm - 5pm  Kiera

In class Mon Oct 29th

Critique Project 3



Work on Project 4

In class wed Oct 24th

Share the story line for your Photoshop-motion animation with the class.

Scenes, Cuts & Point of View - how to turn your story into an animation
- create a comic of your story


Work on Project 4


Project 4 -Your folder full of images are due Next Wed Oct 31st

In class wed Oct 17th

Camera Angels & Point of View

.

.

.

.

Walk through of Project 4

Step 1 Come up with a story. Beginning - Middle - End

Step 2 Collect images to be used as your characters and backgrounds

Step 3 Create a new document sized 1920 pixels wide by 1080 pixels tall in Photoshop.

Step 4 Save the file with your name on the desktop.

Step 5 Create a folder on the desktop called your P4-your-name

Step 6 Animate

-> Move -> Save for Web -> Move - > Save for Web

* Save your files in your folder on the desktop. Make sure to name each saved file in number order. EX. A001.jpg, A002.jpg, A003.jpg

Work on Project 4!

In Class Mon Oct 15th

Project 3 is due at the beginning of class.

Hand in your jpeg image labeled with your name on you USB thumb drive.

* You need to get your image printed by next Wednesday for the critique (the first class after break)

Photoshop Advanced

Printing in Photoshop

- Page Set up

- Print (with preview)

- Fit to page and Actual size

Finishing up project 3

1) Create a new page in photoshop that's 8x10" at 240 dpi

2) Using the move tool, transfer your re-mixed image to the new document.

3) Center the image

4) Flatten the image.

5) Save the image as a Jpeg and a PDF for printing. 

Where to print

- your own printer

- Walgreens

- up in Clark

- at Office Max

Stop motion Animation - images through time

- FPS (frames per second) or frame rate is the number of images that are shown in a seconds worth of time.

Traditional film = 24 FPS

Traditional animation = 12 FPS

Digital film = 30 - 60 FPS

Modern animation = 12 - 30 FPS

Which means 1 minute of 

Film = 1440 still images

Animation = 720 still imagesv

Digital = 1800 - 3600 still images

Story Dice


Project 4 Assigned

Project 4

Walk through of Project 4

Step 1 Come up with a story. Beginning - Middle - End

Step 2 Collect images to be used as your characters and backgrounds

Step 3 Create a new document sized 1920 pixels wide by 1080 pixels tall in Photoshop.

Step 4 Save the file with your name on the desktop.

Step 5 Create a folder on the desktop called your P4-your-name

Step 6 Animate

-> Move -> Save for Web -> Move - > Save for Web

* Save your files in your folder on the desktop. Make sure to name each saved file in number order. EX. A001.jpg, A002.jpg, A003.jpg

In class Wed Oct 10th

* EMAIL ME YOU BLOGS ADDRESS*

Time based Media

John Whitney's

John Whitney created his amazing visuals through the manipulation of his analog computer/film camera device. He built the device by using the pieces from a WWII anti-aircraft gun sight. One of his most famous works created on his device was the animated title sequence from Alfred Hitchcock's 1958 film Vertigo, which he collaborated on with the graphic designer Saul Bass.

.

.

.

Project 3 on Monday at the Beginning of Class

Digital Arts Lab Hours

Mon

10am - 12 noon Lauren 2 hr

11:30am - 1:45pm Luke 2.25 hr

1:45pm - 5pm Class

5pm - 7pm Joe 2 hr

Tue

9am - 12 noon Class

2pm - 4pm Lauren 2 hr

5pm - 8pm Class

Wed

12:30pm - 1:45pm Kiera 1.25 hr

1:45pm - 5pm Class

5:30pm -7:30pm Class

Thur

9am - 12 noon Class

2pm - 3pm Luke 1 hr

3pm - 5pm Lauren 2 hr

5pm - 8pm Class

Fri

10am - 12 noon Joe 2 hr 

12:30pm - 3:30pm Kiera 3 hr

3:30pm - 6:30pm Alexis 3 hr

Sat

10am - 1pm Alexis 3 hrs

1pm - 2:45pm Luke 1.75 hrs

Sun

10am - 1pm Luke 3 Hrs

1pm - 5pm  Kiera 3 hrs

In class Mon Oct 8th

Stopmotion Animation & Photoshopmotion Animation

.

.

.

.

.

.

Work on Project 3

Project 3 due OCT 15th at the beginning of class

In class Wed Oct 3rd

Critique Project 2


Ask Questions about Project 3


Work on Project 3

In class Mon Oct 1st

Hand in Project 2

What you need to do:
- have your 3 individual images saved as JPEG's and PSD's
- consolidate your 3 images onto one image and saved as a JPEG
- all of your files should be labeled with your First name, Last name and a number ie. JoeVonStengel-1.jpg
- save your JPEG images on your thumbdrive to hand in to me



Review Project 3

How to successfully accomplish Project 3!

1) find images that are at least 1200 pixels on the shortest side

2) look for images that have people/things in similar positions

3) look for images with a light source that comes from the same side.

4) look for images that are similar in tone

5) duplicate important layers when necessary

6) save often

* Be considerate of who the celebrities are that you are choosing. What is their new identity when they are "mashed up".

Advanced Photoshop

Photoshop top options bar

- Bridge

- View Extras

- Zoom Percent

- Quick Hand Tool

- Quick Zoom Tool

- Rotate View Tool

- Arrange Documents

- Zoom Tool

Color Picker

- Switch Colors

Quick Mask

- single click - paint what you want to select/mask

-- Black draws / White erases

- double click - Quick Mask Options

In class Wed Sept 26th

.

Vector Tools
- Shape Tool
- Type Tool

Looking at Project 3

Tips for Accomplishing Project 3

1) find images that are at least 1200 pixels on the shortest side

2) look for images that have people/things in similar positions

3) look for images with a light source that comes from the same side.

4) look for images that are similar in tone

5) duplicate important layers when necessary

6) save often

* Be considerate of who the celebrities are that you are choosing. What is their new identity when they are "mashed up".

Work on Project 2

Project 2 is due at the beginning of class next Monday!

In class Mon Sept 24th

Photoshop Advanced

- Preferences

- History / Undo function

- Crop

- Advanced Selection tools

-- 'Feathering' a selection

-- Adding to (shift) and Subtracting from (option) a Selection

- 'Select' options in the Menu Bar

-- Select All (command + A)

-- Deselect (command + d)

-- Inverse (shift + command + I)

-- 'Transforming' a selection

-- Load & Save a Selection

Layers

- Resize

- Linking layers

- Merge layers

- Flatten Image

Image Adjustments

- Color Adjustments

-- Histogram

-- Levels

- Color Correction

- Color Space

RGB = Red Green Blue

CMYK = Cyan Magenta Yellow Black

Work on Project Due next Monday at the beginning of class!

In class Wed Sept 19th

Image Qualities & Aesthetics connected to changes in technology

.

.

Flickr

- where is it

- what is it

- Uploading

- Sets

- Groups

CD Covers Assignment 1

Photoshop Advanced Tools

- Burn/Dodge/Sponge

- Sharpen/Blur/Smudge

- selection tools

- Layers

- clone stamp / pattern stamp

- healing brush / patch tool

Work on Project 2

Flash Drive Test!

.

.

Flickr
- where is it
- what is it

- Uploading
- Sets
- Groups

Project 2 Assigned

Photoshop Basics

- Starting the Program / Quit

- Opening a file

- Save / Save As a file

- Windows

- File --> New

- Pencil/Paint Brush

- Paint Bucket/Gradient

- Erase/Magic Erase/Back Ground Eraser

- Burn/Dodge/Sponge

- Sharpen/Blur/Smudge

Selection Tools (lets check them out)

Take a half hour to finish the CD assignment.

Save your files as Jpgs with a quality of 9

Label your files as follows: your first name last name - #.jpg - ie.. JoeVonstengel-1.jpg

Hand your 4 files in on your USB thumbdrive.

Review the assignment!

Work on Project

In class Wed Sept2th

*Flash Drive Test on Monday!

Example: Worth 1000

Photoshop Basics 1

- Starting the Program / Quit

- Opening a file

- Save / Save As a file

- Windows

- File --> New

* File Types

- File Types

---- Photoshop = .PSD = working file, the one you keep forever

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

in class Assignment: Dada CD cover

1 - Go to "wikipedia." Hit “random... ”

or click http://en.wikipedia.org/wiki/Special:Random

The first random wikipedia article you get is the name of your band.

2 - Go to "Random quotations"

or click http://www.quotationspage.com/random.php3

The last four or five words of the very last quote of the page is the title of your first album.

3 - Go to flickr and click on “explore the last seven days”

or click http://www.flickr.com/explore/interesting/7days

Third picture, no matter what it is, will be your album cover.

4 - Use Photoshop to put it all together.

5 - Create 5 different Album Covers

6- Hand them in to Joe

Work on Assignment