Can someone please identify what tool may have been used to annotate this screenshot?

but you did not say what kind of document is it

Oops.
The screenshot is a .PNG file embedded in a WIki page. I suppose it's the PNG part of my answer that matters. :)

Viki, thank you for your quick response. Sometimes the best comments are those that tell me I did not properly ask the question! :)

Steve

I often put together "How to" pages like this simply using text box or shapes in Word.
Is this a pop out that appear on MouseOver or is it a fixed page?

MASQ-
Fixed page...the text box always appears.

Are you saying Word can add such text boxes to an embedded image?

Thanks!

Yes, the box sits on a layer in front of the image - you can use the "Group" function to fix the relationship between the image, box and lines if needed.

Well, what I need to do is to take a fresh screenshot from the current software. Then, I'll add the text boxes.
Are you saying I should paste the non-annotated screenshot in to a Word doc and then add the text boxes from there?
Thanks!

There are many free and paid software which can do what you want.

Free
Photofiltre
http://photofiltre.free.fr/download_en.htm

Paid
MS Photo Editor which comes with Office 2007
MS Visio

Jackie,

MS Photo Editor sounds promising. I have Office 2013, so can I assume it's part of the installation? So far, I've looked but can't find it.

Thanks!

MS Photo Editor sounds promising. I have Office 2013, so can I assume it's part of the installation?

No.

MS has removed its Photo Editor from Office 2010 onwards.

I use Photofiltre now for annotation to pictures and photos. MS Photo Editor is only used when I need to do OCR on .TIF (fax files).

MS Picture Manager is not as user friendly as MS Photo Editor.

It is only my personal experience.

Hi Steve,
I don't know what tool was used in the first screenshot you posted, but there are many products that can annotate PNG files with text boxes and lines. Many of them give you controls on the various elements, such as the ability to set the color and font of the text, the color of the background, the color and width of the line and whether or not it has arrow heads, etc. One product that can do it is PaperPort. Here's a sample of annotating a PNG that looks similar to the one in your question:


Regards, Joe

OK, some good options here. Let me look into them and I'll get back to you all! :) Thanks.

How I would do it:
- Use MS Word for annotation and then print screen, paste in a free photo editing software and crop as you need.
Free potshot edit software: GIMP, PAINT.NET
https://www.gimp.org/downloads/
http://www.getpaint.net/index.html

or more here:
http://www.techradar.com/us/news/software/applications/best-free-photo-editing-software-10-top-image-editors-you-should-try-1135489
http://www.digitaltrends.com/computing/best-free-photo-editing-software/#:SVw2NcrUNQb2pA

I do not recommend to do print screen as the final output is far from satisfactory from my experience.

That depends by the resolution needed.
For web annotation check also next:
http://elearningindustry.com/6-training-technologies-cant-overlook
http://mashable.com/2010/12/23/free-annotation-collaboration-tools/#n4XzdP555mqW
http://www.educatorstechnology.com/2012/06/13-free-web-annotation-tools-teachers.html

> I do not recommend to do print screen as the final output is far from satisfactory from my experience.

PrintScreen and Alt-PrintScreen and any other way you capture screenshots (Greenshot, Snagit, Snipping Tool, etc.) provide the only viable way to create documentation on programs with a GUI interface, and I strongly recommend the practice. In my experience, the results are completely satisfactory, as can be seen in the articles and in the steps of the videos that I've published here at EE (including the article that MASQ referenced earlier and the steps of the corresponding video). Just one person's opinion, of course. Regards, Joe

I have not forgotten about this issue....sidetracked on another project. Thanks.

OK...
I've stumbled upon a related issue. I can't provide the screenshot for proprietary reasons, so will do my best to describe using NBA.com. :)


Translating my needs to this screen, I wish to replace View All Scores, with alternate text  However, I must keep what what displays to the right on the same "line", for lack of a better term.

Can Paint help me here? If not, can other tools mentioned such as PicPick?

Btw, if anyone feels this issue is best added as a new topic, feel free to let me know!

Thanks,
Steve

This is in Paint

@MASQ and @Viki2000.

I''m fine with doing it in Paint or Word. Please clarify how to do. Thanks!

Hi Steve,
I see that MASQ and Viki have you covered on Paint and Word, so I'll show you another tool — Paint.NET — an excellent, free, image editing utility:
http://www.getpaint.net/index.html

I decided that a video would be the best way to show you how to do what you want:
PaintNET.flv

Regards, Joe

Select some background from the box containing the text you want to replace and then paste and move over the old text.  Select the Text tool size, font and color to match and enter your text.  Move it so it's exactly where you want it.  Done!

Paint is pretty basic you don't get much in the way of Undo and once you're happy with a new object and have put it in place and the selection border is gone you can't re-edit it.  Not an especially steep learning curve and "free with Windows" :)

As you can see though plenty of options on how to do this you just need to find something that works for you.

MASQ- Yes!! That worked in Paint.

While I couldn't find the exact color I needed, it's close enough.

@John - Thanks for your input.

So...this sub-question was resolved so easily that I want to assign points; however, the greater issue of adding text boxes (as opposed to just text) still remains. I will ask the Mods if they can offload the comments pertaining to this issue to another question.

Thanks.

Quick followup:
I just realized I need a downarrow:
to the right of the inserted text. This character is not available from my keybaord.
Accordingly. is there a way to overlay an image of it directly to the right of the text I typed?

Thanks,
Steve

> While I couldn't find the exact color I needed

Yes, that's why I showed you the technique with Paint.NET. You use the Color Picker tool to select the exact colors you need from the actual image — both the background and the text color, resulting in a perfect match for both.

> @John - Thanks for your input.

There's no one named John on this thread. Perhaps you meant Jackie or Joe.

> So...this sub-question was resolved so easily

That's easy for you to say. :)

> Thanks.

You're welcome. I hope you enjoyed the 3-minute video that I created for you. Regards, Joe

Paint also has a color picker (place the dropper tip over the color you want to match)

Re the Text Box issue  - what are you needing still? Could you summarize?

You've got quite a few different choices described above for adding text boxes to your documents already

With the down arrow
You could also cut & paste the down arrow/caron into a text box with no fill or line (if you wanted to use keyboard I guess you could use V or \/ but presumably it has a matching up arrow counterpart)

I had no time today for more advice.
We just made 15 years of marriage, so we had better moments than EE...

Down arrow :
-  there are many ways to do it; one would be text boxes in Word overlaying the image that you want.
- another is to draw to small inclines lines or just the letter "v" . That can be done in Word or Paint, Paint.Net or another photo editor
- you may just have a copy of the "v" down arrow in a picture, image. That image should contain only the sign of the arrow and a single background color, as white for example. Then you import it in Word and you can make the background transparent, clear in Word - is just a simple image settings. Then it remains only the arrow and you can overlay over another image or text.

@Viki2000
>>We just made 15 years of marriage, so we had better moments than EE...

Congratulations! The above is far more important than my downarrow issue! :)

Will the above suggestions.
Thanks.

> This character is not available from my keybaord.

There any many types of down arrows available on the keyboard as Unicode characters. You may get the one closest to what you showed as follows in Word:

Turn on NumLock
Keep the Alt key depressed
Type 709 on the numeric keypad

It works in most fonts, including Arial, Calibri, Tahoma, Times New Roman, but not all. You may then copy/paste it into Paint.NET.

> is there a way to overlay an image of it directly to the right of the text I typed?

Yes, add a layer with the image.

Regards, Joe

When a character is hard to be found, then search it on Google and make copy/paste in your program.

@Joe - That worked!
I should say though that my keyboard does not seem to have NumLock key, but, obviously, it didn't matter. :)

Just curious: How did you determine that 709 was the code? From an extended character code chart? If so, please provide a link if you can.

Thanks!

https://en.wikipedia.org/wiki/List_of_Unicode_characters

Thanks!

> my keyboard does not seem to have NumLock key

Most keyboards with a numeric keypad have a NumLock key that activates the numbers — otherwise, the keys do other things, like Home, End, PgUp, PgDn, arrows, etc. Here's an article that details all of the keys:
https://en.wikipedia.org/wiki/Num_lock

Since your numeric keypad doesn't have a NumLock key, that must mean it's permanently in numeric mode, i.e., NumLock is always on. Regards, Joe

Hi,
Please do not think I am ignoring this question. I took a four-day weekend for the holiday. Thanks.

Hope you enjoyed it! Now it's back to work. :)

Yeah, that's the downside of holiday weekends.

FWIW, I've asked the mods to split this question into two per my secondary text-replacement issue (since resolved)

Hope you had a good weekend.

Yes, had a really nice weekend, but just three days here. :)  Good idea to split it into two questions.

Stephen, AFAIK the Mods can't open a new question in your name so you might find it easier to create a new question focused on the remaining issues yourself and close this one out based on the part that's been resolved.  

If you post a link to the new thread URL here (and a link back here in the new one) anyone with a similar question will be able to follow both trails.

@MASQ - OK, I can post a new question....but it would not contain the experts' helpful answer(s).  And I hate to ask them to re-enter something they already took the time to do.  Can you suggest a workaround? Thanks!

@MASQ-

Apologies for letting this question slide.

Guess what? I was getting ready to close this question with the info provided (I thought I no longer needed to annotate a scereenshot). However, I now need to do so afterall.

I went back to your much earlier post, which I'm inserting here as a screenshot.


Accordingly...
Would I be doing the above in MS Word (2016) or MS Picture Editor (2010), which is now installed on my machine.

Thanks!

OK, how to add Text Box and Arrow? And are you saying that I'll be working in Word, but it will be leveraging the installed Picture editor? Tks.

Follow-up:

Reminder: Using Word 2016 under Win10

I inserted a picture into the document. (I'm using a photo since the screenshot is proprietary.)
INSERT --> TEXT BOX.
I chose Simple Text Box

The Word document appears as follows. I can't seem to drag the text box OVER the picture (which I need) and I'm not sure how to create the arrow...

I've attached the DOCX file as well.

Thanks!
Word---Insert-Text-Box-with-Picture.docx

Steve,
The placement depends on the Layout Options. Click the LAYOUT OPTIONS button on the text box and select In Front of Text:
Then you'll be able to move it over the photo:
Regards, Joe

P.S. Great statue!

Joe,
OK this must be my morning for brain-locks. :)

1. I can't see how to drag into the middle of the pic.
2. How to insert an arrow?
3. Once I'm satisfied with my pic/text box, I assume I need to take a screenshot of it all (e.g. with Snipping Tool) to create a new, hybrid (for lack of a better word) image?

Thanks.

Joe! That video is AWESOME.  FWIW, it took at least two tries to get it to run...the VLC Media Player crashed.

I'm probably going to go with taking the screenshot. I want the whole thing to be a PNG file that I can then insert into my Confluence page.

Follow-up: Is the reason I'm (now) able to do this procedure b/c I have the Picture Editor functioning behind-the-scenes?

Btw as to the statue, it's over 100 years old. The depiction of his ferocious expression is brilliant!

Thank you for your extended efforts. If I could grade you higher than an "A", I would! :)

Steve

Ok, I must be doing something wrong.

I tried inserting the left-arrow above the picture...

...but it does not appear

That is:
1. INSERT -> SHAPES
2. Click on the arrow.

Update:

Ok, my bad. I forgot to "draw" the shape after inserting. However, the arrow's pointer is barely visible:

Thanks.

Joe wrote: You need a third step [To make the arrow larger]:

1. INSERT -> SHAPES
2. Click on the arrow.
3. Left click on the doc and drag until the arrow is the size you want.

Well, this is odd. The next time I tried the SAME insertion, the arrow was larger.
That said, per step 3, I'm guessing you're saying that I should click within the Word Doc on the arrow? But when I do that, all that happens is that I can drag it.

Thanks.

Got it! Nice!

OK, time to stop playing around with test pictures and try the real image. Juggling this doc with another doc, so may be a day or two before I confirm your solution. Thanks for your patient help!

Steve

Joe,

So close now!

I inserted a diagonal arrow.

It displays in blue:

How can I change to red (if it can be done)?

Thanks!

Hover (hehe) over the line until you get the selection handle, then right-click on it and select Format Shape...


Click the Color drop-down and pick red...or whatever color you want!

@Viki - Very good! Clicking Shape Outline apparently allows me to change the color.

@Joe- Touche on "hover" :)

Selection Handle?  You mean this?
I have a feeling NO, b/c I had to click on the line to get it to appear, and right-clicking that button did not work. Looks like I don't need to do it this way per Viki's comment, but still would be helpful for me to know for future reference.

Great teamwork helping me - both of you! :) About to stop work for the day. Until tomorrow, then.

> Selection Handle?  You mean this?

No — that's the Layout Option. I mean this:


Same one I had you go to in the video.

OK, will try tomorrow.
Btw, either of you: I can't seem to find either a line with a down arrow, or a line with an arrow pointing down-and-to-the-right ("southeast", if you will). In other words, the opposite of the below:


Any hints?
Thanks!

Oy vey, I wan't clear. I did mean lower right to upper left. (SE to NW). Apologies you had to go through the effort of cutting another video...

Thanks!

> I did mean lower right to upper left. (SE to NW).

Ah, then it's just a matter of the arrow head.

> Apologies you had to go through the effort of cutting another video...

No worries. Besides, now you have another arrow in your quiver...hehe.

OK, will check video tomorrow. Thanks!

See ya tomorrow!

Good morning!

Yes, that dialog worked.

And, I stumbled upon an interesting "bonus".  For the shape shown below:


It seems that the arrow appears in the direction in which you "draw" it on screen.

Accordingly, I guess I was interpreting the arrow icon too literally...that it HAD to mean the arrow was at the "upper left" (northwest) end of the line.

Joe, I think we are good. I'll be assigning points later...I have a feeling this question is one where there will be multiple assisted solutions!

Thanks again...what a great way to start the workday!

Steve

All I can say is "WOW".

Awesome collaboration by you all. This question should be a case study why EE is such as valuable resource.

This thread has also been a stimulating learning experience for me.

Thank you all for helping me move forward with this project for my client!

PS-If I left anyone out (other than Joe, MASQ and Viki) who feels they deserve credit/points: apologies, and please let me know! :)

Steve

> It seems that the arrow appears in the direction in which you "draw" it on screen.

More than "seems" — it does!

> there will be multiple assisted solutions!

It says there are 68 comments — you have your work cut out for you. :)

Just closed the question! :) And point taken on "seems" vs. "does" :)
Thanks again for your help.

Our messages crossed this morning — I now see that you closed it — nice job on that!

This has been an excellent collaboration — great thread! Regards, Joe

And they just crossed again! :)

You're welcome — and thanks to you for the compliments — very nice to hear!