Hi-Res filetype icons #42

Closed
silverwind opened this Issue Feb 23, 2014 · 23 comments

Comments

Projects
None yet
2 participants
Owner

silverwind commented Feb 23, 2014

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:

spritesheet

Owner

silverwind commented Apr 4, 2014

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.

800x518_free_flat_filetype_icons_800x518-2

Collaborator

colelawrence commented Apr 4, 2014

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
.

Owner

silverwind commented Apr 4, 2014

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

Collaborator

colelawrence commented Apr 4, 2014

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
.

Owner

silverwind commented Apr 4, 2014

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

colelawrence self-assigned this Apr 6, 2014

Collaborator

colelawrence commented Apr 6, 2014

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.

Owner

silverwind commented Apr 6, 2014

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.

Collaborator

colelawrence commented Apr 6, 2014

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.

Owner

silverwind commented Apr 6, 2014

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.

Collaborator

colelawrence commented Apr 6, 2014

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

Owner

silverwind commented Apr 17, 2014

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.

Owner

silverwind commented Apr 17, 2014

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

Owner

silverwind commented Apr 17, 2014

@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.

Collaborator

colelawrence commented Apr 17, 2014

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 silverwind added a commit that referenced this issue Apr 17, 2014

@silverwind silverwind Add Hi-Res Icons #42 acddba2
Owner

silverwind commented Apr 17, 2014

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

icons-hires

silverwind closed this Apr 17, 2014

Collaborator

colelawrence commented Apr 17, 2014

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
.

Owner

silverwind commented Apr 17, 2014

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.

Collaborator

colelawrence commented Apr 17, 2014

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
.

Owner

silverwind commented Apr 17, 2014

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

Collaborator

colelawrence commented Apr 17, 2014

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
.

Owner

silverwind commented Apr 17, 2014

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.

Owner

silverwind commented Apr 17, 2014

zip

silverwind changed the title from SVG filetype icons to Hi-Res filetype icons Apr 19, 2014

@silverwind silverwind added Bug and removed Feature labels Apr 19, 2014

Owner

silverwind commented Apr 19, 2014

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

silverwind reopened this Apr 19, 2014

@silverwind silverwind added a commit that referenced this issue Apr 19, 2014

@silverwind silverwind #42 Re-Add new folder icon fca542b

silverwind closed this Apr 19, 2014

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment