Have you ever wondered how you can add an overlay image onto your images in Drupal? How you can add automatically watermarks to all your images routed through a particular image style? It is not difficult really.

I wanted to share with you something that I did recently for a project I am working on.

What I was doing was a slideshow of images and I wanted to add an effect on top of each image - something like an inner shadow. You can of course have this by taking all your images first to Photoshop and adding any effect you want and then uploading them to your Drupal site. However, I wanted this to be automatic without hassle.

First, I installed ImageCache Actions and enabled it. Next, I created my overlay image in Photoshop. I created a transparent image with a little bit of black inward shadow at the edges and saved it as a .png with transparency. The size of the image - and this is pretty important - was the exact same size to which my Image Style preset was resizing my images.

Then I simply added a new effect to my Image Style called Overlay (watermark). You’ll notice that with ImageCache Actions you have some more effects there to choose from. I uploaded my overlay image somewhere and provided the link.

You can also set a x-y offset and transparency for the image.

Hope this helps.