[jira] [Commented] (NETBEANS-2617) Redraw common icons in SVG

["Eirik Bakke (Jira)" <ji...@apache.org>]

    [ https://issues.apache.org/jira/browse/NETBEANS-2617?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=17211150#comment-17211150 ] 

Eirik Bakke commented on NETBEANS-2617:
---------------------------------------

With the first batch of icons now merged, here's a list of the next ones which would be good to get drawn (in case anyone wants to volunteer):

ide/editor/src/org/netbeans/modules/editor/resources/comment.png
ide/editor/src/org/netbeans/modules/editor/resources/last_edit_location_16.png
ide/editor/src/org/netbeans/modules/editor/resources/navigate_back_16.png
ide/editor/src/org/netbeans/modules/editor/resources/navigate_forward_16.png
ide/editor/src/org/netbeans/modules/editor/resources/rect_select_16x16.png
ide/editor/src/org/netbeans/modules/editor/resources/shift_line_left.png
ide/editor/src/org/netbeans/modules/editor/resources/shift_line_right.png
ide/editor/src/org/netbeans/modules/editor/resources/uncomment.png
ide/bugtracking/src/org/netbeans/modules/bugtracking/ui/resources/find_next.png
ide/bugtracking/src/org/netbeans/modules/bugtracking/ui/resources/find_previous.png
ide/editor.search/src/org/netbeans/modules/editor/search/resources/find_selection.png
ide/editor.search/src/org/netbeans/modules/editor/search/resources/toggle_highlight.png

This would cover all of the editor toolbar.

> 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.
> * 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_correct@2x.png] vs. [incorrect|https://jetbrains.design/intellij/images/icons/stroke_anchors_incorrect@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-unsubscribe@netbeans.apache.org
For additional commands, e-mail: commits-help@netbeans.apache.org

For further information about the NetBeans mailing lists, visit:
https://cwiki.apache.org/confluence/display/NETBEANS/Mailing+lists