Identity: Difference between revisions

From GRASS-Wiki
Jump to navigation Jump to search
(add a section dealing with "Powered by GRASS" sticker)
(→‎Colors: make it easier to copy colors (less clutter) and recognize models/notations)
 
(8 intermediate revisions by 4 users not shown)
Line 1: Line 1:
= The need of a visual identity=
= The need of a visual identity and its consistency =
GRASS is still lacking a relevant, well tempered graphical identity. Some proposals are being discussed especially to design a new splash screen (and welcome banner). The full thread is [http://lists.osgeo.org/pipermail/grass-dev/2015-January/073157.html there].


This page is intended to initiate a place where tests and suggestions could be gathered.
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].


== Logotype ==
This page is intended as a place where tests, suggestions as well as final version are archived and gathered.
===Graphics===
 
[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 redigitized by MN in 1998 from a raster master.
: 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===
==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 ==
= Colors =
===A grass <span style="color:#009000">green...</span>===
 
==A grass <span style="color:#009000">green...</span>==
The basic green color is defined as follows:
The basic green color is defined as follows:


  - 0,144,0 (rgb);
- RGB: 0,144,0
  - 100,100,44 (cmyk);
- CMYK: 100,0,100,44
  - #009000 (html).
- HTML: #009000


aplha channel is set to 1 (no transparency)
alpha channel is set to 1 (no transparency)


===...and a <span style="color:#909090">grayscale</span> tone===
==...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:
  - 144,144,144 (rgb);
- RGB: 144,144,144
  - 0,0,0,44 (cmyk);
- CMYK: 0,0,0,44
  - #909090 (html),
- HTML: #909090


*or it is multiplied over background, with alpha transparency:
*or it is multiplied over background, with alpha transparency:
  - 0,0,0,111 (rgba);
- RGBA: 0,0,0,111
  - 0,0,0,100,44 (cmyk);
- CMYK: 0,0,0,100,44
  - #0000006f (html).
- 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:
  - 255,255,255,111 (rgba);
- RGBA: 255,255,255,111
  - 0,0,0,0,44 (cmyk);
- CMYK: 0,0,0,0,44
  - #ffffff6f (html).
- HTML: #ffffff6f


== Typo ==
= Typo =
The logo can come with text. It uses two fonts. To comply with GRASS GIS license these must be ''open source'' fonts.
The logo can come with text. It uses two fonts. To comply with GRASS GIS license these must be ''open source'' fonts.
===Main font===
 
==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.
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===
==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==
=== Objective ===
Please refer to [http://lists.osgeo.org/pipermail/grass-dev/2015-January/073157.html this thread]


=== 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:  
After several tests, we put things together in an array:  
  - col 1: capitalized title, fontface Alegreya Sans, text and tagline beside logotype;
  - col 1: capitalized title, fontface Alegreya Sans, text and tagline beside logotype;
Line 77: Line 95:
  - col 3: lowercase title, fontface Fira Sans, flushright/flushleft positioning.
  - col 3: lowercase title, fontface Fira Sans, flushright/flushleft positioning.
   
   
  - raw A: white background, potential thin black border;
  - row A: white background, potential thin black border;
  - raw B: metaphoric background image (to be refined, potential restricted rights), white graphics+lettering;
  - row B: metaphoric background image (to be refined, potential restricted rights), white graphics+lettering;
  - raw C: 3d composition showing a virtual grassy world map, white graphics+lettering;
  - row C: 3d composition showing a virtual grassy world map, white graphics+lettering;
  - raw D: same sort of scene but in top view, on white or transparent background;
  - row D: same sort of scene but in top view, on white or transparent background;
  - raw E: grayscale grassy world, black and green graphics+lettering;
  - row E: grayscale grassy world, black and green graphics+lettering;
  - raw F: personal image, less iconic than decorative in truth...
  - row F: personal image, less iconic than decorative in truth...


[[File:GRASSGIS_splash_synthesis.jpg|450px|thumbnail|center|GRASS GIS splash proposals]]
[[File:GRASSGIS_splash_synthesis.jpg|450px|thumbnail|center|GRASS GIS splash proposals]]


== GRASS GIS Welcome banner==
== 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 ===


The 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.  
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 ===
=== Proposals for 7.0 ===


The following three banners go respectively with columns 1, 2, 3 of the array above.
The following three banners go respectively with columns 1, 2, 3 of the array above.
Line 105: Line 138:
[[File:Banner_3_alpha.png|200px|center|transparent]]
[[File:Banner_3_alpha.png|200px|center|transparent]]


== GRASS GIS sticker==
== Documentation ==
=== Objective ===
GRASS GIS users may 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 ===
=== 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:
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]]
[[File:Powerby_freeh.png|100px|thumb|center|Proposal #1 for "powered by..." GRASS GIS sticker]]
Line 119: Line 189:
[[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]]
[[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]]


= Selected startup banner =
Additional (derived) graphics are gathered in this array:
[[File:Powerby_synth.png|200px|thumb|center|Proposals for GRASS GIS stickers]]
 
= Community and Code Sprint Visuals =


On Feb 6, 2015 (commit {{rev|64480}} the banner was uploaded to the source code. Related files:
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).
* [https://svn.osgeo.org/grass/grass/branches/releasebranch_7_0/gui/images/startup_banner.png gui/images/startup_banner.png]
[[File:GRASS GIS Code Sprint 2018.png|thumb|center|]]
* [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]
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)
GRASS GIS cleanup logo, color version

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;
GRASS GIS cleanup logo, grayscale version
  • white version, in case it should appear over a dark background/image.
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:

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

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

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.

GRASS GIS welcome proposals

Given latest requests, here are three extra png banners:

Alegreya Sans, capitalized
Alegreya Sans, capitalized
transparent
transparent
Fira Sans, capitalized
Fira Sans, capitalized
transparent
transparent
Fira Sans, lowercase
Fira Sans, lowercase
transparent
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:

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:

Proposal #2 for "powered by..." GRASS GIS sticker

The following graphics could be used on map compositions:

Proposal #1 for "mapped with..." GRASS GIS sticker
Proposal #2 for "mapped with..." GRASS GIS sticker

Additional (derived) graphics are gathered in this array:

Proposals for GRASS GIS stickers

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

See also