[ToRFracTaL]

FracTaL's Guide to Making a Basic SC2 Overlay

Welcome to my Guide to Making Basic SC2 Overlays! So you're a newb at making Starcraft 2 Overlays? Then this guide here is meant for you . This tutorial will help you produce a good looking overlay in no time!

You:
Yes. Really.

An example of what you can possibly make:

This is an EXAMPLE. This is not Team OS's official Stream Overlay.
P.S Since this is a Beginners Guide, our designs will look simple. Like I will say below, I will not be covering any advance designs etc.






Before we get started on anything I would like to make a few points:

• This guide is for Beginners. I will not be covering any advanced designs etc.
• Do NOT request for a pirated copy of Adobe Photoshop. I will NOT give you one.
• Unfortunately, I will not be able to handle any requests for Overlays.
• There wil be a lot of pictures here. For a reason. Which is to help the newbs out just in case they might get lost

Things you are going to need:

• Adobe Photoshop
• A Drawing Tablet (Optional)
• Good reading and understanding skills

Table of Contents
Part 1: Getting the Right Screenshot
Part 1-2: Finding Your Screenshot
Part 2: Making the Stream's Overlay Template
Part 2-1: The Minimap Area
Part 2-2: The Center Area
Part 2-3: The Action Area
Part 2-4: The Friends Icon
Part 2-5: The Timer
Part 3: Designing Your Overlay

l
Part 1: Getting The Right Screenshot


Getting the right screenshot is VERY important. Without the correct screenshot, your Overlay might become out of place or just really bad.

You will need to start up Starcraft 2 and create a game against a Very Easy AI.
Start producing workers until the first line is full.

It should look like this:


Once you have done so, go ahead and look for your Print Screen(PrtScn) button on your keyboard.
Found it? Make sure you have selected ALL the workers at the Mineral Patch(It should look like the picture above) and hit the Print Screen button. The game should lag for a second or two, and if it does you did it correctly.

+ [Print Screen] +

Pressing "Print Screen" or "PrtScn" takes a screenshot of your Starcraft 2.

i
Part 1-2: Finding Your Screen Shot

Finding your screenshot is pretty simple.
Open up your Windows Explorer and go to your Documents. Look for the folder "Starcraft II" and enter it. Look for your Bnet ID(e.g OSFracTaL.454 @6)

+ Show +

In shorter terms, Documents > Starcraft II > ____._ _ _ @_ > Screenshots

Mine looks like this:


Go inside the folder again and look for the folder "Screenshots". In it should contain your screen shot.

This is my screenshot:


You can quit the game once you are done. We wont be using it anymore throughout the rest of the tutorial.

Congratulations! You finished the first step. Hang on there dude, this wont take long!
l
Part 2: Making the Stream Overlay's Template

Go ahead and open up Adobe Photoshop and load your Screenshot.

Create a grey rectangle like so(It should the cover Task Bar):


After you have done that, rename the rectangle "Overlay Template" and then select the "Eraser Tool". Keep in mind that the Overlay Template layer, or OT layer, must be selected. Go ahead and use the Eraser and click on the grey rectangle.

A message like this should appear (Click OK):


Once done Rasterizing(If thats even a word), drag your OT layer below the layer "Background". You will not be able to see the grey rectangle any more.

Now you will need the "Polygon Tool". The polygon tool is in the dropbox under the Lasso Tool.

Image of the Polygon Tool (Highlighted in Yellow):
If you see the Lasso Tool, click and hold the Lasso Tool.
A menu should appear allowing you to switch between
the Lasso Tool, Polygon Tool and the Magnetic Lasso Tool.

Make sure you selected the Polygon Tool and the OT Layer. This part gets hard to explain so please forgive me. Using the Polygon Tool and holding shift, start by making a border ABOVE the Task Bar, below the edge of the grey rectangle border. Start cutting along the Task Bar.

Note:You must cut above the number 1 etc.

It should look like this:


This is how it should look like once you have completed the whole way:


This is how it should look like when the OT layer is on top of the Background layer:


With in mind that the OT layer is selected, press the "Delete" button on your keyboard.

This is how it should look like when the OT layer is on top of the BG layer and once the borders have been cut and made:


If you are still following along, good job! It gets easier after this

Okay, now for the easier part. We are going to cut the spaces for the Minimap, Workers Area, Action Area, Friends, and Timer. Remember that the OT layer has to be below the Background layer again.
l
The Minimap Area
We will start with the Minimap. Using the Rectangular Marquee Tool,select the Area of the Minimap. Remember, the OT layer must still be selected. Once you have selected the Minimap area, go ahead and press delete on your keyboard.

This is how it looks like selected:

l
The Center Area
Now we are going to do the center area, where the Workers Section is. Note that you will have to bring the Marquee tool all the way down, like in the picture below. Like how you did the same for the minimap, select the area and press delete on your keyboard again.

This is how it looks like selected:

l
The Action Area
Do the same for the Action Area and hit delete on your keyboard.

This is how it looks selected:

l
The Friends Icon
This one is a bit trickier than the others. You are yet again going to need to use your trusty Polygon Tool. Dont forget to hold down Shift on your keyboard. Press delete on your keyboard and we have one more to go

This is how it looks selected:

l
The Timer
Pretty simple, go back to your Marquee Tool and select the timer. Press delete on your keybard and Ta-da!

This is how it looks selected:


If you want to see how it looks like, go ahead and drag the OT layer above the Background layer

This is how mine looks like (Your end result should look like this too or your own design):



Congratulations! You finished Part 2 of this 3 Part Tutorial. Keep going dude!

l
Part 3: Designing Your Overlay

We are finally down to our last part.

We are going to need the "Magic Wand Tool".

The "Magic Wand Tool" (Highlighted in Yellow):


Using the Magic Wand Tool, click the gray area.
That will allow you to not draw over the gray area So now you can start designing.
So for my design, I will be using 3 colors/shades.
I will be using Dark Red, a Darker Red, followed by an even darker Red.
Using the Paint Brush, create designs for your Overlay. Note that there are different designs, by pressing on the Cog Icon.

Different Brushes (The Cog Icon is Highlighted in Yellow):


So tinker around with the brushes, make cool designs etc.

Here is my end product:

Note that the empty space between the Action Area and the Worker Area is for webcams. IT IS OPTIONAL.

Note: If you really have problems with making a design, add me on Skype. I'll personally help you with it during my free time
------------------------------------------------------------------------------------------
Why I chose to make this: I noticed that a lot of people were wondering how to make one and I couldn't find any tutorials here at sc2sea. So I decided to help the community out.

Okay guys, thats about it for the tutorial. Please do forgive me if I make any spelling errors, major errors etc. I would also like to apologise at some points that the pictures get really big, Im working on a solution for that

On a side note, I'd like to thank everyone for reading through this. I spent a whole day's time to do this and it's my first tutorial.

If you have any problems, feel free to contact me:
Skype - iBeatYouNoob
eMail - renzo_canare@hotmail.com
Or you may leave a comment here

Post your Overlays in the replys!

Thank you everyone.
-FracTaL

Quick Comments

	Maynarde:	Whoah nice!
	Mox:	Champion. Nice stuff mate!