TechWhirl (TECHWR-L) is a resource for technical writing and technical communications professionals of all experience levels and in all industries to share their experiences and acquire information.
For two decades, technical communicators have turned to TechWhirl to ask and answer questions about the always-changing world of technical communications, such as tools, skills, career paths, methodologies, and emerging industries. The TechWhirl Archives and magazine, created for, by and about technical writers, offer a wealth of knowledge to everyone with an interest in any aspect of technical communications.
>> Evelyn Lee Barney wrote:
>> I'm trying to create web buttons that have three image states: 1) Normal 2) Roll-Over 3) Press.
>> I created the three button states as separate images as I was designing them.
>> Now, I'm confused about the next step.
The standard process for creating buttons for these states is:
1. Start a new image.
2. Design the normal button on one layer
3. Design the onMouseOver button on another layer
4. Design the onClick button on a third layer
Layers are actually more useful than this. Layers are a tool for "adding" pieces to a picture and keeping those pieces separate. For example if there are elements of the button that will be common to all three states, you can put those common elements on a single layer. But, now you're getting into a layers tutorial.
5. Save the image in the format that will preserve those layers (in PhotoShop, that's PSD, in GIMP it's XCF)
This will now be your "master" file. Your next step is to get a separate image for each of the button states.
6. Hide all layers except the normal button and do a save copy as and save it to either a GIF or JPG format
You'll want to name the button something obvious that will help to distinguish between the three states.
7. Hide all layers except the onMouseOver layer and do a save copy as
8. Hide all layers except the onClick layer and do a save copy as
Your next step depends on what you are using these buttons for but it will either involve CSS and/or JavaScript. Can't really say which you should do without more information, for example, are these buttons tied to links or are they tied to some other thing that you're going to be doing?
Just remember that when you are doing these image states, your final goal is to get a different image (different file) for each state and then in the Web page point to the correct file--you don't stick each of the button states into a single file and then tell the Web browser which layer to look at. The only reason why you might want your images in a single file is for maintenance purposes and for the reason that I mentioned in the steps above. A proper use of layers makes it easier to make changes to an image. But, since you already have three different files, I don't see you getting any of that benefit.
As for slicing, there's no need for it when designing buttons. Slicing is just a way to cut up a large picture into smaller pieces, like a puzzle. This can be beneficial for large images because the pieces will load faster (or at least be perceived to load faster) than the single large image. But, if your buttons are that big, then you've done something wrong.
Unless, you're wanting to make certain portions of a large image clickable. There is a way to do that. But again, I'm not sure what your end goal is so I can't say.
>> since all three together would obviously look messy and confusing.
You would only see the top most layer, unless portions of that layer were transparent, then you would see the next layer down, unless areas of that layer were also transparent, in which case you would see the third layer down, and so on all the way down to the background.
********************************************
Sean Hower - communications specialist http://www.sean-hower.com
_____________________________________________________________
Create your own web site for FREE at http://www.freehomepage.com
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Create HTML or Microsoft Word content and convert to Help file formats or
printed documentation. Features include support for Windows Vista & 2007
Microsoft Office, team authoring, plus more. http://www.DocToHelp.com/TechwrlList
True single source, conditional content, PDF export, modular help.
Help & Manual is the most powerful authoring tool for technical
documentation. Boost your productivity! http://www.helpandmanual.com
---
You are currently subscribed to TECHWR-L as archive -at- web -dot- techwr-l -dot- com -dot-
