For my wife's poultry show (Yellow Rose Classic), each of the show sponsors gets a banner. Unfortunately, most of her sponsors either didn't have a logo, or their logo was a low-quality image. That is not to say the images were bad; they were just not something we could scale up to banner size without significant loss of quality. So I get to do some SVG work.
The Client: East Mini Dachshunds Texas
I wasn't given much to go on, an image and the simple instruction: Go for it. I'm assuming from the quality of the image (described below), that they really need a replacement image. I had a 5-minute conversation with one of the owners to explain what I could do, but never received any clear instructions on what I should do. I'm no stranger to making stuff up as I go along, In such predicaments I must forge ahead.
The Good, the Bad, and the Ugly
Generally, I don't consider myself to be a graphic designer. I can do it, but I'm not very comfortable doing it - if that makes sense. The image I was provided brought with it some issues that made me more uncomfortable. To illustrate the problem, I will show the existing/original logo in several ways and provide some description of the situation.
The Good
It's a very pleasing image, a great foundation from which to build. I mean, who doesn't love a puppy? I'm a cat person, but puppies are super cute. I'm not gonna lie.
The Bad
The existing image was sent as a PNG, but the file signature says it's a JPEG. Whereas it displayed in the text message as having a transparent background - upon opening it in every editor I have, the background was black. I don't know what the heck this thing is, and I couldn't seem to recover that transparency (which JPEG does not have). It doesn't really matter what it is, because even at its full resolution, there are significant artifacts in the image. Illustrated in this zoomed-in section of the dog's butt.
The Ugly
If you notice in the solid color areas, there is noise. Blues that aren't quite the same color, blotches in the black, inconsistent and chunky dark browns, and why is there a white blotch in the location that shall not be named? This is a result of the original image being copied and resized over-and-over, losing quality through repetitive compression. This isn't an indictment of anyone, it's quite common. I couldn't count the number of times I requested a high-quality image and received something less than that. If you don't work with graphics, you probably don't know the difference.
Direct Comparison
Grab the green bar with your mouse and slide it side to side. The black background is the original image, the white background is a render from the SVG. I made very few modifications to the original design. The original file had such intense blending between colors that it was sometimes hard to figure out where the lines were supposed to be - so I made decisions. I think the end result captures the elegance of the original while smoothing out some rough spots.
Before/After visualization created using the RicheyWeb Content - Before/After Joomla plugin.
Differences between the images are slight. The created files are SVG and are infinitely scalable. I cleaned up the edges of the clouds to remove the pointy bits on either end. I may end up putting them back if the client really wants them, but I think it looks better without them. What may not be obvious is the shadow under the dog in the original. The dark brown against black makes it difficult to see, but it wasn't consistent in the original so I removed it. The original also had white streaks and blotches in various places.
Also, the original dog body was transparent - which is also the case in the above displayed image. However, I did build the SVG with a layer in the body area so it could be filled with color if the situation needed it.
The final result (which the client receives with no restriction), is 3 SVG files - the dog, the text, and the combination. Any graphic designer worth his salt can take these graphics and do virtually anything they want with them. Below I have a "playground" allowing the client to adjust colors as necessary and download the result as a PNG - because you shouldn't need a graphic designer to export a PNG from an SVG. I mean, it's like 4 lines of code to automate this process fully.
Image Playground
The really fun thing about SVG images is that they're controllable. This isn't useful for anyone who doesn't know how to put this to use, but I happen to be one of those people. This allows me to present to my clients a tool like this one, where they can manipulate colors to their heart's content. With this tool, the image can be tested against different backgrounds to see how it might react.
