Simple question if you are a photoshop wiz...which I am not. I want to re-create the shadow on the image slideshow so that it is on a transparent background and maybe a different shade.

Your current image is a flat jpg with with white back, I want to make it a transparent png but dont know how you created the nice blur shadow effect.

Any advice or tips, or perhaps your original photoshop file??? :)

Thanks in advance.


#4 slideshow-shadow.png18.86 KBjcnventura
Members fund testing for the Drupal project. Drupal Association Learn more


ca_grover’s picture

This is how I did it. Opened Inkscape. Opened the slideshow-shadow.gif image to use as a guide. Using the Pen tool, I created polygon in the rough shape of the dark area. (top corners are about 45 degrees in from their respective lower corners). Made sure the polygon was filled with a black color. Then look at the Fill&Stroke details for the shape - bump the "Blur" effect up to about 5.0. From there it was a simple case of playing a little with positioning to get something suitable.

In my particular case, I needed a solid background (#cfc). So I created a second rectangle the same size as the original image, set it's color, and put behind my "shadow" object. Then removed the original image and saved the graphic. I opted to retain the original and used a different filename (slideshow-shadow-custom.png) and set this in my local.css file:
#slideshow-wrapper { background: #cfc url(images/slideshow-shadow_custom.png) no-repeat center bottom; }

The end result is exactly what you would expect.

aconcept’s picture

There's an easier way. Just get the original image to Photoshop, make a new layer behind it, fill it with the color you like, then select the orinigal image layer and give it a multiply blend mode. This will totally erase the white background and you'll get what you want. I would prefer this instead of making it transparent, or instead of making a new shadow...

mloya’s picture

Can you change the width and height ?

jcnventura’s picture

Status: Active » Reviewed & tested by the community
18.86 KB

After running Google's PageSpeed Insights on my personal website which is using Danland, it pointed out that the slideshow background was one of the biggest page size wasters.

I've used GIMP to modify the slideshow background so that it is perfectly transparent. Now it can blend in with any background color, and changing the blur color shouldn't be too complicated, by modifying the image's color settings.

If the author is willing I'd urge him to update the theme with this image. And to use minified javascript in the scripts directory.

  • jcnventura committed e083beb on 7.x-1.x
    Issue #962950: Slideshow shadow image smaller and transparent

  • jcnventura committed 7329801 on 6.x-2.x
    Issue #962950: Slideshow shadow image smaller and transparent

  • jcnventura committed 0133a85 on
    Issue #962950: Slideshow shadow image smaller and transparent
jcnventura’s picture

Issue summary: View changes
Status: Reviewed & tested by the community » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.