Problem
Suppose you're creating a banner graphic for a web site. You want to use a patterned background of some sort, with the company name in large text upon it. But if you simply draw it in a painting program (or have the customer send it to you graphically), then after you slice it apart, and put the pieces back together visually on the web page, you're totally limited in how you can make changes in the future. Your customer may say, "shift the words to the right", or "add this word" or "change spelling". Which you can't do, because it's all graphical.
Text you typed as part of the graphics has overwritten a portion of the graphical background. If you move the location of the text-with-the-background-inside-it, then the patterned background may not line up properly pixel-for-pixel. It will look like there's a mysterious box around the text, an invisible line separating it from the rest of the background, because the background "pattern edges" conflict at that location. That's not very professional.
Solution
First, you need an object-oriented graphical editing environment. My favorite is Macromedia Fireworks (yeah I know, Adobe bought it and is phasing it out; what a shame). Photoshop is another good one that works this way. There are others. Ones that don't work this way include Paint.Net, MS Paint, and other "pure painting" applications. The bottom line is that you need layers in your "graphical document" so that text is stored separately from the graphical background.
This kind of application gives you the ability later to change the text all you want, and it will "redraw it against the background" - for a perfect look when you go to save it (export it) as a JPG or other graphic image file.
Think of it like this - you have a master document, in an object-oriented format, which you edit when edits are required. It's capable of anything, including removing front items (i.e. company name text) without damaging rear items (i.e. patterned backgrounds). From there you will export a graphic-only "flattened" picture of the final work, as a JPEG or GIF or PNG file - this is the file you actually use on the web site.
You could additionally slice up the image into pieces, which is easy to do in Fireworks. Fireworks can even save the sliced-images with a basic HTML file that can reconstruct it all into a big cohesive picture again (it uses an html table to do this). Then you can edit this HTML and build your web site around it.
When is PNG not PNG?
One confusing thing with Fireworks is that the object-oriented source file is actually stored in PNG format! Yes, a PNG file can have layer information stored in it. PNG is not just a graphic image format like JPG or GIF. It can be that, but it can do so much more. Fireworks uses PNG as its full-blown object-oriented source file format.
When you go to "export" the graphics-only (flattened) version of your images in Fireworks, it can create them in whatever file format you want: GIF, JPEG, and - yes - PNG too! Those resulting PNG images will have no object-oriented stuff in them, they'll be just as flat as the JPG or GIF files would be - and just as difficult to edit later if you ever attempt to. But they'll be slim and trim, like the equivalent JPEG files (roughly).
What Not To Do
Don't make the mistake of trying to re-edit the exported graphic-output files. It'll only result in a mess. You always want to edit the "source" file, then export a fresh set of output images for the web site.
Don't try to display your source-file PNG directly on a web page! It's much larger than it needs to be, since it's storing all that layer information inside itself. Web browsers don't need that. You want the fastest-download-times you can get with web images, so let Firewords "export" to an output file so it can compress the graphics data appropriately for web pages.
That extra stuff embedded in Firework's PNG source-files has mislead some web developers to say, "PNG files are way too large for the web!" But that's just not true.
Keep that source file around forever. You never know when you may need it later.
Books and Links
Macromedia Fireworks 8: Training From The Source by Patti Schulze.
Fireworks 8 Essential Training video by Abigail Rudner.
Don't miss the latest web tips and tricks!
Subscribe to our low-volume mailing list:
Privacy Policy
| Copyright © 2006 Fastech Learning LLC, all rights reserved. |
| Phone toll free 1-866-464-6688, Phoenix Metro area 480-895-6688 |
| Problem with this web site? please let us know |
