Transparent backgrounds using the Mac Preview tool

Downloading an image with a white background when you want the background to be transparent can be a pain. I have recently found a way of converting a colored background to a transparent background using nothing more than the standard Mac Preview tool. Before I found out this method I use to believe that I needed a proper graphics package to accomplish the task but now I realize I do not.

Follow the steps to turn a colored background into a transparent background. The way this process works is you are essentially just removing the colored background and re-saving the image …

  1. Click View -> Show Markup Toolbar, this will open the Markup Toolbar if it not already open.
  2. Click the Instant Alpha tool, image shown below.
  3. Mark a section of the colored background by using the mouse and dragging in the colored background area.
  4. Once the selection has been made click Edit -> Delete. This will remove the colored background.
  5. Save the image by clicking File -> Save.

Instant Alpha tool …

Your image will now be saved with the colored background removed. Thus having a transparent background.

I use Balsamiq Mockups

Balsamiq Mockups is a software program to enable people to mock-up user interface designs. The program is simple to use and all a user has to do is drag and drop generic components onto the white screen area and build the user interface from these generic components.

There are plenty of components to choose from ranging from forms, datagrids, tables, tabs to navigation bars for designing web based software interfaces the program is perfect.

For doing mockups of websites it is also useful as well but obviously cannot cover in depth “design” in terms of fancy graphics as to mockup fancy graphics the graphic designer would have to do the work of drawing the fancy graphics themselves which is essentially doing the work and is not really a mockup.

For a website you can say this is the header, these are some links, here is a navigation bar to the left etc. It is a mock-up.

Balsamiq Mockups will be used by me in the Roadmap and GUI Design stages. I can now easily mock-up the user interface of the web based software system at the initial stages. Giving the client an idea of what the software will look like and how it will function.

This is also useful for early recognition of problems and getting it right the first time without having to change GUI elements around later when that could prove more costly.