MMP 100 Stein Spring 25

The Media Creation Kitchen

Understanding Project Files, Source Files, and Output Files

To create the media projects for this class you will need to learn how manage a variety of files. There are files you work with in programs like Photoshop and After Effects [Project Files], files other people make like images and audio that you will use in your work [Source Files] and there are the finished output files that you will be able to show people [Output Files].

The Kitchen Metaphor

The Media Creation Kitchen metaphor helps explain the process of working with digital media files by comparing it to cooking in a kitchen. In this metaphor, there are three main components: the Kitchen (where you work), the Ingredients (what you use to create), and the Finished Dish (the final result). Here’s a breakdown:

1. The Kitchen: Project Files (Where You Do Your Work)

  • The Kitchen represents your workspace and the tools you use to prepare your creation.
  • Project Files are like your workspace in the kitchen. These files are editable and layered, giving you the flexibility to make changes throughout the creation process.
  • Examples of Project Files:
    • Photoshop (.psd) file: Editable file with layers, masks, and effects for an image.
    • Premiere Pro (.prproj) file: Timeline-based project for editing video.
    • Figma project: Interactive and editable design workspace.
  • Key Feature: Project files remain editable but are not meant to be shared directly with the end user.

2. The Ingredients: Source Files (What You Gather to Create)

  • The Ingredients are the raw materials you gather to create your dish (or project).
  • Source Files are the individual assets you use during the creation process. These might include images, fonts, audio clips, or video footage.
  • Examples of Source Files:
    • A .jpg photo taken on a camera.
    • A .wav audio clip recorded for a podcast.
    • A .mov video file shot for editing.
    • Fonts (.ttf or .otf) used in a graphic design project.
  • Key Feature: Source files are used within the project file to assemble the final product but remain independent and reusable in other projects.

3. The Food: Output or Export Files (The Finished Dish)

  • The Food is the finished dish that’s ready to eat or share with others.
  • Output Files are the final, polished versions of your project that are exported for use, distribution, or publication. These files are often optimized and flattened so they’re easier to use.
  • Examples of Output Files:
    • .mp3 or .wav exported from Audacity for use on web or as source file in video
    • .jpg or .png exported from a Photoshop project for web use.
    •  .mp4 video rendered from an After Effects project for uploading to YouTube.
    • .pdf document generated from an InDesign layout for printing.
  • Key Feature: Output files are ready for the end user but cannot easily be edited without returning to the project file.

Summary of the Process

  1. Start in the Kitchen (Project Files): Open your workspace and begin building your project using an editable format like .psd, .prproj, or Figma.
  2. Gather Ingredients (Source Files): Import the assets (images, fonts, audio, video, etc.) that you’ll use to create your project.
  3. Cook the Food (Output Files): Finalize your project and export it into a finished, flattened format like .jpg, .mp4, or .pdf that’s ready for sharing or publication.

By thinking of your workflow as a Media Creation Kitchen, you can better understand the roles of project files, source files, and output files—and how they work together to create polished, shareable results.

Media Creation Kitchen Chart

We will use the metaphor of cooking to help understand the different types of files needed to make our media projects.

MODULE“KITCHEN & EQUIPMENT” (Project Files)“INGREDIENTS” (Source Files)“FOOD: FINISHED DISH” (Output/Export Files)
Audio (Audacity)Audacity Project (.aup3)– Raw audio files (.wav, .mp3) – Recorded sounds – Sound effects– .wav (uncompressed, high-quality) – .mp3 (compressed for easy sharing)
Images (Photoshop)Photoshop (.psd)– Imported photos/scans (.jpeg, .png) – Digital illustrations – Layered assets– .jpeg (common compressed image)
Images (Illustrator)Illustrator (.ai)– Vector sketches/shapes – Imported raster images – Any placed assets (logos, icons)– .png (raster image with transparency) – .svg (scalable vector graphic)
Animation (After Effects)After Effects (.aep)– Images (.png, .jpeg) – Video clips (.mov, .mp4) – Audio files (.wav, .mp3)– .mp4 (common video format for web & sharing)
Web (HTML, CSS, JavaScript)Text Editor Codespaces, VS Code, Sublime (.html, .css, .js files)– Text content (.txt, Google Docs, Word) – Images (.png, .jpeg, .svg) – Audio/video (.mp3, .wav) – Video (.mp4 or YouTube embed) – External libraries or frameworks (like p5js)– Published website (We will use GitHub Pages to publish our web sites. This will require that your project and source files are in a GitHub Repository)

How to Use the Chart

 1.     Identify the Project File (the “kitchen & equipment”):

  • These are the editable working files where you assemble or mix your media.
  • Examples: .aup3 for Audacity, .psd for Photoshop, .ai for Illustrator, .aep for After Effects,  .html/.css/.js for the web.

2.     Gather Your Source Files (the “ingredients”):

  • These are the original or raw assets you bring into your project file.
  • Examples: photos, drawings, scanned images, video clips, audio clips, or text content.

 3.     Export/Publish the Final Output (the “finished dish”):

  • These are the deliverables or final versions you would give to a client or share or post online.
  • Examples: .mp3 or .wav (Audacity), .jpeg (Photoshop), .png or .svg (Illustrator), .mp4 (After Effects), or published .html/.css/.js files on a web server.