Ume Crest Gray New Media tutorials

Search:

New Media faculty and students offer these free tutorials as part of their Just-In-Time Learning Initiative.

Click on a tag or search for a subject that interests you.

Nmw Logo Facebook TabSponsored by the New Media Department Correll Fund

No matching content for that tag combination
Class NetiquetteClass netiquette
Beginner
email, communication, education, movie, data, digital hygiene, web
How basic "netiquette"--etiquette for the Internet age--can help make classes with digital components go smoother, both online and offline.
None.
Class Netiquette
Interactive tutorial by Jon Ippolito, v1.0
Make a screencastMake a screencast
Beginner
education, tutorial, screencast, video, QuickTime, Screenflow, audio
Learn how to plan and record a concise, clear video tutorial. Includes how to overcome common pitfalls from a cluttered screen to illegible details to distracting background noise.
OS X, embedded or external camera
Make a screencast
Interactive tutorial by Jon Ippolito, v1.0
Select Shapes in IllustratorSelect Shapes in Illustrator
Beginner
design, software, Adobe, Illustrator, visual, 2d
Learn how to select shapes in Adobe Illustrator using the Selection, Direct Selection, Lasso, and Magic Wand tools.
Adobe Illustrator CC
Interactive tutorial by Ashley Duggan, v1.0
Select Shapes in Illustrator
Create Shapes in IllustratorCreate Shapes in Illustrator
Beginner
design, software, Adobe, Illustrator, visual, 2d
Learn how to create shapes in Adobe Illustrator using the rectangle, ellipse, and polygon tools and color and rotate them.
Adobe Illustrator CC
Interactive tutorial by Ashley Duggan, v1.0
Create Shapes in Illustrator
Warp Shapes in IllustratorWarp Shapes in Illustrator
Intermediate
design, software, Adobe, Illustrator, visual, 2d
Learn how to adjust shapes in Adobe Illustrator, including the Warp, Twirl, Twist, Pucker, Bloat, Scallop, Crystallize, and Wrinkle tools.
Adobe Illustrator CC
Interactive tutorial by Ashley Duggan, v1.0
Warp Shapes in Illustrator
Manage Color in IllustratorManage Color in Illustrator
Beginner
design, software, Adobe, Illustrator, color, visual, 2d
Learn how to add and organize color swatches and groups in Adobe Illustrator.
Adobe Illustrator CC
Interactive tutorial by Ashley Duggan, v1.0
Manage Color in Illustrator
Apply Strokes and Fills in IllustratorApply Strokes and Fills in Illustrator
Beginner
design, software, Adobe, Illustrator, color, visual, 2d
Learn how to change the appearance of the edges and interiors of shapes in Adobe Illustrator.
Adobe Illustrator CC
Interactive tutorial by Ashley Duggan, v1.0
Apply Strokes and Fills in Illustrator
Apply a Gradient in IllustratorApply a Gradient in Illustrator
Intermediate
design, software, Adobe, Illustrator, color, visual, 2d
Learn how to apply a gradient to create smooth color transitions in Adobe Illustrator.
Adobe Illustrator CC
Interactive tutorial by Ashley Duggan, v1.0
Apply a Gradient in Illustrator
Anatomy of a Web page: HTMLAnatomy of a Web page: HTML
Beginner
HTML, Web, software, programming
Through a bodily metaphor, understand the structure of HTML as the "skeleton" of a Web page.
None
Anatomy of a Web page: HTML
Interactive tutorial by Bethany Warnock and Kevin Hunt, v1.0
Anatomy of a Web page: CSSAnatomy of a Web page: CSS
Beginner
CSS, Web, software, programming
Through a bodily metaphor, understand the structure of CSS as the "clothes" of a Web page.
None
Anatomy of a Web page: CSS
Interactive tutorial by Bethany Warnock and Kevin Hunt, v1.0
Anatomy of a Web Page: JavaScriptAnatomy of a Web page: JavaScript
Beginner
JavaScript, Web, programming, software, HTML
A bodily metaphor introducing JavaScript as the muscle of a Web page.
Code editor, Web browser
Anatomy of a Web Page: JavaScript
Interactive tutorial by Jon Ippolito, v1.0
Anatomy of a Web page: JavaScript, part 2Anatomy of a Web page: JavaScript 2
Beginner
JavaScript, Web, programming, software, HTML, CSS, interaction
Following the bodily metaphor developed in Part 1 of this tutorial, badge recipients must learn how to identify objects, change their style, and add them to a container.
Code editor, Web browser
Anatomy of a Web page: JavaScript, part 2
Interactive tutorial by Jon Ippolito, v1.0
Prepare Web projectPrepare for Web projects
Beginner
network, server, Apple, OS X, software, Web
Showing file extensions, choosing a code editor, saving in plain text, choosing an FTP client.
OS X, Web host
How To Prepare Screenshot
Interactive tutorial by Jon Ippolito, v1.0
choose_web_namesChoose names for Web projects
Beginner
software, project management, Web, programming
Case sensitivity, best practices, file extensions, embarrassing domain names.
None.
choose_web_names Screenshot
Interactive tutorial by Jon Ippolito, v1.0.
Write basic CSSWrite basic CSS
Beginner
CSS, visual, design, software, Web, programming
Learn how to write basic CSS style rules for a Web page, including font, color, and box properties.
Write basic CSS
Interactive tutorial by Jon Ippolito, v1.0
Use images in CSSUse images in CSS
Intermediate
CSS, visual, design, software, Web, programming
CSS background image syntax and common pitfalls.
Use images in CSS
Interactive tutorial by Jon Ippolito, v1.0
Layout Web page with CSSLayout Web page with CSS
Intermediate
CSS, visual, design, software, Web, programming
Learn how to layout Web pages with CSS, including absolute, relative, and flex layouts.
Use images in CSS
Interactive tutorial by Jon Ippolito, v1.0
Import Web fontImport Web font
Advanced
CSS, visual, design, software, Web, programming
Learn how to import custom typefaces into a Web page to make your design more distinctive.
Import Web font
Interactive tutorial by Jon Ippolito, v1.0
CSS Box Model 1CSS Box Model 1
Intermediate
css, design, Web, network, software
Learn how to position a block HTML element with Cascading Style Sheets
Code editor, browser
Interactive tutorial by Jon Ippolito, v1.0
CSS Box Model 1
Learn how to avoid common pitfalls in block level Web designCSS Box Model 2
Intermediate
css, design, Web, network, software
Learn how to deal with such CSS hurdles as invisible divs, mystery positions, collapsing margins, confusing units, and expanding widths.
Code editor, browser
Interactive tutorial by Jon Ippolito, v1.0
Learn how to avoid common pitfalls in block level Web design
Limit your color palette imagesLimit your color palette: images
Intermediate
design, Web, design, network, software, visual, HTML
Learn how to choose colors from a limited palette by keying your design off the dominant colors of images.
Image editor (such as Photoshop)
Limit Color Palette images Screenshot
Limit your color palette CSSLimit your color palette: CSS
Intermediate
design, Web, design, network, software, CSS, HTML, visual
Learn how to use the HSL color space in CSS to limit your palette and create coherent color designs for the Web.
"Write basic CSS" badge
Limit Color Palette CSS Screenshot
Avoid boxy Web design with CSSAvoid boxy Web design with CSS
Advanced
CSS, visual, design, software, Web, programming
Learn how to avoid boxy Web design with transparency, rounded corners, watermarks, and other CSS techniques.
Code editor, Web browser
Avoid boxy Web design with CSS
Interactive tutorial by Jon Ippolito, v1.0
How to script a Web page using JavaScriptScript a Web page
Intermediate
network, software, programming, JavaScript, cross-platform, Web
Examine in depth how JavaScript can proliferate a single image across a Web page, with an eye toward writing a script that can be applied in other platforms such as games and image editors. This tutorial is the first in a series on Cross-platform JavaScript.
Code editor, Web browser
How to script a Web page using JavaScript
Interactive tutorial by Jon Ippolito, v1.0
How to script a Web page using JavaScriptScript an iBook
Beginner
network, software, programming, JavaScript, cross-platform, ebook, interaction, widget
Learn how to make an interactive iBook widget with JavaScript as part of a series on cross-platform JavaScript.
Code editor, OS X, iBooks Author
How to script a Web page using JavaScript
Interactive tutorial by Jon Ippolito, v1.0
Script PhotoshopScript Photoshop
Intermediate
Adobe, design, art, Photoshop, JavaScript, programming, cross-platform
Learn how to automate Photoshop and the parallels between HTML and Adobe applications. Amy Pierce adds custom lens effects to a photograph in this Cross-platform JavaScript tutorial.
Photoshop, Code editor or Adobe ExtendScript
Script Photoshop
Interactive tutorial by Amy Pierce, v1.0
Script a GameScript a game
Intermediate
JavaScript, HTML, CSS, game, cross-platform, programming
Learn how to create a simple HTML game based on clicking on a swarm of game sprites with JavaScript. This tutorial is part of the Cross-platform JavaScript series.
Code editor, Web browser
Script a Game
Interactive tutorial by Jon Ippolito, v1.0
Script MinecraftScript Minecraft
Beginner
game, JavaScript, ScriptCraft, cross-platform, software, modding, programming
Learn how to install ScriptCraft, which enables you to manipulate Minecraft with JavaScript to automate building, enable special powers, and create minigames. This is part of a series on cross-platform JavaScript.
OS X (best), Minecraft login
Script Minecraft
Interactive tutorial by Jon Ippolito, v1.0
Script MinecraftScript Minecraft 2
Intermediate
game, JavaScript, ScriptCraft, cross-platform, software, modding, programming
Learn how to create blocks in Minecraft using ScriptCraft, a JavaScript library that lets you build structures with code.
OS X (best), Minecraft login
Script Minecraft
Interactive tutorial by Jon Ippolito, v1.0
Script MinecraftScript Minecraft 3
Advanced
game, JavaScript, ScriptCraft, cross-platform, software, modding, programming
Learn how to use external JavaScript files with for loops to mod Minecraft. This is part of a series on cross-platform JavaScript.
OS X (best), Minecraft login
Script Minecraft
Interactive tutorial by Jon Ippolito, v1.0
Refresh content with AJaXRefresh content with AJaX
Advanced
JavaScript, network, server, programming, software
Learn how to add new information to an HTML document from a server without reloading the Web page.
Code editor, Web host
Interactive tutorial by Jon Ippolito, v1.0
Refresh content with AJaX
JavaScript objects 1JavaScript objects 1
Advanced
network, JavaScript, programming, software, HTML
Learn how to use JavaScript objects to spawn HTML elements when users interact with your Web page.
Code editor
Interactive tutorial by Jon Ippolito, v1.0
JavaScript objects 1
Use images in CSSPackage Control in Sublime Text
Beginner
software, Web, programming, Sublime Text, HTML, CSS, JavaScript, Objective-C, Java, Python, Ruby, PHP
How to install the Package Control option for the Sublime Text code editor, which allows you to easily add plugins like Emmett that facilitate writing HTML and other kinds of code.
None
Use images in CSS
Interactive tutorial by Jeff Dreher, v1.0
The Viral Metaphor for Social MediaThe viral metaphor for social media
Beginner
social media, Facebook, Twitter, YouTube, biology, promotion, activism, blog
The parallels between biological and media viruses, from payload to Patient Zero.
None.
The Viral Metaphor for Social Media
Interactive tutorial by Jon Ippolito, v1.0
Make a Simple BudgetMake a simple budget
Beginner
finance, project management, economics
Choosing spreadsheet software, formatting your figures, and otherwise crafting a well structured budget.
None.
Make a Simple Budget
Interactive tutorial by Jon Ippolito, v1.0
Make a Project Timeline 1Make a project timeline 1
Beginner
project management
Learn how to create a sophisticated project timeline, or Gantt chart, using the open-source Ganttproject software.
None
Make a Project Timeline 1
Interactive tutorial by Jon Ippolito, v1.0
Make a Project Timeline 1Make a project timeline 2
Intermediate
project management
Learn the difference between a good and bad Gantt chart, and how such timelines can help you structure a project as well as spot doomed versus promising projects.
Make a Project Timeline 1
Interactive tutorial by Jon Ippolito, v1.0
Find Shareable MediaFind shareable media
Beginner
Creative Commons, law, visual, audio, movie, Web, design, metadata
Learn how to locate images and other content online that are free to use, how to give proper credit, and how to indicate legal use.
Web host
Find Shareable Media
Interactive tutorial by Jon Ippolito, v1.0
Make your media shareableMake your media shareable
Intermediate
Creative Commons, law, visual, audio, movie, Web, sharing, metadata
Learn how to make it easy for others to share and/or re-use your media. You'll learn how to add a Creative Commons license to your Web page that search engines can find automatically.
A media file, Web host
Make your media shareable
Interactive tutorial by Jon Ippolito, v1.0
Why to keep source mediaWhy to keep source media
Advanced
visual, audio, movie, Web, software, sharing, remix, metadata, digital curation, preservation, Photoshop, Illustrator, Flash, game, Garageband, text
Learn why and how to save the source media for audiovisual projects. From animation to games, from audio to 3D files, source files are essential for migrating or remixing creative works.
None
Why to keep source media
Interactive tutorial by Jon Ippolito, v1.0
Design approachesDesign approaches
Beginner
design, project management, visual
Learn a variety of ways to design an approach to a project, from partis to diagrams to renderings and simulations.
Image editor (such as Illustrator, Photoshop, or Omnigraffle)
Interactive tutorial by Jon Ippolito, v1.0
Design approaches
Visualize DataVisualize data
Beginner
digital curation, data, visual, digital humanities, aggregation, chart, Google, network, history, politics, science, mathematics
How to visualize data in charts and tag clouds, using tools such as spreadsheet applications, Wordle, Many Eyes, Tagline, and ThoughtMesh.
None.
Visualize Data
Interactive tutorial by Jon Ippolito, v1.0
Put a collection online with OmekaPut a collection online with Omeka
Intermediate
curation, museum, archive, visual, exhibition, metadata, software
Create an online exhibition with the open-source Omeka platform.
A collection of media, such as images of paintings or audio files of folk songs.
Put a collection online with Omeka
Interactive tutorial by Jon Ippolito, v1.0
Diagnose Dead MediaDiagnose dead media
Beginner
preservation, digital curation, software, hardware, history, defect
Learn how a seemingly archival medium can be vulnerable to obsolescence on many levels.
None.
Diagnose Dead Media
Interactive tutorial by Jon Ippolito, v1.0
Four Preservation StrategiesFour preservation strategies
Beginner
preservation, storage, migration, emulation, reinterpretation, curation
Learn four preservation strategies--storage, migration, emulation, and reinterpretation.
None
Four Preservation Strategies
Interactive tutorial by Jon Ippolito, v1.0
History of StorageHistory of storage
Beginner
preservation, storage, digital curation, hardware, software, wetware, history
An overview of the history and technology of digital storage, from floppy disks to DNA. The lecture also covers several techniques for making storage more reliable, from external backups to RAID to cloud storage.
None.
History of Storage
Interactive tutorial by Jon Ippolito, v1.0
Three Types of EmulationThree types of emulation
Beginner
preservation, emulation, digital curation, software, hardware
Learn three types of emulation that are useful as a preservation strategy, including hardware-for-hardware, software-for-software, and software-for-hardware.
None
Three Types of Emulation
Interactive tutorial by Jon Ippolito, v1.0
Generation EmulationGeneration emulation
Intermediate
preservation, emulation, software, hardware, digital curation, art, hacking, modding, remix, discussion
Learn how contemporary artists and curators use emulators both to resurrect old platforms and hack vintage games for creative ends., based on a panel discussion at the Guggenheim Museum in 2004.
None
Generation Emulation
Interactive tutorial by Jon Ippolito, v1.0
Daisychain EmulatorsDaisychain emulators
Intermediate
preservation, digital curation, emulation, software, history, game
Nesting emulators inside other emulators to resuscitate ancient software programs.
None.
Daisychain Emulators
Interactive tutorial by Jon Ippolito, v1.0
Emulate a vintage gameEmulate a vintage game
Expert
preservation, digital curation, emulation, software, history, game, fun
Learn how to emulate a vintage game with a contemporary computer
Internet access
Emulate a vintage game
Interactive tutorial by Hillary Cox and Scott Powers, v1.0
Variable Media BehaviorsVariable media behaviors
Beginner
preservation, art, installation, performance, movie, network, digital curation
Learn how categorizing creations by media-independent 'behaviors' can accommodate a wider range of technological and performative works than categorizing them by medium alone.
None
Variable Media Behaviors
Interactive tutorial by Jon Ippolito, v1.0
Create Photoshop documents for videoCreate Photoshop documents for video
Beginner
Adobe, Photoshop, movie, Premiere, software
Creating documents in Photoshop for use in video-editing software like Premiere.
Photoshop
Create Photoshop documents for video
Interactive tutorial by Sheridan Kelley, v1.0
The After Effects workspaceThe After Effects workspace
Beginner
Adobe, After Effects, movie, software
Explaining the basic workspace in After Effects.
After Effects
The After Effects workspace
Interactive tutorial by Sheridan Kelley, v1.0
Using sound in After EffectsUse sound in After Effects
Beginner
Adobe, After Effects, movie, audio, software
Using sound files in After Effects.
None
Using sound in After Effects
Interactive tutorial by Sheridan Kelley, v1.0
Using the After Effects puppet toolUse the After Effects puppet tool
Beginner
Adobe, After Effects, movie, animation, software
How to use the puppet tool to create animation in After Effects.
After Effects
Using the After Effects puppet tool
Interactive tutorial by Sheridan Kelley, v1.0
Animating with After Effects keyframesAnimate with After Effects keyframes
Beginner
Adobe, After Effects, animation, visual, movie, software
Using keyframes to create animations in After Effects
After Effects
Animating with After Effects keyframes
Interactive tutorial by Sheridan Kelley, v1.0
Creating a cinemagraphCreate a cinemagraph
Intermediate
Adobe, After Effects, animation, visual, time, movie
Creating a still photograph with minimal movement, such as an animated GIF, with After Effects.
After Effects
Creating a cinemagraph
Interactive tutorial by Sheridan Kelley, v1.0
How to use the IMRC band_saw 1IMRC bandsaw 1
Beginner
IMRC, woodworking, shop, 3d, fabrication
This tutorial by Sean Taylor, Emily Davidson, and Rick Phillips explains how to use the IMRC bandsaw properly and safely.
None.
How to use the IMRC band_saw 1
Interactive tutorial by Sean Taylor, Emily Davidson, and Richard Phillips, v1.0
How to use the IMRC band_saw 2IMRC bandsaw 2
Intermediate
IMRC, woodworking, shop, 3d, fabrication
This tutorial by Sean Taylor, Emily Davidson, and Rick Phillips explains how to use the IMRC bandsaw properly and safely (part 2).
None.
How to use the IMRC band_saw 2
Interactive tutorial by Sean Taylor, Emily Davidson, and Richard Phillips, v1.0
How to use the IMRC drill press 1IMRC drill press 1
Intermediate
IMRC, woodworking, shop, 3d, fabrication
Learn how to use the IMRC drill press safely.
None.
How to use the IMRC drill press 1
Interactive tutorial by Sean Taylor, Emily Davidson, and Rick Phillips, v1.0
How to use the IMRC drill press 2IMRC drill press 2
Intermediate
IMRC, woodworking, shop, 3d, fabrication
Learn how to use the IMRC drill press safely.
None.
How to use the IMRC drill press 2
Interactive tutorial by Sean Taylor, Emily Davidson, and Rick Phillips, v1.0
How to use the IMRC drill press 3IMRC drill press 3
Intermediate
IMRC, woodworking, shop, 3d, fabrication
Learn how to use the IMRC drill press safely.
None.
How to use the IMRC drill press 3
Interactive tutorial by Sean Taylor, Emily Davidson, and Rick Phillips, v1.0
How to use the IMRC miter saw 1IMRC miter saw 1
Intermediate
IMRC, woodworking, shop, 3d, fabrication
Learn how to use the IMRC miter saw safely.
None.
How to use the IMRC miter saw 1
Interactive tutorial by Sean Taylor, Emily Davidson, and Rick Phillips, v1.0
How to use the IMRC miter saw 2IMRC miter saw 2
Intermediate
IMRC, woodworking, shop, 3d, fabrication
Learn how to use the IMRC miter saw safely.
None.
How to use the IMRC miter saw 2
Interactive tutorial by Sean Taylor, Emily Davidson, and Rick Phillips, v1.0
How to use the IMRC shear brake roll 1IMRC shear brake roll 1
Intermediate
IMRC, woodworking, shop, 3d, fabrication
Learn how to use the IMRC shear brake roll safely.
None.
How to use the IMRC shear brake roll 1
Interactive tutorial by Sean Taylor, Emily Davidson, and Rick Phillips, v1.0
How to use the IMRC shear brake roll 2IMRC shear brake roll 2
Intermediate
IMRC, woodworking, shop, 3d, fabrication
Learn how to use the IMRC shear brake roll safely.
None.
How to use the IMRC shear brake roll 2
Interactive tutorial by Sean Taylor, Emily Davidson, and Rick Phillips, v1.0
How to use the IMRC table saw 1IMRC table saw 1
Intermediate
IMRC, woodworking, shop, 3d, fabrication
Learn how to use the IMRC table saw safely.
None.
How to use the IMRC table saw 1
Interactive tutorial by Sean Taylor, Emily Davidson, and Rick Phillips, v1.0
How to use the IMRC table saw 2IMRC table saw 2
Intermediate
IMRC, woodworking, shop, 3d, fabrication
Learn how to use the IMRC table saw safely.
None.
How to use the IMRC table saw 2
Interactive tutorial by Sean Taylor, Emily Davidson, and Rick Phillips, v1.0