Merry meet!
Wow, can you believe it? The old grizzled wizard is on time again! As nice as this seems to be, don't get too accustomed to it. I'm sure it's a fleeting thing.
This month I choose to delve once again into a marvelous little tool that no Technical Author worth his salt should be without. Yes, my dear friends, I'm referring to TechSmith's SnagIt. The more I use and learn about this tool, the more indispensable it seems to become. As you may recall, I demonstrated how to use this tool back in March 2005, where I demonstrated how to achieve a neat edge effect. Well, if you thought that one was cool, strap yourself to your seat, as I'm about to blow you away.
(Well, *I* was blown away when I got it all sorted out. Maybe you aren't so easily impressed.)
*NOTE: Special thanks and acknowledgement to whomever jcperkins is in the SnagIt forums. Although I sorted these steps entirely on my own, this person led me in the right direction to accomplish this goal.
Creating a shaded highlight for a zoom perspective using TechSmith SnagIt
For a long while, I've been wondering (hoping and longing actually) for a relatively easy way to achieve an effect I've seen used here and there. To be honest, I'm not even certain what it's actually called by those that are familiar with it. So until I am corrected, I'm going to refer to it as the title that is part of the subheading above. "Shaded highlight for a zoom perspective". Hopefully one of you fine folk will recognize it immediately and set me straight about its technical name.
What is this effect I'm referring to? Well, since in this case a picture is definitely worth more words than it would take to describe it, I'm simply going to display what I'm referring to. See the image below:
Pretty snazzy, eh? Well, I like the effect. In the past, I've made crude efforts at simulating the effect. Take a look at the totally amateurish image below:
Icky, isn't it?
So here I was with the snazzier effect in my mind's eye. Yet I had absolutely no idea what it was known as. Further, I couldn't fathom a way to easily achieve it. I assume those of you that are intimately familiar with Adobe Photoshop or maybe even Fireworks may look at this and roll your eyes, thinking something along the lines of "Geez, that would be like, so simple to accomplish. What brain dead person in the world would actually struggle with this? What planet are you even from, Mr. "Wizard"? Sheesh".
Well, I'm not the least bit ashamed to raise my hand and admit that I've seen a bit of Photoshop and Fireworks. I have them at my beckon call, but I'm still struggling to come to terms with using each. There are just so many features it's difficult to absorb it as fast as I'd like.
So if you are in the same boat I am (and I'm going to hazard a guess that many of you are) you will be pleased with what I'm about to share. I accomplished this using TechSmith's SnagIt, version 8.0.0. So if you want to follow along, I suggest you dash off now and grab yourself a copy.
Baby Steps
The first step is to acquire an image. SnagIt makes this super simple. You press the Print Screen key (assuming you haven't deviated from the default settings in SnagIt) grab the image and it opens up in the SnagIt Capture Preview window. This will be the foundation image. Normally, the foundation image is reduced in size. Think of it as the background. We captured it full screen, but will be resizing it to make it smaller.
SnagIt Capture Preview Window
After the image is in the SnagIt Capture Preview, we resize it. I'd have a really hard time making any suggestion for how to improve this step to simplify it. You simply click "Resize Image" in the Tasks pane. You can also get there via the menu path of Image > Scale > Resize Image... Personally, I think the Tasks pane is much much simpler. After you choose this option, the Task pane changes to reflect Resize Image settings. I tend to scale my images to somewhere between 70-80% of original size. But in this example, I'll choose 60%. Notice how well SnagIt also handles resizing the image! I have to admit, SnagIt has moved me entirely away from my beloved Graphics Resizer application that ships with RoboHelp. However, that little utility shall always hold a place in my heart.
Okay, we have our image resized. It's time to save it! So we click the Save As toolbar button (or if you really like using the menus, you can click File > Save As...) and save our image using a specific file name. Once we have saved our image, we close the SnagIt Capture Preview window.
*NOTE: When you save the image, you probably want to save it as .BMP or .PNG format. You want this format so you have a wider array of colors available for the next steps in the process.
Now we open the SnagIt application. We need to do this so we can launch the SnagIt Editor. You may be wondering at this point why we didn't simply leave the image open in the Capture Preview and massage it further there. And that's a very good question. The reason is that now we need to create a composite image. We will be screen capturing the area we wish to "Zoom Up" and add that oh-so-cool perspective shading. The underlying problem with this is that the minute we try capturing the larger area, it will replace our base image inside the Capture Preview window.
Open the main SnagIt application and click Tools > SnagIt Editor. You will notice that the SnagIt Editor looks an awful lot like the Capture Preview window. And looking at them side by side, I'm hard pressed to tell any difference between the two, save for the verbiage appearing in the title bar and a toolbar icon or two.
Within the SnagIt Editor, click the Open icon in the toolbar. (for those of you that are menu freaks, click File > Open... (or press Ctrl+O)). Open the image you saved earlier. This will be the image you resized.
Let's review...
At this point in our process, we have captured the desired base image. We then saved it. Now, we have opened the image for further processing in the SnagIt Editor. It is now time to capture the larger image. This is the "zoomed up" image we will superimpose upon the base image. So back to our application to capture the larger image.
It's totally up to you whether you wish to resize the second image. Sometimes it's just fine to do this. Other times, it will be large enough you actually need to shrink it a bit to work. All of this is subjective. In my example, the image I captured fits nicely, so I leave it alone.
Copy the image you will use for the focal point. Then, from the SnagIt Capture Preview window, copy the image to the Windows Clipboard.
At this point, you are finished with capturing, so you may as well dismiss the Capture Preview. Now return to the SnagIt Editor and paste the image from the Windows Clipboard. Arrange the larger focal point image as desired on the base image.
Well well! Look at what we have now! Basically, you should have a larger image superimposed over the reduced size image. It's now time to draw our perspective shading. And here is where it becomes a bit fun!
Inside the SnagIt Editor, click the Shape Tool.
Select the shaded Polygon shape.
Configure the shaded Polygon shape properties. For example
The color that will be used to indicate the shaded area
The opacity the shaded area uses (AKA, how much of the bottom image "shows through"
Whether an outline surrounds the shaded area, and if so, the color and width
Now lets draw the shape! This step will consist of several sub steps. The process is slightly involved, needing some explanation here and there.
*NOTE: Before drawing the shaded area, it may be advisable to maximize the SnagIt Editor as well as zooming in on the area where you will be drawing the shaded perspective.
Click and drag to draw a line from the origination point to one of the focal points. In this case, I've drawn a line from the upper left corner of the button the user clicks to the upper left corner of the dialog that appears when the user clicks this button.. Release the mouse button and notice that now you have a line that follows the mouse pointer around.
Move the mouse to each new point so that you outline the area. Click to set each successive point.
When you reach the starting point, you will want to double-click. This action tells SnagIt Editor you are finished drawing the polygon.
*NOTE: The polygon shape you are drawing is a layer on your image. You need not be concerned that the lines aren't exact. You can easily click and drag to reposition them as needed.
At this point, you should now see a pretty close representation of what your image will look like. The last bit is about tweaking the shaded area. Since this is simply a layer, when you click it to select it, you see dots along each point you clicked the mouse. You may now click these dots and reposition them as necessary.
Save the file and you are set!
Well, that about wraps it up for this month. Until next time, Namasté and Merry part!
The URL in the text field below links to this page.