Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
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.
When you begin to create image sprites inside of Adobe Illustrator the first thing you need to do is arrange the graphics that you are going to be using inside of what's called a sprite grid, and this movie I am going to show you how to set up such a grid. So the first thing I need to do is create myself either a new document or a separate artboard in the current document I am working on to house all of the items that I am going to put on the grid. Now I could just resize the artboard that they are sitting on, but it's much easier to start from a clean artboard over the right-hand side. So the first thing I am going to do is click on the Artboard tool and then I am going to click somewhere out on the canvas, somewhere like this, and I am just going to draw out a new artboard.
Now I am paying close attention to there numbers as I drag this grid out, because I want the artboard to be precisely sized to fit the icons. Each icon is 32 pixels by 32 pixels, so that means I need to have an artboard with a width of 192 pixels and a height of 64 pixels. So I will just push this back to 192, and once I get it 192, I can then shrink it up to be 64 pixels tall. And if you can't get it precise, that's okay. You can just come right up to the Control panel and make the changes, so 64 pixels, 192.
And so there is my new artboard which is going to be used for my sprite grid. Much smaller than the original document that I have. The next thing I am going to do is I am going to turn on my grids, but first I need to make sure that it's set to a 32 pixel by 32 pixel grid. So let's go to Illustrator > Preferences and let's go down to Guides & Grid. On a PC you can just go to Edit > Preferences and then jump into the Guides & Grid section. And so down here in the Grid section I want to make sure that it says Gridline every 32 pixels. Yours may be set to something different. I have been playing with mine so it's set to 32. That's good.
So I want the 32 pixels. Every gridline will be 32 pixels evenly spaced across. I'll hit OK. And then I'll go to View and I'll click Show Grid and when I do that, it automatically turns on the grid for me. And you might notice that the grid doesn't exactly line up with the artboard, and that's okay. You can just grab the Artboard tool and then you can position this to line up with the grid like so. And if you need to zoom in to do this, it might make it a little bit easier. I just want to snap that right in there to a gridline; that way you get 32 pixels across, 32 pixels high.
And I'll switch to my Selection tool now. And if it's still not exactly lined up like it's supposed to be, you can grab the Artboard tool again and just move it down until it is in the right spot. Switch to my Move tool, and now I've got 32 pixels down, 32 pixels across for each one of those squares, so it's all good. I'll zoom out a little bit, and now I can start positioning my items inside of the sprite grid. So I'll select the Twitter icon first, and I'll move that over. And you might want to zoom in so you can really get this in the right position, just like so. So I'll position the Twitter icon there, and then let's zoom out, pan over. I'm just holding down my Spacebar key, temporarily, with my Move tool to pan and zoom around.
So I've got the Facebook icon and we'll just kind of set that up in there. There we go. And again, we are placing these in the grid so that it makes it easier for the developer to turn this into functioning CSS a little bit later. So I'll go ahead and take the Dribble icon now and I am just going to cut it--Command+X or Ctrl+X. Then I'll pan over and click inside my artboard and paste. Command+V or Ctrl+V puts that in there. Then I'll come over here and I'll grab these.
And I could actually just grab all of them at once if I wanted to. Cut them all, move over, make sure I click here, and they would paste in relatively close to where they need to be. And then I can just move them into place, so there is Google+, LinkedIn, Skype, Flickr, and there is Behance. And if I've missed any, I can zoom out. And the RSS icon is the only one I missed, so now we'll zoom in--Command+O or Ctrl+0 so I can see the whole thing, and there we go.
So once I have all of my images aligned inside of my sprite grid, I am essentially ready to take them from Illustrator and export them out for the web so that they can then be used inside of CSS to creatively position them all over my web site and display these images wherever I need them to pop up.
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.