loonygames' From the Mouth of Madness

| - Contents - About - Submissions - Feedback - Archives

volume 1, issue 33

Today in loonygames:

New!! The Archives have been cleaned up, fead links fixed, and printable versions restored! Also, don't miss the new comments on the front page!

Livin' With The Sims: theAntiELVIS explores the wild and wacky world that is Will Wright's The Sims, asking the inevitable quesiton, "is The Sims the first step toward a virtual life where everyone is Swedish?"

Pixel Obscura: Josh Vasquez on Omikron: The Nomad Soul.

Real Life: Check out our newest comic strip, Real Life! Updated daily!

User Friendly: Updated daily!

Related Links :

Photoshop for Webmasters (part 1): Jason "loonyboi" Bergman reveals the various tools used to make loonygames a reality.

How We Do It: Jason "loonyboi" Bergman reveals the various tools used to make loonygames a reality.

T-Shirts: Stylin' loonygames t-shirts from Berda Compugrafix!

Artwork: Hey, dig the artwork on loonygames? We're selling some of the original art.

Feedback:

You've got an opinion...voice it! Drop a line to our Feedback column...you could end up with a free T-Shirt!

Random Feature :

Is Duke Sexist?: An exclusive look at this question that has dogged Duke Nukem's entire career (from our third issue).

Search the Archives!

From the Mouth of Madness:
Photoshop for Webmasters (part 2)

By Jason "loonyboi" Bergman

What's new this week in loonygames? Ask our loony editor.

ey kids! Welcome back to another jam-packed issue of loonygames. If you were here last week, you saw my first "Photoshop for Webmasters" tutorial. I got some great feedback from that, including some nice letters of encouragement for more of these, so here’s part two. I’m not sure if next week I’ll do another one, but I’ll definitely plan on some more of these in the future…like I mentioned last week, these are skills that pretty much any aspiring webmaster can use, but they’re also very rudimentary. If you’re an advanced Photoshop user, leave now…you’ll be bored out of your skull. :)

I was sent a couple of good tips from Kynetic, who wrote:

> 1> When recording a save as don’t change the name of the file. When you look at the steps of the action there will be no name recorded. This allows you to batch the action and run it on a few thousand images with out having to manually input a name. Photoshop will save the image with its original name.

> 2> If you are using Photoshop 5, go into RGB setup and change your working color space to sRGB and uncheck the box for display using monitor compensation, this forces Photoshop to display the image the same way your web browser does.

> 3> If you are working on images that will be exported as a transparent GIF, start out with a canvas that is the color of your webpage so that the antialiasing doesn’t create a halo around your images.

> 4> If you have never used Photoshop and are going to be using it for web graphics only you might want to look into Adobe ImageReady. ImageReady is a web specific app that gives you active previews of your images based on export settings in the export pallet (i.e. no more saving an image and looking in a web browser to see if you compressed the image too much), it also allows you to create animated GIFs, gives true hex color picker, and simple slicing feature (it will even generate the HTML for you). If you are a hard core Photoshoper, ImageReady will feel cramped, but if not IR is considerably cheaper and perfect for webmasters.

Yow! Great stuff…Thanks!

This week’s tutorial is going to address a very commonly asked question. Ever show up to a site and click on their exclusive screenshots only to find their logo slapped on top? It’s a branding thing…the idea here is that if you’ve got something really cool, you sure as heck don’t want every webmaster on the planet to simply be able to swipe and repost them, do you? Of course not. Which is where this comes in. There are a few good skills that are involved here, including the "magic wand" tool (which can save you hours of work…I remember before that was around what a serious pain it was to use the magic lasso for everything) and some basic layers work as well.

Allrighty. So let’s get down to business. We’ll need a few things. First of all, let’s go snag up a logo. Since it’s my day job these days, I’ll swing by Blue’s News, and grab me that logo. Go over to Blue’s page, right click on the logo, and hit "copy" (note that I’m using IE5…this should work in other browsers, but I haven’t tested it). Go over to Photoshop, hit "new" and then just plain enter. Photoshop will automagically pick up the contents of the clipboard (where stuff goes when you hit "copy" in any program) and it will tailor the "new" options to that image, making your life easy. Now that you’ve got a blank image in the right size, just hit "paste" and paste the image you want onto there. Before you save it, you’ll have to flatten the layers, but besides that, it’s a perfect copy. Remember this the next time you want to steal an image off a webpage…it’s just too damn easy. ;)

Allrighty. So we’ve got an image for our logo. Now let’s get us a screenshot to brand with this work of art. Open up any game at random, and take a screenshot, and then open that up in Photoshop. I’m feeling pretty lazy tonight, so I’m just going to take a picture of my desktop and use that. Just so you know the process involved here (it’s the same process I use to make the pretty images all over this tutorial) I just go to my desktop, hit the "print scn" key, and go back to Photoshop. Here, I just hit "new" like before, and now the settings have been changed to match my desktop image. I’ll paste the contents in, and I’ve got myself a screenshot.

Okay, so we’ve got our two images all set. Minimize the screenshot for now, and let’s focus on the logo. Click the "magic wand" tool (it’s the one just below the "move" arrow) and click on the black space around the logo. Isn’t that cool? The "magic wand" tool isn’t perfect by any means, but it is very useful. Since there are some areas that haven’t been selected, hold down the shift key and select them now with the "magic wand" tool, and they’ll be added (similarly, if you selected something by accident, hold down the alt key to deselect that area). Once you’re happy with the areas you’ve selected (remember only to select the black areas!) hit the "delete" key. All those black areas will now turn white, but don’t worry. Because our image is actually on a layer, that bit on this layer isn’t white, it’s actually just transparent (which as you’ll see in a minute is a good thing). Once you’ve done that, bring the screenshot back up, and hit "tile" from the "window" menu so our images are lined up right next to each other.

Now comes the really fun part. Select the "move" tool, and click on the main part of the logo, and drag it over to the screenshot. You’ll notice that when you move it onto the other image, a little "+" box appears on the arrow. This is to show you that you’re in fact copying the selected bit now, and not actually moving it anymore. Once it’s on top of the image (don’t worry where you stick it) let go, and voila! You’ve got a logo sitting there. Move it towards the corner, so as not to obstruct the image, and get ready to resize it. Click the "edit" menu (in Photoshop 4, this is actually under "layer") and hit "transform: scale". You’ll see a bunch of boxes show up around the Blue’s News logo. Click the lower-left hand corner one, hold down the shift key (to keep the proportions the same) and drag it towards the upper-right hand corner. Once you’ve shrunk it enough, either double-click in the center of the image, or hit return to apply the changes. If you don’t like where the logo is on the image, hit the "move" tool, and move it around the image until you’re happy with its location. Once you’re satisfied, go to the "layer" menu, and hit "flatten image" to make this ready for JPG saving (if you don’t flatten the image, the only format you can save it in is Photoshop PSD format). Save the image, and you’re ready to post your exclusive screenshot to the masses. Kick ass!

Well, there you have it, some rudimentary Photoshop skills. Use them wisely.

Until next week, 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.