Join Justin Seeley for an in-depth discussion in this video What is an image sprite?, part of Photoshop CC for Web Design.
- View Offline
- Exercise Files
…Websites that have a lot of images in them can take a really long time…to load, especially if those images are individually…loaded one at a time from your server.…Recently, designers have found a way to alleviate…this pain by using something called an image sprite.…Basically, a sprite is a collection of images that are put together…into one single image and when a developer codes those images into the…site, they use the x and y coordinates of each image to show…only the portion that they need at any given place in the site.…This reduces the number of server requests, and saves…you serious bandwidth and time in the long run.…
In the example I have here on screen, you'll see a series of social media icons.…I don't necessarily want to display all of these…icons at once, but I might want to add…them individually to different areas of my site, or…showcase them in a list or something like that.…By providing this as a sprite, I ensure that…all of those icons are loaded when the page loads.…And then anytime I need to display a different icon, I simply change the…
- Why use Photoshop for web design?
- Decoding the mysteries behind screen size and resolution
- Giving your website a purpose with a content strategy
- Customizing a web workspace in Photoshop
- Designing responsively
- Creating wireframes on a grid
- Choosing colors and fonts
- Developing a UI kit with Photoshop
- Assembling a page mockup
- Creating image sprites
- Optimizing images
- Integrating with the rest of the Adobe Creative Cloud
Skill Level Intermediate
1. Core Concepts
Understanding the "new web"2m 39s
2. Setting Up Photoshop for Web Work
3. Designing Responsively
What is responsive design?5m 26s
4. Creating a Wireframe
5. Creating Aesthetic Elements
6. Creating a UI Kit with Photoshop
7. Assembling a Page Mockup
8. Optimizing Web Graphics
9. Creating Image Sprites
10. Using Other Apps in Your Workflow
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.