[jira] [Updated] (NETBEANS-2617) Redraw common icons in SVG
[
https://issues.apache.org/jira/browse/NETBEANS-2617?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel
]
Eirik Bakke updated NETBEANS-2617:
--
Description:
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]
.
The style guide and process notes has been moved to [this confluence
page|https://cwiki.apache.org/confluence/display/NETBEANS/SVG+Icon+Style+Guide+and+Process].
was:
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
[jira] [Updated] (NETBEANS-2617) Redraw common icons in SVG
[
https://issues.apache.org/jira/browse/NETBEANS-2617?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel
]
Eirik Bakke updated NETBEANS-2617:
--
Description:
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
[jira] [Updated] (NETBEANS-2617) Redraw common icons in SVG
[
https://issues.apache.org/jira/browse/NETBEANS-2617?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel
]
Eirik Bakke updated NETBEANS-2617:
--
Description:
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 this tutorial video.|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
[jira] [Updated] (NETBEANS-2617) Redraw common icons in SVG
[
https://issues.apache.org/jira/browse/NETBEANS-2617?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel
]
Eirik Bakke updated NETBEANS-2617:
--
Attachment: 220101 Updated Dark Filter Test.png
> 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,
> 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
> * 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
[jira] [Updated] (NETBEANS-2617) Redraw common icons in SVG
[
https://issues.apache.org/jira/browse/NETBEANS-2617?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel
]
Eirik Bakke updated NETBEANS-2617:
--
Attachment: 211228 Consolidated Icons.ai
> 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, 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. 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%
>
[jira] [Updated] (NETBEANS-2617) Redraw common icons in SVG
[
https://issues.apache.org/jira/browse/NETBEANS-2617?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel
]
Eirik Bakke updated NETBEANS-2617:
--
Description:
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
* 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),
[jira] [Updated] (NETBEANS-2617) Redraw common icons in SVG
[
https://issues.apache.org/jira/browse/NETBEANS-2617?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel
]
Eirik Bakke updated NETBEANS-2617:
--
Attachment: (was: 210604 Icons Overview Cropped.png)
> 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,
> 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.
[jira] [Updated] (NETBEANS-2617) Redraw common icons in SVG
[
https://issues.apache.org/jira/browse/NETBEANS-2617?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel
]
Eirik Bakke updated NETBEANS-2617:
--
Attachment: (was: 210604 Icons Overview.png)
> 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,
> 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
[jira] [Updated] (NETBEANS-2617) Redraw common icons in SVG
[
https://issues.apache.org/jira/browse/NETBEANS-2617?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel
]
Eirik Bakke updated NETBEANS-2617:
--
Attachment: 210604 Icons Overview.png
> 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.png, 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
[jira] [Updated] (NETBEANS-2617) Redraw common icons in SVG
[
https://issues.apache.org/jira/browse/NETBEANS-2617?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel
]
Eirik Bakke updated NETBEANS-2617:
--
Attachment: (was: batch.png)
> 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.png, 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
[jira] [Updated] (NETBEANS-2617) Redraw common icons in SVG
[
https://issues.apache.org/jira/browse/NETBEANS-2617?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel
]
Eirik Bakke updated NETBEANS-2617:
--
Attachment: batch.png
> 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, batch.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
[jira] [Updated] (NETBEANS-2617) Redraw common icons in SVG
[
https://issues.apache.org/jira/browse/NETBEANS-2617?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel
]
Eirik Bakke updated NETBEANS-2617:
--
Description:
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
[jira] [Updated] (NETBEANS-2617) Redraw common icons in SVG
[
https://issues.apache.org/jira/browse/NETBEANS-2617?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel
]
Eirik Bakke updated NETBEANS-2617:
--
Description:
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|java/refactoring.java/src/org/netbeans/modules/refactoring/java/resources/newFile.pngccc]).
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
[jira] [Updated] (NETBEANS-2617) Redraw common icons in SVG
[
https://issues.apache.org/jira/browse/NETBEANS-2617?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel
]
Eirik Bakke updated NETBEANS-2617:
--
Description:
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.pngccc]).
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
[jira] [Updated] (NETBEANS-2617) Redraw common icons in SVG
[
https://issues.apache.org/jira/browse/NETBEANS-2617?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel
]
Eirik Bakke updated NETBEANS-2617:
--
Description:
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
[jira] [Updated] (NETBEANS-2617) Redraw common icons in SVG
[
https://issues.apache.org/jira/browse/NETBEANS-2617?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel
]
Eirik Bakke updated NETBEANS-2617:
--
Description:
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
[jira] [Updated] (NETBEANS-2617) Redraw common icons in SVG
[
https://issues.apache.org/jira/browse/NETBEANS-2617?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel
]
Eirik Bakke updated NETBEANS-2617:
--
Description:
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
[jira] [Updated] (NETBEANS-2617) Redraw common icons in SVG
[
https://issues.apache.org/jira/browse/NETBEANS-2617?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel
]
Eirik Bakke updated NETBEANS-2617:
--
Description:
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
[jira] [Updated] (NETBEANS-2617) Redraw common icons in SVG
[ https://issues.apache.org/jira/browse/NETBEANS-2617?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Eirik Bakke updated NETBEANS-2617: -- Description: 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 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. * 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.) *
[jira] [Updated] (NETBEANS-2617) Redraw common icons in SVG
[ https://issues.apache.org/jira/browse/NETBEANS-2617?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Eirik Bakke updated NETBEANS-2617: -- Description: 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 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. * 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
[jira] [Updated] (NETBEANS-2617) Redraw common icons in SVG
[ https://issues.apache.org/jira/browse/NETBEANS-2617?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Eirik Bakke updated NETBEANS-2617: -- Description: 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 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. * 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
[jira] [Updated] (NETBEANS-2617) Redraw common icons in SVG
[ https://issues.apache.org/jira/browse/NETBEANS-2617?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Eirik Bakke updated NETBEANS-2617: -- Description: 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 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. * 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
[jira] [Updated] (NETBEANS-2617) Redraw common icons in SVG
[ https://issues.apache.org/jira/browse/NETBEANS-2617?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Eirik Bakke updated NETBEANS-2617: -- Description: 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 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. * 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
[jira] [Updated] (NETBEANS-2617) Redraw common icons in SVG
[ https://issues.apache.org/jira/browse/NETBEANS-2617?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Eirik Bakke updated NETBEANS-2617: -- Description: 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 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. * 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 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.) * Avoid unnecessary anchor points
[jira] [Updated] (NETBEANS-2617) Redraw common icons in SVG
[ https://issues.apache.org/jira/browse/NETBEANS-2617?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Eirik Bakke updated NETBEANS-2617: -- Description: 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 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. * 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 toolbar icons, which exist in both 16x16 and 24x24 sizes, base the vector version on the smaller 16x16 one,
[jira] [Updated] (NETBEANS-2617) Redraw common icons in SVG
[ https://issues.apache.org/jira/browse/NETBEANS-2617?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Eirik Bakke updated NETBEANS-2617: -- Attachment: (was: 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: 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. 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
[jira] [Updated] (NETBEANS-2617) Redraw common icons in SVG
[ https://issues.apache.org/jira/browse/NETBEANS-2617?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Eirik Bakke updated NETBEANS-2617: -- Description: 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. 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. * 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 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
[jira] [Updated] (NETBEANS-2617) Redraw common icons in SVG
[ https://issues.apache.org/jira/browse/NETBEANS-2617?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Eirik Bakke updated NETBEANS-2617: -- Description: 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 . 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. * 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 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.) * Avoid unnecessary anchor points (illustration from IntelliJ's style guide:
[jira] [Updated] (NETBEANS-2617) Redraw common icons in SVG
[ https://issues.apache.org/jira/browse/NETBEANS-2617?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Eirik Bakke updated NETBEANS-2617: -- Description: 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 . 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. * 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 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.) * Avoid unnecessary anchor points (illustration from IntelliJ's style guide:
[jira] [Updated] (NETBEANS-2617) Redraw common icons in SVG
[ https://issues.apache.org/jira/browse/NETBEANS-2617?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Eirik Bakke updated NETBEANS-2617: -- Description: 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 . 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. * 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 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.) * Avoid unnecessary anchor points (illustration from IntelliJ's style guide:
[jira] [Updated] (NETBEANS-2617) Redraw common icons in SVG
[ https://issues.apache.org/jira/browse/NETBEANS-2617?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Eirik Bakke updated NETBEANS-2617: -- Description: 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 . 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. * 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 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.) * Avoid unnecessary anchor points (illustration from IntelliJ's style guide:
[jira] [Updated] (NETBEANS-2617) Redraw common icons in SVG
[ https://issues.apache.org/jira/browse/NETBEANS-2617?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Eirik Bakke updated NETBEANS-2617: -- Description: 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 . 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. * 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 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.) * Avoid unnecessary anchor points (illustration from IntelliJ's style guide:
[jira] [Updated] (NETBEANS-2617) Redraw common icons in SVG
[ https://issues.apache.org/jira/browse/NETBEANS-2617?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Eirik Bakke updated NETBEANS-2617: -- Description: 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 . 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. * 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 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.) * Avoid unnecessary anchor points (illustration from IntelliJ's style guide:
[jira] [Updated] (NETBEANS-2617) Redraw common icons in SVG
[ https://issues.apache.org/jira/browse/NETBEANS-2617?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Eirik Bakke updated NETBEANS-2617: -- Description: 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. * 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 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.) * Avoid unnecessary anchor points (illustration from IntelliJ's style guide: [correct|https://jetbrains.design/intellij/images/icons/stroke_anchors_corr...@2x.png] vs.
[jira] [Updated] (NETBEANS-2617) Redraw common icons in SVG
[ https://issues.apache.org/jira/browse/NETBEANS-2617?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Eirik Bakke updated NETBEANS-2617: -- Description: 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. * 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 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. was: Once NETBEANS-2604 is done,
[jira] [Updated] (NETBEANS-2617) Redraw common icons in SVG
[ 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
[jira] [Updated] (NETBEANS-2617) Redraw common icons in SVG
[ https://issues.apache.org/jira/browse/NETBEANS-2617?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Eirik Bakke updated NETBEANS-2617: -- Description: 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. was: 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
[jira] [Updated] (NETBEANS-2617) Redraw common icons in SVG
[ https://issues.apache.org/jira/browse/NETBEANS-2617?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Eirik Bakke updated NETBEANS-2617: -- Description: 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 remaining prioritized 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, the following prioritized list of icons to convert was produced: https://people.csail.mit.edu/ebakke/misc/netbeans-icons/prioritized.html (this list 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, only one of the paths is shown in the list above. 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. was: 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 remaining prioritized icons: With some
[jira] [Updated] (NETBEANS-2617) Redraw common icons in SVG
[ https://issues.apache.org/jira/browse/NETBEANS-2617?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Eirik Bakke updated NETBEANS-2617: -- Description: 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 remaining prioritized 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, the following prioritized list of icons to convert was produced: https://people.csail.mit.edu/ebakke/misc/netbeans-icons/prioritized.html 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, only one of the paths is shown in the list above. 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. (These will come out to 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. was: 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 remaining prioritized icons: With some practice, it takes on average 30 minutes to create an
[jira] [Updated] (NETBEANS-2617) Redraw common icons in SVG
[ https://issues.apache.org/jira/browse/NETBEANS-2617?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Eirik Bakke updated NETBEANS-2617: -- Description: 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 remaining prioritized 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, the following prioritized list of icons to convert was produced: https://people.csail.mit.edu/ebakke/misc/netbeans-icons/prioritized.html 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, only one of the paths is shown in the list above. 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. was: 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 remaining prioritized icons: With some practice, it takes on average 30 minutes to create an SVG
[jira] [Updated] (NETBEANS-2617) Redraw common icons in SVG
[ https://issues.apache.org/jira/browse/NETBEANS-2617?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Eirik Bakke updated NETBEANS-2617: -- Description: 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 remaining prioritized 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, the following prioritized list of icons to convert was produced: https://people.csail.mit.edu/ebakke/misc/netbeans-icons/prioritized.html 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, only one of the paths is shown in the list above. 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. * 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. was: Once NETBEANS-2604 is done, we should start replacing commonly seen NetBeans icons with SVG versions, for improved appearance on Retina/HiDPI displays. 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, the following prioritized list of icons to convert was produced:
[jira] [Updated] (NETBEANS-2617) Redraw common icons in SVG
[ https://issues.apache.org/jira/browse/NETBEANS-2617?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Eirik Bakke updated NETBEANS-2617: -- Description: Once NETBEANS-2604 is done, we should start replacing commonly seen NetBeans icons with SVG versions, for improved appearance on Retina/HiDPI displays. 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, the following prioritized list of icons to convert was produced: https://people.csail.mit.edu/ebakke/misc/netbeans-icons/prioritized.html 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, only one of the paths is shown in the list above. 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. * 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. 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 remaining prioritized icons: was: Once NETBEANS-2604 is done, we should start replacing commonly seen NetBeans icons with SVG versions, for improved appearance on Retina/HiDPI displays. 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, the following prioritized list of icons to convert was produced:
[jira] [Updated] (NETBEANS-2617) Redraw common icons in SVG
[ https://issues.apache.org/jira/browse/NETBEANS-2617?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Eirik Bakke updated NETBEANS-2617: -- Description: Once NETBEANS-2604 is done, we should start replacing commonly seen NetBeans icons with SVG versions, for improved appearance on Retina/HiDPI displays. 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, the following prioritized list of icons to convert was produced: https://people.csail.mit.edu/ebakke/misc/netbeans-icons/prioritized.html 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, only one of the paths is shown in the list above. 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...) * 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. * 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. 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 remaining prioritized icons: was: Once NETBEANS-2604 is done, we should start replacing commonly seen NetBeans icons with SVG versions, for improved appearance on Retina/HiDPI displays. 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, the following prioritized list of icons to convert was produced: https://people.csail.mit.edu/ebakke/misc/netbeans-icons/prioritized.html 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, only one of the paths is shown in the
[jira] [Updated] (NETBEANS-2617) Redraw common icons in SVG
[ https://issues.apache.org/jira/browse/NETBEANS-2617?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Eirik Bakke updated NETBEANS-2617: -- Attachment: style example (dark filter).png > 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. > 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, the following prioritized list of icons to convert was > produced: > https://people.csail.mit.edu/ebakke/misc/netbeans-icons/prioritized.html > 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, only one of the paths is shown in > the list above. > 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...) > * 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. > * 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
[jira] [Updated] (NETBEANS-2617) Redraw common icons in SVG
[ https://issues.apache.org/jira/browse/NETBEANS-2617?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Eirik Bakke updated NETBEANS-2617: -- Attachment: ScreenshotExample.png > 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.png > > > Once NETBEANS-2604 is done, we should start replacing commonly seen NetBeans > icons with SVG versions, for improved appearance on Retina/HiDPI displays. > 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, the following prioritized list of icons to convert was > produced: > https://people.csail.mit.edu/ebakke/misc/netbeans-icons/prioritized.html > 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, only one of the paths is shown in > the list above. > 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...) > * 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. > * 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:
[jira] [Updated] (NETBEANS-2617) Redraw common icons in SVG
[ https://issues.apache.org/jira/browse/NETBEANS-2617?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Pete Whelpton updated NETBEANS-2617: Attachment: ide.seperator.breadcrumbs.ai > 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: ide.editor.bookmarks.ai, ide.editor.macros.ai, > ide.seperator.breadcrumbs.ai, netbeans_icons_illustrator_template.ai, 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. > 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, the following prioritized list of icons to convert was > produced: > https://people.csail.mit.edu/ebakke/misc/netbeans-icons/prioritized.html > 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, only one of the paths is shown in > the list above. > 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...) > * 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. > * 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 (v7.6.3#76005) - 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:
[jira] [Updated] (NETBEANS-2617) Redraw common icons in SVG
[ https://issues.apache.org/jira/browse/NETBEANS-2617?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Pete Whelpton updated NETBEANS-2617: Attachment: ide.editor.macros.ai > 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: ide.editor.bookmarks.ai, ide.editor.macros.ai, > ide.seperator.breadcrumbs.ai, netbeans_icons_illustrator_template.ai, 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. > 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, the following prioritized list of icons to convert was > produced: > https://people.csail.mit.edu/ebakke/misc/netbeans-icons/prioritized.html > 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, only one of the paths is shown in > the list above. > 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...) > * 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. > * 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 (v7.6.3#76005) - 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:
[jira] [Updated] (NETBEANS-2617) Redraw common icons in SVG
[ https://issues.apache.org/jira/browse/NETBEANS-2617?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Eirik Bakke updated NETBEANS-2617: -- Description: Once NETBEANS-2604 is done, we should start replacing commonly seen NetBeans icons with SVG versions, for improved appearance on Retina/HiDPI displays. 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, the following prioritized list of icons to convert was produced: https://people.csail.mit.edu/ebakke/misc/netbeans-icons/prioritized.html 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, only one of the paths is shown in the list above. 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...) * 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. * 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.) was: Once NETBEANS-2604 is done, we should start replacing commonly seen NetBeans icons with SVG versions, for improved appearance on Retina/HiDPI displays. 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, the following prioritized list of icons to convert was produced: https://people.csail.mit.edu/ebakke/misc/netbeans-icons/prioritized.html 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, only one of the paths is shown in the list above. 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
[jira] [Updated] (NETBEANS-2617) Redraw common icons in SVG
[ https://issues.apache.org/jira/browse/NETBEANS-2617?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Eirik Bakke updated NETBEANS-2617: -- Description: Once NETBEANS-2604 is done, we should start replacing commonly seen NetBeans icons with SVG versions, for improved appearance on Retina/HiDPI displays. 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, the following prioritized list of icons to convert was produced: https://people.csail.mit.edu/ebakke/misc/netbeans-icons/prioritized.html 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, only one of the paths is shown in the list above. 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...) * 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 and unnecessary drop shadows. They take more time to draw, and 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. * 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.) was: Once NETBEANS-2604 is done, we should start replacing commonly seen NetBeans icons with SVG versions, for improved appearance on Retina/HiDPI displays. 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, the following prioritized list of icons to convert was produced: https://people.csail.mit.edu/ebakke/misc/netbeans-icons/prioritized.html 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, only one of the paths is shown in the list above. 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
[jira] [Updated] (NETBEANS-2617) Redraw common icons in SVG
[ https://issues.apache.org/jira/browse/NETBEANS-2617?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Eirik Bakke updated NETBEANS-2617: -- Description: Once NETBEANS-2604 is done, we should start replacing commonly seen NetBeans icons with SVG versions, for improved appearance on Retina/HiDPI displays. 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, the following prioritized list of icons to convert was produced: https://people.csail.mit.edu/ebakke/misc/netbeans-icons/prioritized.html 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, only one of the paths is shown in the list above. 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...) * 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 and unnecessary drop shadows. They take more time to draw, and 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. * 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. * It's OK to "outline" strokes for the purposes of applying boolean operations (e.g. subtracting another shape) and such. * 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.) was: Once NETBEANS-2604 is done, we should start replacing commonly seen NetBeans icons with SVG versions, for improved appearance on Retina/HiDPI displays. 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, the following prioritized list of icons to convert was produced: https://people.csail.mit.edu/ebakke/misc/netbeans-icons/prioritized.html 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. 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...) * 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
[jira] [Updated] (NETBEANS-2617) Redraw common icons in SVG
[ https://issues.apache.org/jira/browse/NETBEANS-2617?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Eirik Bakke updated NETBEANS-2617: -- Description: Once NETBEANS-2604 is done, we should start replacing commonly seen NetBeans icons with SVG versions, for improved appearance on Retina/HiDPI displays. 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, the following prioritized list of icons to convert was produced: https://people.csail.mit.edu/ebakke/misc/netbeans-icons/prioritized.html 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. 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...) * 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 and unnecessary drop shadows. They take more time to draw, and 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. * 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. * It's OK to "outline" strokes for the purposes of applying boolean operations (e.g. subtracting another shape) and such. * 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.) was: Once NETBEANS-2604 is done, we should start replacing commonly seen NetBeans icons with SVG versions, for improved appearance on Retina/HiDPI displays. 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, the following prioritized list of icons to convert was produced: https://people.csail.mit.edu/ebakke/misc/netbeans-icons/prioritized.html 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. 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...) * 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
[jira] [Updated] (NETBEANS-2617) Redraw common icons in SVG
[ https://issues.apache.org/jira/browse/NETBEANS-2617?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Eirik Bakke updated NETBEANS-2617: -- Description: Once NETBEANS-2604 is done, we should start replacing commonly seen NetBeans icons with SVG versions, for improved appearance on Retina/HiDPI displays. 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, the following prioritized list of icons to convert was produced: https://people.csail.mit.edu/ebakke/misc/netbeans-icons/prioritized.html 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. 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...) * 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 and unnecessary drop shadows. They take more time to draw, and 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. * The 1px strokes that outline the icon's shapes should typically be 33% transparent black, 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. * It's OK to "outline" strokes for the purposes of applying boolean operations (e.g. subtracting another shape) and such. * 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.) was: Once NETBEANS-2604 is done, we should start replacing commonly seen NetBeans icons with SVG versions, for improved appearance on Retina/HiDPI displays. 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, the following prioritized list of icons to convert was produced: https://people.csail.mit.edu/ebakke/misc/netbeans-icons/prioritized.html 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. 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...) * 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
[jira] [Updated] (NETBEANS-2617) Redraw common icons in SVG
[ https://issues.apache.org/jira/browse/NETBEANS-2617?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Eirik Bakke updated NETBEANS-2617: -- Attachment: (was: effort_required.png) > 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: netbeans_icons_illustrator_template.ai, 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. > 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, the following prioritized list of icons to convert was > produced: > https://people.csail.mit.edu/ebakke/misc/netbeans-icons/prioritized.html > 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. > 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...) > * 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 and unnecessary drop shadows. They take more time to draw, > and 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. > * The 1px strokes that outline the icon's shapes should typically be 33% > transparent black, or of similar darkness. See the examples in the attached > "effort_required.png" file. > * Horizontal and vertical strokes must be aligned to the pixel grid. > * It's OK to "outline" strokes for the purposes of applying boolean > operations (e.g. subtracting another shape) and such. > * 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.) -- This message was sent by Atlassian JIRA (v7.6.3#76005) - 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
[jira] [Updated] (NETBEANS-2617) Redraw common icons in SVG
[ https://issues.apache.org/jira/browse/NETBEANS-2617?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Eirik Bakke updated NETBEANS-2617: -- Attachment: style example.png > 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: netbeans_icons_illustrator_template.ai, 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. > 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, the following prioritized list of icons to convert was > produced: > https://people.csail.mit.edu/ebakke/misc/netbeans-icons/prioritized.html > 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. > 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...) > * 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 and unnecessary drop shadows. They take more time to draw, > and 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. > * The 1px strokes that outline the icon's shapes should typically be 33% > transparent black, or of similar darkness. See the examples in the attached > "effort_required.png" file. > * Horizontal and vertical strokes must be aligned to the pixel grid. > * It's OK to "outline" strokes for the purposes of applying boolean > operations (e.g. subtracting another shape) and such. > * 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.) -- This message was sent by Atlassian JIRA (v7.6.3#76005) - 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
[jira] [Updated] (NETBEANS-2617) Redraw common icons in SVG
[ https://issues.apache.org/jira/browse/NETBEANS-2617?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Eirik Bakke updated NETBEANS-2617: -- Description: Once NETBEANS-2604 is done, we should start replacing commonly seen NetBeans icons with SVG versions, for improved appearance on Retina/HiDPI displays. 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, the following prioritized list of icons to convert was produced: https://people.csail.mit.edu/ebakke/misc/netbeans-icons/prioritized.html 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. 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...) * 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 and unnecessary drop shadows. They take more time to draw, and 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. * The 1px strokes that outline the icon's shapes should typically be 33% transparent black, or of similar darkness. See the examples in the attached "effort_required.png" file. * Horizontal and vertical strokes must be aligned to the pixel grid. * It's OK to "outline" strokes for the purposes of applying boolean operations (e.g. subtracting another shape) and such. * 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.) was: Once NETBEANS-2604 is done, we should start replacing commonly seen NetBeans icons with SVG versions, for improved appearance on Retina/HiDPI displays. 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. The Illustrator template includes a few icons which have already been converted. In NETBEANS-2605, the following prioritized list of icons to convert was produced: https://people.csail.mit.edu/ebakke/misc/netbeans-icons/prioritized.html 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. 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 [this Illustrator template|https://people.csail.mit.edu/ebakke/misc/netbeans-icons/netbeans_icons_illustrator_template.ai]. (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...) * 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
[jira] [Updated] (NETBEANS-2617) Redraw common icons in SVG
[ https://issues.apache.org/jira/browse/NETBEANS-2617?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Eirik Bakke updated NETBEANS-2617: -- Attachment: netbeans_icons_illustrator_template.ai > 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: effort_required.png, > netbeans_icons_illustrator_template.ai > > > Once NETBEANS-2604 is done, we should start replacing commonly seen NetBeans > icons with SVG versions, for improved appearance on Retina/HiDPI displays. > 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. The > Illustrator template includes a few icons which have already been converted. > In NETBEANS-2605, the following prioritized list of icons to convert was > produced: > https://people.csail.mit.edu/ebakke/misc/netbeans-icons/prioritized.html > 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. > 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 [this Illustrator > template|https://people.csail.mit.edu/ebakke/misc/netbeans-icons/netbeans_icons_illustrator_template.ai]. > (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...) > * 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 and unnecessary drop shadows. They take more time to draw, > and 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. > * The 1px strokes that outline the icon's shapes should typically be 33% > transparent black, or of similar darkness. See the examples in the attached > "effort_required.png" file. > * Horizontal and vertical strokes must be aligned to the pixel grid. > * It's OK to "outline" strokes for the purposes of applying boolean > operations (e.g. subtracting another shape) and such. > * 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.) -- This message was sent by Atlassian JIRA (v7.6.3#76005) - 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
[jira] [Updated] (NETBEANS-2617) Redraw common icons in SVG
[ https://issues.apache.org/jira/browse/NETBEANS-2617?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Eirik Bakke updated NETBEANS-2617: -- Description: Once NETBEANS-2604 is done, we should start replacing commonly seen NetBeans icons with SVG versions, for improved appearance on Retina/HiDPI displays. 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. The Illustrator template includes a few icons which have already been converted. In NETBEANS-2605, the following prioritized list of icons to convert was produced: https://people.csail.mit.edu/ebakke/misc/netbeans-icons/prioritized.html 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. 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 [this Illustrator template|https://people.csail.mit.edu/ebakke/misc/netbeans-icons/netbeans_icons_illustrator_template.ai]. (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...) * 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 and unnecessary drop shadows. They take more time to draw, and 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. * The 1px strokes that outline the icon's shapes should typically be 33% transparent black, or of similar darkness. See the examples in the attached "effort_required.png" file. * Horizontal and vertical strokes must be aligned to the pixel grid. * It's OK to "outline" strokes for the purposes of applying boolean operations (e.g. subtracting another shape) and such. * 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.) was: Once NETBEANS-2604 is done, we should start replacing commonly seen NetBeans icons with SVG versions, for improved appearance on Retina/HiDPI displays. 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 [this Illustrator template|https://people.csail.mit.edu/ebakke/misc/netbeans-icons/netbeans_icons_illustrator_template.ai]. The Illustrator template includes a few icons which have already been converted. In NETBEANS-2605, the following prioritized list of icons to convert was produced: https://people.csail.mit.edu/ebakke/misc/netbeans-icons/prioritized.html 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. 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 Icons > 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: effort_required.png > > > Once NETBEANS-2604 is done, we should start replacing commonly seen
[jira] [Updated] (NETBEANS-2617) Redraw common icons in SVG
[ https://issues.apache.org/jira/browse/NETBEANS-2617?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Eirik Bakke updated NETBEANS-2617: -- Description: Once NETBEANS-2604 is done, we should start replacing commonly seen NetBeans icons with SVG versions, for improved appearance on Retina/HiDPI displays. 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 [this Illustrator template|https://people.csail.mit.edu/ebakke/misc/netbeans-icons/netbeans_icons_illustrator_template.ai]. The Illustrator template includes a few icons which have already been converted. In NETBEANS-2605, the following prioritized list of icons to convert was produced: https://people.csail.mit.edu/ebakke/misc/netbeans-icons/prioritized.html 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. 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 Icons was: Once NETBEANS-2604 is done, we should start replacing commonly seen NetBeans icons with SVG versions, for improved appearance on Retina/HiDPI displays. 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 [this Illustrator template|https://people.csail.mit.edu/ebakke/misc/netbeans-icons/netbeans_icons_illustrator_template.ai]. The Illustrator template includes a few icons which have already been converted. In NETBEANS-2605, the following prioritized list of icons to convert was produced: https://people.csail.mit.edu/ebakke/misc/netbeans-icons/prioritized.html 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. See also the overview page for HiDPI improvements on https://cwiki.apache.org/confluence/display/NETBEANS/HiDPI+%28Retina%29+improvements . > 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: effort_required.png > > > Once NETBEANS-2604 is done, we should start replacing commonly seen NetBeans > icons with SVG versions, for improved appearance on Retina/HiDPI displays. > 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 > [this Illustrator > template|https://people.csail.mit.edu/ebakke/misc/netbeans-icons/netbeans_icons_illustrator_template.ai]. > The Illustrator template includes a few icons which have already been > converted. > In NETBEANS-2605, the following prioritized list of icons to convert was > produced: > https://people.csail.mit.edu/ebakke/misc/netbeans-icons/prioritized.html > 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. > 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 Icons -- This message was sent by Atlassian JIRA (v7.6.3#76005) - 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
[jira] [Updated] (NETBEANS-2617) Redraw common icons in SVG
[ https://issues.apache.org/jira/browse/NETBEANS-2617?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Eirik Bakke updated NETBEANS-2617: -- Description: Once NETBEANS-2604 is done, we should start replacing commonly seen NetBeans icons with SVG versions, for improved appearance on Retina/HiDPI displays. 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 [this Illustrator template|https://people.csail.mit.edu/ebakke/misc/netbeans-icons/netbeans_icons_illustrator_template.ai]. The Illustrator template includes a few icons which have already been converted. In NETBEANS-2605, the following prioritized list of icons to convert was produced: https://people.csail.mit.edu/ebakke/misc/netbeans-icons/prioritized.html 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. See also the overview page for HiDPI improvements on https://cwiki.apache.org/confluence/display/NETBEANS/HiDPI+%28Retina%29+improvements . was: Once NETBEANS-2604 is done, we should start replacing commonly seen NetBeans icons with SVG versions, for improved appearance on Retina/HiDPI displays. 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 [this Illustrator template|https://people.csail.mit.edu/ebakke/misc/netbeans-icons/netbeans_icons_illustrator_template.ai]. The Illustrator template includes a few icons which have already been converted. In NETBEANS-2605, the following prioritized list of icons to convert was produced: https://people.csail.mit.edu/ebakke/misc/netbeans-icons/prioritized.html See also the overview page for HiDPI improvements on https://cwiki.apache.org/confluence/display/NETBEANS/HiDPI+%28Retina%29+improvements . > 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: effort_required.png > > > Once NETBEANS-2604 is done, we should start replacing commonly seen NetBeans > icons with SVG versions, for improved appearance on Retina/HiDPI displays. > 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 > [this Illustrator > template|https://people.csail.mit.edu/ebakke/misc/netbeans-icons/netbeans_icons_illustrator_template.ai]. > The Illustrator template includes a few icons which have already been > converted. > In NETBEANS-2605, the following prioritized list of icons to convert was > produced: > https://people.csail.mit.edu/ebakke/misc/netbeans-icons/prioritized.html > 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. > See also the overview page for HiDPI improvements on > https://cwiki.apache.org/confluence/display/NETBEANS/HiDPI+%28Retina%29+improvements > . -- This message was sent by Atlassian JIRA (v7.6.3#76005) - 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
[jira] [Updated] (NETBEANS-2617) Redraw common icons in SVG
[ https://issues.apache.org/jira/browse/NETBEANS-2617?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Eirik Bakke updated NETBEANS-2617: -- Description: Once NETBEANS-2604 is done, we should start replacing commonly seen NetBeans icons with SVG versions, for improved appearance on Retina/HiDPI displays. 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 [this Illustrator template|https://people.csail.mit.edu/ebakke/misc/netbeans-icons/netbeans_icons_illustrator_template.ai]. The Illustrator template includes a few icons which have already been converted. In NETBEANS-2605, the following prioritized list of icons to convert was produced: https://people.csail.mit.edu/ebakke/misc/netbeans-icons/prioritized.html See also the overview page for HiDPI improvements on https://cwiki.apache.org/confluence/display/NETBEANS/HiDPI+%28Retina%29+improvements . was: Once NETBEANS-2604 is done, we should start replacing commonly seen NetBeans icons with SVG versions, for improved appearance on Retina/HiDPI displays. 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 [this Illustrator template|https://people.csail.mit.edu/ebakke/misc/netbeans-icons/netbeans_icons_illustrator_template.ai]). In NETBEANS-2605, the following prioritized list of icons to convert was produced: https://people.csail.mit.edu/ebakke/misc/netbeans-icons/prioritized.html See also the overview page for HiDPI improvements on https://cwiki.apache.org/confluence/display/NETBEANS/HiDPI+%28Retina%29+improvements . > 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: effort_required.png > > > Once NETBEANS-2604 is done, we should start replacing commonly seen NetBeans > icons with SVG versions, for improved appearance on Retina/HiDPI displays. > 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 > [this Illustrator > template|https://people.csail.mit.edu/ebakke/misc/netbeans-icons/netbeans_icons_illustrator_template.ai]. > The Illustrator template includes a few icons which have already been > converted. > In NETBEANS-2605, the following prioritized list of icons to convert was > produced: > https://people.csail.mit.edu/ebakke/misc/netbeans-icons/prioritized.html > See also the overview page for HiDPI improvements on > https://cwiki.apache.org/confluence/display/NETBEANS/HiDPI+%28Retina%29+improvements > . -- This message was sent by Atlassian JIRA (v7.6.3#76005) - 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
