Modifying user images with Imagecache and Imagecache Actions

Imagecache, Imagecache Actions and Imagecache Profiles are three venerable Drupal modules when used together.  Using these modules on dasBrew.com, I was able to put user images on bottle caps as the user images.  You can follow these steps using your own images to add all sorts of crazy touchups to user images.  I've outlined my Imagecache preset and how to use this preset in user profiles.

Here is the the bottlecap image I started with.  It's simple and has a white background.  You'll notice that for our purposes, there are two parts to this image, the actual top of the cap (a dirty brown) and the ring that seals down on the bottle (the goldish border).  For simplicity, I split this base image up into two different images.  Using Fireworks, or any other image editing software, I create a circle the size of the dirty brown cap.  This took some patience and time.  I then cut the brown cap off and created a new image.

I then had two images.  The ring and the dirt cap overlay.  Since I wanted to use the cap as an overlay to add a little texture to user images, I changed the transparency to 25% and saved the image as a PNG with alpha transparency.  Here are the two resulting images.It's important to note that the center of the ring image is transparent and the outer part of the ring image is white.  Additionally, the dirt image background is transparent.  Both images are sized at 85px by 85px - which is the desired final image size.  Upload these to your Drupal installation in sites/default/files folder.

The next step is to use Imagecache and Imagecache Actions to create a new preset.  This preset is the steps that will be taken to apply these images to the user uploaded image. The steps in my preset were:

1. "Scale and Crop" to 85px x 85px
2. "Overlay (watermark)" bottlecap-whitecap.png (the ring)
3. "Overlay (watermark)" bottlecap-dirt.png (the dirt & texture) - you can change the transparency here, but I opted to change it in the file instead doing it in software everytime
4. "Change File format" Convert to: png (just for transparency goodness)

In the end, it didn't turn out too bad.  We have the Drupal drop logo with some dirt on it, on a bottle cap.  The next step is to make this happen for all user submitted avatars or user pics.

But that was easy.  Enabling them for user profiles is easier.  Ensure that the Imagecache Profiles module is enabled.  Then navitagate to Administer, User Management, User Settings (admin/user/settings) and scroll to the bottom of the page to select which present you want for user profiles.

Easy.  I've also used Register with Picture, which allows for you to have a picture field in the user registration field.  If a user does not upload a picture, you can alternately select an image default for users.  If you use this, make sure you point it to the final of the image as the default image won't go through your nifty imagecache preset.