ZerG~LinG's Battlereporting Utilities Guide

Table Of Contents


The Basics

Your setup

Program feature: Photoshop

Program feature: Paint Shop Pro

Program feature: Flash

Program feature: Dreamweaver

Author's Notes


Hi, I'm ZerG~LinG and at the time I wrote this, I've written well over 15 reports, so you might say I have a bit of experience.

This guide is different from any of the others, (I recommend you read them all) none of this is required to make a basic report with some pics, a bit of html etc. etc. But if you want that gold report, your report better have some flair. Flair can by obtained in two ways, either you have exceptional good writing, or you have a couple of programs to help you out. I'm gonna talk about the latter, since writing comes from the "inside".

As you can see on the Table Of Contents, the guide starts with some basic techniques for you to use while writing your report, to make life easier for yourself. Later, I present mini-guides for each of the programs, not a mad in-depth guide (you could write thousand of pages on Photoshop alone) but more like a quick guideline to make eyepleasing pictures and the like, with minimum of effort. If you want a more complete guide to each of the programs, I'm afraid you're gonna have to buy one from the stores, since people don't write 100+ page guides for free -.- In the end of each guide, I'll give it a rating as a battlereporting utility.

Anyway enjoy the guide!

To Table Of Contents

The Basics

So basically this is what you need:

A text editor. For the obvious reason, you don't write your report directly into the submit report thing, you have a text file on your computer which you open whenever you're in the mood for writing. Many people start with the obvious choice: Word, but unfortunately the popular text editor sucks when it comes to html. First of all, some versions screw up the " things in your report, because the ones word uses are for writing, and not html. If you choose to add pictures and everything directly into word, it will all end up in a mess, pics aligned wrong and text screwing up, so basically steer away from word. Personally I prefer WordPad. Every windows computer has it, if you've never really heard of it, look in the Start menu, and go Programs>Accessories where you'll also find paint and some other Microsoft"cheap programs". This program basically has everything needed to write your report, and comes with a neat function. When writing your report, press Ctrl+H and the replace menu pops up, this allows you to change a certain word into another word, and do so with all similar words in the text. This is useful for times when you need colored names, for example, you don't wanna write the <font color="red">Hax0r(99)Chobo</font> thousand of times during a report, instead you could just write HAX or whatever, and when everything is done, you replace all the HAX's with the appropriate name and color code. (This tool is also available in word and some other programs).

A Picture editor. These days, what's a report without pics? Every time I see a text-only its like there's missing something, unless the report is written by a skilled writer. So basically you need a sexy program to do the gosu effects. Paint Shop Pro, is what I like to think of as middle-class, the program isn't very powerful, but its easy to get into, and after a few seconds you'll be tossing gradients and mad textures at your amazed readers. PSP is available as a 30 trial program at www.jascsoftware.com, and always remember to download the newest version, there's a 3.11 version available, but its very low-quality. If you're looking for the real good graphics, you need either Photoshop or Fireworks, I've had copies of both, and I prefer Photoshop by far. Therefore, I won't comment further on Fireworks. On to Photoshop then, a 30-trial version can be found at www.adobe.com. This brings me to my next subject, pirate versions, cracked, smacked and damn illegal. In fact, let me be fair, in YRM's graphic guide, he recommends buying Photoshop 5 for 100 bucks which is quite cheap for picture editing programs. But lets face it, who of us want's to spend that kind of money to do a bit of battlereporting? I truly think that if you use the program a lot, think about buying it, but when I got my Photoshop 6, it sold for several hundred dollars, and I got the less-than-legal version, since I do not intend on making a career with Photoshop or anything, it was the only reasonable thing to do. 99% of people who visit br.com have illegal stuff on their computer, and I'm sure you won't mind downloading a cracked pic editor from Kazaa, or any similar download services.

If you don't like either of the above mentioned programs, there is another alternative. The program "Gimp" is free and is also pretty good. Get it here

A picture viewer. There really is only one picture viewer in my opinion. ACDSee, thank you. Get it at www.acdsystems.com as a free trial version, register if you like it. Its the easiest thing on the net, great interface and a simple tap on the spacebar takes you to the next pic, the only thing for watching screenshots. (And other pics if you know what I mean...) Another great, free picture viewer is the "Irfanview", available here

Winamp. For the best music/mp3 player on the web. (Hi free advertising)

With all these things in order, lets move on with the next part.

To Table Of Contents

Your Setup

This describes your work style, how you setup your writing, its only guidelines, and can be ignored if you have your own "Style" Its just what I found most comfortable when writing reports.

First of all, whenever you observe, or play a game worthy of a report, remember to take some pics of the chat, its always fun to have some actual in-game comments, furthermore, the lameness that nohunters posess will have your reader rolling on the floor. Or maybe not.

When you're done with the match, always take replay, Blizzard didn't give us the replay option for nothing, and its a pleasure when writing reports. Watch the replay some times before starting your pic-taking, and then put the speed on fastest, allowing you plenty of time to get the sexy shots you want. Also when there's big battles taking places, press "p" for pause and make sure you get the exact right angle, etc. etc. Its a bitch to have substandard screenshots when picture editing.

When the actual writing commences, your windows bottom line, should look a bit like this:

With these three programs, writing may begin. You write your report with the screenshots from ACDSee as basis, and after you've finished a paragraph where you might align a picture to, you use your sexy ALT+TAB skills to switch quickly between programs, remember Photoshop and WordPad might as well be other programs. Now, when making a collage for example, it would be difficult to open all the pics in Photoshop, and then moving them from window to window in Photoshop, instead do as the pic shows, make the marquee, and Copy it by pressing Ctrl+C, then enter Photoshop with ALT+TAB (working you left hand) and press Ctrl+V to paste it as a new layer!

This way it's much easier to make collages with many pics, and make the pics, while you're writing.

This technique is of course optional, and if you like fiddling about in Photoshop and pressing open each time you need a pic more on your collage, so be it. Don't say I didn't warn you :(


To Table Of Contents

Program Feature: Photoshop

One of the most used picture editing program worldwide, and the best battlereporting utility you can find. This section will teach you the basics of Photoshop, and how to get great effects without breaking a sweat.

Overview: At first sight, Photoshop can seem incredibly and confusing, and its far from the basic layout of PSP and Paint, although somewhat the same. To the left you have your standard options. Text, basic shapes and marquee are the ones you'll be using. Also, the two colors to the left represent Foreground and Background color. Background color isn't used in the general pic editing, but set the background to the appropriate color before making a new collage/pic.

Lets go through this like we were gonna make a sexy collage that showed some goons getting raped by psi storm, one of the obvious things to put in pics are stuff like psi storm, things that capture the eye and make raters/readers happy. So you got the screenshots, and you got three nice pics of the storm rape, these are not transported from ACDSee (Your pic viewer) to Photoshop, like explained in the"Your Setup" chapter. Simply Ctrl-C and then Ctrl-V from ACDSee and to Photoshop and place the pic accordingly. For this I've created a Photoshop document with a black background and 200x400 size. A wide pic that might shouldn't be aligned. Lets look at what we have:

Now this doesn't look very exiting, and would be considered pretty average. For example, where's the borders? And a sexier background might just do the trick, so lets start with that first. Important: You might say the soul of Photoshop is the Layers Menu, so make sure you have that on screen, its placed to the bottom right as default, so leave it there. Look in the "Window" menu and click on the Hide Layers//Show Layers option.

In the layer menu, you can see your different layer, at the moment it should show the background layer and the pics on their separate layers, like so:

You can change the names of layers by rightclicking on it and pressing the "Layer Properties" option.

Delete and make new layers via the bottomline menu. Each time you paste a new pic, it automatically generates a new layer. All of this is less than interesting, the funny stuff comes when you double-click the layer. Then a new menu pops up with numerous options. In here you'll find drop shadows, glow effects, bevel and emboss, texture overlays (Photoshop have lots of ready to go textures) and a whole lot more. I decided to spend just under ten seconds in the menu and create these effects on the pic I created before.

This is where you use your imagination, play around with the effects and all of their possibilities. To the left you can see a couple of quick effects I made. The first pic is made with a border around it, where I chose a texture instead of just a color. Also I added a ligthblue glow. The second image is the best by far, the irritating texture on the border has been wiped away, and instead I used the Bevel and Emboss option, with a sexy red glow around it.

These are just quick examples that I made, and Photoshop is all about playing around.

In the effects menu, you can also set the opacity and lots of other things.

In general, you should be careful about getting to many effects on your pics, when I started using the program, I basically tried to use as much effects as possible, and the picture loses its real value; to show the reader what's going on. Always have this in mind.

The above pic has a lot more flair than the first, but we can still do a bit more...

Double-click on the background layer, it will ask you to change it to a regular layer, do it. When that's done you can access the effects menu, to sex this pic up, I decided to add a funky gradient, so click on "Gradient Overlay". To the left of the gradient selection menu, there's a small arrow that can be used to chose another set of gradients, I found this under special effects. Its a set of lightblue lines that cross the image, and it looks quite good. To correct the faults from the second pic, I make the color of the glow the same, and cut the stupid texture border. This is what I ended up with:

Much more eyepleasing, yes?

To make more advanced patterns for borders and the like, make a new pic. Draw a square that's about 100x100, and make the square look like the pattern you want, go to the layer effect menu, and turn on the sexiest effects, then Ctrl-click the layer with the square, selecting it in marquee. Then go Edit>Define Pattern, and make it a pattern that you use like the pre-made pattern. This way you can make endless patterns, each one unique from everyone else's.

With the add of text, you can enhance a feeling in a pic, crack a joke or make the whole thing look stupid. Text effects work much the same way as picture effects, play around with them to get the best results.

One last thing: The nice people over at Adobe even created a few preset styles for you to try out, but I really don't recommend using these, maybe for inspiration, and to see how you produce some effects, but wouldn't it be dull if we all used the same preset styles?

That concludes the Photoshop part of this guide. The most important rule to Photoshop is to play around with it, adjust switches whenever you can, turn every effect on so you can what it does, then take away the useless ones, and you'll end up with some great battlereporting graphics :-)

ZerG~LinG's utility rating: 10/10

To Table Of Contents

Program Feature: Paint Shop Pro

The poor man's Photoshop, PSP is currently at its seventh version, and is quite a nice pic editor, but the problem is that it'll never really get quite as good as Photoshop, and will therefore always be second choice, unless Photoshop confuses you, or that you can't grab Photoshop for some reason. Therefore I've decided to add a small guide with just a few pointers for PSP, hope it helps.

The layout of PSP is very easy to navigate, and you should see the "Effects" menu immediately, its sitting in the top, next to the File and Edit options. PSP is so easy, because all you need to do is insert a picture, and pick one or more effects. I can recommend the "Buttonize" effect, just remember to adjust the values in the pop-up menu.

This was all for PSP, I know it's not much, but you really should go with Photoshop :P

ZerG~LinG's utility rating: 5/10

To Table Of Contents

Program Feature: Flash

The most exciting webtool alive, Flash can make beautiful animations, and flashing headlines for you website or in this case, your report. Be careful about what you use the program for, most people use it as a intro, which is the obvious choice. You could also use it as a way of showing buildorders and positions if there's a lot of players. For example, in a 7 way FFA, a introductionary flash would be awesome as a way to show everyone's positions and startups.

Flash already has an built-in guide that's very useful, so I won't explain the basics of moving objects etc. etc. Instead I will fill out the gaps that the built-in guide leaves.

First of all, when you make a picture in photoshop and save it as a .jpg, it will always be square, see what happens when I make some text in Photoshop and try to import it in Flash:

As you can see, the pic I saved with a transparent background came into flash with a white box around it, which doesn't exactly blend in. So basically what you need is: Instead of pressing "save" you go "save for web" (in photoshop) just remember to have a transparent background. Now select the PNG-24 option, and save it. Then, when you import it to Flash, it will look like so:

Much better eh?

The last thing I will explain in Flash is the importing of music. In my opinion, a flash without music is dead. The reader will see some moving objects and some text, but nothing that'll make him go ape over your skills. Now, get your favorite track (in mp3 format), and listen to it. Try to picture the flash pumping to the beat of your track. A flash that follows the music will feel fantastic, and make the rater ohhh and ahhhh.

Now for the practical part, press Ctrl+R to import, I've chosen the Linkin Park song, In The End, a pure classic :-) Then make a new layer, name it "Music" if you like, and make a keyframe where you what your music to stop, (you can always move this) and selection the section from the start to the keyframe. From the menu "Sound" (make sure its open in the menu "window") select your track from the dropdown menu and set the sync to "Stream" this way you control how long it plays, and it won't go on forever. Then preview the flash by pressing F12 and turn up those speakers.

And that's it for Flash 5, the built-in guide can be accessed from the Help menu and explains all about moving objects, symbols and text.

ZerG~LinG's utility rating: 8/10

To Table Of Contents

Program Feature: Dreamweaver

From the same people that made Flash, Dreamweaver can write complex javascript, insert flash buttons and much much more without any hassle whatsoever. Its primary use is webpage crafting, but it can be used as a killer battlereporting utility. This guide covers some basic Dreamweaver functions.

Writing your report in Dreamweaver has its advantages, you can see how the report look immediately, instead of waiting for the moment of truth when you preview your report on br.com, a feeling all reporters are familiar with, stuff like picture alignment always seem to screw up when you preview the report, and after spending countless hours working on it, you want to make it perfect. This can be avoided with Dreamweaver... Or can it? Admittedly, Dreamweaver isn't perfect, and if it fucks up some javascript code, you can't fix it manually since you probably have no idea how to fix it. So if you want to stay on the safe side, do your report in WordPad.

Mouseover pictures are getting popular, and with Dreamweaver everyone can do it. Mouseovers are useful when you want to make a surprise, like showing the outcome of a battle as soon as the reader places the cursor above the image. The javascript code is kinda difficult to memorize, so use Dreamweaver to do the work and copy the code into your report. First of all, press Ctrl+F2 to make the "Objects" menu pop up, this is the main toolbar and will create most effects you need, including Flash movies and buttons, dropdown menus, and the basic image. Pick the "Common" set and chose the topright option, that's the rollover function, the rest is a pure walkover.

Anchors are equally easy in Dreamweaver, in the menu "Invisibles" (still in the objects toolbar) there's a little anchor, select the place in the text where you want your anchor, and press the button, now chose a simple name for it. By pressing Ctrl+F3 you get the properties toolbar up, there you have quick access to some basic stuff like font color and alignment. Find the text you want to point to the anchor, select it, and type #NAME OF ANCHOR in the link section, its that easy.

Flash is created by the same people who's behind Dreamweaver, and the two programs work great together. The common menu has the basic "insert Flash" function, that saves you from copy/pasting the code from flash, it also has a bundle of pre-made buttons that look very sexy, like this:

Dreamweaver has tons of options, I've only selected the tip of the iceberg here to wet your appetite. Like with Photoshop, you get experienced with the program by playing around with it.

ZerG~LinG's utility rating: 9/10

To Table Of Contents

Author's Notes

I hope the guide can help some of the newest writers, trying to improve their reports by adding a bit of flair to it. I would like to thank WilliamWC3, the first report I ever read was his, and it kinda got me hocked :-) Also thanks to br.com for hosting a killer site (and this guide hopefully ;-), and to all the writers out there.

I would like any comments on this guide via my mail, constructive criticism is appreciated and I might update the guide if enough people find it necessary.


To Table Of Contents