Understanding image sprites


show more Understanding image sprites provides you with in-depth training on Design. Taught by Justin Seeley as part of the Illustrator for Web Design show less
please wait ...

Understanding image sprites

One of the easiest ways to help speed up your web sites, especially when it comes to images rendering on the web site, is to utilize a technique know as image sprites. And in most cases we are going to talking about these in terms of CSS, but they have to be created somewhere, and so Adobe Illustrator is actually really good for creating these things called image sprites. But first let's talk a look at what exactly an image sprite is. I have inside of this document two layers, one of which is called window. And the window layer is simply a compound shape that has a 48 x 48 pixel wide opening in the middle of it.

And underneath that, on layer 2, you'll see there are several social icons. If I hide the Window layer, you can actually see all of the icons right there. So I am going to temporarily leave the Window layer hidden and just work on layer 2 for now. You can see here I have all of these different icons as one single group. And that's basically what an image s...

Understanding image sprites
Video duration: 3m 4s 5h 27m Appropriate for all

Viewers:

Understanding image sprites provides you with in-depth training on Design. Taught by Justin Seeley as part of the Illustrator for Web Design

Subjects:
Design Web
Software:
Illustrator
Author:
please wait ...