DTC 201

DTC 201 Tools and Methods for Digital Technology – Fall 2022

Course description:

Tools and Methods for Digital Technology is an experimental formally-drive workshop for the creation of creative and artistic work using the Adobe Creative Suite which include Adobe Illustrator, Photoshop, Premier, Audition, Dreamweaver, and After Effects. In addition to exploring computer software, the course will also venture into multimedia production tools such as image and sound recording devises.

Course work:
The course consists of four modules.

Module 1: Experiments with photography and graphics
Module 2: Moving Image and sound
Module 3: Electronic writing
Module 4: After Effects and visual metaphors

Class logistics:
In addition to class demonstrations, this course is centered around two things: 1) In-class participation and engagement with tools and technologies, and 2) weekly or bi-weekly exercises. Both will be developed and evaluated individually.

Assignments:
Module 1: Experiments with photography and graphics
Exercise 1: Gifs
Exercise 2: Stereoscopic anaglyph photos
Module 2: Moving Image and sound
Exercise 3: Found Footage
Exercise 4: Sound project
Module 3: Electronic writing
Exercise 5: Font design and manipulation of letters
Exercise 6: Hyper-textual writing
Module 4: After Effects and visual metaphors
Exercise 7: After Effects
Exercise 8: Music video

Evaluation criteria:
Grading of exercises will be based on your ability to develop projects that reflect an understanding of the techniques introduced during class demonstrations and the extent to which digital technology can be used to create media content. Participation will be assessed based on your engagement with class.

Class schedule:

Module 1 Experiments with photography and graphics

Module exercises:
-Gifs
-Stereoscopic anaglyph photos

Media art examples:
Function of Zoetrope
Micaël Reynaud - photograph-based gifs
Patakk - graphic-based gifs
Eduardo Corral - El Green project
Function of a View Master
Examples of stereoscopic anaglyph and cross-eye images

Introduction to graphics and photography editing
1.1 (8/22)
Intro to class and syllabus / class introductions
1.2 (8/24)
Intro to Photoshop. Bitmap graphics - Layers, workflow and basic tools
Cutting, separating, recombining. Digital collage work.
1.3 (8/26)
Intro to Illustrator. Vector Graphics - Layers, workflow and basic tools
Vector creation.Creating shapes, objects.
Resources:
-Juxtaposing different images using Photoshop
https://youtube.com/watch?v=TT7gF8Bx1L0&feature=share
-Working with layers in Illustrator
https://youtube.com/watch?v=vi5muq3LjO0&feature=share
-Using pen tool to create or modify elements in Illustrator
https://youtube.com/watch?v=PV94u8PbWQI&feature=share

GIFS (Graphic Interchange Format)
2.1 (8/29)
Making Gifs using graphics and photos
Introduce Exercise 1: Gifs
The function of a zoetrope, movement and illusion of movement
Examples of creative GIF work
2.2 (8/31)
Animating photographs
2.3 (9/2)
Animating graphics
Resources:
- How to make a Bitmap GIF, quick guide:
https://helpx.adobe.com/photoshop/how-to/make-animated-gif.html
- Example of how to make a graphic animation using Illustrator and Photoshop
https://youtube.com/watch?v=DQGZxVVv_Sc&feature=share

Making and editing stereoscopic anaglyph photos
3.1 (9/5)
Labor Day-No class
3.2 (9/7)
Introduce Exercise 2: Stereoscopic anaglyph photos
Introducing the principle of illusion of depth/ The function of a View Master
Introduction to the basics of anaglyph technology to photographs and graphics
Taking stereo photos
3.3 (9/9)
Editing and exporting stereoscopic anaglyph collage photos
Resources:
- Stereoscopic image making tutorial
https://youtube.com/watch?v=0YNgV4llm3Q&feature=share
- Stereoscopic anaglyph tutorial
https://www.youtube.com/watch?v=C_9_X2DrOWo

Making and editing stereoscopic anaglyph photos
4.1 (9/12)
Compiling and exporting optical stereoscopic photos
4.2 (9/14)
Editing and exporting stereoscopic anaglyph graphics
4.3 (9/16)
Working towards finishing module 1 exercises

Module 2
Moving image and sound

Module assignments:
-Found footage video
-Sound project

Media art examples:
David Borengasser - Appropriation film work
Martin Arnold - Piece Touchee
Cheryl Dunye - An Untitled Portrait
Examples of sound project

Introduction to non-linear video editing software
5.1 (9/19)
Showcase a curated selection of projects from module 1
5.2 (9/21)
Showcase a curated selection of projects from module 1
5.3 (9/23)
Intro to premier, layers, formats, exporting
Resources:
-Basic tools and workflow in Premier
https://youtube.com/watch?v=jTCxUXGM6tc&feature=share
-Setting sequence settings in Premier
https://youtube.com/watch?v=gffYUuaZp8M&feature=share

Found footage
6.1 (9/26)
Introduce exercise 3: Found footage video
Premier effects, filters, resizing frame
6.2 (9/28)
Screening of found footage film
6.3 (9/30)
Working on Found Footage

Sound project
7.1 (10/3)
Introduce exercise 4: Sound project
Introduction to Audition: multitrack recording
7.2 (10/5)
Examples of sound projects: podcasts, radio documentaries
7.3 (10/7)
Using Zoom H2n for field recording
Resources:

Field sound recording
8.1 (10/10)
Importing recordings and editing using Audition
8.2 (10/12)
Recording using external microphones. How adjust levels and monitor audio.
Wireless LAV
8.3 (10/14)
Sound editing in Audition
Resources:

Module 3
Electronic writing

Exercises
-Font design and manipulation of letters
-Hyper-textual writing

Media art examples:
Loom - Border Font
Ben Doessel and James Lee – Ugly Gerry
Susan Briante – Defacing the monument
Julio Cortazar - Hopscotch
Shelly Jackson – My Body (interactive fiction) and Skin Project
Kenneth Goldsmith – Soliloquy

Font design
9.1 (10/17)
Introduce Exercise 5: Font design and manipulation of letters
Examples of experimental font design
9.2 (10/19)
Working letters as graphics and compiling and creating font
Working on Font
9.3 (10/21)
Structuring hypertext and workflow of HTML language
Creating links and webpages
Resources:
- Font design tutorial
https://www.youtube.com/watch?v=ecra1sKSuIo
- Open tool to compile graphics to font
https://www.calligraphr.com/en/

Intro to web-design software
10.1 (10/24)
Introduce exercise 6: Hyper-textual writing
Examples from the Electronic Literature Collection
10.2 (10/26)
Creating anchor links within text (paradoxical structuring of hypertexts)
10.3 (10/28)
Choose your own adventure story
Examples of hyper-textual fiction
Hyper-textual coding and CSS style for creative writing
Resources:
- Electronic Literature Collection:
https://collection.eliterature.org/
- Style CSS resources:
https://www.youtube.com/watch?v=YNSnugnQYiI
- HTML source code and various tutorials:
https://www.w3schools.com
- HTML programming for storytelling:
https://youtube.com/watch?v=C9XiF8YbY2k&feature=share

Narrative in electronic writing
11.1 (10/31)
Working on HTML/CSS code
11.2 (11/2)
Showcase of exercise 4
11.3 (11/4)
Showcase of exercise 4

Module 4
After Effects and visual metaphors

Exercises
- After Effects
- Music video project

Showcase week
12.1 (11/7)
Working on web programming
12.2 (11/9)
Showcase a curated selection of projects from module 3
12.3 (11/11)
Veteran’s day-No class

Introducing After Effects
13.1 (11/14)
Introduce exercise 7: After Effects
Examples
13.2 (11/16)
Basic functions of motion graphics using keyframes Creating objects with different behaviours 13.3 (11/18)
Workday Resources:
2D Motion Graphics Templates
https://motionarray.com/

Final video project
14.1 (11/28)
Working with Canon rebel T6
14.2 (11/30)
Introduce exercise 8: Music video project
Examples of music videos
14.3 (12/2)
Workday
Resources:

Final video project
15.1 (12/5)
Workday
15.2 (12/7)
Workday
15.3 (12/9)
Workday

Final showcase
(12/14) Showcase of exercise 8

Exercise instructions

Exercise 1: Gifs
Combining Adobe Illustrator and Photoshop, create an original series of 5 animated gifs composed using photographs and graphics. The series should demonstrate a clear understanding of the principles of repetition, pacing and speed in looped gifs in addition to creating compelling and interesting images. Final images should be exported to GIF and submitted to canvas individually. Do no submit the Photoshop or Illustrator file (PSD or AI).

Exercise 2: Stereoscopic anaglyph photos
Using Adobe Photoshop, create an original series of 5 stereoscopic anaglyph photographs. The series should demonstrate a clear understanding of the principles of composition, depth of field, anaglyph merging viewing with red/cyan 3d glasses. Final images should be exported from photoshop to JPEG or PNG and placed in one single PDF document placing one image per page.

Exercise 3: Found Footage video
Using Adobe Premier, create a video reusing found footage obtained from YouTube or other similar sources. Combine excerpts from at least 10 different videos into a video no longer than 3 minutes. The project should demonstrate a clear understanding of appropriation cinema and its application to creative and experimental narratives. The project should be exported and compressed to QuickTime, not be longer than 3 minutes running-time, and not exceed 50 megabytes of data.

Exercise 4: Sound project
Using Adobe Audition for editing, Zoom h2n sounds recorder and lavalier microphone, create sound project that involves recording speech and soundscapes. The project should demonstrate a clear understanding of production methods of field recording and editing applied to the creation of a challenging narrative. The project should be exported and compressed to mp3, not be longer than 4 minutes running-time, and not exceed 20 megabytes of data.

Exercise 5: Font design and manipulation of letters
Using Adobe Illustrator, create an original font. The font should include all the English characters including punctuation marks. The project should demonstrate a clear understanding of formal and conceptual consistency in designing letters as well as functionality in using them on a text processor like Microsoft Word. The compiled font should be exported to TTF and submitted along with the Calligraphr PDF template.

Exercise 6: Hyper-textual writing
Using Adobe Dreamweaver, write a hypertext literary piece using a combination of HTML for structuring the architecture of the story as well as CSS for style, font type, color, and size, as well as background color. The story should have at least 10 HTML files stitched together by hyperlinks. The website should demonstrate a clear understanding of non-linear narrative in hypermedia and be a creative contribution to electronic literature. All the HTML files should be placed inside a folder and compressed to ZIP before submitting. If you are embedding JPEG or GIF files in your story, please include them in the compressed folder as well.

Exercise 7: After Effects
Using Adobe After Effects (and Photoshop if necessary), create motion graphics to support an existing video. This could take the form of an animated logo, animated text, graphics integrated with the content of the video, or a combination. For this exercise you are not required to produce an original video, you can download something from the internet to be used for the purpose of adding effects. The project should be exported and compressed to QuickTime. File should not exceed 3 minutes and no more than 50 megabytes of data.

Exercise 8: Music video project
Using Adobe Premier, create a music video that reimagines a videoclip for an existing song. Take the lyrics, the rhythm, of any other aesthetic element of the song to create a visual metaphor that responds to the song. You can use any camera you want (cellphones included) but its suggested to use Canon Rebel T6. Edit image and sound together using PR. The project should be exported and compressed to QuickTime. Final projects should not exceed 5 minutes and no more than 50 megabytes of data.