High-quality media is a must for any website. Get tips for creating, optimizing, and implementing graphics, animation, video, and audio in the most modern way possible.
Overview
Syllabus
Introduction
- Welcome to "Creating Web Media"
- SVG symbols with Illustrator
- The video element
- Control colors in SVG with CSS
- High-definition graphics with Sketch
- Add a Twitter feed
- Combine images with Canvas
- Generate assets in Photoshop in no time
- Web graphics from InDesign
- Keeping it in proportion
- Responsive iFrames
- Create a tiling SVG with Illustrator
- Create a tiling SVG with Sketch
- Loop a CSS animation
- The Audio element
- Randomized animation with JavaScript
- Get SVG from Photoshop
- Customize your thumbnails in WordPress
- Read JPG metadata with PHP
- Animate a sprite sheet with CSS
- Animate a sprite sheet with JavaScript
- Interactive inline photo gallery
- Create customizable graphics with CSS
- Fullscreen background video
- Load animation with HTML and CSS
- Video jump points with JavaScript
- Base64 encoding images
- Using GULP with Sketch files
- Responsive images and the image element
- Responsive images and the picture element
- Create a sprite sheet for links
- Indicate download file types
- Inline video for iOS
- Image zoom to point of interest
- Mask an image in SVG
- Animate an HTML canvas
- Trigger content from a video
- Responsive SVG Logo
- Zooming hover state
- Animate SVG with CSS
- Custom Google Maps markers
- Sprite sheet for animation with Photoshop
- Sprite sheet for animation with Sketch
Taught by
Chris Converse
