Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
This course reveals how designers can create vibrant web graphics, wireframes, and complete web site mockups with the strong layout and color management tools in Adobe Illustrator. Author and Adobe Certified Expert Justin Seeley covers topics such as building responsive layouts with artboards, producing custom color palettes and swatches for web graphics, and making vector shapes and text that seamlessly scale. The course also explores adding drop shadows and other live effects, setting up interface elements such as forms and tabbed interfaces, optimizing and exporting different types of graphics, and speeding up your workflow with reusable image sprites and Smart Objects.
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 sprite is. It's a group of images that are laid out in a grid format that are easily displayed via CSS in different ways and in different positions throughout your web site. So for instance, if I wanted to display the Facebook icon as opposed to the Twitter icon through CSS, basically what I would do, I would set the window to be 48 x 48 pixels, just like this, and then I would simply move the group so that the Facebook icon is now present in the windows.
Now the Facebook icon is the only one you see. The added benefit here is that all of the rest of the images are actually rendered in the background, so anytime you call upon those images to be displayed, the load time is significantly reduced because those images have already been rendered. So all they have to do is just pop into place. So if I needed to get the Skype icon in the right place, just maneuver it through CSS. It pops up in the window, instead of the Facebook icon. So what you are able to do is take multiple images, lay them out in a grid, and then call them out based on their position in the grid to be displayed in different areas of your web site.
Again, this is mainly for speed and convenience factor so that you don't have a whole bunch of images in your images directory and you don't have to worry about loading individual images across your site. So if you do a Google search for "Image Sprite" or even a specific one, like say "Facebook Image Sprite," you'll see how this has being employed on hundreds of web sites around the world. And it's a really great technique for helping you speed up the load time of your site and also for the convenience factor. The big thing here that you have to remember is setting these up inside of a grid, making sure that they are evenly spaced, and knowing the overall location of each individual icon so that when you toss this over the wall to a developer they can easily use round numbers for the positioning and it makes it a whole lot easier when they are calculating the CSS.
So again a CSS image sprite, or an image sprite in this case, is nothing more than big grid full of images that you are going to use to display in different areas through these little windows of which you define the size, shape, and location.
Find answers to the most frequently asked questions about Illustrator for Web Design.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
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.