May 14, 2011

highlight test

I wanted to put this inline, but until Pixy fixes the editor, I can't do it. So you'll have to click this link to see the example:

http://chizumatic.mee.nu/files/highlights.html

The size is 600*375, which is 1.6:1. Most of the shows I'm taking grabs from are 1.77:1, so this is about 90% of the width. (The current top rotation pictures are 500*330, which is about 3:2.)

The main question is which of the highlight modes you think looks best for labels.

What I was doing before was to use a script in Paint Shop Pro to add the labels directly to the image files. I used a mode where the label pixels were the inverse of the background at that point, which worked fine for most stuff but failed miserably when the background was close to neutral gray. Unfortunately, there weren't any other easy ways to do it with PSP8, and manually inserting all the labels on 700+ images was unacceptable. (To me.)

With this new approach, I'm going to make the labels in flash at runtime. This opens up a lot of possibilities, flash being a lot smarter, and I tried a bunch of them in that example image. My own opinion is that the last one is the best looking, but I am posting it here to solicit opinions. (I just changed the setting on the first two, and now I'm leaning towards white-on-black background glow as the best looking.)

If you want a better view of them, you can right-click and choose "zoom in".

UPDATE: The editor is fixed, and now I can put that flash inline:

Posted by: Steven Den Beste in Site Stuff at 02:47 PM | Comments (16) | Add Comment
Post contains 270 words, total size 2 kb.

1 Kinda hard to say, given that the final product has to withstand near enough every color known to man.

That said, black triple offset is probably my choice; using a combination of white and black borders should cover you both ways.

Posted by: BigD at May 14, 2011 03:30 PM (LjWr8)

2

The problem with that one is that it is definitely legible, but I think it looks gawdawful.

Unfortunately, I can't do "rim" text, where the character is outline in one color and filled with another. I can sort-of simulate it by using what I guess would be called "quad offset", with a white foreground and four copies of it in black in the background, offset four directions. Let me give that a try... back in a moment.

Posted by: Steven Den Beste at May 14, 2011 03:34 PM (+rSRq)

3

OK, I added two versions of that. In the top one, the four background copies are diagonal. In the second one, they're square.

I still think it looks awful, though.

Posted by: Steven Den Beste at May 14, 2011 03:40 PM (+rSRq)

4 OK, another version of "background glow" at the end. The (black) glow is more intense but spreads less.

Posted by: Steven Den Beste at May 14, 2011 04:09 PM (+rSRq)

5 Well, the third from the bottom (quad offset) is the easiest one for me to see and read.


Posted by: Mark A. Flacy at May 14, 2011 05:03 PM (Lbkvv)

6 I'd say either the first Quad Offset or the last Background Glow.  To my eyes, both are equally as legible, but each has a distinct style.  I probably prefer BG, but certainly wouldn't mind QO.

Posted by: Wonderduck at May 14, 2011 05:26 PM (n0k6M)

7 The triple offset looked too busy, but the quad wasn't bad.  Or the last background glow.  Double offset w/blur looked best, but I think that's the background being dark.

Posted by: ubu at May 14, 2011 06:28 PM (GfCSm)

8 New editor deployed!  Needs a little tweaking here and there, but it's in place and should work across all major browsers.

The one significant problem I'm seeing is that the buttons don't properly light up when selecting previously highlighted text in Firefox 4 and Opera 11.  IE 9, Safari 5 and Chrome whatever all work fine.

Posted by: Pixy Misa at May 14, 2011 07:08 PM (PiXy!)

9 Ah, button lighting-upping works fine in my test script, just not on the live system.  I should be able to fix that, then.

Posted by: Pixy Misa at May 14, 2011 07:12 PM (PiXy!)

10 I think the bottom background glow is the best.  The white text with a dropshadow is also a good choice, it's not quite as readable as some but it's readable enough and it looks good.

Posted by: David at May 14, 2011 07:13 PM (Kn54v)

11 There's a problem with Flash if you use browser zoom - which I do, because I have high-resolution monitors and lousy eyesight.  Browsers are pretty good now at scaling images, but lousy at scaling Flash - they just use nearest-neighbour scaling, so anything off the default looks bad.

I don't know how many people there are that both use zoom and notice that sort of thing though.

Posted by: Pixy Misa at May 14, 2011 07:31 PM (PiXy!)

12

Sorry, Pixy, I don't really know what to do about that.

I can't please everyone. Using this new approach is also going to require a new layout, and part of that is going to be to make the page maybe 30 pixels wider, which means people with itty bitty screens won't be able to see the whole thing anymore. I doubt that many of my readers are visiting with netbooks, let along iPads (which can't run flash) but such few as there are will get a diminished experience.

It's too bad that "browser zoom" doesn't let Flash itself do its own scaling.

Posted by: Steven Den Beste at May 14, 2011 07:47 PM (+rSRq)

13 I understand.  It's a brower problem, and you can't do much about that.

If I happen to find a practical solution I'll let you know.

Posted by: Pixy Misa at May 14, 2011 07:53 PM (PiXy!)

14

I'll vote for the bottommost background glow, also.  (currently the 3rd glow & 12th line overall, in case more get added)

The offsets do some wacky things when you zoom in.  Most evident on my monitor, anyway, at these zoom levels:  doubles at 130% and 230%, triples at 130% and anything higher, top quad at 220%, and bottom quad at 250%.

Posted by: Mikeski at May 14, 2011 08:02 PM (GbSQF)

15 Another thing that might help is for me to use a larger font size, and maybe a different font. Right now that's 12-point Verdana, and there may be a better choice. Plus, 14 point would probably look a hell of a lot better. I'll do some experimenting.

Posted by: Steven Den Beste at May 14, 2011 08:28 PM (+rSRq)

16 Ah, I should have known you will do it right.  I just wanted to make sure it wasn't some odd behavior caused by my browser.

Posted by: Hypozeuxis at May 16, 2011 07:37 AM (5eWak)

Hide Comments | Add Comment

Enclose all spoilers in spoiler tags:
      [spoiler]your spoiler here[/spoiler]
Spoilers which are not properly tagged will be ruthlessly deleted on sight.
Also, I hate unsolicited suggestions and advice. (Even when you think you're being funny.)

At Chizumatic, we take pride in being incomplete, incorrect, inconsistent, and unfair. We do all of them deliberately.

How to put links in your comment

Comments are disabled. Post is locked.
12kb generated in CPU 0.0133, elapsed 0.0525 seconds.
20 queries taking 0.0218 seconds, 33 records returned.
Powered by Minx 1.1.6c-pink.