Posts made in February, 2013


This is a new one hot off the press. I’m excited because this is the first actual product I’ve come up with that I can immediately put on my blog. Right now, I’m working on a site that will eventually use brand-based templates. The client hopes to eventually sell to other people, who can then color up the site to match their particular branding and colors. For the most part, this is easy. CSS covers most of the items that would be colored but images cannot…. The images on this site need to not only have a changing color, but there are shadows and other elements to the images that need to be branded as well. This is the original image: Here’s an example of what I’m talking about: The process for this is pretty easy. To start, you need to break your source image into separate, one-color (black) layers; one for each different color grade you plan to use. From there, the code will work to overwrite your one-color channel with the desired color and grade. Take our source image; when you break it apart, you get the following layer images: Another thing to note: over time experimenting with this code, I’ve found it best to start with a image larger than you intend to use. For the most part, this seems to help with pixelation in merging the layers. Our source image cleanly breaks into three layers: the border, the background, and the quotes. Now, we want the original color to be assigned to the border layer, a solid white to the quotes, and somewhere in between for the background. Use whatever method you would like to measure out the differences in your original source image. For ours, I found the color to be about 35% lighter than the border. So, for any new image, we know that the background will be that same grade lighter, whatever the color. After a little Google searching I found the below function (originally here) to help translate colors for me. Simply provide it a six-character hex code (eg. #FF0000) and a factor, and the code will return you a new six-character hex that represents a color that is that much closer to white. function hexLighter($hex, $factor = 30) { $new_hex = ''; $base['R'] = hexdec($hex{0}.$hex{1}); $base['G'] = hexdec($hex{2}.$hex{3}); $base['B'] = hexdec($hex{4}.$hex{5}); foreach ($base as $k => $v) { $amount = 255 - $v; $amount = $amount / 100; $amount = round($amount * $factor); $new_decimal = $v + $amount; $new_hex_component = dechex($new_decimal); $new_hex .= sprintf('%02.2s', $new_hex_component); } return $new_hex; } Next, we set up our images to work with. Using the...

Read More