Join Ray Villalobos for an in-depth discussion in this video Exporting sprite CSS, part of Fireworks CS6 Essential Training.
I want to show you how to prepare an HTML page using Sprites generated from Fireworks. This is a file that has been set up for exporting to Sprites. You can see that there are different icons or different little symbols for each one of these people, these different artists. And if I double-click on one of these artists--you got to be careful not to double-click in the middle, so I'm going to load it, double-click-- you can see that every artist has two states: a Regular State, or an Up State, and an Over State that is a sample piece of art from their collection.
So they're all set up like that. I'm going to go back to Page 01 here, and they're ready to be exported as a Sprite. So I'm going to go to the File menu and select Export. And from this Export menu, I can choose CSS Sprites from this pop-up, and then I'm going to need to check Options here. So before I do that, I'm going to go to the Desktop and make myself a site folder, I'll call it site, Create, and I'm going to hit Options here. I need to set up my options for exporting. What I want to do is set up a class.
My class is going to be Prefixed by an ic_ so that whenever it saves, the CSS is going to include an ic_ at the beginning of each class name and then the Name of each one of the slices or the symbols that I have created. Then I need to consider how I want to add my Padding. This is going to be a vertical list of links, so I want to add enough Padding so that I never see two photos even if my links get really tall. So 100 Pixels works really well for this. My Layout, since this is going to be a list of links, that it's going to be Vertical.
It's going to be Vertical. And the Optimization Preset is just how I want to save the images. These are photos, so I think JPEG - Better Quality will work fine. You can also use JPEG - Smaller Size, but that's not going to make a huge difference since this is such a small photo. So I'm going to hit OK. There's my site folder, CSS Sprites, I'm going to hit Export, and it's going to export my file. Here's the site folder, and I have my CSS as well as my JPEG file right there. And my JPEG file is going to be just the icon separated 100 Pixels from each other, and each State is also going to be in that file as well.
So I'll close this out. My CSS is just going to be referencing each one of those. Notice that each one of my Slices was named after the artist name, so it added the ic_ at the beginning of each one of those. And everything looks really good. So let me go ahead and copy my index. html file so that I can build my web site. And now I'm going to open up the CSS file and the index. html file in a text editor. I'm using Espresso, so I'm holding down the Option key and clicking on the Preview button, so I can see a live preview over here to the right.
So what I need to do is in my index file, I need to call my CSS, so I'm going to add a link tag, with a relation of stylesheet and allocation of the file, so this will be--it's right on top over here, so artistsicons.css. I don't need this type, so I'll get rid of it. And I need to save it. Okay. In addition to that, I'm just going to make these a little bigger.
I'm going to need to add a class to my unordered list. And the class is going to be the main class for the image, so it's' going to be artistsicons and you can see that one of them pops up. That's because this is an unordered list, so this is the entire list right here and this list is not tall enough to show two of these icons, it's just showing you the first one right here. And then what I need to do is under each list item, I also need to add a class, and the class is going to be ic_ and then the Name of the artist.
It's easier just to copy them from here, so here's my CSS that was generated by Fireworks. So I could try to type everything. I named everything pretty well, so I know that it's going to be the first and last name, capital letters included. So I could do that, but it's just easier to copy the names. So I know this is Barot here, so I'll just copy this one and the class will be that, then the next one, again, a class here, and this is going to be Jonathan right here, so paste that.
So this is all I need for the HTML. I'm going to save this, and then I can close out of it. You can see that it's really nice Fireworks wrote the Hover code for us automatically, because we had created those individual slices as button rollovers, it automatically generated this Hover code which is really, really nice. So if you're going to use rollovers, make sure that you use symbols that are buttons, because it will automatically take care of that code. So we can take a look at our code right here. There is going to be some adjustments that we need to make to the CSS file as well.
So let's take care of those next. So we'll start off by creating just some modifications to an unordered list. And what I want to do here is I'll get rid of the bullets, so I'll list down none, and I'll get rid of the margin and the padding that normally appears on those, so zero those out as well. And then I'm going to make some changes here to the artisticons. So I'm going to go ahead and put them on multiple lines so that they're easier to read. And what I want to do here is add an unordered list at the beginning as well as a list item.
So I'm modifying each one of these list items, not just the entire artist icon unordered list. So I'll go ahead and do that, and what I want to do is add a little padding to the left, and it's going to be 40 Pixels. So I'm just going to scoot them over a little bit to the right and add a little bit of padding at the bottom, just to give it some breathing room, 10 Pixels. I'll change the font, just make it normal, and I'll use 1.6 ems here.
Everything else looks pretty good. And finally, I need to add an unordered list, list item to each of these. And you can see that as soon as I code it, you will see the icon appear over here on the right-hand side. So every one of these list items is going to have this style by default, including the background at a normal position, which will be top left, bottom right. You can't see them right now out, because, remember, they are 100 Pixels down from the top of each list item. So you're not going to be able to see them unless you apply this secondary sub-style here, which tells each item that has the class of the individual person and it gives it the background position that you need here.
So all we need to do to modify this is just add--let me see if I can make it bigger, so you could see it all in one line, because it's easier that way, and then I'll scoot this over just over here. And so, all we need to do is just add those and you'll see them up here on the right-hand side as soon as I add them. And the Hover should start working now. So as I hover over these elements, you'll see the preview of the artwork appear as well. We'll paste those in and all of our art is working.
Everything is really constrained. The reason for that is because of the way Fireworks is writing its code. It's automatically given us a width here of 32 Pixels by 32 Pixels. So if you look at what it's doing, every list item is going to have a width of 32x32 Pixels. Sometimes that's what you want when you're doing a sprite sheet, but sometimes it's not. So I'm just going to take out all the widths and heights, so I'll just cut that one out and I'll do a Find for that and then Replace it with nothing, so I'll hit Command+F.
Most text editors will have some sort of Find/Replace feature, so I'll just take all those widths and heights out and you can see that my list is looking really good. Everything is hovering properly, and our navigational list is working pretty well. So you're always going to have to modify some of the CSS that Fireworks generates, but you can see that it was really no big deal, just some standard code applied to this page. It did a really good job of creating this Sprite Graphic, as well as most of the CSS for you. So remember that when you're working with Sprites that have rollovers, I recommend that you use button symbols, working with the Symbols means that you'll get a Hover CSS written for you, and it makes just adding a Sprite Sheet or a Sprite into your HTML and your CSS just a piece of cake.
- Working with the menus, panels, and object properties
- Saving and exporting files
- Optimizing graphics
- Applying opacity, blending modes, and live filters to drawing objects
- Drawing vector shapes
- Masking objects
- Animating with states
- Using the 9-slice scaling tool
- Creating symbols and symbols for sprites
- Using batch commands
- Creating jQuery Mobile templates