[ 
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 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.)



> 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. 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.)



--
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

Reply via email to