Creating a Favicon for Your Website

Editing a favicon in GIMPWhen developing a new website, one of the last things that usually gets done is designing and creating a “favorite” icon for the site. The favicon is an icon that gets displayed in various places for your website visitors. Visitors using tabbed browsers (IE7 and 8, Firefox 2+, Chrome, Safari and Opera) will see the favicon at the left edge of the tab marker; the icon will be used in the bookmarks menu and/or toolbar when the visitor bookmarks your website; it is used as the shortcut icon on Windows when someone creates a desktop shortcut for the website and more.

Although it is possible to use GIF, PNG, JPG and BMP files as your favicon, browser support can sometimes be really inconsistent for those file formats. However, the Windows icon (ICO) format is pretty universally supported, and allows a great deal more flexibility than some of the other file formats.

Unfortunately, however, Photoshop users have probably figured out by now that PS does not support the ICO file format and are probably scratching their heads trying to figure out how to create a favicon file. There are plug-ins available for both Photoshop and Fireworks that allow designers to export images as ICO files, but those may not be ideal for all users.

Instead, you can easily download The GIMP for free (available on Windows, Linux and Mac), which has native support for ICO files.

The PhotoShop Content Aware Fill Demo

This might be the most impressive demo I’ve ever seen for a PhotoShop feature. It’s from a PhotoShop team member showing off a feature that will be available in the upcoming PhotoShop CS5. It’s called “content aware fill” and can basically take ANYTHING out of a photo. It’s like an eraser with a brain.

Just imagine – you breakup with¬† your girlfriend or boyfriend and instantly remove him or her from every photo ever…or as the demo shows, you can easily remove trees from scenery as if they were never there.

Photoshop Tutorial: Erasing Unnecessary Content

Here’s a simple way to use Photoshop to erase unnecessary content from your photos and images.

Step 1: Place the img (image) on top of a blank, white layer (comes in handy when erasing content).  Duplicate the img, and add a vector mask to the top-layered img.

step 01

Add the Extract Filter to Photoshop CS4

Adobe Photoshop CS4For those of you that upgraded to Photoshop CS4, you may have noticed that the “Extract” filter is missing from the program. From what I’ve read, Adobe’s reasoning is that they are building a better method to extract an image from its background, so they’ve gone ahead and removed the filter (among others) before they’ve provided another solution.

Thankfully, Adobe has provided us with a stopgap solution for the time being. On Adobe’s Web site, you can find a zip archive that includes the “ExtractPlus” filter, along with seven other plugins for Photoshop CS4. If you want to use the extract filter, go ahead and download the archive and install the plugins according to the readme.

Optimize Your JPEGs with PHP

If you’re anything like me, you put a lot of images and photographs on your Web site without opening them in PhotoShop to optimize them for the Web, first. Generally, if I download an image from the Web or I get an image e-mailed to me to add to the Web site, as long as it’s the right size, I just upload it and move on.

Unfortunately, however, those images are usually quite bloated and not compressed properly for the Web. With PHP, though, you can easily optimize an entire directory full of JPEG and PNG images with one simple script without losing any noticeable quality.

Capturing and Editing Screen Shots with the GIMP

For those of you unaware, the GIMP (Gnu Image Manipulation Program) is a free, open-source image manipulation program. It doesn’t quite stand up to Photoshop, but it’s still extremely useful, and you can’t beat the price.

This is intended to be a very quick tutorial explaining how to capture screen shots and then edit them with the GIMP.