Start learning with our library of video tutorials taught by experts. Get started
Many web animations and rollovers make use of sprite sheets to reduce the number of graphics a web experience requires, making the design process easier and your site load faster. Learn techniques in Adobe Photoshop to make sprite sheet creation fast and versatile. Chris Converse shows you how to combine Smart Objects and guides to help you measure and produce perfectly aligned sprite sheets for your web design projects.
(MUSIC). Hi, I'm Chris Converse and in this course I'm going to show you how to create a graphic that can be used as a sprite sheet for web animations. An animated sprite consists of a large graphic that moves within a smaller web container, creating the illusion of a frame based animation from a single graphic. I'll show you techniques for using smart objects in Photoshop to create modified frames of your sprite, create frame guides to help you properly align the artwork, and even apply non-destructive effects to your animations. Lastly, we'll publish and test our sprites with a script I'm making available to all lynda.com members, which includes simple settings for modifying animation playback within a web browser. So I hope this course sounds interesting to you, and if so, let's get started.
There are currently no FAQs about Design the Web: Sprite Sheets.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.