Somewhat complex?!? Crikey.
Can you share your Fireworks file? It's easier to make suggestions when you have something concrete to work from.
1 person found this helpful
Oooohhhh.... Okay. I don't see any way you can do this without a table. However, your table could be more efficient. (Actually, someone who's really good with CSS could probably do it, but...that isn't me! ) Or...just make one image and use an image map? That's what those are for.
However...let's see if this helps you at all...
The first thing to do is print this out (without the Web slices) Use a ruler and pencil and draw the minimal number of vertical and horizontal lines you need to create images. (New guidelines for a re-slicing of this diagram.) Consolidate where possible, even if that means adding white pixels to some images. It might be easiest to mark off where you have horizontal areas that are (mostly) all white.
For instance. Rather than having one line right below your Assessment and Execution shapes and another just above Strategy, Prioritization, etc, place one line. Maybe split the difference, maybe place it at the top of the second row of shapes, doesn't matter. Just have one.
Make the lower guideline for Strategy, Prioritization, etc match the lower guideline for the Toll Gates.
Next, you have a row of all white, except for the dotted vertical lines. You'll only need one slice on one of the vertical lines.
Make a consistent-height row that includes the Project Charters and Manage Changes shapes. All the way across. These odd-height shapes are making your table more complex. (Plus, if you have a regular table where some cells are filled with white images, you can usually remove those contents if the width and height are fixed by images in other cells. It simplifies. If nothing else, you can use a single 1x1-pixel white image and set the width and height to what you need.)
Keep going down the image.
Next, vertical lines...
You have teeny little spaces on either side of your Toll Gate shapes. Don't. Hmm. You'll have to split The Toll Gate regions in two, but have the actual slices for the diamond shapes span two vertical guidelines. If you can put the guidelines on the same side of the dotted line for each Toll Gate, then you will be able to use the same image for the dotted lines in rows that are otherwise white.
Are you doing rollovers? If so, then because of the tightness of the table, I would recommend that you limit your rollover effects to the text only. That way, you can have cells with images that might be the ends of two different colored shapes and you don't have to worry about changing colors.
Thanks for all the advice!
I was able to trim the number of images, that I was exporting, however the image is still loading slowly. I don't know if this has something to do with the fact that I'm using the Image as a Web Part in SharePoint, but when I get the image count to under 50 (from 136!) it still shows noticeable lag when opening.
My only other thought is if there's a way to not have any of the image appear until all of it is ready to be displayed. That way if there has to be a slight delay for a few of the .gifs, the whole image holds off on displaying until all of them are ready. If there's anyway that could be done I think it's my only option at this point.
The only thing you can do is cut out the number of things that actually are images and to reuse images where they're the same. You have a large graphic, and that means lots of pixels and that means lots of time.
For example, where you have whitespace, you don't need images at all or you can use a 1x1-pixel image and set the height and width (this is old-school stuff ).
Going further, if you can let go of the rounded corners, you could make a narrow, vertical slice of a gradient, use that as a background for a table cell and then use text in HTML rather than in images. You would save a bundle in download time with that approach.
I'll give it a shot. I'm not 100% clear on that last paragraph, or how to implement that solution, but I appreciate all of the advice.
I'm thinking I may just have to bite the bullet and set up some time with a web developer within the organization and have him school me on the very basics of html
Yeah...knowing the tricks helps.
You could also try one or both of these:
Also, I like the book HTML, XHTML & CSS (Visual QuickStart Guide Series) by Elizabeth Castro. It's in it's 6th edition, and can usually be found locally, definitely online.
I'll check those resources out and hopefully I can work through my first Fireworks Project.