GNOME Bugzilla – Bug 687310
dconf-editor should install a highcontrast app icon
Last modified: 2015-02-22 12:22:41 UTC
We are aiming to have an highcontrast app icon for all apps in 3.8. See https://live.gnome.org/GnomeGoals/HighContrastAppIcons
Created attachment 230377 [details] a collection of dconf-editor icons i did some designs on the dconf icon . if one of the icons suit the theme please pick one of the icon. feel free to give me advice on how to improve the icon and where i should improve on.
I'm rather fond of them all. Thanks! I'm not sure what is required in terms of proper outlines (in order to be seen well against light and dark backgrounds). I'm cc:ing Meg, who can hopefully help.
Created attachment 230422 [details] magnifying glass icon from the symbolic theme
Created attachment 230423 [details] checkmark icon from gnome icon theme symbolic
Hi Yuki! These look nice! I think that the first icon would make the best version for high contrast. To make a high contrast icon, you need to make the icon fit into a 16x16 px square. Make a square and set both the stroke and the paint of the square to undefined. The minimum size for each shape or stoke you use in your icon should be 1 px. Be sure to leave a 1 px space between the checkmark and the magnifying glass so there is a clear difference between your shapes. Your magnifying glass and checkmark shapes need do be made with either stroke or fill, not both (you can check this by pressing Shift+Ctrl+F in Inkscape and looking in the stroke/fill editor that pops up). The RBG color of your icon should be 190, 190, 190, 255. You don't need to worry about outlines, since Cosimo Cecchi wrote a script that generates them automatically. If you have questions, feel free to comment on the bug or ask on #gnome-design on irc. I am not on very much, but jimmac and lapo would be happy to help you :) I'm attaching a magnifing glass icon and a checkmark icon from the theme so you can look at them fr reference. The complete theme is here: http://git.gnome.org/browse/gnome-icon-theme-symbolic/. You can look at it if you know how to use git, but if you don't know how to use git then don't worry.Thanks for working on this! -Meg
Created attachment 230436 [details] dconf-editor icon 1 feel free to comment
Created attachment 230437 [details] dconf-editor icon2
Hi, these look really good! I have a few more comments: The inner and outer edges of your circle need to align exactly with the grid (press # to view it in Inkscape). Please make filled part of the circle 2 px wide if possible, it is easier to see than 1 px (1 px is the minimum). The end of the handle of the magnifying glass should probably be rounded like the handle in the example, so it fits into the theme better. Align to the grid the handle to the grid (you can look at the example to see what I mean). checkmark: make it fit exactly in the grid (try to make it whole px size, no .4 px, and align to the grid). In the second icon there is some space between the handle and the circle. I really like having the checkmark inside a square, but please make the checkmark sit at least 1 px from the outer edge of the square -- on the bottom you are not showing enough of the square. Once you are done, there are some weird things you need to do in order to have the icon work properly. you need to put a 16x16 px square with the fill and stroke unset into your icon. then you need to select all of your shapes and make them into one group (if any of the shapes you are using are already a group, ungroup them and re-group as one group with the square). Then right click on your group and choose "object properties". Set the title of your icon to the name (I guess dconf-editor). This is because the icon will go in a sheet with a lot of other icons. There is a ruby script that crawls the sheet looking for 16x 16 px squares and crops them out to make the icons. (The square is gone in the examples I attached because the script removed them when it cut them out of the big svg sheet).
I meant *align the handle to the grid* sorry!
fwiw, I prefer "icon 1" (the one with the square)
Are you planning to ship it with the app or rely on g-t-s to install it, Ryan?
I guess it makes more sense with the app? I install my 'normal' icon that way... Is there documentation for what I need to do to install it properly?
I'm not sure how the outlining will work if you install it with the app. I'm cc'ing Jakub since I see that he recommended shipping with the app on https://bugzilla.gnome.org/show_bug.cgi?id=687306
Yes, we're aiming for shipping app icons with the app. As for whats required, look at what I've done in gnome-system-log http://git.gnome.org/browse/gnome-system-log/commit/?id=878bcf652c5d1622ea5e226b51589172038d0710
So is 16x16 svg the only thing the apps need to provide (I can't tell because you are reusing the g-t-s pngs for gnome-system-log), and does the app icon need a 1px outline, black color, etc?
i will work on the one with the square
OK, sounds good yuki, thanks! You don't need to add the 16x16 px square or set the name in "object properties" since the icon is going to be shipped with the app.
The grouping and naming of the object group is indeed only sued for "export" of teh whole gnome-icon-theme-symbolic sheet into the individual -symbolic icons. If the app will be shipping a single app icon, just make sure your objects on the 16x16px canvas only have either a stroke or a fill, not both for the recoloring to work (for the current two stroke HC script and future runtime recoloring). P.S.: I find the use of the loupe metaphor for dconf-editor pretty bad, and a little ironic as it doesn't seem to provide search functionality.
Then you should suggest a new metaphor so yuki isn't wasting time, Jakub. IMO it's fine to say something isn't a proper metaphor, but suggesting an alternative would be more constructive, especially if you are critiquing a newcomer.
Oh sorry for rubbing you the wrong way. I'm not criticizing yuki as dconf has been using that metaphor for the fullcolor variant and it made sense to stick to an existing one. A fusebox, or just a bunch of microswitches would do. For the symbol that would get simplified to 2 or 3.
Turns out I made a hicolor gconf-editor icon with those switches. I would expect dconf to just carry gconf's torch here. Do we really need these tools to maintain their identity?
You didn't rub me the wrong way, Jakub. I was just suggesting you expand on your comment so yuki knew what you wanted :)
The gconf icon I referred to is here - https://raw.github.com/gnome-design-team/gnome-icons/master/apps/src/configuration-editor.svg
I'm reasonably fond of the existing icon and I think it makes sense as a metaphor. It allows you to inspect your preferences. Of course, the magnifying glass has a near-universal metaphorical meaning of "search", but in this case it doesn't fall over very hard: dconf-editor really is the best way to search your preferences by name...
Not trying to question authority or anything here, but we use it for edit-find in g-i-t-s, which is pretty close to the meaning here.
Anyway, I'm sure that Jakub can deal with this from here since he maintains g-i-t-s. Un cc'ing myself.
I'm just providing a suggestion, it's up to an app author what icon they want to present themselves under. That said, the fullcolor icon isn't really executed well under the present Tango guidelines.
hi yuki, Any follow up here?
sry i kinda busy but will update once I done .
Created attachment 233041 [details] dconf-editor icon
Created attachment 233329 [details] 16x16 highcontrast rendering
Created attachment 233330 [details] 22x22 highcontrast rendering
Created attachment 233331 [details] 24x24 highcontrast rendering
Created attachment 233332 [details] 32x32 highcontrast rendering
Created attachment 233333 [details] 48x48 highcontrast rendering
Created attachment 233334 [details] 256x256 highcontrast rendering
I figured out how to use the create-highcontrast utility in gnome-themes-standard to create proper highcontrast renderings of this icon. This is what we should install.
yuki: do you have a name that you prefer be written in the commit log (since you are the author)?
Created attachment 234313 [details] [review] editor: add new high contrast icons
just name it as dconf-editor .
Included in the 0.15.3 release just made. Thanks!
[moving dconf>editor tickets to dconf-editor product. See bug 744791]