Behind the pixels
VictoriaO 06000145NY Tags:  captures caps howto drop dropshadows standards shadow screen screencaps cloud snagit specs 3 Comments 3,753 Views
Not any more! This week has been a bit hectic - the launch of our cloud sitelet/zone (you should go check it out, by the way, AFTER you're done reading this blog entry), meetings out to wazoo - and part two in a four part lecture series that I attended yesterday. Needless to say, it didn't seem like a very productive day, but a lot ended up getting done. Just not this blog entry.
And I will digress from Cloud to this weeks topic - drop shadows.
I've seen an increased trend lately of drop shadows in our tech art, which is not a part of developerWorks' graphic style, period. There is no getting around this, and it's better to understand this upfront, so you can avoid such elements and turn in clean screen caps and get published in a timely manner. If you don't - we WILL send them back to you for recapture without drop shadows and will delay publication of your piece.
Why will we send them back to you? Because it's easier for you to recapture your screen shot than it is for us to spend all day removing them. Hopefully, while you're recapturing them, you think to yourself - I won't use drop shadows next time and avoid this rework. Maybe one of these days I will walk you through, step by step what we do to remove drop shadows, so you can see the time intense work that goes into it - maybe next week - but this week - I'm going to go over the simple settings that you will need if you're using a great little program called Snag-It to take your screen caps.
Snag-It is a screen capture program offered by TechSmith. I highly recommend it, because it's simple to use, intuitive, and does the job for a reasonable price. Now that I'm done pimpin' their software, we'll move on to what settings you'll use when enhancing your screen captures.
Say you want an arrow on your screen cap to point something out. Make your screen cap with SnagIt, and in the SnagIt Editor, select Paint Tools > Arrow Tool. Click the Style button, and select the first arrow. Set the Width to 1 and the Opacity to 100 (the default), check Antialias, and uncheck Drop shadow.
That last part is CRUCIAL - antialias will smooth out the pixels, making lines smooth instead of a jagged step look - and by UNCHECKING the drop shadow box - you will not run the chance of having drop shadows! BRILLIANT!
Let's continue on with our brilliance - what do you think?
Now say you want to emphasize an icon or other portion of your screen cap. Again, make your screen cap with SnagIt, and with the SnagIt Editor, select Paint Tools > Shape Tool. Select the shape you wish to use, preferably a rectangle or circle. Set the Width to 1, the Opacity to 100 (the default), check Antialias, and uncheck Drop shadow.
Noticing a trend here? Again, we checked the antialias box and UNCHECKED the drop shadow box.
I know, what we ask for is SO HARD, and we are INCREDIBLY demanding. /sarcasm
BUT with this nitpicky attention to detail, we've been able to bring you clear, readable graphics to accompany our content - which you seem to appreciate, since you keep on coming back and reading it.
So until next week, I wish you good productivity and excellent time management and will see if I can't eek some of both out for myself.
VictoriaO 06000145NY Tags:  bueller color illustrations dropshadows graphics dosdon't captions callouts 1 Comment 2,647 Views
I've been training a new graphics person for our little graphics team over the past two weeks, and during that time, I've told him that we take the artwork provided with the submitted content and extract every ounce of personality from it.
At developerWorks, we want our tech art and screen caps to look like they came from the economics teacher (Ben Stein) in "Ferris Bueller's Day Off"... Bueller?... Bueller?... Bueller? ::snicker:: One of the great movies of the 80's.
Why?, you ask. Simple - we like things...well... simple and legible.
Let me show you what I mean. The top image is the one that was provided by the author, the bottom is the one created by the graphics team (read - ME.).
Which one is more legible? Is there sufficient contrast from the background color and the font color?
These are important in technical illustrations - if your reader can't read or understand your illustration, the point of it is lost.
Why did I remove the gradients? Aren't they pretty and make it more visually interesting?
Why didn't I use a dark background and keep the white text?
Other things to avoid in your artwork, besides dark backgrounds, white, italicized text, and gradients...
If it's there, we will remove it and the drop shadow that goes with it. Period. And with my example, that would mean some of the text would be lost too - hope it wasn't important.
Which leads me on to my next point - DROP SHADOWS
I realize that some operating systems have a drop shadow built in and your screen shots might have that - it's fine, we'll just crop it out. Not a big deal. What is a big deal is when you have drop shadows all over your screen cap and under your arrows, your ellipses, rectangles, etc. It's distracting, especially when it goes over important bits of your screen cap.
Notice the difference between the two? While it's certainly cooler to have the effect, at developerWorks, in our content, we're not cool - remember - we're that economy teacher in Ferris Bueller's day off...
Like I said - NOT COOL. (We don't REALLY look like that, and we're all actually pretty interesting, once you get to know us, but that's besides the point.)
Call outs work the same way - use neutral colors (gray) for the balloon/box/cloud/arrow, black text, 12 pt font, and no drop shadows.
Captions are also not needed in your artwork, but rather they should be in your text. Captions will be removed from your artwork and coded in.
And finally - what happens if you have any of these things in your content?
Simple - they will get sent back to you, with a note from your editor basically stating that the graphics people are mean, cruel people and want you to remove the unwanted elements from the noted screen caps. Now the first part about us being mean and cruel might not be in the note, but asking for new screen caps will be.
Trust me, mean is when authors submit 140 screen caps that are 80% covered in drop shadows that need to be removed. Cruel is when you spend 3+ days removing those drop shadows and then vowing to never do that again - and I haven't.