Identity: Difference between revisions
(added a welcome banner and two splashes, after several claims on the ML) |
⚠️Wenzeslaus (talk | contribs) (→Colors: make it easier to copy colors (less clutter) and recognize models/notations) |
||
(21 intermediate revisions by 5 users not shown) | |||
Line 1: | Line 1: | ||
= The need of a visual identity= | = The need of a visual identity and its consistency = | ||
The purpose of this page and related efforts is to provide GRASS GIS with a relevant, well tempered graphical identity. Several proposals were and are being discussed like the design a new splash screen and startup (welcome) banner. The for example the full thread for 7.0 release [http://lists.osgeo.org/pipermail/grass-dev/2015-January/073157.html here]. | |||
This page is intended as a place where tests, suggestions as well as final version are archived and gathered. | |||
[http://grasswiki.osgeo.org/wiki/GRASS_Logo GRASS official logo] is a great starting point, as it has been here for ...ever? | Everybody is encouraged to create new designs either for the main GRASS GIS graphics such as splash screen and for graphics for special purposes such as T-shirts and code sprints. When creating new designs, please keep in mind that there was already some or perhaps even a lot work which went into the current official graphics specifically the GRASS GIS text in the logo, the splash screen and the startup window. See for example [https://lists.osgeo.org/pipermail/grass-dev/2016-January/078528.html revision of splash screen for 7.2] which replaced the "lowercase" version with a "uppercase" version which is consistent with the splash screen and logotype. | ||
You have a great freedom in what to use for for stickers, t-shirts, and personal blogs, but for the additions to or updates of the official graphics it worth investing some time into understanding what went into design of the current ones. | |||
= Logotype = | |||
==Graphics== | |||
''January 2015: '' | |||
[http://grasswiki.osgeo.org/wiki/GRASS_Logo GRASS official logo] (also [https://grass.osgeo.org/download/logos/ here]) is a great starting point, as it has been here for ...ever? | |||
Given the original vector file is somewhat irregular (twisted diamond, doubled vertices in grass, overlapping shapes) a ''cleaned'' light version is proposed. | Given the original vector file is somewhat irregular (twisted diamond, doubled vertices in grass, overlapping shapes) a ''cleaned'' light version is proposed. | ||
: Background info: the logo was re-vectorized by Markus Neteler in 1998 from a rasterized master file (for his master thesis) | |||
[[File:GRASSGIS_logo_color.png|150px|thumbnail|center|GRASS GIS cleanup logo, color version]] | [[File:GRASSGIS_logo_color.png|150px|thumbnail|center|GRASS GIS cleanup logo, color version]] | ||
Line 22: | Line 31: | ||
[[File:GRASSGIS_logo_white.png|150px|thumbnail|center|GRASS GIS cleanup logo, white (sort of negative) version]] | [[File:GRASSGIS_logo_white.png|150px|thumbnail|center|GRASS GIS cleanup logo, white (sort of negative) version]] | ||
==Tagline== | |||
The ''historical'' one was : «The world's leading open source GIS». Several slogans were recently proposed: | The ''historical'' one was : «The world's leading open source GIS». Several slogans were recently proposed: | ||
Line 30: | Line 39: | ||
- ... | - ... | ||
= Colors = | |||
==A grass <span style="color:#009000">green...</span>== | |||
The basic green color is defined as follows: | The basic green color is defined as follows: | ||
- RGB: 0,144,0 | |||
- CMYK: 100,0,100,44 | |||
- HTML: #009000 | |||
alpha channel is set to 1 (no transparency) | |||
==...and a <span style="color:#909090">grayscale</span> tone== | |||
When required, a grayscale transposition is applied to green: | When required, a grayscale transposition is applied to green: | ||
*either it is an opaque grey: | *either it is an opaque grey: | ||
- RGB: 144,144,144 | |||
- CMYK: 0,0,0,44 | |||
- HTML: #909090 | |||
*or it is multiplied over background, with alpha transparency: | *or it is multiplied over background, with alpha transparency: | ||
- RGBA: 0,0,0,111 | |||
- CMYK: 0,0,0,100,44 | |||
- HTML: #0000006f | |||
The white version may as well be declined in opaque or transparent, then green is replaced with translucent white: | The white version may as well be declined in opaque or transparent, then green is replaced with translucent white: | ||
- RGBA: 255,255,255,111 | |||
- CMYK: 0,0,0,0,44 | |||
- HTML: #ffffff6f | |||
= Typo = | |||
The logo can come with text. It uses two fonts. To comply with GRASS GIS license these must be ''open source'' fonts. | |||
==Main font== | |||
GRASS GIS name, capitalized or not. Composed either in [https://en.wikipedia.org/wiki/Fira_Sans Fira Sans], or in [http://www.fontsquirrel.com/fonts/alegreya-sans Alegreya Sans]. It makes sense to confront a modern sans serif typeface, preferably rather light, to a very classical Garamond. Changing GRASS GIS to lowercase is discussed, my opinion is GRASS initials usage turned them into an acronym (we pronounce it), which does not need to be full-capitalized, except the first letter. | |||
==Secondary font== | |||
This typeface is used to display additional text, such as a ''motto'' or tagline. It is composed in [http://www.georgduffner.at/ebgaramond/index.html EB Garamond], a font designed by Georg Duffner, inspired by the famous historical typeface drawn hundreds of years ago by Claude Garamond. It is freely available, under the terms of the SIL Open Fonts License (ofl). | This typeface is used to display additional text, such as a ''motto'' or tagline. It is composed in [http://www.georgduffner.at/ebgaramond/index.html EB Garamond], a font designed by Georg Duffner, inspired by the famous historical typeface drawn hundreds of years ago by Claude Garamond. It is freely available, under the terms of the SIL Open Fonts License (ofl). | ||
= Applications = | = Applications = | ||
== GRASS GIS Splash screen== | == GRASS GIS Splash screen== | ||
=== Proposals === | === Selections for 7.x === | ||
* 7.2-7.x: https://svn.osgeo.org/grass/grass/branches/releasebranch_7_2/gui/images/splash_screen.png (fits with the logotype GRASS GIS and the (combined) logo selected for 7.0) | |||
* 7.0: https://svn.osgeo.org/grass/grass/branches/releasebranch_7_0/gui/images/splash_screen.png | |||
=== Proposals for 7.0 === | |||
Objective: Please refer to [http://lists.osgeo.org/pipermail/grass-dev/2015-January/073157.html this thread] | |||
After several tests, we put things together in an array: | |||
- col 1: capitalized title, fontface Alegreya Sans, text and tagline beside logotype; | |||
- col 2: partially lowercased, fontface Fira Sans, stacked centered layout; | |||
- col 3: lowercase title, fontface Fira Sans, flushright/flushleft positioning. | |||
- row A: white background, potential thin black border; | |||
- row B: metaphoric background image (to be refined, potential restricted rights), white graphics+lettering; | |||
- row C: 3d composition showing a virtual grassy world map, white graphics+lettering; | |||
- row D: same sort of scene but in top view, on white or transparent background; | |||
- row E: grayscale grassy world, black and green graphics+lettering; | |||
- row F: personal image, less iconic than decorative in truth... | |||
[[File:GRASSGIS_splash_synthesis.jpg|450px|thumbnail|center|GRASS GIS splash proposals]] | |||
== GRASS GIS Startup banner== | |||
The startup (welcome) banner is the image displayed on top of the Welcome frame that pops up when launching GRASS. This image, if present, should be coherent with the graphic design, especially with the splash screen. | |||
=== Updated for 7.2 === | |||
* [https://svn.osgeo.org/grass/grass/branches/releasebranch_7_2/gui/images/startup_banner.png gui/images/startup_banner.png] | |||
* [https://svn.osgeo.org/grass/grass/branches/releasebranch_7_2/gui/images/startup_banner.svg gui/images/startup_banner.svg] | |||
* [https://svn.osgeo.org/grass/grass/branches/releasebranch_7_2/gui/images/startup_banner.txt explanations] | |||
=== Selected for 7.0 === | |||
On Feb 6, 2015 (commit {{rev|64480}} the banner was uploaded to the source code. Related files: | |||
* [https://svn.osgeo.org/grass/grass/branches/releasebranch_7_0/gui/images/startup_banner.png gui/images/startup_banner.png] | |||
* [https://svn.osgeo.org/grass/grass/branches/releasebranch_7_0/gui/images/startup_banner.svg gui/images/startup_banner.svg] | |||
* [https://svn.osgeo.org/grass/grass/branches/releasebranch_7_0/gui/images/startup_banner.txt explanations] | |||
=== Proposals for 7.0 === | |||
The following three banners go respectively with columns 1, 2, 3 of the array above. | |||
[[File:GRASSGIS_welcome_synthesis.jpg|450px|thumbnail|center|GRASS GIS welcome proposals]] | |||
Given latest requests, here are three extra png banners: | |||
[[File:Banner_1.png|200px|center|Alegreya Sans, capitalized]] | |||
[[File:Banner_1_alpha.png|200px|center|transparent]] | |||
[[File:Banner_2.png|200px|center|Fira Sans, capitalized]] | |||
[[File:Banner_2_alpha.png|200px|center|transparent]] | |||
[[File:Banner_3.png|200px|center|Fira Sans, lowercase]] | |||
[[File:Banner_3_alpha.png|200px|center|transparent]] | |||
== Documentation == | |||
=== Manual Pages (Main documentation) === | |||
The HTML documentation received some updates (border, menu), but it needs more, perhaps even structural changes to make the experience nice and smooth. | |||
=== GRASS GIS Graphical Index in the Manual === | |||
The Graphical Index page is intended to replace the standard text-only box-based manual. However, it lacks a proper consistent design. | |||
=== GRASS GIS User Wiki === | |||
A lot of work already done, but needs some final touches and release to production, see: | |||
* [User:NikosA#Scratching_ideas_for_the_GRASS-wiki Ideas for the wiki] | |||
* [User:NikosA#Better_typography Better typography for wiki] | |||
=== Programming and Scripting Documentation === | |||
The C/C++ Programming Manual uses green, not necessarily the official one because of how it is applied to the actual styling by Doxygen, see https://grass.osgeo.org/programming7/. | |||
The Python Sphinx style was modified to be simple like the user documentation, contains logo in the header, and it used the same colors for headings. | |||
== GUI == | |||
The "green fancy notebook" which creates the tabs (section) for generated module windows was replaced by a more standard one for 7.0, however it is still used in Layer Manage window. | |||
== Command line == | |||
The following is used in the command line. There seems to be no reasons to replace it or remove it. It should not be used elsewhere unless the intention is to make it "old school" or "geeky" such as on special items such as T-shirts. | |||
__________ ___ __________ _______________ | |||
/ ____/ __ \/ | / ___/ ___/ / ____/ _/ ___/ | |||
/ / __/ /_/ / /| | \__ \\_ \ / / __ / / \__ \ | |||
/ /_/ / _, _/ ___ |___/ /__/ / / /_/ // / ___/ / | |||
\____/_/ |_/_/ |_/____/____/ \____/___//____/ | |||
= GRASS GIS sticker and acknowledgement graphics = | |||
== Objective == | |||
GRASS GIS users may want or need to display a short information about the use of the software in their projects. It might be useful to propose a normalized sticker for that. | |||
== Proposals == | |||
Usually these tags are composed with freehand lettering, we propose this sticker: | |||
[[File:Powerby_freeh.png|100px|thumb|center|Proposal #1 for "powered by..." GRASS GIS sticker]] | |||
But one can prefer keeping close to the more sober identity and compose the slogan in garamond: | |||
[[File:Powerby_typo.png|100px|thumb|center|Proposal #2 for "powered by..." GRASS GIS sticker]] | |||
The following graphics could be used on map compositions: | |||
[[File:Mappedwith_freeh.png|200px|thumb|center|Proposal #1 for "mapped with..." GRASS GIS sticker]] [[File:Mappedwith_typo.png|200px|thumb|center|Proposal #2 for "mapped with..." GRASS GIS sticker]] | |||
Additional (derived) graphics are gathered in this array: | |||
[[File:Powerby_synth.png|200px|thumb|center|Proposals for GRASS GIS stickers]] | |||
[[File: | |||
= | = Community and Code Sprint Visuals = | ||
In context of GRASS GIS / OSGeo Code Sprints we are trying to stick to OSGeo guideline and we propose the following logo setup for a reference to code sprints (feel free to modify if you consider this event should not be considered a so called ''local chapter'' of the OSGeo chart). | |||
[[File:GRASS GIS Code Sprint 2018.png|thumb|center|]] | |||
Issue: Does not contain text "GRASS GIS". | |||
== | = See also = | ||
* [[GRASS Logo]] | |||
* [[GRASS Art Gallery]] | |||
* [[Promotional material]] | |||
[[Category: Development]] | [[Category: Development]] | ||
[[Category: Branding]] | [[Category: Branding]] | ||
[[Category: Promotion]] | [[Category: Promotion]] |
Latest revision as of 02:36, 18 September 2018
The need of a visual identity and its consistency
The purpose of this page and related efforts is to provide GRASS GIS with a relevant, well tempered graphical identity. Several proposals were and are being discussed like the design a new splash screen and startup (welcome) banner. The for example the full thread for 7.0 release here.
This page is intended as a place where tests, suggestions as well as final version are archived and gathered.
Everybody is encouraged to create new designs either for the main GRASS GIS graphics such as splash screen and for graphics for special purposes such as T-shirts and code sprints. When creating new designs, please keep in mind that there was already some or perhaps even a lot work which went into the current official graphics specifically the GRASS GIS text in the logo, the splash screen and the startup window. See for example revision of splash screen for 7.2 which replaced the "lowercase" version with a "uppercase" version which is consistent with the splash screen and logotype.
You have a great freedom in what to use for for stickers, t-shirts, and personal blogs, but for the additions to or updates of the official graphics it worth investing some time into understanding what went into design of the current ones.
Logotype
Graphics
January 2015:
GRASS official logo (also here) is a great starting point, as it has been here for ...ever? Given the original vector file is somewhat irregular (twisted diamond, doubled vertices in grass, overlapping shapes) a cleaned light version is proposed.
- Background info: the logo was re-vectorized by Markus Neteler in 1998 from a rasterized master file (for his master thesis)
For consistency, it is important to use this logo as is, i.e. not being tempted to distort it by any trick (shadows, bump mapping, blur, differential rescaling,...).
Itemisation should be limited to:
- black (and grayscale) version;
- white version, in case it should appear over a dark background/image.
Tagline
The historical one was : «The world's leading open source GIS». Several slogans were recently proposed:
- «Bringing advanced geospatial technologies to the world»; - «Advanced geospatial technology for everyone»; - «Opening advanced geospatial technologies to the world». - ...
Colors
A grass green...
The basic green color is defined as follows:
- RGB: 0,144,0 - CMYK: 100,0,100,44 - HTML: #009000
alpha channel is set to 1 (no transparency)
...and a grayscale tone
When required, a grayscale transposition is applied to green:
- either it is an opaque grey:
- RGB: 144,144,144 - CMYK: 0,0,0,44 - HTML: #909090
- or it is multiplied over background, with alpha transparency:
- RGBA: 0,0,0,111 - CMYK: 0,0,0,100,44 - HTML: #0000006f
The white version may as well be declined in opaque or transparent, then green is replaced with translucent white:
- RGBA: 255,255,255,111 - CMYK: 0,0,0,0,44 - HTML: #ffffff6f
Typo
The logo can come with text. It uses two fonts. To comply with GRASS GIS license these must be open source fonts.
Main font
GRASS GIS name, capitalized or not. Composed either in Fira Sans, or in Alegreya Sans. It makes sense to confront a modern sans serif typeface, preferably rather light, to a very classical Garamond. Changing GRASS GIS to lowercase is discussed, my opinion is GRASS initials usage turned them into an acronym (we pronounce it), which does not need to be full-capitalized, except the first letter.
Secondary font
This typeface is used to display additional text, such as a motto or tagline. It is composed in EB Garamond, a font designed by Georg Duffner, inspired by the famous historical typeface drawn hundreds of years ago by Claude Garamond. It is freely available, under the terms of the SIL Open Fonts License (ofl).
Applications
GRASS GIS Splash screen
Selections for 7.x
- 7.2-7.x: https://svn.osgeo.org/grass/grass/branches/releasebranch_7_2/gui/images/splash_screen.png (fits with the logotype GRASS GIS and the (combined) logo selected for 7.0)
- 7.0: https://svn.osgeo.org/grass/grass/branches/releasebranch_7_0/gui/images/splash_screen.png
Proposals for 7.0
Objective: Please refer to this thread
After several tests, we put things together in an array:
- col 1: capitalized title, fontface Alegreya Sans, text and tagline beside logotype; - col 2: partially lowercased, fontface Fira Sans, stacked centered layout; - col 3: lowercase title, fontface Fira Sans, flushright/flushleft positioning. - row A: white background, potential thin black border; - row B: metaphoric background image (to be refined, potential restricted rights), white graphics+lettering; - row C: 3d composition showing a virtual grassy world map, white graphics+lettering; - row D: same sort of scene but in top view, on white or transparent background; - row E: grayscale grassy world, black and green graphics+lettering; - row F: personal image, less iconic than decorative in truth...
GRASS GIS Startup banner
The startup (welcome) banner is the image displayed on top of the Welcome frame that pops up when launching GRASS. This image, if present, should be coherent with the graphic design, especially with the splash screen.
Updated for 7.2
Selected for 7.0
On Feb 6, 2015 (commit r64480 the banner was uploaded to the source code. Related files:
Proposals for 7.0
The following three banners go respectively with columns 1, 2, 3 of the array above.
Given latest requests, here are three extra png banners:
Documentation
Manual Pages (Main documentation)
The HTML documentation received some updates (border, menu), but it needs more, perhaps even structural changes to make the experience nice and smooth.
GRASS GIS Graphical Index in the Manual
The Graphical Index page is intended to replace the standard text-only box-based manual. However, it lacks a proper consistent design.
GRASS GIS User Wiki
A lot of work already done, but needs some final touches and release to production, see:
- [User:NikosA#Scratching_ideas_for_the_GRASS-wiki Ideas for the wiki]
- [User:NikosA#Better_typography Better typography for wiki]
Programming and Scripting Documentation
The C/C++ Programming Manual uses green, not necessarily the official one because of how it is applied to the actual styling by Doxygen, see https://grass.osgeo.org/programming7/.
The Python Sphinx style was modified to be simple like the user documentation, contains logo in the header, and it used the same colors for headings.
GUI
The "green fancy notebook" which creates the tabs (section) for generated module windows was replaced by a more standard one for 7.0, however it is still used in Layer Manage window.
Command line
The following is used in the command line. There seems to be no reasons to replace it or remove it. It should not be used elsewhere unless the intention is to make it "old school" or "geeky" such as on special items such as T-shirts.
__________ ___ __________ _______________ / ____/ __ \/ | / ___/ ___/ / ____/ _/ ___/ / / __/ /_/ / /| | \__ \\_ \ / / __ / / \__ \ / /_/ / _, _/ ___ |___/ /__/ / / /_/ // / ___/ / \____/_/ |_/_/ |_/____/____/ \____/___//____/
GRASS GIS sticker and acknowledgement graphics
Objective
GRASS GIS users may want or need to display a short information about the use of the software in their projects. It might be useful to propose a normalized sticker for that.
Proposals
Usually these tags are composed with freehand lettering, we propose this sticker:
But one can prefer keeping close to the more sober identity and compose the slogan in garamond:
The following graphics could be used on map compositions:
Additional (derived) graphics are gathered in this array:
Community and Code Sprint Visuals
In context of GRASS GIS / OSGeo Code Sprints we are trying to stick to OSGeo guideline and we propose the following logo setup for a reference to code sprints (feel free to modify if you consider this event should not be considered a so called local chapter of the OSGeo chart).
Issue: Does not contain text "GRASS GIS".