Update app icon and support the round icon of Android 7.1 #317
Comments
|
What are the specifications an icon should meet for Android? I believe any number of icon pack developers for GNU/Linux wouldn't mind making an icon as long as they're provided with the exact specifications. |
|
I think this is the right documentation for it: https://material.google.com/style/icons.html#icons-system-icons |
|
Thank you so much! |
|
Also, maybe icon shortcuts. |
|
@tcitworld I don't think that's something an icon designer should be doing. A separate issue maybe? |
|
I really like the general aspect, but could the wallaby be just a little less large ? A thousand thanks for your work. |
|
you mean large "W"? |
|
Apologies. I had found the kangaroo itself a bit large at first on your picture, but in fact it's because of the way it's stylized on our own logo with the "w" : |
|
Suits me well on second look. :) |
|
And what do you guys think about the plain "w" (with a long shadow) on a black background? |
|
Ok. I use #2780e3 color for circle background - it's your main color on site. |
|
Black not good for material... IMHO |
|
I get your point. However, I'm unsure if |
|
Maybe merge colors... |
|
Also for better looking we can add shadow effect for kangoo :) |
|
it's emphasize kangoo symbol |
|
The contrast is too low in my opinion. BTW: That's not the original "w" from the wallabag logo source files or am I wrong? |
|
Yes, it's not original "w" and others dots too - because i redraw all elements with pixel align. |
|
Ah I see. Is there a possibility for multiple logos? One with pixel-perfect design and one without it? On most devices today you won't recognize single pixels, on these the original icon could be used :) |
|
For compare (your icon i'm reduce to 100px, original 200px - my 96px) |
|
Pixel align need for clarity |
I'm not have idea how better use original icon with material style... |
|
Then use your pixel-perfect icon 👍 |
|
i'm not want change your main style and logo... your logo very good and stylized. |
|
It's not my logo 😉 |
|
Oh, sorry :) |
|
Yes, of course credits for the logo in about screen. I am not aware of a changelog. What changelog do you mean? Do you have a link? If you want, you can give it a try with the github web. I do not know if that will work. I just have created a branch where you can push your commit against. The name is "update-logo". If you create your pull request against that branch, we can easily merge it to this main repo and verify with android studio if everything is okay. And if not, we can work together on improving until it is ready for the master branch. I do not know the linked guide. Perhaps that works. Additionally, here are some hints from the offical Android page https://developer.android.com/preview/features/adaptive-icons.html |
I was talking about the "What's New" section in the Play Store page of the app. Maybe we could mention the designer and his website along with the fact that we have a new icon in the "What's New" of the version that'll carry the new icon? That's what Survival Manual did and that led me to discovering his work. Others could benefit similarly even if they don't bother checking the About screen. |
|
I'll update the icon when we get SVG's. |
|
I can see how it can be useful to have them to make corrections or improvements if the need arises but do we actually need them to update the icon? We just require PNGs for that and that we already have, right? |
|
I want to be sure the PNG's can be generated without external help first. Also it might be better to create a debug icon based on an SVG file. Anyway, the app used current icon for years - it's not like we're in a hurry. |
|
@themichaelcook can you please provide the logo as SVG file? |
|
Hey! Sorry about the long wait, not sure why my notifications aren't working. |
|
Here are two options for the debug version. Zips attached below.
In terms of SVG, the intricate nature of Material Design icons means that SVGs are too complicated to import well into design tools (not to mention tricky to make modifications too). What I can offer you is the figma link that will allow you to access, export, and edit the icons with a free account: https://www.figma.com/file/dX13ypsi2eNNTINmVKIs6x/Wallabag-Product-Icon-shared As long as the tasks are not within tight deadlines or very tedious, I should be available to make adjustments to the icon as needed. |
|
Thanks a lot, I have a small preference for option two. Is there a way to tip you for the work you've done ? |
|
Sure, I'm set up for Paypal at [email protected] <3 |
|
There's also this article for implementing Adaptive Icons https://medium.com/google-developers/implementing-adaptive-icons-1e4d1795470e |
|
I tried exporting the icon parts as SVGs, but the results have weird artifacts. I used GIMP, Inkscape and also opened it in firefox. I presume that either source SVGs have weird format, or SVG export is buggy. |
|
The complexity of the icon is biggest factor in this situation. I'm using a mask, rounded corners, drop shadows, inner shadows, and multiple kinds of gradients. But it's not just an export issue. Figma does have a way to go in improving their SVG export but in general SVG export/import is a varied mess across all the tools I've tried, everyone does it slightly differently, particularly with the more advanced effects used in Material Design icons. SVG provides a dream of a cross platform vector format but it is far from a reality for anything other than the most simple designs. Figma can export complex SVGs with effects that will render properly in browsers but that requires reconstructing the icon in a way that makes it less easy to make future changes too. I've added to the figma file (and attached here) three new versions of the icon with no layer effects. These should import well into other vector design tools. Besides Inkskape/GIMP, figma is currently the most accessible, cross platform professional vector design tool. It's a new service and still has a ways to go but it has simultaneous multi user editing, version history, developer inspection mode, and basic prototyping. Wallabag Product Icons (Flat).zip Let me know if these new flat icons work better or if there's anything else I can help with. |
|
Can someone please give the go ahead on this now? The SVGs couldn't be provided because they weren't used in the first place. And while we do have flat icons with SVGs, the originals are so much more beautiful and I would love to see us go with them. @di72nn Seeing how the icons were created with Figma and the link lets us generate PNGs without any external help, we should be good, right? Can we please, please merge these icons? |
|
@themichaelcook first of all, I'd like to thank you for your contribution.
Well, IMO, none of this is really important for a project like the wallabag app (versioning can be done with git; and there's no one to use everything else). What important is that the project don't get stuck with an icon we can't edit when needed (again, see the current one). Figma can suddenly disappear, change license agreement, or make PNG export a paid feature (let alone the fact that people may not want to create "a free account" to work with it). So I see Figma as an unwanted and mostly unneeded dependency. I may be too cautious about it, but somebody should be. Sorry, I don't have time to compare icons and suggest anything at the moment. |
|
@nicosomb @tcitworld @Strubbl Opinions? |
|
I wasn't aware of the importance of compatibility with those tools for this project, but it makes sense. I'm trying to think if I know of any android icon designers that work in GIMP/Inkscape that could recreate the icon for you. Basically everyone is working in Sketch or Illustrator, both will also not export a Material Design icon that could be imported into another tool because of the advanced effects needed. I'll let you know if I come up with any designer to recommend. I'm away next week but If we haven't found anyone to help by the time I get back I'll install Inkscape and see if I can recreate the icon in there. Did the flat versions of the icons I sent import ok? |
|
@di72nn The flat icons import without any issues in Inkscape and I was also able to generate PNGs which had no artifacts. Could you or anybody else confirm the same? I am willing to update the PR with these icons if everyone is okay with it. |
|
Sorry for the delayed reply. |
|
Sorry about bumping this but any updates @di72nn? |
|
Sorry, I don't particularly like the flat icon and I don't have much time these days. |
|
@tcitworld @Strubbl @nicosomb Could you please share your opinion on this matter? I think the flat icons don't look as good as the other one but they are available in an open and editable format. I too now appreciate the importance of that and the long shadow variant does look significantly better than the present icon and is definitely an upgrade. I personally feel like going ahead with the long shadow variant would be a good choice. What do y'all think? Here are the variants for reference:
|
|
I'm not very fan of the shadow on the second one, I prefer the 1st one. |
|
I'm for the second one as well. |
|
@nicosomb The shadow is something that's recommended by the Material Design guidelines. If y'all can give the go ahead then I would like to submit a PR. |
|
OK for the 2nd one so. |
Besides the current material icon request in the app (#272 #273), I'd like to see an updated app icon as well. In my opinion a white "w" on a black background should be enough to recognize wallabag. And with Android 7.1 in sight, it would be useful to create an round icon as well :)
The text was updated successfully, but these errors were encountered: