Creating "AntiImages"

I've no idea if there's an official name for this technique; I called it "AntiImage" when doing it.

The basic idea is overlaying a white/black transparent image file (usually a PNG) over a solid color background. That way a single graphic can change color to match the layout of a website by only using CSS.

My brother had the basic idea first and talked about it here. But his Photoshop skills are far better than mine, so I needed a way to do the same thing with an existing graphic.

I found a couple plugins for paint.net that let me do it in just a few steps. The first is Color Difference to Alpha and the second was Curves+. Install those first. (This would be really hard without something like that color-to-alpha converter!)


Step 1) Open the image in Paint.net, then pick the Adjustments--"Black and White" menu. I started with an image from a set purchased from icons-icons.com
Orginal: to black-and-white version:


Step 2) Set White to be the active drawing color, then choose the Effects--Color--"Primary Color Difference to Alpha" menu. This gives a sort of shadow of the image. I used just the paint bucket tool to fill the area outside the circle with the background color of the web page (white in my case--your web page will need to have solid color background too.)



Step 3) Pick the Adjustments--Curves+ menu. Select Alpha from the drop down at the top, then you can drag around the curve to see how it looks. How you want to change will depend on the original image. For this one, I made it a little less transparent.


Step 4) Use CSS to set the background-color for the IMG tag, then just use the graphic as the image! All these graphics below use the same overlay image. For the website I'm working on, where clients can pick a color scheme to customize it, this lets us use one image that looks good no matter what sort of color scheme they choose.


The graphics are all more subdued than the original and than the background color (which shows around the edges since I'm not an expert with this blog tools CSS/HTML editor)...but the colors match pretty well. (And you could use the CSS :hover to just change the background color to do a mouse-over effect as well!)

More water

Seattle had a huge, record setting storm. Several inches of rain at our house--some of which found its way into the basement.

How does Jacuzzi stay in business?

About 3 years ago, we finished a big remodel on our house, including a nice big tub for two in our bathroom.


Soon after it was finished, I came down after a bath with my wife to find a puddle in the kitchen with water dripping out of the ceiling (right below the tub.)

After several visits from the contractor, the plumber, the special Jacuzzi plumber, and holes in both the ceiling of the kitchen and around the tub, they fixed the leak. Great.

Forward about 9 months. I came down again, to find another puddle. The Jacuzzi plumber returned, another hole in the wall by the tub, but he though he had it fixed. We got in for a bath the next day, but heard a noise. I checked the kitchen and it was like a waterfall. By the time we drained the tub, over 2 gallons had come down into the kitchen. We ran around naked, finding pans to catch the water and every towel to mop up the mess.

After another attempt to fix, the Jacuzzi plumber decided to just have them send us a new tub. That arrived, and they set it up to test in the garage...and none of the electric things worked. I think they made 2 more trips up (they're about an hour drive from our house), with every part they could replace, and still couldn't fix it. So they had Jacuzzi send ANOTHER tub. So at this point, Jacuzzi has shipped 2 giant tubs--they're big, something like 7 feet by 3x3 crates, so must cost a ton. Thankfully it's all been covered by warranties.

The plumber had it shipped to his house, so he could test everything before making the drive to replace it.

Finally, over six months after that drip in the kitchen, we had a working tub. Yeah!


Until last night. We both heard a noise. Fortunately, we'd procrastinated, so the hole in the wall hadn't really been fixed--just the board covering the hole. So I could quickly see it was leaking AGAIN!


How does Jacuzzi stay in business? Their plumbers have visited our house 6+ times; at an hour drive each way. For the initial leak, I know the contractor charged them a lot to fix all the holes in the newly finished house. They've sent 2 extra tubs (at no charge to us, thankfully). The plumber is about to visit again.

A Nice Button With a Gradient PNG

Borrowing again from things Peter has done (Post 1, Post 2), I did a button effect using his gradient alpha PNG ideas.

The Gradient on a blue background:


And the buttons I did using the graphic...really just a solid background with a border. But the gradient makes them look much better.

Button Button Button Button

Note: I couldn't get some of the effects to work right in the blog editor. Since the gradient I did goes from transparent to opaque to transparent in a top-to-bottom pattern, you can use the CSS X:hover to change one tag background-position: top; to do the mouse-over.

<style>
.mjbbutton {
background:#f44 url(/images/top-bottom-gradient.png) repeat-x bottom;
border: 1px solid #800;
padding: 4px;
color: black;
cursor:hand;
}
.mjbbutton:hover {
background-position: top;
}
</style>

For MyMealCoach, I'm using this so a client will be able pick a color scheme, and the buttons can all change to use their colors--without having to redo any graphics.

Pete's Multi-purpose Apha-Gradient PNG

My brother had the idea, and writes about it here.

I'm using it on another site, so at some point clients will be able to customize the look by just picking a couple colors. With the gradient applied, it will look like we're doing all new graphics and things for them :)

Increased Download Rates

We made a change to our websites a couple weeks ago, that really seems to have increased the number of downloads!

Previously, the home page had a "Download" button that linked to a separate download page. Pretty ordinary, I made a copy here so you can see.

I could see from the logs that the number of viewers on the homepage, to the viewers of the download page, to the actual files downloads decreased each step. I thought to try some changes to remove some steps--but still keep the information on the old Download page.

Many sites do a Download button, then on the 2nd page use the Meta-Refresh tag to send the download. That works, but gives the Security Warning in Internet Explorer. And I didn't want that either, it's another step for people to download the file.

I started with GetRight Pro, and changed so the download button sent directly to the installer EXE, but also added some javascript, a timer set by the onclick, to refresh the page to a similar "Your download has started" page with the same information as before.

It was right the day after a new version, which spikes the downloads, but they were higher than before. After a week, we changed GetRight to do the same. And it showed a similar increase on the day of the switch--and it's nothing trivial, it's a 10 to 20% increase! Thanks to the nice graphs that FileKicker can do, it's pretty easy to see--this is a 3 month period of downloads, and easy to see the peaks for the new versions.

Here is the basic HTML...just calling a JavaScript timer function in the onclick

<script language="JavaScript">
<!--
function handleClick() {
setTimeout('window.location.href = "http://pro.getright.com/getting.html"', 3000);
}
//-->
</script>

<A href="http://get-right.com/getright_setup.exe" onclick="handleClick();">Download Now</a>

If you just download GetRight or GetRight Pro, you can see how it works!

Big Pricing Experiment

We decided to do a pretty major pricing experiment. After talking to several people at the shareware conference--we decided to do the opposite of what everybody said.

For a few years, our upgrade policy was "2 years, all upgrades are free" with a $29.95 price. (Before that, it was "free for life"--something I'd do differently. We haven't charged for an upgrade yet.)

The recommendations we got at SIC were to offer a more expensive option with a longer upgrade time. What we did was offer a cheaper version with a lower upgrade time.

"1 year, all upgrades are free"
I've been keeping track of the "Dollars Per Day" (DPD) in Excel. Using a time at the end of June and beginning of July just before we made changes as a base.

We started with the 1 year option at $16.95. I could immediately see that we sold more copies--about 60% of the people choose the cheaper price! But in the end, the big question is did we make more money. We stayed at that $16.95 price for 2 months. At the end, it works out to being at 87% of the base DPD amount. So we made less.*

On October 1, we changed so the 1 year option increased to $19.95. At that higher price, we made 97% of the base DPD amount. So very slightly less.

BUT, these people understand when buying that we're going to charge them an upgrade fee sooner rather than later. So we really are hoping that a little less now works out to more in the long term. Sometime in early 2008 we need an "upgrade worthy" new version--and we'll charge for it.

* Note that all of these are over the typically lower summer months.