|
Pros and Cons of Genetic Engineering (what you eat may be fishy) 3-D tour of the space shuttle (you'll need to get the plug-in, but it's no big download. Your car will soon be on on the Info Highway Help for for name-forgetters from Big Brother/IBM My wife's new website (shameless plug for my web design company). She got it wholesale. |
 Outbox Web Marketing Newsletter, Volume 1, #8, April 30, 2001 Copyright 2001, Paul Stokstad. All rights reserved.     |
|
This week's topic is: Photoshop Web Basics: Let's Make a Button, Part 1There are a few web pros on my mailing list, and I can already hear them start to snore after reading that title, but hopefully some of you still need a bit of orientation on how to make a graphic for online consumption. You'd think it would be easy to make a web button. Wait a minute, I'm going to go make one and see how long it takes (back later......): Okay, I'm back.
The point is, whatever button you are making, if you know what you are doing, doesn't take long. And if you are making a DUPLICATE of the first button, with a text change, it takes even less time. Again, I say (lest we forget): IF YOU KNOW WHAT YOU ARE DOING. If you don't know, you will be reinventing the button every time you make one. I know, because for a long time I did it that way, And it was partially my fault for being a one trick pony on Photoshop, and partially the fault of earlier versions of Photoshop, that weren't as sensitive to the needs of web designers. Which is not surprising, since the name of the program isn't Weboshop. As a matter of fact (surprise!), Photoshop was not originally designed to be a web guru's chapati and ghee, but to serve as an aphrodisiac to photographers and graphics people who had spent too much time in the dark(room) mixing arcane chemicals in the interest of tweaking original photos into artistic shape. Hence the inclusion of tools like "dodge" and "burn" in the Photoshop Tool set, items that make perfect sense to a darkroom veteran, but to the rest of us sound like aerobics, football, or some kind of Vietnam veteran flashback. Knowing what you are doing in creating web graphics in Photoshop has 50% to do with understanding the web and 50% with understanding Photoshop. But I'm not going to talk about that (yet). I'm going to talk about the other 50%, i.e.- print graphics. This is called backtracking. Side tracking is something else. Backtracking adds depth. The other one is a distraction. I'm just letting you know, so that you know that the next stuff is important, unlike one of my sidetracks, which is only included to keep the web veterans (hear them snoring?) awake. There is a big to-do about getting web graphics to be the exact color you want. The loudest voices in the crowd, of course, have long been the design crowd. Color, you see, is no laughing matter to a designer. If they specify PMS 436, they are not looking for a particular monthly temper flare up, but they will have a whole litter of full-size cats if you do not print their document with the color they specified (e.g.- PMS 436) when they asked for it in plain English (or any language). These guys (and women), take color very seriously. The don't just say, "give me a blue," like a cheerleader would say "give me a B." That's right, if designers were cheerleaders, they would say, "Give me a really loud B, with especially deep bass notes from the wrestlers in the crowd who aren't playing football, some nice tenors from the French club guys, with strong alto representation from the pom pom squad, sopranos from the junior high kids, with a light tailing off of late shouts from parents. That's a PMS 436, Pretty Monstrous Shout #436, thank-you." (That was a sidetrack, but it was part of a backtrack, so it may be okay). The fact is, there has been a long standing (enormous) print-based industry of color wheels, swatches, computer monitor calibrators, prepress samples, veluxes, mockups, all designed to make sure that when your client has a logo of a particular color of green , the brochure he gets off the press has a logo of that same color of green. It's not surprising, of course, because not only artists but even big, well-fed corporate types get a little attached to the color of their logo. And for good reason. Coke is used to a certain red associated with their name. If you saw a coke bottle with an oddly orang-ish red Coke logo on it, you might assume that the contents were somehow un-cokeish, due to spending too much time on a loading dock somewhere. Not to mention that certain colors are said to trigger certain emotions in people, and you might want a consistent emotional response to your product. So, everyone gets very alert around colors in the print arena. Build a better prepress color verification and proofing system, and you will be in a strong business position almost every time. As a matter of fact, getting good consistent color in a print environment is probably one of the major skill sets that you expect from your print designer and your printer. If you find a good print design guy/gal, and you can't hire them, at least get their phone number. They are invaluable. You will need them later, for sure. So the loud squawks about color problems online have necessarily been loudest from the print designers. They are used to having (or desperately trying to gain) color control. And then along come some computer dudes who build the Web and when you ask them about color consistency, they just say, "Forget it, guy, we can't control forty million monitors. This is about universal access, not universal consistency. Chill." Worlds in collision. Graphics guys seeking the perfect color and total visual control. Geeks celebrating the amazing fact of cross-platform connectivity and information-sharing of ANY kind. To the tech guys, the fact that information can be shared over a distributed network via the HTTP protocol is a major miracle. And it is. And then all of a sudden they hear what appears to be a bunch of whining artists saying "But the color isn't right!" One shouldn't be surprised if the techies go "Hello!? You have worldwide distribution of your documents virtually for free in a digital environment that doesn't destroy a single tree and you are worried about light pink versus peachy pink?" Still, for those who care about color online (and they will always be there), technologies emerge, programs evolve, and industries are developed. In other words, if someone is paying, even the geeks will get will get excited about accurate color. Adobe may have thought at one time that they had the perfect solution in Adobe Acrobat. There's a web plug-in (and a stand-alone program) that allows you to view print documents in a digital environment in mint condition, just as the designer intended. Oh, the colors may still vary, based on your monitor settings, but you will basically see that way cool brochure design just as it was intended). And now with the possibility of adding hyperlinks to Acrobat files, such files could, in theory, replace regular web pages. But that's not going to happen. The web page phenomenon is too entrenched, and the Acrobat stuff still seems clunkier and slower than the web (which is itself still known as the World Wide Wait in some circles). In some ways, Acrobat can be seen as a tool for showing off your design, or for putting something online when you are too lazy to repurpose it for the web. So we are back to looking for good color online. The challenge here is that there are many web browsers. And, of course, the varying browsers have varying standards for what colors they display well. And, at the same time there's the Mac versus PC problem, and the varying monitors and monitor settings out there. Most people designing web pages have at least heard of web safe colors, which are the subset of the colors that look good on the Netscape browsers that also look good on the Internet Explorer browsers. This brings us back to Photoshop, where when you are creating a button, you want to pick from the array of safe colors, known in Photoshop as the web safe palette. What you have to do is acquire a particular file that contains those web safe colors and pick from that group when you design your button. You may not get exactly the color of green that you wanted, but you will get something that probably won't have little white dots all over it, which is the likely result if you pick an "unsafe" color. The latest versions of Photoshop come with these
web safe palettes. All you have to do is a bit of
drilling down through menus to find them. On
Photoshop 5.5, you open up a new document of any
size, then burrow down this path of item selections
off the menus: window>show swatches>load
swatches>goodies>color swatches and chose one
of the web safe palettes, like webhues.aco or
webspectrum.aco. I like the second one because,
even though it gives some duplicate colors, they
are easier to see and pick out. It looks like
this: (you will note that sometimes even some of these colors pixellate on your browser. the grim news is that the true web safe palette is even slenderer than this. One of my OUTBOX margin links from a few weeks back mentioned this) Once you have selected one of those, when you go
back into your document, and use the
eye-dropper/color-picker tool Well, that was visual. The thing is, unless you start with a good color, you might as well go home. In the old days (I seem to talk a lot about them, although, on the web, the old days are only five or six years old - just out of the toddler stage), in order to make a button, you had to open Photoshop, open a new document, make the button, drill down through the image>mode path, and change the RGB document to indexed color. The default setting was RGB (red, green, blue), which is best for dealing with photos (we're in Photoshop, remember). But broad bands of color tend to pixellate (like white measles, mentioned above) in RGB in web environments, so you had to make the change to indexed color. Indexed color change required you to answer a number of questions, like
Then you had to save the file. But you couldn't save it in the format you wanted (the .gif format), because that format wouldn't show up unless you saved it as a copy of the document. So, you can see, you used to have to create the button in RGB, save it in .gif format, but there were what seemed to be at least twenty steps to creating every darn button. That was it, and it took forever. But now Photoshop is smarter, more web savvy, and so are you. Now all you have to do is create your button and hit the magic button (under menu) "save for web." When you do that, you get a menu that allows you to save the file in any format you specify, gif or jpeg,. You can choose form four different versions that are nicely displayed, including an estimate of their download speed, and you are off to the races. Of course, all that doesn't really happen in Photoshop, it happens in Adobe Imageready, which might as well be Photoshop, because it comes bundled with Photoshop, and it automatically opens like an obedient puppy whenever you ask. That does save you time, and is extremely gratifying to the old time web designer like myself. But of course, now that I know Photoshop better, I realize that is was doing it the hard way even back then, since I didn't know how to use layers. More on that next week, in the continuing saga of "How to Make a Web Button." That's when we'll really learn how to do it. Try to hang on until then. You can use the time to write the text for the buttons, e.g.-
Don't strain. See you then. -Paul |
This button took about 2.5 minutes,
but that includes turning on Photoshop.
Adding text was another 30 seconds or
so
Doing a sew-on button (i.e.- a bit
more interesting) took about three minutes. Of
course, that's after I tried the last one a few
times and blew it. Lining up those little white
holes by hand takes some focus.
to select the color you want and you
can use it to fill in your document. You will see
the color that you have selected in the left of the
two color boxes on the tool bar. 
You can then use the paint bucket tool
to pour the color into your document,
or click on the curved arrow that connects the two
sample colors on the tool bar, which will switch
your new color to the right box. 
Once you do that, you can erase all
the color in the box with the eraser 
(or if you know how to use the marquee
tool in the upper left box of the tool bar, 
drag over the entire area and delete).