the Mouth of Madness:
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:
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.