So far on AS Gamer it’s been all about programming. That’s great and all, but game development isn’t all about programming. A lot of game development involves design and therefore, graphics. So this time I’m going to take you through the process of creating a laser. This should prove to be useful in a variety of flash games. Graphic design for games is more important than most programming sites give credit. While a great game can stand alone with bad graphics… a great game with great graphics is guaranteed to be on a whole new level.  Good design is all in the details. Okay open up Photoshop and let’s dive in.

Step 1: Setting up the Document

Okay create a new document (CTRL+N) and size it as 15 pixels width by 75 pixels height. Honestly the whole resolution thing for pixels is completely useless. If someone tells you that you need it to be 72 for the web, we’ll they’re full of it. Resolution only works when you are working with real world units of measurement (inches, centimeters). We don’t need a 15 by 75 laser, that’d be HUGE! But the padding around our laser will give us room to add a nice glow.

Your New Document Window

Step 2: Drawing Our Laser

First of all, I’m changing my background color to black for clarity throughout the rest of this tutorial. Changing it to black may make it easier for your as well… considering our laser is bright and partially white.

Now zoom in about 500%. Just press Z and click on the image 5 times. You can see the magnification of your image in the bottom left corner of your document’s window. You could also just click there and type 500. Whatever works best for you.

Here’s something you may have never used before… the Info window (F8).  If you have used it great, if not great because you’re about to learn something new and useful.  Bring up the Info window (F8) There’s an image of the Info Window below, but you should see 4 boxes with single letters and colons after them. The top two boxes are color related and will work with the eyedropper tool (I). The X and Y in the bottom left box keep up with the position of your cursor as it relates to the document you have selected. Last the W and H will tell you the width and height of any selection you make. You’ll want to make sure the measurements are being done in pixels so click the + beside the X and Y and set it to pixels.

Now make sure you’re on a new layer (SHIFT + CTRL + N) and draw a box that is 4 pixels wide and 40 pixels high and fill it with white. Just use the paint bucket tool(G) to fill it with color.

screenshot of laser being drawn in our Photoshop window

Step 3: It’s all in the Photoshop Filters

At this point we’ve done all the drawing we have to do. Excellent huh? Designing a laser takes absolutely no skill. Which is great, anyone can do it.  Go ahead a deselect your laser (CTRL + D) but make sure the laser layer is selected in your layers window (F7). Now double click the gray area to the right of your laser layer name (or Goto Layer -> Layer Style -> Blending Options) to open your Layer Style window. First thing you need to do is select Outer Glow. Change the color to blue and make the Opacity be 100%. Leave the rest as default, they should look like the screenshot below.

Setup for our laser's outer glow.

Now we need to add a Gradient Overlay. So select it, and create a linear gradient that goes from blue to white.  It should be setup like the below image.

Gradient for our laser.

And our laser will look like this.

Looks pretty good, but the hard corners at the top… well they’re hard corners. Not bad, but not what I am looking for. So to soften them let’s just add an inner glow.Click inner glow and change your settings to look like mine below. (Make sure you set the blend mode to normal)

Inner glow for our laser to soften the corners and edges

Step 4: Saving our Laser to be Flash Ready

Alright guys, one last thing so we can use this for our flash game. Turn your background layer off by clicking the eye symbol to the left of the layer (in the Layers window). Your laser should be over the white and gray checkerboard now. Now select your laser layer in the Layers window and press CTRL+A to select the whole document. Press SHIFT+CTRL+C to copy merged. CTRL + C will work to copy everything in the layer we have selected.. Since we only have one layer CTRL+C will work just as well.

Now press CTRL+N to create a new document.  The new document will be sized to fit what we just copied into our clipboard. So go ahead and click OK. Now press CTRL+V to paste our artwork into the new document on a new layer. Now why we copy and pasted the document into the new document is simply because it allows us to get rid of any extra pixels in our document.  This is because Photoshop will only copy used pixels from the layers… if they’re transparent photoshop doesn’t copy them.

Now turn the background layer off in our new document. Then save our document as a png and load it up in Flash. (Just use File -> Import -> Import to Library in Flash)

Here’s our final laser as a png with transparency and everything

Tags: Art, Design, Graphic, Photoshop, Tutorial

This entry was posted on Monday, March 9th, 2009 at 9:26 am and is filed under Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.