GUI Convert the Lumiera logo into a SVG app icon

[joelholdsworth]

We've now settled on a logo for Lumiera, and it's a good one. We now need to convert it into an app icon. We have an icon rendering infrastructure ready as part of the build system (ask me how to use it), and I made an attempt at converting the logo into an tango-style SVG, and failed. Would anyone like to have another go?

There are only a couple requirements.

• The icon must have versions that look good in 16x16, 22x22 (and 24x24), 32x32 and 48x48 (and optionally larger sizes: e.g. 128x128 or even 256x256)
• The icon must look good on both dark and light backgrounds. (Maybe tango style will help with this)
• The icon must have a distinctive silhouette - it must not be one of those rectangular icons that fills the whole area of the icon.

This is the SVG of my failed attempt:  http://www.lumiera.org/gitweb?p=LUMIERA;a=blob_plain;f=icons/svg/app-icon.svg;h=1df75c2657d64e6e50869f0503a2e9ffb8fec847;hb=HEAD Ignore the arrow icons that are left over from the SVG that I borrowed the template from.

[joelholdsworth]

...note that this will double as a FavIcon for the website.

[ichthyo]

Hey, our Logo got the magic ticket number 23

[andrewjames]

inkscape is loaded, then i thought of this ticket.

I am in process to draw the logo as vector.

The source graphic to vectorize the logo is  http://www.lumiera.org/lumiera_logo.png

The vector logo may work as the logo at site hypertext.

For ticket Website design: create a graphical mockup #483, I will reference this ticket then anyon who designs may use the vector.

[andrewjames]

the vector was drawn in inkscape, format inkscape svg.

it renders in gimp at 16x16 to 256x256 pixels
the icon is pretty on backgrounds dark and light
the icon was traced from the logo png, the result is an icon with the proportions of the original graphic, that is a distinct silhouette especially with the colourful effect sub film

The vector is a composit of two layers, posed in the order listed

film

colour is black
track holes were created per exclusions of traced shapes, like cut out parts of paper, most work was to shape the holes from the original graphic

range colours

shape is triangular
gradient of 5 colours left to right, red, yellow, green, cyan, blue
blurred
semi opaque, the two colours at the far sides in the range are less opaque, red and blue, that value is controlled in the fill gradient properties

The range colours is easily reshaped to an arch or square or other shape to pose less or more colour that shines through each film track hole and out from under film at sides.

Note, all the colour values, blurr, opacity, pose of colours on gradient are changed with value sliders in specific object properties. With some inkscape experience that work is easy.

For example, we may want grey, grey inverted, black and white, no range colour versions. I think I can product all these logos in 20 minutes.

I want some expert, like Joel to validate that the logo renders decently.

I will try to attach the logos at trac temporarily, a super developer may want to comment where the icon is stored finally.

[andrewjames]

vector in a 16x16 square, it scales to larger size correctly

[andrewjames]

same vector on canvas where is was created originally, arbitrary canvas size, the original graphic png that was traced is on canvas, raffas site hypertext draft graphic is on canvas for no reason

[raffa]

I can't download the .svg (or something is wrong with it).

Would you mind explaining "raffas site hypertext draft graphic is on canvas for no reason" in plain English?

[andrewjames]

raffa,
there is two versions of the vector. the one named logo-vector-small.svg is for production, only the logo is in that file (canvas).

logo-vector.svg is the original file where the vector was drawn. On that canvas I put some graphics that other persons drew to use as reference while drawing (tracing mostly) the vector version of the logo. There is the png (graphic) version of the logo that I used to trace a vector version of the logo. Also on that canvas is your graphics that you composed as draft designs of the website. They are there not exactly for no reason, rather I was in process of drafting my own designs of the site while vectorizing the logo. I thought to include all the part of the original canvas where I worked, to document my work process completely.

I downloaded the svg from trac. To download the .svg, click the link, on that page there is a link at 'Download in other formats:' 'Original Format'. You may have not seen that link on the page, it is subtle grey.