[ https://issues.apache.org/jira/browse/NETBEANS-2617?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=17339167#comment-17339167 ]
Eirik Bakke commented on NETBEANS-2617: --------------------------------------- I've drawn the icons in the previous list above and will be incorporating them shortly (NETBEANS-5658). > Redraw common icons in SVG > -------------------------- > > Key: NETBEANS-2617 > URL: https://issues.apache.org/jira/browse/NETBEANS-2617 > Project: NetBeans > Issue Type: Improvement > Components: platform - Other > Affects Versions: 11.0 > Environment: Windows, Linux, and MacOS > Reporter: Eirik Bakke > Priority: Major > Labels: HiDPI > Attachments: ScreenshotExample.png, ide.editor.bookmarks.ai, > ide.editor.macros.ai, ide.seperator.breadcrumbs.ai, > netbeans_icons_illustrator_template.ai, style example (dark filter).png, > style example.png > > > Once NETBEANS-2604 is done, we should start replacing commonly seen NetBeans > icons with SVG versions, for improved appearance on Retina/HiDPI displays. > h2. UPDATE: > [Here|https://docs.google.com/spreadsheets/d/1U_pj-I3hk9Wj_7lvHcUDsZfFfBSyCkSGqBuv0qt_qXw/edit?usp=sharing] > is a Google Sheet where we can track progress of contributions and > prioritization of icons. > With some practice, it takes on average 30 minutes to create an SVG version > of a typical icon in Adobe Illustrator. See the attached illustration and > Illustrator template. The Illustrator template includes a few icons which > have already been converted. > In NETBEANS-2605, a prioritized list of icons to convert was produced (now > migrated to the Google Sheet above). By redrawing the most commonly seen > icons first, we can get the greatest "bang for the buck" in terms of > improving NetBeans' appearance on HiDPI displays. Note that in cases where an > icon file has been copied around to various places in the NetBeans codebase, > the spreadsheet includes only one location, picked arbitrarily. Once we have > a batch of icons ready to integrate into the NetBeans repository, Eirik will > redo the duplicate detection and ensure the SVGs end up in all relevant > locations, and start creating pull requests. > See also the overview page for HiDPI improvements on > https://cwiki.apache.org/confluence/display/NETBEANS/HiDPI+%28Retina%29+improvements > . > If you wish to contribute to this effort, comment here; Eirik will coordinate > to make sure multiple people are not working on the same icons. > h2. Proposed Style Guide for Vectorized Icons > * Vector icons should be drawn in Adobe Illustrator, or alternatively > Inkscape or another free tool. In Illustrator, each icon should be one named > artboard, sized to the correct size in pixels. See the attached Illustrator > template. (Adobe Illustrator comes with a free 7-day trial, after which it's > $35/month. If cost is a problem but you want to contribute your time to draw > icons, ask Eirik...) > * If you prefer to use Inkscape instead, and want to contribute icons, that's > fine; just make sure to follow the same consistent style as the other icons. > If using Inkscape, perhaps pick another group of icons than the ones that are > currently being drawn in Illustrator. It's best to draw all similar-looking > icons in the same tool. > * For each icon to be vectorized, place the old bitmap version of the icon in > a separate layer ("Old Bitmap Icons" in the Illustrator template). You can > then draw the vectorized version on top. > * Since most of the existing NetBeans icons follow a quite consistent visual > style, and to simplify the job of creating new icons, it is best to keep the > shape of the new vectorized icons the same as in the old bitmap icons. For > instance, a rectangle of size 5x4px in the bitmap icon should probably become > a rectangle of 5x4px in the vector version. > * Keep the same general colors in vectorized icons as in the corresponding > old bitmap icons. > * Some of the old bitmap icons use grays with a slightly blue tint (e.g. the > [file > icons|https://raw.githubusercontent.com/apache/netbeans/master/java/refactoring.java/src/org/netbeans/modules/refactoring/java/resources/newFile.png]). > This style is out of fashion (resembling 1990s Solaris GUIs etc.); use > neutral greys instead. > * If the old bitmap icon is complex, it is fine to simplify it a bit when > drawing vectorized versions. > * Omit gradients, bevels, and unnecessary drop shadows. They take more time > to draw, and with "flat design", they are now out of fashion in any case. > * Use a stroke width of 1px around the main shapes in the icon, like in the > existing bitmap icons. The new icons should look consistent with the existing > bitmap icons, especially since we may see bitmap icons and vector icons > side-by-side for a long time. Within shapes, 0.5px strokes can be used for > finer details. (0.5px strokes become 1 device pixel on Retina screens, which > have a 2x scaling.) > * The 1px strokes that outline the icon's shapes should typically be 33% > transparent black on top of the shape's background color, or of similar > darkness. See the examples in the attached "style example.png" file. > * When the same shape occurs in different icons but at different sizes (e.g. > the small magnifying glass in find_selection.png vs. the large magnifying > glass in zoom_in.png), strokes and borders should still remain at the same > thickness (1px for external borders and 0.5px for internal strokes). > * Horizontal and vertical strokes must be aligned to the pixel grid. > * While it may sometimes be necessary to "outline" strokes for the purposes > of applying boolean operations (e.g. subtracting another shape from the > stroke only), strokes should be left as strokes whenever possible, as this > leads to smaller SVG files, and makes shapes within the icon easier to modify. > * For icons in the main IDE toolbar (as opposed to the editor toolbar), which > exist in both 16x16 and 24x24 sizes, base the vector version on the smaller > 16x16 one, which is sometimes simpler. (This is already done in the > prioritized icon list above.) > * Avoid unnecessary anchor points (illustration from IntelliJ's style guide: > [correct|https://jetbrains.design/intellij/images/icons/stroke_anchors_corr...@2x.png] > vs. > [incorrect|https://jetbrains.design/intellij/images/icons/stroke_anchors_incorr...@2x.png]). > h2. Process for Exporting SVG Files from Adobe Illustrator > 1) As mentioned above, each icon needs to already be in its own named > artboard, sized to the correct size in pixels. Verify that horizontal and > vertical lines are aligned to pixel boundaries. > 2) Save the Illustrator file to a new file, to avoid accidentally overwriting > the original during the export process. > 3) Delete the "Old Bitmap Icons" layer. (This is important, otherwise the old > bitmap icon will be embedded into the exported SVG file.) > 4) From the "File" menu, click "Save a Copy". Select a folder, use the > following settings, and click OK: > {noformat} > File name: icon (will be prefixed the artboard names; mandatory) > Save as type: SVG > Use artboards: Check and select either "All", or a range if not all > artboards are used (e.g. "1-8") > {noformat} > 5) In the SVG export options dialog that shows up, enter the following > settings, which have been tested and are known to work with NetBeans' SVG > loader implementation and the process outlined here: > {noformat} > SVG Profiles: SVG 1.1 > Type: Convert to outline > CSS Properties: "Style elements" > Uncheck "Include Unused Graphic Styles" > Decimal Places: 3 > Encoding: UTF-8 > Responsive: Disabled > {noformat} > 6) Convert each SVG file to UNIX line endings. (E.g. "dos2unix *.svg" on > Linux.) > 7) Add Apache license headers to each of the exported SVG files. (SVG files > are just XML files. See the source of > [this|https://raw.githubusercontent.com/eirikbakke/incubator-netbeans/master/platform/openide.actions/src/org/openide/resources/actions/undo.svg] > file for an example of a correct license header.) > 8) Now meticulously copy each of the exported files into appropriate > locations in the NetBeans repository. Some bitmap files may be used in > multiple locations; it may be necessary to copy the corresponding SVG into > multiple locations as well (see below for how to identify where). When > creating an SVG version of an icon named "someicon.png" or "someicon.gif", > the SVG file should be in the same folder and named "someicon.svg". The > NetBeans ImageLoader will automatically load the SVG file instead of the > bitmap file. > h2. Commands for Identifying Icons That Exist in Multiple Locations in the > NetBeans Sources > {code:bash} > # While in the root of a cloned netbeans repo: > git ls-files | grep -v '/test/' | grep '[.]png$' > ../images.txt > git ls-files | grep -v '/test/' | grep '[.]gif$' >> ../images.txt > while read in; do sha256sum "$in"; done < ../images.txt | sort > > ../checksums.txt > # Now you can search checksums.txt for files with the same checksum. > {code} > Additionally, consult > https://people.csail.mit.edu/ebakke/misc/netbeans-icons/ to identify other > icons that have a similar appearance, which can all be replaced by the same > SVG icon (e.g. the 5 different "warning" or "magnifying glass" motifs). I > recommend searching and reviewing these icons by name. E.g. to find all icons > looking like a magnifying glass, review all icons with "search", "find", > "zoom", or "magnify" in their name. -- This message was sent by Atlassian Jira (v8.3.4#803005) --------------------------------------------------------------------- To unsubscribe, e-mail: commits-unsubscr...@netbeans.apache.org For additional commands, e-mail: commits-h...@netbeans.apache.org For further information about the NetBeans mailing lists, visit: https://cwiki.apache.org/confluence/display/NETBEANS/Mailing+lists