Learn to create optimized web graphics that download quickly and look great on a variety of devices, including Retina displays.
- Adobe (24)
- Photoshop (13)
- Open Source (10)
- CSS (8)
- Illustrator (7)
- Fireworks (2)
- HTML (2)
- After Effects (1)
- AngularJS (1)
- Bohemian (1)
- Bootstrap (1)
- Edge Animate (1)
- Flash Professional (1)
- Glyphs App (1)
- InDesign (1)
- jQuery (1)
- PHP (1)
- reveal.js (1)
- Sketch (1)
- Web Graphics
- Web (31)
- Web Design (29)
- Web Development (11)
- Design (9)
- Interaction Design (8)
- Projects (7)
- Infographics (6)
- Prototyping (6)
- Charts + Graphs (4)
- User Experience (4)
- Responsive Design (2)
- Web Foundations (2)
- 3D + Animation (1)
- Animation (1)
- Business (1)
- Design Techniques (1)
- Developer (1)
- Illustration (1)
- Masking + Compositing (1)
- Photography (1)
Learn to use Photoshop to create cinemagraphs—still images that have moving components.
Make your web designs more responsive with SVG. Learn about building, exporting, and integrating SVG images into your website with Illustrator CC.
Find out how to create simple CSS animations such as rollover buttons, 3D transforms, animated graphics and logos, load screens, and more.
Learn how to use PHP, HTML, and CSS to dynamically modify styles in your scalable vector graphics (SVGs).
Learn techniques and best practices for designing smart, visually interesting website icons in any software.
Create a shared pool of content for a set of related projects—an HTML5 video, a WebGL-rendered interactive ad, and an HTML5 Canvas game—using Flash Professional CC.
Develop a customized responsive video app that performs and appears great in all browsers, using AngularJS and Bootstrap.
Learn how to use the CSS Flexible Box Layout module (aka Flexbox) to create advanced responsive layouts.
Responsive images are the next evolution in web design. Learn how to implement them today, with these real-life best practice scenarios for implementing responsive images in production sites.
Learn how to make your site "retina"-ready by optimizing graphics and other content so that it looks great on retina (HiDPI) and non-retina displays alike.
Learn to create a realistic steam animation with After Effects, using a particle system animation and a sprite sheet.
Learn to create beautiful, HiDPI (aka retina) graphics for a variety of screen sizes, using the tools in Photoshop and Illustrator.
Discover how to use Photoshop layer comps to storyboard your interaction designs.
Learn to find, deploy, and style icon fonts and add fast, effective vector artwork to your website.
Learn how to design wireframes and prototypes with InDesign.
Learn to create UI elements, web graphics, wireframes, and functional mockups that transition beautifully and easily to production with Photoshop.
Learn how to create your custom icon font quickly and easily from existing icons or your own hand-drawn artwork, using tools like Illustrator, Fontello, Glyphs Mini, and more.
Start your UX designs in Illustrator. Learn how to create custom reusable symbols, add text, use artboards to design for multiple screens and application states, and export your wireframes as PDFs.
Learn how to use Photoshop shapes, styles, and layers to create wireframes, prototypes, and other UX design documents.
Reveals how designers can create vibrant web graphics, wireframes, and complete web site mockups in Photoshop with navigation bars and buttons.
Build slideshows that harness the full power of the web with reveal.js.
Use Edge Animate and HTML5, jQuery, and CSS to create a custom, interactive homepage marquee.
Presents a short series of CSS animation techniques, such as looping, playing, pausing, and more, and puts them together in a small project: an animated infographic.
Create vibrant web graphics, wireframes, and complete web site mockups with the strong layout and color management tools in Adobe Illustrator.
Shows how to create an area bubble infographic, or graphic representation of data.
Shows how to depict complex relationships in an easy-to-understand infographic, or graphic representation of data.
Covers the first steps in creating infographics, graphic representations of data—organizing sample data and preparing a wireframe.
Shows how to create a custom interactive bar chart or other visual graphic with jQuery.
How to create interactive wireframes and prototypes using Fireworks CS5.
Shows how to use Illustrator CS5 to create graphics for use in web sites, video compositions, and mobile apps.
Shows how to use Photoshop CS5 for optimal web graphics workflow.
Demonstrates scheduling and expected output for good prototyping, from wireframing to storyboarding to creating multi-page mockups for design feedback.
How to optimize graphics and photographs so they download quickly in a web browser.
“What I'm learning will save me a lot of time and frustration on current and future projects.” —Linda J.
more from our members »