This day in History (every day) Webcam tips Zoomerang: free web survey tools Taste the world around you Kewl Lord of The Rings movie photo archive	Outbox Web Marketing Newsletter, Volume 1, #9, May 7, 2001 Copyright 2001, Paul Stokstad. All rights reserved.
	This week's topic is: Photoshop Web Basics: Let's Make a Button, Part 2 Last week we chose colors, so this week we're going to use them to make actual buttons. I hope you had a good week, and the wait for the concluding chapter in this saga wasn't too painful. We pop open Photoshop (I'm in 5.5), and create a document that has a size that we like. Let's say 1.5 inches by .5 inches. A fairly fat button. Then you select a color from that color safe palette we described last week. Having done that, you can take the paint bucket tool and click on the document to turn the entire thing that color. Having picked a yellow color, I get this: I'm calling that graphic Yellowbird. That's a good start, but I want to make a nice bevel on it, so I go to the LAYER pull down menu and scroll down to the "EFFECTS" item, but I can't get in. Everything is greyed out. Well (I think, no one being in the room), this sucks. What do I do now? What am I doing wrong? I got up early. Did my morning meditation, brushed and flossed, went to step aerobics, and now this? This is serious. I may be forced to call Jeff Harris and ask him how to do this. He's only twenty. But when I get backed into a corner, I call him. Actually, I call him to kick around HTML questions, and my old art director Denyce Rusch on Photoshop. But it's the weekend, I already bugged Denyce last week about Photoshop, so I'm on my own. So this is what I gotta do: Think it over. Photoshop needs to have LAYERS to make an effect happen, so, since I've got a Yellowbird that's flat, I can't do nutttin'. So, I make a copy of this layer and paste it over the other layer. To do that, I expand the size of the box holding Yellowbird so that it's bigger than the graphic, so then it looks like this: Then I take the marquee tool and hold the mouse down as I drag over the yellow stuff and let go. This selects the entire item, and a bunch of thin dashes appear around the selection. Then I go up to the EDIT menu, scroll down to select COPY, go back to the same menu and let go on PASTE. You'll note that the item seems simply to lose the selection dashes around the item. You may think that you are back to square one, but you're not. To verify that you are in happy camper land, i.e.- no longer stuck and in need of calling Jeff or Denyce, just look at that recalcitrant (I always use one big word per article - here's a dictionary if you need it) menu item I got stuck on earlier. That's right, if you pull down that LAYER menu and let go on EFFECTS, a new world of submenus will open up. Now that you have created a second layer of yellow over your first layer, you have been admitted to the web designer's PLAYGROUND, where you have access to lots of cool effects, including drop shadows (great for text), outer glow, inner glow, and that old favorite, bevel and emboss. I recommend that you get in here sometime and play around with all these effects and get a sense of the possibilities. Create some type (which automatically creates a layer), and go into EFFECTS and try out the jungle gym, the slide, and the swings. You'll have fun and get some ideas that may be useful when you get back to class. But for now we're just going to go straight into BEVEL AND EMBOSS and get to work. Here's the menu (slightly shrunken): Later in life, when you are at leisure, you can tweak around with this, but for now we're just going to agree with these settings. That makes Yellowbird look like this onscreen: Now we're starting to look like something. Now all we need is text, right? Sorry, I can't let you off quite that easy. We need to backtrack. Or sidetrack. Whatever we call it, we need to talk about layers, because: a) I promised you I would last week b) If you just learn how to make one button you will only know how to make one button at a time, which would be fine if your site looked like this, but otherwise useless, since you probably will need a number of buttons, and doing them one at a time will seem as tedious as washing silverware (believe me, I know). So, go find the layers menu. It's under the WINDOWS pull-down menu. Yellowbird''s layers menu currently looks like this: Layer 1 is selected. That means that I can make changes to layer one. Let's learn a few things about this window. You'll note that there are eyes on the left of the box. If you click on one of the eyes, it disappears. If I click on the Layer 1 eye, Yellowbird goes back to looking like this: No beveling. Clicking on the box where the eye was brings the eye and the beveling back (whew). What this means is that I still have both states of the button available. Beveled and unbeveled. This type of flexibility will be useful later. So, having beveled, and having met the layers menu (for later reference), we go on to put in some text in the button. To do text, you first pick a color from the web safe color palette, pick the type tool (it's pretty obvious, it has a big "T" on it), and then click on the button you are working on (Yellowbird, in this case). You get this menu: You'll note that I chose a fat font, specified a size, and had (previously) chosen a fairly vivid shade of blue for the type. You can highlight the text (as it is shown here) and goof around with the size and the tracking (how far apart the letters are) for cool effects in titles, and (in Photoshop 5.5 at least), the working changes will show up in your document, and you can use your mouse to move the text around and preposition it on the button. Once you click okay, a new layer gets created, and you are on your way. You will probably need to click on the positioning tool to move your text around to where you like it, and you are (close to) home base. At this point , I have this as my button: I picked a bizarre color, of course, but what if that is the color client wants? You might create some contrast, using the drop shadow tool again, resulting in this: To get a button that you can use online, you simply go to the FILE menu and select the SAVE FOR WEB OPTION. In Photoshop 5.5, that opens the (bundled) Adobe Imageready program, where you can select a .gif format and save the puppy (i.e. - birdie), Imageready is another whole button game, in that it will display a number of potential download sizes of your graphic, preview them for you onscreen, and let you decide. You'll want to try out a lot of those features, but for now, just pick the default .gif settings for buttons and the default .jpg settings for photos. (If you don't have Photoshop 5.5, see my footnote on how to save your button for use). Having done all that, I got the button we saw above. (Of course, I've actually been doing that "Save for Web" function all along through this article to create all these visuals.) So, we're done, right? With button #1. Here's where your patience with all that layers talk pays off. Now your layers palette looks like this: Your work, right now, is in an extremely powerful state, since the current document, unsaved, is a template for FUTURE buttons. SAVE IT! The cool thing now is that even though you have saved your beveled button, you haven't lost your original. That means that you can go back in and click on the type layer (e.g. - where it says "yellow" above), and redo the type button with new text. If you do this right, your type will show up exactly in the same position as where you put it the first time. No more eyeballing trying to line button text with the btext on older buttons. You can create any number of buttons with the same settings. That's cool, and that's how layers save you trouble. In some future time we'll extend this layers and buttons and gifs (make sure you say that purple phrase three times and then say, "oh my"), stuff into the Magic of rollover buttons, done in Dreamweaver. But let's not do design next week, let's talk about   See you then. Or speak to you. Either way.... Cheers. -Paul Send your comments, or topic suggestions of interest to you, here. That footnote for older Photoshop owners, er, owners of older Photoshops: *First save your document as a Photoshop document. You'll need the original later to create more buttons. Then you need to convert your RGB document to Indexed Color, which is done under the IMAGE and then MODE paladin menus. You choose Indexed color, say yes to the "Flatten Layers" request, select "Adaptive," and then under the FILE menu select "Save a Copy" and choose the CompuServe GIF option. Label it with a.gif extension and you have a button. Then go out and buy a newer version of Photoshop (or the upgrade). Photoshop 6.0 is even cooler than what I've described above (especially for type). Get the Program, save all your documents, and upgrade, upgrade, upgrade. This is one of those do what I say, not what I do moments. I wish I had all the upgrades. Maybe soon. (Heaven for a web designer = Fat web pipe, the newest computers, and all the upgrades, all the time)   RE: SPAM. Imageready insiders will note that the SPAM is sliced. Somehow apropos. More on slicing on some future date.