Go to Making Light's front page.
Forward to next post: Disinformation
Subscribe (via RSS) to this post's comment thread. (What does this mean? Here's a quick introduction.)
Ads are turning out to be more complicated than we’d anticipated. With any luck, we’ll get the problems ironed out RSN. Until then, if you keep hitting “reload” every few minutes, the effect should be at least as interesting as watching traffic lights change.
Meanwhile: I know it’s a little startling at first, but on reflection I think “My opponent’s breath is so bad it kills the shrubbery” sends a clear message to the voters of Texas’ 6th Congressional District.
If you click through to Morris Meyer’s website, you can see a much clearer version of that image. I don’t know what happened to it on its way to becoming a blog ad. For them and for anyone else who needs to ensmall a detailed image, here’s my amateur recipe for generating good thumbnails via PhotoShop:1. Start with the largest, highest-resolution version of your image that you can lay hands on, and set its resolution level as high as possible. Never scrootch your resolution any earlier in the process than you have to.You’re done. Hit Save, or Save As, and file it according to your usual procedures.If your initial image is equal to or greater than ten times your target size, you can skip step #4 .
2. If the image needs any cleanup or enhancement, now’s the time to do it. Go easy on “increase contrast” and “sharpen”.
3. Select Filter, then Unsharp Mask. When the dialogue box comes up, set the amount at 50%, with a radius of 0.5 pixels and a threshold of 5 levels. Note: this is not the only round of sharpening that image is going to get, so don’t overdo the amount this time around.
4. Go to Image, then Image Size, and blow your image up to 500% or more of its original size.
(This may be a superstition left over from my bitmap days, but I like having the blown-up version be both a simple multiple of the original, and evenly divisible by the target size. That is, if I’m working with an original that’s 253 pixels on a side and I’m shooting for a 100-pixel thumbnail, I’ll probably trim the original by three pixels so I can go up 600% and come down at 15:1. I expect someone will tell me in the comments thread whether this is a useless holdover.)
5. Select Filter, then Artistic, then Dry Brush. When the dialogue box comes up, set the brush size at 0, the brush detail at 10, and the texture at 1. Click “okay”, then wait. This may take a while.
6. When the image is finished filtering, use Image Size to reduce it, not to its original size, but to its target size.
7. Use Unsharp Mask again at the same settings you used before. Or, if you want it sharper, now’s the time to increase the amount to 75%, or 100%, or whatever works for you. Make sure you’re working with your view set at 100% of the image’s size. You can’t judge whether it’s at its proper degree of sharpness if you have it set at any other level of magnification.
Ooh, something new. I have to say, I'd never thought of using the artistic brushes for, mmm, non-artistic image manipulation.
Is this for not-very-good quality originals? I just tried it on a good quality scan, and it gave not very different results from a normal Photoshop reduction. Generally I just reduce after cleaning up a picture, then unsharp mask. I'll have to try it on one of the really bad scans I often have to manipulate at work.
As far as cropping to get handy numbers, I'd say my feeling is that it shouldn't make much difference from an image quality point of view. But I like using round numbers just for the sake of reproducibility. If I have to patch something into a picture that's already been reduced, say, then it's handy to know that whatever reduction I've done will be a nice round number and not 23.17% or something.
Nel, it works on good scans and bad. Try it on a scan that has fuzzy lines on nearly-plain background and you'll see why it's useful. It doesn't turn it into line art -- it takes an eye to do that -- but it condenses and simplifies fuzzy lines and blobs into much more defined areas. When you do that at 500% and then shoot down, small details get clearer and sharper, and tiny details go away. Given Photoshop's abilities and limitations, it's as close as you can come to an automatic process that mimics the way your eye and brain sort out what is and isn't important.
Oh, interesting.
My intuition is that blowing it up probably isn't going to make much difference; Photoshop, after all, can never actually add information to the image. My first experiment, unfortunately, was on a random rough scan and a stright "image size" change worked fine on that. I'd like to try a really detailed elevation full of linework and see if it even survives the process.
Tried on an elevation--a drawing with lines so fine that printing it on 8 1/2 x 11 sheets is a major trial--and, b'golly, the reduced result is recognizable. My hat's off to you.
re F11 -- that's an ... interesting ... suggestion --- including its persistence if I (supposedly?) kill and restart the browser. Although I'm not sure whether "Slushkiller" was reduced to 2 screens when I came back from TNR's Woolf reprint because of the ads or because of TNR's nasty little "Are you sure you don't want a free trial?" popup. (No, I don't; I don't like them and I don't like anything that requires me to take later action to prevent my card from being charged.)
I'd also like to say that a good way to sharpen up not-very-good-quality-originals before you even use the "unsharp mask" filter is to use the "levels" command (under the Image--->Adjust menu).
Essentially, what you do with the levels command is to tell the computer to make the whites whiter, the darks darker, and the midtones more defined as grades between those two extremes.
This works especially well on things like black-and-white lineart on white paper, but can also work wonders on any image. You drag the black slider to the right to make the darks darker, the white slider to the left to make the lights lighter, and when you've got those two in place, sometimes the middle slider needs to be adjusted a little. Try it on a few images. By using this command, I've successfully convinced sketches that were originally done on brown industrial napkins to look like they came from a sketchbook.
It emphasizes what your eye knows: that faint line is acutally a line, and that erasure mark is light enough that it should be ignored.
I can't overestimate the importance of a good-quality scan to begin with, but since we don't live in a perfect world where scans are always high-quality, Photoshop makes it better.
Paint Shop Pro works well enough for me--- but in the rare instance I need heavier-strength image processing, I'm likely to just use MATLAB and the Image Processing Toolkit...
Although, after graduation, and I get a "real job", buying Photoshop might be fun, just to try my hand at writing plugins.
All of this being useful for me as I try to figure out what parts of the backside of an early draft Jack Vance manuscript are actually worth trying to save on disk....
Teresa's somewhat obscure headline refers to a well-known and mysteriously unfixed bug in Microsoft Internet Exploder, which sometimes causes the wide column in Movable Type-based weblogs to simply stop rendering at the point where there's no longer content in the narrow column to which it's adjacent.
This is generally fixable by, as the headline says, hitting F11 twice. I gather from Chip's comment that he knew this already.
It's a defect in Windows MSIE's CSS rendering, and it doesn't affect any other browsers I'm aware of--even MSIE for the Mac appears to be free from it.
Another reason as to why the "bad breath" ad looks so bad that you should consider has absolutely nothing to do with the pixel size of the image. The problem is that it's a .gif file, which limits it to 256 colors only. (It's a .gif because the person doing the ad wanted to do a little animated dance, which is only possible with .gif files) It's often very difficult to squash colors down to a mere 256 - especially when you have to share those same 256 with the other frames of the animation.
That said, I think that the people making that blog ad. would have been much better off going with two, or possibly three, separate ads, each of which just had the one picture with no animation. The animation (like most web page animation) is royally annoying, distracting, and doesn't make me want to do anything but stick a post-it up on that side of the monitor so that I can't see it. However, I might find an ad that just had the bad breath image sufficiently interesting to go check out the source.
(Fortunately mozilla - with multizilla installed - allows you to set things so that animated images only cycle once)
Ah, so that's what F11 was supposed to fix. If I hit F11 twice, all my windows will move off the screen so I can see the desktop, then move back, as seen here.
(Safari renders the Nielsen Haydens' pages just fine, including Electrolite's glowing header.)
I was wondering if anybody noticed that. Yes, Safari is the only major browser so far to support the CSS "text-shadow" property.
Indeed, hitting F11 twice does exactly the same on Teresa's primary machine, which is why I was little puzzled at the title of this post. The F11 advice is for PC MSIE users only.
Safari also seems to be the only major browser I know of to support CSS3 transparency, which is pretty cool. I've been noodling about with it on my site, which is satisfying in the purest aesthetic sense alone, since only a small minority of the visitors are ever going to notice, anyway.
Patrick: I did notice it, and, er, "borrowed" it for my blog's CSS.
PZ: I haven't tried playing with the transparency much, but there's a really cool demo of both text-shadow and transparency in Safari here.
Does Recent Comments need a closing chevron here after chevron div class="side"chevron a ....? Been a long time since I worried about such but I notice in IE6 that the first comment is not a hotlink though as it scrolls down it becomes a hotlink. Best I can tell on a cursory look there is a missing chevron like parens not matching but I don't know the impact and it may well show up much later in the source. Too much of a nuisance to post source here and make it display usefully.
The trouble with having ads on a weblog is people can confuse the ad message with other messages.
I learned this by experience. I'm blogging from a Geocities page. They give you the space free and in exchange for not having to pay for it they make your readers look at pop-ups.
So a reader wrote to me asking about what he saw when he followed a link, and we figured out that what he was seeing was a pop-up, rather than the thing I had blogged.
(if anyone knows any free host that does better than that in terms of advertising, I'm open to suggestions)
So the moral of the story is, don't make it hard to tell the difference between what you are saying and what the adevertiser is saying.
"Electrolite's glowing header" ??!?! What-what-what?
OK. You convinced me to fire up MS Explorer & actually - slips on rubber gloves - connect with it (I keep it to test web pages before posting them). Also tried with Opera (my usual browser is Mozilla). Nup. It don't glow to this little black duck.
But before I didn't know it didn't. They say with knowledge & experience wisdom may come. Will have to keep hoping, I guess.
Certainly I've learnt a lot of things from these sites and 'met' some interesting people ... now, where to put the link about preferential voting ...
Epacris, as PNH and Christopher commented, Safari is the only browser currently available that will correctly implement the "glowing" feature.
The only thing MSIE will do for you is break when you try to look at a comment thread...
Any hope of getting the ads stuck across the top of the page, rather than down the side? They chew up about a third of the available width to read comments in, even when I've scrolled passed them, and I find this medium annoying.
Clark Meyers wrote:
Does Recent Comments need a closing chevron here after chevron div class="side"chevron a ....? ...
Good eye. I tried running the w3 html validator service against making light to see if there were some structural oddities that were confusing ie, (yes, ie has a broken box model, but on rare occasions odd rendering is not entirely ie's fault) but the massive dump of error messages was too much to wade through to provide any useful insight. (One of the hazards of programmatically generated pages - if a bit of repeated html contains an error, you get to see it over and over again -- e.g. the auto-generated "view all by" links contain unescaped ampersands)
There's supposedly an MT plugin that will do some things to your page to make certain it validates, but I don't see how it's possible to do that without messing up the page's layout, given the number of little tricks standard MT templates use.
On the plus side, the w3 css validator has no problem with the style page.
(Incidentally, previewing this comment gave the following text at the bottom of the page:
MT::App::Comments=HASH(0x810ac8c) Use of uninitialized value in sprintf at lib/MT/Template/Context.pm line 1187.)
Actually, I hadn't heard of the bug, but guessed it was the reason for the post when (as mentioned) most of a long post/comment-section disappeared. What stunned me was that F11 made the MSIE window take over the entire screen and lose its menubar; fortunately the window control widgets were still there, so I could kill the window and restart MSIE instead my system. Surprisingly, I've seen this only at home; my work PC is also running recent MSIE on Win2kPro and hasn't misbehaved (yet...). (And that's about the limit of my knowledge; I'm not nearly as much of a twiddler as several people on this blog even though I'm paid to be a software engineer.)
CHip, F11 to take over the screen is a feature, not a bug, of MSIE. To undo that takeover, just hit F11 again.
Yes, the integer-multiples thing is still good, because it will restrict pixel color information from "bleeding" too much further than it should.
Besides that, pretty nifty. I've been using this basic tack, with unsharp mask, for about forever, but I also never thought of using one of the brush techniques for cleanup. I'd also like to reccomend, especially for dealing with dirty scans, the Curves adjustment on the blown-up version to fix lightness and sharpness defects.
Oh yeah, almost forgot... for those of you who want the power of Photoshop without the price, you might consider The GIMP (http://www.gimp.org). It's not quite Photoshop, but it's considerably more powerful than PSP or anything like that, and it's cross-platform and free. I've been using it for years, and it's really quite powerful once you get used to it (which, admittedly, might be a hurdle for most windows or mac users).
A good tutorial on The GIMP is the "book" _Grokking the GIMP_, available from www.gimp-savvy.com.
Cheers
--Andrew
Clark Myers, thanks for the pointer to the unclosed div tag. Fixed.
may i recommend ThumbNailer ?
i wrote it.