- 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 :

Inside Raven Software: Our definitive history of the company behind Hexen, Heretic and other classics.

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.