the Mouth of Madness:
By Jason "loonyboi" Bergman
What's new this week in loonygames? Ask our loony editor.
efore I start with this week’s column, I should take a second to explain the latest doings in my loony-world. As many of you know, I have been offered, and have accepted, an editor’s position over at Blue’s News. What’s this mean for loonygames? Well, not much, actually. All it means is that I’ve got what is probably the coolest day job around. Beyond that, nothing’s changed. You’ll be seeing more of me at Blue’s News, but that doesn’t mean I won’t be terrorizing you daily here at loonygames anymore…that continues unabated.
Anyway, now that that’s out of the way…let’s talk about Photoshop, shall we? One of the things that I’m constantly amazed at, is just how little many webmasters know about Photoshop. It’s possible to run a web page without Photoshop, but frankly…I wouldn’t want to do it. No matter what kind of page you run, it’s always useful to know some rudimentary skills…and that’s just what I’m going to teach you here today. Those of you out there who already know how to use Photoshop in some regard will probably find all of this horribly boring…but bare with me here. :)
First of all, get yourself a copy of Photoshop. You can snag a tryout version from Adobe’s Photoshop site, but you’ll want to actually purchase the program, since this one’s just a demo. If you’re a student, try your school’s bookstore. Adobe offers an academic discount that’s a godsend. If you’re not a student, I’d recommend hunting around eBay…it’s a favorite around there, and you can almost always find it for under $200. If those fail, don’t forget to look for older versions! Personally I use two versions, 4 and 5 simultaneously, but either will work just fine for any webmaster.
Okay then! You’ve got yourself a copy of Photoshop, and about 20 really big JPG files. Typically, I want to keep all images on loonygames under 20k. While I’m on a T1, I have to remember that my average reader isn’t. (This actually is important to remember even if you have a slow connection…there’s a big difference between looking at a web page locally on your hard drive, and over those pesky phone lines.) So what’s a guy to do? Before Photoshop 4, you would have had to optimize each one individually. Ugh. When you’re already late with your update, and you just want to make some images more download friendly, the last thing you want to do is modify each image one by one. So, that’s why we have actions in Photoshop 4 (and 5). Basically these let you "record" and "play back" your repeated tasks, and can make your life much easier if you know how to use them.
Ready? Okay…you’ll need to open Photoshop. (Ahyuck.) Once you’ve gotten that all-important step out of the way, locate your "Actions" panel. If you can’t find it, go to the "Window" menu, and hit "Show Actions."
Got it? Okay…let’s talk a bit about this tab, because it can be a bit intimidating. Actions work by using a tab structure. The folder at the top there represents the default Actions group. By using this tree structure, it’s entirely possible to make a whole series of Actions, and run them all simultaneously. For example, if you click on the "Default Actions" folder, and hit the "Play" button, you’ll play back all of the Actions within that folder. You can also run just a few of them in the folder, by unchecking the box next to that particular action. It’s handy…but more complex than we’re going to go into today, so let’s collapse that tree, and create a new folder. Collapse the tree by clicking on the little triangle next to the "Default Actions" folder.
Create a new folder by clicking on the triangle just to the right of the Actions tab, and selecting "New Set." Name it "New Set" and once it’s been created, create a new action within that folder by using the same menu you used to make the new set. Make sure the "New Set" folder is selected in the "Set" option, otherwise it’ll show up in the "Default Actions" folder instead. Name this action "New Action" and let’s get down to business.
Okay, we’ve got a new Action, and it’s all set up for us. Anything you do from this point on will be recorded, unless you hit the "Stop" button. (Don’t worry if you do something by accident…that tree structure there means you can drag any unwanted commands into the little trash bin there.) We’re going to save our image now (use any ol’ image) to optimize it for the Internet. So hit, "Save As" from the "File" menu, and find your folder of choice.
Be sure to hit "use lowercase file extension" (if you’re using Photoshop 5…earlier versions didn’t have this all-important option). You’ll want to always make your files have a lowercase extension, because most Internet servers these days are run under Linux, which, while wonderfully stable, has the irritating "feature" of being case-sensitive. As a result, an image that works locally may not work once it’s put on your web server, since Windows isn’t case-sensitive, and Linux is. Always make sure your image HTML code points to images with no caps as well…this can be one of those annoying stumbling blocks in making a web page.
Alrighty, you’ve got the case set, so hit "okay" and move on to the next dialogue. This one’s the important one, since here you can choose your preferred method of JPG delivery. The first option, "Standard" is the big, normal JPG format. This one’s got the best image quality, but tends to be slightly larger than the others. "Baseline Optimized" is my method of choice, as it uses a compressed palette, usually resulting in a smaller file size. The last one, "Progressive" can be handy for large files, as it makes the image start off fuzzy and slowly come into focus within a web browser, but it does come at a cost. First off, the images are slightly larger. This isn’t so bad, since the visitor can see the whole image all at once, but it takes longer for it to come into focus. Secondly, the files have a larger RAM hit, which means low-end users may not have the patience to deal with them. (A no-no indeed.) Like I said, I use the "optimized" option, and depending on how detailed the image is, I set the "Quality" bar at about 7 (less if it’s a simpler image, or one that desperately needs to be shrunk). Once that’s done, hit the "stop" button, and take a look at what you created.
There should be a new Action listed there, so click its tab to look at all its contents. There’s a new arrow under it that says, "Save" and below that’s all the options you selected. When making more complex Actions, you can click the box next to the check to have a dialogue prompt selected, but in this case, we want as little interaction as possible. So, let’s try this thing! Open up an unoptimized image, and hit the "Play" button, while selecting the "New Action" option. The screen will flash quickly, and voila! You’ve optimized your image! Repeat this for each of the other files you need to do this for, and you’ll be done in no time!
Pretty cool, huh? Play with Actions…you’ll find there’s a million and one uses for them, especially once you get really fancy and have checkable options for them. I use about twelve different Actions on a regular basis, encompassing everything from optimizing images, to resizing, and file conversion.
I hope this was reasonably helpful…next week I’ll show you some more Photoshop tricks, focusing on how to add your site’s logo to an image!
Until then, stay loony!
- Jason "loonyboi" Bergman is the editor-in-chief here at loonygames. He's feelin' Blue.
Credits: From the Mouth of Madness logo illustrated by and is © 1999 Dan Zalkus. From the Mouth of Madness is © 1999 Jason Bergman. All other content is © 1999 loonyboi productions. Unauthorized reproduction is strictly prohibited, so don't do it...or we'll just forget about you. Let's see how you like it.