Last fall I wrote about how I had changed the design of the “matchup images” at DetroitHockey.Net. This marked a new design after one season with the previous one.
It turns out, the “new” design didn’t even make it a season.
As I previously noted, last fall’s redesign was intended to inject more color onto the DH.N home page. Grey backgrounds on the matchup images were replaced by team colors, with a DetroitHockey.Net watermark applied to those colors. It was a good idea but it failed to account for colors that were so dark that the watermark wouldn’t be visible.
Well, it mostly didn’t account for them. In the case of the black background required for the Los Angeles Kings, there was a hard-coded exception that changed black to a very dark grey (#333333, to be specific). It was a solution but a very bad one and it didn’t help at all with teams like the Edmonton Oilers and Seattle Kraken whose primary color is very dark blue.
So I’ve already updated the process, making a couple other tweaks along the way.
The new code takes a look at the V value from the color’s HSV representation and, if it falls below a given threshold, determines that the color is dark enough to handle differently. There’s some built-in fudging if the color is determined to be primarily green based on its RGB value because, in my testing, green behaved weird, so it needed a different threshold.
If the threshold is passed, we invert the colors temporarily. If we invert the background color, then apply the wordmark to it, then invert the resulting image back, we effectively switch from applying a darker watermark to a light color to applying a lighter watermark to a dark color. This is accomplished with a single line of code, executed twice.
imagefilter($color_image, IMG_FILTER_NEGATE);
Meanwhile getting the RGB and HSV values for the colors is part of my color conversion library.
While I was in there making that change, I made one other tweak. On suitably bright colors, the watermark came across as very noticeable. So we use the HSV V value once again to determine the brightness and, if it passes a given threshold, we tone down the watermark a bit using imagefilter as follows:
imagefilter($img_watermark, IMG_FILTER_BRIGHTNESS, $brightness);
Of course, because we’re applying the watermark differently based on the background color, that meant major changes to how the background was built. Originally, a background image with both team colors was built and the watermark was applied uniformly across it. Now we build that “team colors” template image in black and white and a full background image in both home and away colors with appropriate watermarks. Then we build a new image pixel-by-pixel. If the pixel is black on the template image, we pull the corresponding pixel from the home team image and if it’s white we pull from the away team image until a combined background image is complete.
Application of gradients and team logos still works the same as the original version.
This is horribly inefficient, I’m sure, but the process that uses this runs twice a week in the background so that doesn’t bother me and the result is a nicer set of images.
