We’re resizing the menu bar to make it smaller. This means that some of the graphics need to be shrunk accordingly. Two in particular that stick out (literally) are the end caps. These graphics give the menu nicely curved sides. Once again, I was volunteered to make the change. I started work yesterday afternoon and…

We’re resizing the menu bar to make it smaller. This means that some of the graphics need to be shrunk accordingly. Two in particular that stick out (literally) are the end caps. These graphics give the menu nicely curved sides.

Once again, I was volunteered to make the change. I started work yesterday afternoon and got absolutely nowhere. I was using my favorite tool, Paint.net, and for the first time, ran into something a little too complex for what is basically an advanced version of MS Paint.

This morning I took another crack at the problem, and this time switched over to the GIMP. Much better. I need to start forcing myself to use this tool for more of my work.

The resize was a little tricky because the image was gradiant shaded, top to bottom. Luckily, we only had to remove 7 pixels of hight from the 47 pixel tall image. I was able to remove the pixels from the sections of the image that were straight, so I didn’t have to adjust the curve.

The colors were still off at that point, so I pulled up a screen shot of the smaller menu and painted pixel by pixel to match the new darker colors. Some of the borders then needed to be darkened so they would still stand out. That sounds arduous, but we’re only talking about a few hundred pixels total.

Once my adjustments had been made, I used the pngcrush tool I mentioned in an earlier post to protect the files from IE. Since the left and right graphics were mirror images, I just worked on the left graphic, then flipped it to make the right graphic.

Once uploaded to the site, my new graphics meshed perfectly. Even zoomed in you cannot see a break.