DotaStrategy.com - View topic - The (Weekly Updated) screenshot guide for complete |\|00|35

thundercraker

Neighbourhood Graphics Guru
Monster Kill Posts: 244 Joined: 15 Nov 2007 gold

The (Weekly Updated) screenshot guide for complete |\|00|35

Posted: Tue Oct 28, 2008 9:08 am

The (Weekly Updated) screenshot guide for complete |\|00|313`/5

Quote:
This is the second time I’m writing this, thanx to a power cut at my place. This country sucks….NEVER COME TO NEPAL…trust me NEVER! Just don’t do it…promise?

Okay with that over lets get down to some other stuff. I did a forum search and nothing of this sort turned up which is why I’m making this guide. Note again that new lessons are updated weekly. Now where was I? Oh yes. For this guide I will be taking some things for granted:

-> You have Adobe Photoshop 7 or CS+ (not sure about 7)
-> You have basic knowledge of the tools (this is not a Photoshop guide >.>)
-> Your keyboard has a Print Screen button >.<
-> You have a computer at meets these specifications..
- A P45 + motherboard allowing for Quad SLI/ CFX
- 4 GB DDR3 Ram
- E8000+ ‘Penryn’ Core 2 Quad (Extreme Processor)
- 4 NVidia Geforce 8800 Ultra’s in SLI OR 4 Radeon 4850’s in Crossfire X
- 30+ inch MV LCD Monitor
(LOL LMAO…jk jk....leave the last one^^)

That aside if you really need to brush up your Photoshop skills the go here: Sig guide
It my guide to sig making and has a tutorial on some of the really basic terms of Photoshop. Okay, we’re all set so LET’s GO!!!

LESSON ONE: Getting a screenshot and loading it into Photoshop

Thankfully Blizzard has made this task fairly easy for us. All you need to do is press in Print Screen key while Warcraft is running to take a screenshot. There was be a message in the center of the screen saying “Picture Taken” or something to that effect and a shutter sound will play…you’ll get it. Now that it has been copied into the clip board all we need to do is paste it somewhere- and here our task has been made even MORE easy: which is because when you have something in your clip board then Photoshop will adjust any new canvases to that size automatically.

After having taken the screenshot open Photoshop. It is preferable to have it already open. After this Go to File>New Make sure that all the values are as follows:

Quote:
Resolution: 72 pixel/inch (This is the default value and is the standard for all wed graphics, a value of 300 specifies that the picture is for graphics, I mean advance graphics. Plus the size of the file is considerably smaller at 72)

Color Mode: RGB (standard), 8 bit (Standard and better for web graphics)

Click okay and the canvas (the white part where you work is created). After that Paste (Ctrl+V) and the screenshot will be pasted in the canvas. YAY! A sample is below. Now wasn’t that just too easy? However do notice that Photoshop shows that picture at 66.7% of its real size so you may want to reduce it a little bit. This can be done easily by following the following steps. Go to Image>Image Size and this screen will show up:

The width and height can be manipulated. However so long as constrain proportions (boxed in red) is check you will not be able to change the proportions of the image. In English that means that the ratio of the height to the width cannot be edited. (If you change one value than the other will automatically change) .

Remember to change the DOCUMENT SIZE (in blue) and not the pixel dimensions (for easier results, its difficult to judge the size from pixels). The document size is normally in inches- this can be changed to percent by clicking on the drop down menu (in yellow) and selecting pixels. The resolution can be changed from here as well. So in effect to half the image size, select percent in the document size and then enter 50. The image will be reduced to 50% of its original size.

Now, onto something more interesting. It has long been admitted that screenshots taken on the scourge side at night have a tendency to be dark and difficult to view. We will solve this problem by brightening the image. Go to Image>Adjustments>Brightness/Contrast in the menu bar and a window will come up.

The controls are pretty obvious. When you bring the brightness slider to the right, the image becomes brighter: same with contrast. I found a brightness value of 60 good for me. You may have your own thoughts.

Here you can clearly see the difference between the 2 pictures. The one on the right is brightened whereas the one on the left is not. Just that much can make your screenshot/guide so much easier to appreciate.^^

!END OF LESSON 1!

=============================================================

LESSON 2: Taking out stuff from your screenshots

Okay normally a plain unedited screenshot is frowned upon. Mainly because in shots depicting pawnage, your opponents, or your own (which is more embarrassing) name maybe shown like:

Quote:
Thundercraker pawned (*.*)’s head for 250 gold!
Thundercraker has a monster kill!
Thundercraker pawned stupid_player7’s head for 234 gold!
Thundercraker is godlike!
Thundercraker just got a double kill!
Thundercraker ended tero_tauko’s beyond godlike streak for 547 gold!
Thundercraker is beyond godlike SOMEBODY KILL HIM!!
Thundercraker just got a triple kill!

Obviously, (*.*), stupid_player7 and tero_tauko may have something to say about going public with the humiliating triple kill. This is why we will be learning to erase their names…..with elegance^^.

For this purpose we will be need some tools, these tools and their uses are described shortly below.

Selection Tool: To select a certain part of the screenshot namely the names

The Clone Stamp tool: To select the Clone Stamp tool, right click the stamp tool and select it. Once it has been selected you can use the shortcut key S.

Blur tool: This blurs out the seams of the name covering.

Now on to the editing…use the Selection tool to box the area where the names are over. Like so:

After this select the Clone stamp tool and press and hold alt just like when farming. The pointer for the Clone stamp tool (from now on CST) will change into a circle with a crosshair in it. Now click ( with Alt still pressed) in an area near where the name is. The texture of the terrain must match what is under the name. Now since you have selected the area around the name- only that area can be accurately edited. (Notice that the pointer for the CST changes one you let go of alt.) Alt was used to specify what area the CST was supposed to clone. Now go over to the selection and ‘paint’ it. (Drag the CST around while holding the left mouse button).

Here, I selected an area (in red) to clone and have cloned part of it over the name.

The result should be something like this:

Now you can use the blur tool around the newly filled name to make it seamless. There you have it. The name has been covered. But unlike most lame coverings, here it seems as if the name never existed at all! YAY!

Used very carefully this can also be used to erase life bars of many units so that only one (usually the one of your target) can be seen making it much easier you’re the viewer to see what’s going on.

Here is an example: If I say “Look at the creep with low health” on right you’ll probably say “WTF! Both of them have low health”, but on the right you’ll go: “Oh yeah...so what?”

Cropping

This section is based on Amprilage’s comment. I would probably have skipped this. But first let me explain what cropping actually is. Cropping is the act of selecting part of an image (the part you need) and getting rid of the rest. In Photoshop this is very easy. Select the crop tool [pic] and use it just like the selection tool to select an area.

After that right click the selection and click crop. And there you have it!

!End of Lesson 2!

Seak peak into lesson 3: It’s basically the opposite of this lesson- here you learn to remove stuff, there you’ll learn to add stuff….

========================================================

Lesson 3: Adding in stuff to your screenshots

Okay, you might want to add comments, AOE’s and such like to your screenshots. Here is how to do it. For this purpose you will be using tools such as:

- The selection tool: (Elliptical Selection tool) This is basically for the area of effect shading. Working is way easier this way.

- Pen tool: (And all the other tools that come under it) This is to make vectors such as lines, curves etc.

- Text tool: Does this need any introduction?

- Direction Selection tool: This is to manipulate points made by the pen tool

- Rectangle/Ellipse tool: This serves the same purpose as the selection tool (not literally) but the same effects can be achieved using both so I rarely use these, unless masks are involved.

Let’s get down to business:

Quote:
NOTE: BEFORE MAKING ANY ADDITIONS TO THE SCREENSHOT MAKE SURE IT IS DONE ON A NEW LAYER FOR EASE OF EDITING AND DELETING!!! ALSO I HAVE BRIGHTENED ALL OF THE SCREENSHOTS TO 20+ BRIGHTNESS.

Area of effect:

This is pretty simple. All you need to do is to select the elliptical selection tool and select an oval/circle area. (The ellipse tool can also be used). Now make a new layer on top of the screenshot.

Now once the area is selected you can choose to either fill or stroke that area. To do either just right-click inside the selected area and click fill or stroke. If you choose to fill a window will come up.

You can use various colors to fill the area. By default this is the foreground color. If you want to choose your own color or otherwise simply click the dropdown menu (in red) and select ‘Colors…’ then choose a color from the palette

If you choose stroke another window will pop up. Here you can choose the stroke width (in pixels) and the color of the stroke. Also you can specify where the stroke should be. Supposing you chose the stroke to be 2 px, Inside makes the 2 px stroke inside the selection, Center makes 1 px in and 1 px outside and Outside makes the 2 px stroke outside the selection. Finally you can specify the transparency and blending options- these can and will be dealt with later.

You can also choose to do both fill and stroke but remember that you must stroke with the Outside option selected or the fill will cover part of the stroke. I will be using both for this example. After this is done you can lower the circle’s transparency so that it looks like a real AOE selection.

Here is the final result.

Marking Routes

Okay another thing is to point out routes or jukeing spots. For this we will be using the pen tool. This is the easiest way to draw vectors into the screenshot. Here’s an example of a famous jukeing spot near the sentinel’s bottom tower. (Has this been changed in .56?) Either way it’s just a tutorial so it won’t matter even if that is gone. Okay first start by selecting the pen tool and making a basic polygonal perimeter around the route of the jukeing spot. It will look somewhat like this:

Now right click the pen tool to bring up the submenu that shows the Add Anchor Point Tool. After having selected this, add anchor points in between the lines of the polygonal perimeter you just drew out. These points can be easily dragged using the Direct selection tool to create a curve. So…

You should get something like that. Now all you need to do is right click anywhere on the vector and select Stroke Path. You can specify the stroke width and stroke color from this menu. And you should have a curved line following the jukeing route. Now to get rid of the anchor points go to Window>Paths in the menu bar. This toggles the Paths window on and off. If it’s already ticked then it should be in one of the tabs in the open windows. Then select the path in it and drag it to the bin. And you should have only the route ‘in white’ left. Note that in this image I have used the ‘Overlay’ transparency option.

Follow the steps above to create other routes as well.

Comments:

Okay this part is real simple. If you want to add some comments to a screenshot, you can simply type it with the text tool. However, for very detailed guides, you might want to point some things out in the picture. This is a combination of text, pen and selection tools.

First use the text tool to write something. I’m going to base this on a screenshot I already have. Yeah I know it’s boring…but LEARN!!

Here I have used the selection tool and the pen tool to highlight Mortdred and make a vector.

Next resize the text using the transformation tool (Ctrl + T) and reposition it: (but first you have to delete the path anchors)

After this use the rectangle selection tool to select a rectangle behind the text and fill it with the same color as everything else (vector and the circle), result:

!End of Lesson 3!

Next time: Using the lighting effects to highlight and create effects.
_________________

My Sig Making for Dummies Guide!! (@ Lesson 5) UPDATED!! (29th November)

My screenshot making guide!! (@ Lesson 3) UPDATED!! (31st Oct)

My Fanfic - Aeon of Strife - Chapter 1

Last edited by thundercraker on Fri Oct 31, 2008 8:07 am; edited 2 times in total