User:Agryson: Difference between revisions

From FreeCAD Documentation
No edit summary
No edit summary
Line 1: Line 1:
=Public Notes=
=Public Notes=
==Artwork Guidelines==
=Artwork Guidelines=
===Icon Anatomy===
==Icon Anatomy==
====Colors====
===Colors===
[https://drive.google.com/open?id=0B_xxY57wUEV-RWNaMHV2OGpoY00 FreeCAD uses a palette adapted from the Tango palette]. Each main color comes in 4 tones: Highlight, Base, Dark and Outline.
[https://drive.google.com/open?id=0B_xxY57wUEV-RWNaMHV2OGpoY00 FreeCAD uses a palette adapted from the Tango palette]. Each main color comes in 4 tones: Highlight, Base, Dark and Outline.
[[File:Green_tones.PNG|center|Example of a 4 tone color family (Chameleon)]]
[[File:Green_tones.PNG|center|Example of a 4 tone color family (Chameleon)]]


====Grid & Stroke Width====
===Grid & Stroke Width===
FreeCAD Icons are 64px*64px nominal size (Though I like to leave a 2px margin all around to prevent funky antialiasing things from happening on the image edge). When creating or editing an icon, make sure your document size is 64 x 64 with the units being px.
FreeCAD Icons are 64px*64px nominal size (Though I like to leave a 2px margin all around to prevent funky antialiasing things from happening on the image edge). When creating or editing an icon, make sure your document size is 64 x 64 with the units being px.


Line 14: Line 14:
[[File:Artwork_Grid.png|center|Orderly grid, all strokes 2px, perfection achieved]]
[[File:Artwork_Grid.png|center|Orderly grid, all strokes 2px, perfection achieved]]


====Outline====
===Outline===
Basing yourself on the main color of the icon, ensure that there is a dark outline (of 2px as mentioned earlier). This works in union with the highlight to ensure good form contrast on multiple background tones.
Basing yourself on the main color of the icon, ensure that there is a dark outline (of 2px as mentioned earlier). This works in union with the highlight to ensure good form contrast on multiple background tones.
[[File:Draft_Point.png|center|Wow, much clear, so contrast]]
[[File:Draft_Point.png|center|Wow, much clear, so contrast]]


====Highlight====
===Highlight===
Using the Highlight color, add an internal stroke (again, 2px) to help make that outline pop. On dark backgrounds, it's this highlight that will be providing the form to the icon.
Using the Highlight color, add an internal stroke (again, 2px) to help make that outline pop. On dark backgrounds, it's this highlight that will be providing the form to the icon.
[[File:Draft_Move.png|center|That highlight will save our socks on a dark background.]]
[[File:Draft_Move.png|center|That highlight will save our socks on a dark background.]]

====Lighting====
===Lighting===
As per Tango guidelines, if you're adding a gradient lighting effect, try to make it look like the light is coming from the top left. This is done by adding the highlight color up top left and the Base or Darker color bottom left (notice that I haven't played around trying to use a color off-palette)
As per Tango guidelines, if you're adding a gradient lighting effect, try to make it look like the light is coming from the top left. This is done by adding the highlight color up top left and the Base or Darker color bottom left (notice that I haven't played around trying to use a color off-palette)
[[File:Draft_Clone.png|center|Subtle but effective.]]
[[File:Draft_Clone.png|center|Subtle but effective.]]

Revision as of 10:54, 18 January 2017

Public Notes

Artwork Guidelines

Icon Anatomy

Colors

FreeCAD uses a palette adapted from the Tango palette. Each main color comes in 4 tones: Highlight, Base, Dark and Outline.

Example of a 4 tone color family (Chameleon)
Example of a 4 tone color family (Chameleon)

Grid & Stroke Width

FreeCAD Icons are 64px*64px nominal size (Though I like to leave a 2px margin all around to prevent funky antialiasing things from happening on the image edge). When creating or editing an icon, make sure your document size is 64 x 64 with the units being px.

It's also strongly recommended to apply at least one grid to the document that has a grid line every pixel and a major grid line every 2 pixels. Feel free to add other grids to help out, but you should have at least that one. You're strokes would then be aligned along the minor grid intersections. (See image)

Strokes should be no thinner than 2px, with rounded caps and corners in most cases. Strokes can be thicker, but aim for a multiple of two to minimise scaling fuzziness.

Orderly grid, all strokes 2px, perfection achieved
Orderly grid, all strokes 2px, perfection achieved

Outline

Basing yourself on the main color of the icon, ensure that there is a dark outline (of 2px as mentioned earlier). This works in union with the highlight to ensure good form contrast on multiple background tones.

Wow, much clear, so contrast
Wow, much clear, so contrast

Highlight

Using the Highlight color, add an internal stroke (again, 2px) to help make that outline pop. On dark backgrounds, it's this highlight that will be providing the form to the icon.

That highlight will save our socks on a dark background.
That highlight will save our socks on a dark background.

Lighting

As per Tango guidelines, if you're adding a gradient lighting effect, try to make it look like the light is coming from the top left. This is done by adding the highlight color up top left and the Base or Darker color bottom left (notice that I haven't played around trying to use a color off-palette)

Subtle but effective.
Subtle but effective.

That's it - that's all I do to make sure that there's a unified look to all the icons. Remember: SALCHO Stroke, Alignment, Lighting, Color, Highlight, Outline