ubiquity-slideshow team mailing list archive

[Mads Rosendahl <madsrh@xxxxxxxxx>]

Evan Dandrea wrote:

> Wow, that branch looks amazing.  I showed it to a few people here at
> the Karmic sprint and the engineers seem to be quite happy with it.
> We'll see how the design team feels once they've seen it, but I'm keen
> to make the next upload attempt from this branch, or with this branch
> merged into trunk.
>
> It was suggested by another developer that we use the original SVG
> sources instead of pre-rendered PNGs as it a) saves us a fair amount
> of space, and b) we have to include the SVG files in the source tree
> for any GPL'ed image that we include.  Webkit can obviously handle
> rendering SVGs and CSS transforms to add reflections.  I'm going to
> spend a few minutes today trying to sort this out, but any help will
> be much appreciated as I also need to focus on migration-assistant
> work.
>
>

Hi
I am glad that you like the design ;-)
I've already contacted Mat Tomaszewski and asked him to look at it -
this work will have to match the look and feel the design team is
planning for Karmic. Anyway, Mat was far to busy at the sprint to look
at anything at the moment, so if you could get some feedback from the
design team it would be fantastic.

The reason why PNG is used, is because we wanted the reflection and to
add a drop shadow on icons that didn't already have one. I'm very well
aware that there are many benefits of using SVG. Besides the
disadvantages you already mentioned, using PNG images also mean
derivatives will have to create the own pre-rendered PNG. Is there
anyway to automatically add a reflection to SVG files?

I've written down the steps for how to "GIMP" your own PNG images for
the slideshow.

//Creating the reflection:
1.Import your image
2.Duplicate the image onto a new layer
3.Add Gaussian blur to the duplicate
4.Flip the duplicate vertical
5.Move the duplicate below the imported image
6.Add a layer mask with gradient to the duplicate
7.Reduce the opacity of the duplicate layer

//Adding additional drop shadow:
8.Draw a thin black ellipse
9.Add Gaussian blur
10.Adjust the size of the ellipse to be slightly larger than your imported image
11.Reduce the opacity
12.Move the drop shadow layer below your image, but on top of the reflection



Best regards

//Mads Rosendahl (MadsRH)
http://anotherubuntu.blogspot.com
http://www.behance.net/madsrh123



PS: I've updated the Pigin image (attached)

Attachment: pidgin.png
Description: PNG image