|
Peggy Sharr's site (I just finished it last week, but we'll be tweaking it for a while). Search Summit, Rick Archer's new website on search engine optimization Archives of my home page comments every day last week |
|
Copyright 2001, Paul Stokstad. All rights reserved.    
|
Announcement: THERE'S STILLTIME LEFT (DEADLINE MIDNIGHT MONDAY EVE, MAY 21) ON MY MOVIE QUOTES CONTEST FOR A FREE OUTBOX T-SHIRT. THE HIGHEST SCORE THUS FAR IS 13 OUT OF 17. GOOD LUCK!This week's topic is: How to Do a Rollover Button (Part 1)If you have ever done any house painting or construction, you know that about 90% of your activity seems to go into prep work, and about 10% doing it . The real percentages are more like 50/50, but it doesn't seem that way. Same thing with rollover buttons. If you haven't already read my two issues (Part 1 and Part 2) on creating a button in Photoshop, now would be the time, since that is the pre-prep work to the prep work that we are about to do. In other words, by creating a button in Photoshop, you have already (if you didn't erase the original Photoshop file) created something that we can use to create a rollover. You might recall that we created this button in Part 2:
At this point, if all were well, we could simply go back and use the original file to do today's demo. But all is not well. I didn't save the file. So, we have to start over. So let's start over with a new button. This one we will call "BELLY." I created a little, flesh-colored button and put a text layer on it, and you'll see the button and it's Photoshop layer info below:
That's as far as we got last time. Then I went under the Photoshop LAYER drop-down menu, under the NEW drop down, and choose NEW. That gives you the following menu (somewhat shrunken for public consumption):
You will see that I have filled in the Opacity box with 50%, and then I save. That gives me a new layer to work with. I choose a white color in the color selectors boxes on the tool palette, and then use the paintbucket tool
to fill my new layer with white. Your layer may already be white. If so skip the last step. Having done that, I now get the following situation and look with my button and it's layers:
Maybe you can see that that BELLY button is a lighter color than the original. If not, here they are side-by side:
We have therefore, two states of the button. The original and the (lighter) rollover state. Having done this we can proceed to the Dreamweaver environment. But before we do, let's note what we have that will help us if we want more than one button (and you do 90% of the time). Since we have the Photoshop original file, BELLY.psd, which includes the transparency layer, the text layer and the two layers left from the beveling process, we can go back and switch out the first tow layers to create new buttons. By clicking on the eye on the left of the transparency layer (labeled LAYER 2), we "close" the eye, and the layer is no longer visible:
Based on the return of your full-colored button, you can now click on the the text layer and put in a new letter (or whatever text you like):
Having done that (and having saved it in the SAVE FOR WEB format), you can unblink that eye on layer 2 and get the following (and save for web):
So, you now have created four buttons:
You can see how repeating this over and over gets you pretty far down the track toward identical buttons. One other cool thing you can do at this point is inverse the colors of your button. To do that, you make duplicates of your text and beveling layers, and then open them one by one (with only that layer's "eye" open), and paste in the opposite color from your palette of two colors. That gives you this long list of layers, on which, you will see, I have opened the proper eyes to reveal a new button:
Of course, I went ahead and did the lightening effect on that one, too, so we get these two:
I guess I've used up most of the space today doing prep work, so next week we'll finish the job with some rollovers.
But just to show you where we're going, here's our three BELLY buttons and how they will look when we're done next week (Please roll over them, while saying, ooh and aaah):
Next week: How to (finish) make(ing) a rollover button, in Dreamweaver. |
