|
This tutorial requires Adobe Imageready.
1. Make a new document in Adobe Photoshop, 88x31 or 88x11, with a white or transparent background.
2. Create a new layer: 
3. Delete the layer called Background.
4. On the layer you just created, design the background for your button.
5. Put the text you want on a new layer, and rasterize it by right clicking on the text layer in the Layers Palette and clicking Rasterize Layer.
6. Ok here's the tricky part: We need to delete the part of the background which is behind the text, so we can move the text layer behind the background layer. To do this, Ctrl + click the thumbnail of the rasterized text layer in the Layers Palette to select it.
7. Now, with the text selected, single click your button's background layer in the Layers Palette and hit delete.
8. Move the text layer you made to the bottom by clicking it in the Layers Palette, and dragging to the bottom of the other layers. You should still see the text. If you don't, then you didn't do the last two steps correctly.
9. Now, the background layer you created should be on the top, and your rasterized text layer should be on the bottom, with the text showing through. That's all the layers you should have. Yes, this sounds pointless but it will allow the moving bar to only appear on the text.
10. We're going to make the moving bar now. Choose a color that you want the moving bar to be. I chose red.
11. Click on the text layer in the Layers Palette and hit the new layer button below: This should create a new layer above your text layer. Make sure it's completely clear. (has no content)
12. Ok now select the pencil tool by clicking and holding on the paintbrush tool. It's next to the thing that looks like a band-aid.
| 
