Professional Scope Overlays

A Tutorial for Counter-Strike: Source

SEX! Ok, we got your attention. We are one of the oldest mod sites on the Interwebs. Sign up and maximize your browsing experience.

  • Subscribe: Get notified of new submissions like this.
  • Say Thanks: Show your appreciation by sending TheSniperFan points.
  • Post: Give TheSniperFan your thoughts on this Tutorial.
  • Vote: Help TheSniperFan win the Monthly Awards.
  • Rate: Give this Tutorial a rating out of 10.
  • Flag: Alert moderators and warn members of a problem with this Tutorial.
  • Watch: Get notified when this Tutorial is updated.
Mascot

Stop Lurking!

Sign up

Already a Bananite? Login

A tutorial about drawing high-detail-scope-overlays.

Professional Scope Overlays

by TheSniperFan IT WAS DONE IN PDN 3.36! THINGS MAY DIFFER IN 3.5! DO NOT BLAME ME! This is a tutorial in which you will learn how to make professional Scope Overlays in Paint.NET. It's recommended that you've read my tutorial "Working with PDN", if you aren't experienced in working with that program. I've split this tutorial in four parts:
  • Theory
  • Setting up PDN
  • Porting a reticle from a screenshot
  • Designing your own reticle

I. Theory

First we'll cover some theoretical aspects, like how a reticle should look like or which resolution is the best. This is important for you to know what to do later.
A short discussion about the design
I'm sure you know that there are tons of reticle-designs. But you can put them in two big categories:
  • Simple reticles
  • Tactical reticles
Simple reticles are what their name says: "Simple". The standard one from CS:S is so one. It's just a thin cross. Those reticles are used not only to be made fast, but to give only the most important information: "Where?" They also keep the sight clear and are easy to use. Tactical reticles are used to give some extra information. They aren't good for hobby-hunters, but for professional sharp-shooters. The bullet does never hit the point marked by the cross perfectly, because of factors like distance, wind or the fact that every rifle is like a, well...banana, but not so extreme. Normally it doesn't matter, but for sharp-shooters it does, because of the very high distances and the fact that they have to be able to hit a pretty small target on those distances. Later you'll design your own reticle with the goal to make it as perfect as you can. We'll cover points like these:
  • Day/Night
  • Dot/Cross
  • Specials

II. Setting up PDN

This is pretty easy: "Download every plugin that could be useful for you." But there are some you will use:
  • VTF-plugin (In the actual PDN version it crashes! Get the VTF-Edit too!)
  • Polygon / Stars plugin
  • DotAtCenter
  • Centerlines
These HAVE TO be installed! Now you can run PDN. "Now I create a new image with 2048x2048, draw my reticle, flip it and save it then, right?" The answer is: "NO!" This tutorial will cover the professional way to realize your idea. The problems the easy way from above will cause are following:
  • Blurred
  • Not round
  • Not for every resolution and aspect ratio
So, I'll show you the proper way. First you need to know that the biggest problem is the scaling. You can't do anything about it, because the textures have to be (x²)x(x²) in their size (…, 512x512, 1024x1024,…). But monitors don't have an aspect ratio of 1/1. The three common ones are 4:3 (Letterbox), 16:9 (Widescreen) and 16:10 (Widescreen). I'll show you what x/y means and how it helps us to prevent high scaling. Just take a look at the following piece of math:
Resolution:  
a)	1440x900
b)	1024x768
c)	1680x1050
d)	1280x768

1440/900 = 1,6
1024/768 = 1,3333333…
1680/1050 = 1,6
Aspect ratio:
a)	4:3
b)	16:9
c)	16:10
4/3 = 1,3333333…
16/9 = 1,7777777…
16/10 = 1,6
Now that you hopefully understand what aspect ratio and resolution are, you should be able to use a calculator to get the right resolution for your image, so that you do not scale up, but down. That means when your PC runs CS:S on 1680x1050 (16:10) and your Overlay is 2048x2048 pixels, you create a new image in PDN with 2048x1280 (or 3277x2048, what would be the best because 3277>2048>1680 and 2048=2048>1050, but it's no good when your PC is lame, so just try it out.) If you use other aspect ratios, open PDN create a new image with the size of your aspect ratio (e.g. 4:3), then go on "Image" then resize the image. PDN will automatically calculate it, if the option is ticked. I used 1440x900, which is the resolution of the notebook I used. More does take too long for PDN to render. If you want to do everything right, you create your Overlay three times, once for each aspect ratio. Here are some things you should know too, before we start working:
  • No antialiasing should be used (when scaled down, it will aa from itself)
  • The Image has to be mirrored from the beginning (left/right), but flipped (180°) in the end
  • Take advantage of PDN's own file type ".pdn", which saves your layers separated and without quality loss

III. Porting a reticle from a screenshot

Now we can start practice. Look at image 2, which is a screenshot from the German film "Das Papstattentat" (I don't know how it's in English, but it's a great film - you should watch it). Well, you see it's a tactical reticle, which looks really cool. We are going to port it to CS:S. First we'll analyze this one. Here are the questions:
  • What colors are used?
  • Dot or cross?
  • What shapes are used?
  • Are there any things that are impossible?
Find the answers. Those are the first that you have to ask you. Here are the answers. Check yours: -Black, White, Red => Background color will be grey. Set it! -A small cross in the center, and two big ones outside. One is twisted by 45° (Centerlines plugin will be used, instead of DotAtCenter) -Rectangles, Circles, Crosses, Lines (First the easy one, the white rectangle) -You can't see this on the picture, but the red parts are animated (Dots and Numbers) For each part you'll create a new layer. Now let's start with the white rectangle. Create a new layer, then set your current color to white and run the Polygon / Stars plugin. Do everything yourself, but if you're stuck…here are some tips: (45°, 4 Vertices, no aa) Now cut out the pieces like in the screenshot (New layer, Polygon / Stars <0°, 4 Vertices, no aa, look for the right size>, Magic wand selection, click on the other layer, but keep the selection, delete, delete the newly created layer) The first part is done! Now let's do the small cross in the center and the thick part, logically on a new layer. (New layer, Centerlines, Line tool , cut) That was really easy. I have cut the the second cross, if it's may too thick, it's on another layer. Now the Cross that's rotated by 45°: (New layer, Centerlines, "Layers" / "Rotate / Zoom" , new layer, Polygon / Stars , magic wand, select other layer, delete, delete layer with circle) Now that was maybe a way hard for newbies, but you learn from it. The next step will be the circle for the outline. (New layer, Polygon / Stars [max. Vertices, min. depth, a nice size, a nice thickness]) Now we do the details. First that small thing left from the rectangle. (Use your eyes, I can't help you, because I made it free-hand. If you are stuck, open my file) The next part is the lines that are in the lower left part of the reticle. ({New layer, Centerlines, "Layers" / "Rotate / Zoom" }Do this until you have enough lines, but raise/lower the rotation by 5° every time like 45, 40, 35…50, 55, 60…, move/merge the layers for the short lines together, move/merge the layers for the long lines together, new layer, 3 times {Polygon / Stars }, then use magic wand selection and cut off the parts you don't need, like before, merge layers for short and long ones together, text tool) Now we'll do the cross from the thick ones to the white rectangle (I know it's a bit longer). (New layer, centerlines, cut) That was the easiest part of the whole tutorial. Now let's do that thing over the white rectangle. (Use mine, if you're stuck) The last part would be the two red (which are normally animated) parts. Here is how I did it: Red part in the left: (Color , Pencil-tool for those lines and the dots, text tool ) Second red part: (Color , Pencil-tool like above, selection-tool, select rectangle like in the screenshot to make a red one under those numbers, color , text-tool <"Digital 7">, layer-settings Now you're done. Save your image WITHOUT MERGING LAYERS DOWN as a ".pdn" file somewhere. I renamed the layers before saving so I know what's on it. If you allow others to use and edit your Overlay, it's the best to add the ".pdn" file in the archive. But say that they have to use Paint.NET. Now you have only to resize it to 2048x2048, flip it and then save it as ".vtf" with the "Antisotropic"-setting enabled (no tick at "Point Sample" or "Trilinear").

IV. Designing your own reticle

Now that you have practice, you are going to design your own reticle. It should not only look cool, but be useful in game. Here are some tips:
  • Using dark and bright colors (e.g. black/white) would mean that a player can aim on extreme dark and bright spots without the reticle to disappear.
  • A dot may be useful on short distances, because the whole overlay is clear, but it can cause the head of an enemy to disappear on large distances.
  • Never draw the crosshair itself. It is rendered by the game and is not only perfectly centered; it's as thin as possible and not blurred.
  • Dirt is realistic, but should become less, if you come nearer to the center. In real life you would clean it at least so much that you can aim without any problems.
  • When your reticle is done for one aspect ratio (e.g. 16:10) you can select only the reticle, with no borders, paste it into another image with another aspect ratio and then scale it. It's faster than drawing the whole reticle again.
Well, that's it. I hope you like it and it helped you.

Posts

  • 8y
    Akkenoth avatar
    Akkenoth Offline
    Member Joined 8y
    Ah, that wasn't my scope. Mine is perfectly centered, but looks so bad because of this default crap. Maybe it's something about .vmt files? I don't know almost anything about them, but maybe you can say sth about it?
    If you want, I can send you my scope.
    I never finish anyth
  • 8y
    TheSniperFan avatar
    Member Joined 9y
    1,480 points Ranked 3185th
    9 medals 1 rare
    • 6 years a member Medal icon
    • Reached 1,000 Points Medal icon
    • 1 post awarded Exemplary Feedback Medal icon
    • One month a member Medal icon
    • 6 months a member Medal icon
    • 1 year a member Medal icon
    Posted by Akkenoth
    Absolutely. And w/ screenshots, pls ;)
    Also, do you know how to make the old scope do NOT show? Because I have both (custom and original) at one time... like this (from another tutorial)


    No sorry, I already searched on the internet and the gamefiles, but I couldn't find anything...and btw your scope does not look pretty centered.
    Learning stuff...
  • 8y
    Akkenoth avatar
    Akkenoth Offline
    Member Joined 8y
    Posted by TheSniperFan

    Posted by Akkenoth

    Screenshots, screenshots! I miss them...
    anyway, nice tut ;)


    Hey, should I try to do this again in the actual PDN (3.52) and make this scope part a video?


    Absolutely. And w/ screenshots, pls ;)
    Also, do you know how to make the old scope do NOT show? Because I have both (custom and original) at one time... like this (from another tutorial)
    I never finish anyth
  • 8y
    TheSniperFan avatar
    Member Joined 9y
    1,480 points Ranked 3185th
    9 medals 1 rare
    • 6 years a member Medal icon
    • Reached 1,000 Points Medal icon
    • 1 post awarded Exemplary Feedback Medal icon
    • One month a member Medal icon
    • 6 months a member Medal icon
    • 1 year a member Medal icon
    Posted by Akkenoth

    Screenshots, screenshots! I miss them...
    anyway, nice tut ;)


    Hey, should I try to do this again in the actual PDN (3.52) and make this scope part a video?
    Learning stuff...
  • 8y
    Akkenoth avatar
    Akkenoth Offline
    Member Joined 8y
    Screenshots, screenshots! I miss them...
    anyway, nice tut ;)
    I never finish anyth

Share

Shareable Image:
Share banner
HTML embed code:
BB embed code:
Markdown embed code:

More embeddable images

Bookmark and Share

Credits

Key Authors
TheSniperFan
Text, draw

Submitter

TheSniperFan avatar
Member Joined 9y
1,480 points Ranked 3185th
9 medals 1 rare
  • 6 years a member Medal icon
  • Reached 1,000 Points Medal icon
  • 1 post awarded Exemplary Feedback Medal icon
  • One month a member Medal icon
  • 6 months a member Medal icon
  • 1 year a member Medal icon

TheSniperFan
Creator
Sign up to access this!
Sign up to access this!
Sign up to access this!
Sign up to access this!

Category

Details

Difficulty Level
Advanced Difficulty

Attributes

Stats

Posts
5
Views
5,211
Date Added
8y
Date Modified
4y

Scores

  • Not yet rated
Sign up to access this!

More from Submitter

bcp.crwdcntrl.net tracking pixel