Have you ever had a program complain to you that a file was read only or “locked”? I’ve had this problem in the past several times and it can be extremely frustrating. Here’s some stuff to try.

Make sure the file is not read only
The obvious thing to check first is if the file actually is read only. If it is then it’s a pretty quick fix to change that through the file’s property panel. It’s also possible that your source control system may have reset the read only flag, if that’s the case you just need to check out the file again.

Make sure the file is unblocked
Sometimes when you download something from an insecure “zone” windows will mark it as a blocked file. I’ve found this can happen when you’re extracting a zip file from the internet. To change this go to the file’s property page and click the button to unlock the file.

Restart your computer
It’s possible that another program has this file open and refuses to close it.

Figure out what program is locking the file
It’s possible that a another program running on your system has opened the file and is preventing you from changing it. This can typically be fixed by restarting your computer but I’m usually a little more curious to find out what program actually has a grip on the file. It’s actually fairly easy to find this out.

Download Process Explorer from Microsoft’s SysInternals website.

This is just a zip file, just extract it and run procexp.exe. You will now see the main Process Explorer screen. This gives you lots of very detailed information about what is currently running on you computer.

Click the binoculars icon on the toolbar, or select “Find Handle or dll…” from the Find menu.

Type in the full path to the file you are having problems with and click search. If any currently running processes are using this file they will show up in this search. Clicking one of the results in this search will jump you to that process in the process list where you can then view more information about that program or potentially kill the program to free up the lock on the file.

Now you can solve the mystery of what program is locking my file!?!

I recently started using Google Chrome as my primary web browser and it continues to impress me with details in its user experience. After performing an in-page text search using Ctrl+F, the browser adds an extra detail that I really liked. All instances of the search term are highlighted on the page AND the page’s scroll bar also now shows highlighted marks where the search term was found on the page. I thought this was a nice touch to give the user some context on where search results are located as well as a quick visual way to see how many results were found (if I see highlights everywhere I probably want to revise what I’m searching for on the page). I could see this being useful in other in-app searches, such as searching a PDF document. The extra visual context would likely be even more valuable when you are searching a larger piece of content.

Searching in Chrome gives the user some extra context for the results

Thought this was pretty good:
http://www.fastcompany.com/blog/cliff-kuang/design-innovation/friday-fun-eight-ways-kill-idea

I heard about this via a tweet yesterday, view the video here. The video shows off what I think is a pretty amazing concept: First draw a really horrible sketch, then label your illegible doodles with a few descriptive keywords, then some magic turns your sketch into an actual picture. The system apparently works by searching the web or some database of images that will match the keywords you use to label your objects. After images are found they are analyzed by a series of algorithms to help eliminate incorrect matches and to find the matches that were likely intended by the user. These images are then cropped out from their backgrounds using some image manipulation algorithms and the images are laid out on a canvas using the locations that you placed your initial sketches.

What I thought was interesting about this application was the simplicity of the user experience. Anyone can understand it after seeing it once. This seems like it would be a great tool for coming up with simple marketing concepts and brainstorming, or just for the entertainment value.

You can visit the project’s homepage: here

The project page also has links to the source code and to user studies for the project.

In order to prevent your png from looking bad in IE6 you need to use the PNG8 format (8bit PNG)

Let’s say we have this sprite image:



In the Save For Web & Devices preview saving as PNG-24 we can see the edges of the button has a nice anti-aliased fade to transparent on the edges.



Notice however that when we switch to PNG-8 the edges start to look a bit ugly



The reason for this is that unlike PNG-24, PNG-8 only supports a single color to represent what is "transparent", this is called index transparency and is similar to what you would see if you were using a gif. PNG-24 supports alpha transparency which means it can have colors that are partically transparent, that’s why the PNG-24 version has a nice smooth edge, it uses several colors with various percentages of transparency.

At this point you’re probably wondering if there’s a way to get a similar effect using PNG-8. The answer is yes but it’s not quite as easy as you’d hope it to be (which is why I’m writing this post).

The first step of the process is to know roughly what background color this image will be placed on top of. If the background color is fairly close to solid or a very gradual gradient this technique seems to work very well. If you have a more hard gradient in the background you may want to just consider putting the background in your image instead of using transparency. Not ideal, I know, but that’s what you have to deal with to get things looking good in IE6 without using the proprietary filters.

First let’s go back to our image and add in a white background. Then come back to the Save for Web and Devices dialog box. Follow these four steps to select the transparent color for your image:

1. Select the eye dropper tool on the left
2. Click on the color you want to be transparent using the eye dropper tool, in this case you will want to click the white background of this image.
3. After you do this you’ll notice the color is selected in the color table on the right, you can also click the color in the color table instead of using the eye dropper if you like
4. To make the selected color transparent click the small make transparent button below the color table (it’s the icon that looks like a grayed out checkerboard)

   At this point you’ll noticed that although the selected color has been made transparent it likely isn’t having the effect you intended.

   

   Here I obviously still want the paper icon to be white, not transparent. I only want everything outside of the image’s interior to be transparent.

   Here is the technique I’ve used to get everything exterior to the object to be transparent.

   Cancel out of the Save for Web and Devices dialog

   Again, make sure you have set the background color to be what you intend the image to be placed on top of.

   

   Now merge the layer with the object and the background layer together. You can do this by CTRL+clicking both layers to select them both, then select Merge Layers from the Layers menu.

   

   

   You should now have a single layer that contains the object and the background color.

   

   Next select the paint bucket tool, and then select a color for the foreground that is not already contained in your image.

   

   

   Make sure the options for the paint bucket tool are set to the following (anti-alias unchecked, and contiguous checked)

   

   Now click on the background of your image to paint it the new color.

   

   Now, return to the Save for Web and Devices dialog and follow the same steps I described before to select the blue color as the transparent color. You should now see that the interior areas of the image remain white and you also have a nice anti-alaised transition to the background color. The pixelated edge that appears to here will seem to disappear once this image is placed on top of a background that is similar to your original background color (in this case white).

   

   

   Here’s an example of the final image being used on top of a gradient on a website. You’ll notice the edges are barely visible at a glance, however the more contrast between the intended background and the actual background the more noticeable the edges will become visible. That’s why it’s important to know your intended background color or at least keep it in mind so the edges blend in as seamlessly as possible. For more complex backgrounds you may want to consider another technique.

   

   Even though this technique is far from perfect is definitely gives better results than using a PNG-24 with transparency in IE6

   

   Notice here the light blue color that appears where you expect transparency in IE6 when using a PNG-24, this is because IE6 doesn’t support the alpha transparency of PNG-24.

   There also is a size / load time advantage of using PNG-8 over PNG-24. As long as you don’t need the extra color complexity (many times on the web you don’t) then PNG-8 is typically much smaller than PNG-24, usually with little to no loss of quality (depending on the image’s composition). In the case for a sprite with buttons like the one seen here the original PNG-24 was 19KB and the PNG-8 version was only 9KB, that’s less than half the size with no real visible reduction in the quality of the image.