[
https://issues.apache.org/jira/browse/NETBEANS-2617?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel
]
Eirik Bakke reassigned NETBEANS-2617:
-------------------------------------
Assignee: (was: Eirik Bakke)
> 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: 210604 Icons Overview Cropped.png, 211228 Consolidated
> Icons.ai, 220101 Updated Dark Filter Test.png, ScreenshotExample.png,
> ide.editor.bookmarks.ai, ide.editor.macros.ai, ide.seperator.breadcrumbs.ai,
> image-2022-01-19-14-41-29-967.png, 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. 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
> *[See tutorial video here.|https://vimeo.com/667860571]*
> * 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/[email protected]]
> vs.
> [incorrect|https://jetbrains.design/intellij/images/icons/[email protected]]).
> 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.20.10#820010)
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
For further information about the NetBeans mailing lists, visit:
https://cwiki.apache.org/confluence/display/NETBEANS/Mailing+lists
![https://jetbrains.design/intellij/images/icons/[email protected]](https://jetbrains.design/intellij/images/icons/stroke_anchors_corr...@2x.png){kind=link}
![https://jetbrains.design/intellij/images/icons/[email protected]](https://jetbrains.design/intellij/images/icons/stroke_anchors_incorr...@2x.png){kind=link}
