Hi-Res filetype icons

[silverwind]

This topic came up in #13. To have a fully scaleable design, we need to replace the file type bitmaps with SVGs. The problem here is that it seems pretty hard to find suitable colored SVG iconsets for this.

For refernce, the current spritesheet:

[silverwind]

These could work, assuming we can get them to export to SVG out of that psd. I also like the color variations on them. Only issue I have with them is that they're not square.

[colelawrence]

Those look nice, I could get them out of the psd file for us to use. On Apr 3, 2014 11:44 PM, "silverwind" notifications@github.com wrote:

These http://medialoot.com/item/free-flat-filetype-icons/ could work, assuming we can get them to export to SVG out of that psd. I also like the color variations on them.

Reply to this email directly or view it on GitHubhttps://github.com/silverwind/droppy/issues/42#issuecomment-39531553 .

[silverwind]

That would be great! Would it be hard to make them square? It's not an requirement, but would be nice :)

[colelawrence]

Make them square? Depends on how the document is setup, it has been awhile since I've needed to do heavy stuff with Photoshop, so I'm not sure yet. On Apr 4, 2014 1:47 AM, "silverwind" notifications@github.com wrote:

That would be great! Would it be hard to make them square? It's not an requirement, but would be nice :)

Reply to this email directly or view it on GitHubhttps://github.com/silverwind/droppy/issues/42#issuecomment-39536283 .

[silverwind]

Yeah, if it's easy, I'd prefer that, but otherwise I'm fine with these slightly non-square icons.

[colelawrence]

If we try exporting these out into svgs we are likely going to lose most of the gradients and it will obscure the colors slightly. I think that straight up spritesheeting these will be more appropriate if we want colors because it is has been said that pngs render faster than svgs. I would like for us to test the directory animation with only pngs and no svgs to see if rendering svgs are affecting our content animation speeds.

[silverwind]

SVG can do gradients too, but I'm not sure if this psd can be easily imported into Illustrator, but I'm fine for now if you wanna go the PNG route, just make sure to save them at 2x resolution for high-dpi displays.

[colelawrence]

I know they can, but my point is that there is going to be a severe performance drop if we use entirely svgs for the filetype icons.

[silverwind]

I'm not totally certain that animation choppiness is caused by the SVGs, but more likely the number of children elements we're animating. Here's another comparision:

http://codepen.io/adrianosmond/pen/LCogn

The Fix for Firefox came live in 28, before it was horribly choppy. But go ahead and try PNG, with a sprite map generator, it should be pretty easy to switch.

[colelawrence]

That's a great demo! There is little difference in performance between pngs and svgs on my gs4.

[silverwind]

Regarding icons: I think I have 64x64 versions of our icons around somewhere, we could use these instead and apply 2x resolution via a CSS rule.

It's been really hard to find fitting icons, and I kind of like the skeuomorphism on our current icons more then the flat SVG icons I found so far.

[silverwind]

Here's the icon source. It has 96px icons, so I think I'll shrink them to 48px, which should suffice for 2x DPI.

[silverwind]

@ZombieHippie Are you ok with me updating the icons to 2x size? I don't want to steal this issue without asking, in case you already started on it.

[colelawrence]

Go for it! I was playing around with the psd that you found but my photoshop skills aren't quite as broad as I thought :-) On Apr 17, 2014 2:15 PM, "silverwind" notifications@github.com wrote:

@ZombieHippie https://github.com/ZombieHippie Are you ok with me updating the icons to 2x size? I don't want to steal this issue without asking, in case you already started on it.

— Reply to this email directly or view it on GitHubhttps://github.com/silverwind/droppy/issues/42#issuecomment-40751711 .

[silverwind]

Spritesheet size went from ~30kB to ~80kB, but I think it was well worth it:

[colelawrence]

Those look great!

Is the shadow required? On Apr 17, 2014 3:07 PM, "silverwind" notifications@github.com wrote:

Closed #42https://github.com/silverwind/droppy/issues/42?utm_campaign=website&utm_source=sendgrid.com&utm_medium=email .

— Reply to this email directly or view it on GitHubhttps://github.com/silverwind/droppy/issues/42?utm_campaign=website&utm_source=sendgrid.com&utm_medium=email .

[silverwind]

That's how they came, I didn't modify them. Would you remove it? I think they would blend too much into the background without that shadow.

[colelawrence]

Well, if we have a flipping tile animation of some sort when they are selected it will look strange.

But they look good and will work for replacing what we have. On Apr 17, 2014 3:09 PM, "silverwind" notifications@github.com wrote:

That's how they came, I didn't modify them. Would you remove it? I think they would blend too much without that shadow.

— Reply to this email directly or view it on GitHubhttps://github.com/silverwind/droppy/issues/42#issuecomment-40757049 .

[silverwind]

I guess removing the shadow shouldn't be too hard if we opt for it later.

[colelawrence]

They are going to look better no matter what On Apr 17, 2014 3:15 PM, "silverwind" notifications@github.com wrote:

I guess removing the shadow shouldn't be too hard if we opt for it later.

— Reply to this email directly or view it on GitHubhttps://github.com/silverwind/droppy/issues/42#issuecomment-40757599 .

[silverwind]

Have a go at it if you like. I noticed in PS, that most icons don't have any semi-transparent pixels, so that might be an approach. Thought on the zip icon, you can notice 2 pixels being semi-transparent, probably an error on the author's side.

[silverwind]

[silverwind]

Seems I forgot to add the new folder icon, I'll add it later today.