[ https://issues.apache.org/jira/browse/NETBEANS-2617?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ]
Eirik Bakke updated NETBEANS-2617: ---------------------------------- Attachment: Icons drawn by Eirik as of 2020-09-18 (this file for visual reference only).pdf > 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: Icons drawn by Eirik as of 2020-09-18 (this file for > visual reference only).pdf, 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 are > ready to install the icons into the repo, Eirik will redo the duplicate > detection and ensure the SVGs end up in all relevant locations. > See also the overview page for HiDPI improvements on > https://cwiki.apache.org/confluence/display/NETBEANS/HiDPI+%28Retina%29+improvements > . > h2. Proposed Style Guide for Vectorized Icons > * Vector icons should be drawn in Adobe 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 a few dozen > 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 > the "Old Bitmap Icons" layer in Illustrator. 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. (The color scheme is not too hard to change later, but we > should do this only once most of the IDE icons have been vectorized.) > * 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. > * 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 toolbar icons, 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.) > 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. -- 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