redes sociales: imagen grÁfica · 5.3 youtube - muestra pantalla de inicio i ..... 24 5.4 youtube...
TRANSCRIPT
REDES SOCIALES:IMAGEN GRÁFICA
Gobierno de Canarias
Consejería de Administraciones Públicas, Justicia y Seguridad.Dirección General de Modernización y Calidad de los Servicios.www.gobcan.es
redes soCiales: imaGen GráfiCa
Tercera edición: Marzo 2020.
Aviso legalNo se autoriza en ningún caso el uso de logotipos, marcas, escudos y símbolos distintivos del Gobierno de Canarias en publicaciones y webs que no estén partici-pados o patrocinados por esta institución. Estos elementos de identidad corporativa son propiedad exclusiva del Gobierno de Canarias y están protegidos por la legislación vigente aplicable.
Diseño y maquetación: Waldemar (www.waldemar.es)
© Gobierno de Canarias
4.3 Twitter - Muestra pantalla de inicio I .................................................................................. 19
4.4 Twitter - Muestra pantalla de inicio II ................................................................................. 20
5 Youtube ....................................................................................................................................... 21
5.1 Youtube - Construcción cabecera color genérico ............................................................... 22
5.2 Youtube - Construcción cabcera con imagen ..................................................................... 23
5.3 Youtube - Muestra pantalla de inicio I ................................................................................ 24
5.4 Youtube - Muestra pantalla de inicio II ............................................................................... 25
6 Otras redes .................................................................................................................................. 26
6.1 Linkedin - Muestra pantalla de incio ................................................................................... 27
6.2 Flickr - Muestra pantalla de incio ........................................................................................ 28
6.3 Instagram - Muestra pantalla de incio ................................................................................ 29
6.4 Pinterest - Muestra pantalla de incio.................................................................................. 30
6.5 Vimeo - Muestra pantalla de incio ...................................................................................... 31
6.6 Slideshare - Muestra pantalla de incio ............................................................................... 32
indice
1 Construcción del avatar ............................................................................................................... 3
1.1 Introducción ......................................................................................................................... 4
1.2 Construcción del avatar (Estructura) ..................................................................................... 5
2 Cromatismo .................................................................................................................................. 6
2.1 Carcaterísticas para la asignación del color .......................................................................... 8
2.2 Valores cromáticos ............................................................................................................... 7
2.3 Asignación de color Consejerías .......................................................................................... 9
2.4 Asignación de color Direcciones Generales y Viceconsejerías ........................................... 10
3 Facebook ......................................................................................................................................11
3.1 Facebook - Construcción cabecera color genérico ............................................................. 12
3.2 Facebook - Construcción cabcera con imagen ................................................................... 13
3.3 Facebook - Muestra pantalla de inicio I .............................................................................. 14
3.4 Facebook - Muestra pantalla de inicio II ............................................................................. 15
4 Twitter .......................................................................................................................................... 16
4.1 Twitter - Construcción cabecera color genérico ................................................................. 17
4.2 Twitter - Construcción cabcera con imagen ....................................................................... 18
1AVATARCONSTRUCCIÓN
4
REDES SOCIALES:IMAGEN GRÁFICA
1.1 INTRODUCCIÓN
inTrodUCCiÓn
Esta guía proporciona un conjunto de criterios de identidad gráfica que permiten identificar de una manera clara la presencia de la Administración Pública de la Comunidad Autónoma de Canarias y de las Entidades Públicas o Privadas integrantes del sector público autonómico en las redes sociales; de manera que se garantice una identidad visual común que permita su inmediata identifica-ción, la de sus productos y la de sus servicios.
5
REDES SOCIALES:IMAGEN GRÁFICA
1.2 CONSTRUCCIÓN DEL AVATAR (ESTRUCTURA)
X centrado
X 1/8X
1/10X
1/10X
muestra cuadrada
muestra circular
2CROMATISMO
7
REDES SOCIALES:IMAGEN GRÁFICA
2.1 CARACTERÍSTICAS PARA ASIGNACIÓN DEL COLOR
asiGnaCiÓn de Color seGún el deparTamenTo
- Las Consejerías utilizarán la gama de color PRINCIPAL.
- Los Departamentos y Centros Directivos utilizarán en las cabeceras el color SECUNDARIO.
- Las Entidades Públicas o Privadas utilizarán en las cabeceras el color SECUNDARIO, o su color corporativo en el caso de tener una marca autorizada.
- Los Organismos Autónomos utilizarán el color gris neutro.
También se podrán utilizar imágenes de campañas o eventos, siempre y cuando se mantenga los elementos visuales (texto "gobcan.es" sobre banda blanca) y éstos sean visibles. Se recomienda evitar la saturación de texto en los banners, y asimismo la inclusión de logotipos salvo imposicion administrativa.
A fecha de publicación de esta Guía, existen 11 Consejerías, a cada una de ellas se le ha otorgará un cromatismo diferenciado.
Consejerías del Gobierno de Canarias
1. Presidencia del Gobierno.
2. Consejería de Hacienda, Presupuestos y Asuntos Europeos.
3. Consejería de Administraciones Públicas, Justicia y Seguridad.
4. Consejería de Derechos Sociales, Igualdad, Diversidad y Juventud.
5. Consejería de Sanidad.
6. Consejería de Educación, Universidades, Cultura y Deportes.
7. Consejería de Economía, Conocimiento y Empleo.
8. Consejería de Agricultura, Ganadería y Pesca.
9. Consejería de Turismo, Industria y Comercio.
10. Consejería de Obras Públicas, Transportes y Vivienda.
11. Consejería de Transición Ecológica, Lucha contra el Cambio Climático y Planificación Territorial.
8
REDES SOCIALES:IMAGEN GRÁFICA
2.2 VALORES CROMÁTICOS
#4a73b8
#1c3687
#82c4cf
#337a85
#75b878
#4f854f
#bfd470
#7a8c3d
#dead3b
#a87800
#ffab00
#d9820a
#ed0a3d
#9e0a30
#f29ecc
#ba5c8f
#e34fa6
#800054
#b56ebd
#850094
#6359cc
#383682
#f55e0d #b2b2b2
9
REDES SOCIALES:IMAGEN GRÁFICA
2.3 ASIGNACIÓN DE COLOR CONSEJERÍAS
ORGANISMOS AUTÓNOMOS
Presidencia del Gobierno
PORTAL DE NOTICIAS
Consejería de Educación, Universidades, Cultura y Deportes
Consejería de Agricultura, Ganadería y Pesca
Consejería de Transición Ecológica, Lucha contra el Cambio Climático y Planificación Territorial
Consejería de Obras Públicas, Transportes y Vivienda
Consejería de Turismo, Industria y Comercio Consejería de Sanidad
Consejería de Economía, Conocimiento y Empleo
Consejería de Hacienda, Presupuestos y Asuntos Europeos
Consejería de Derechos Sociales, Igualdad, Diversidad y Juventud
Consejería de Administraciones Públicas, Justicia y Seguridad
10
REDES SOCIALES:IMAGEN GRÁFICA
2.4 ASIGNACIÓN COLOR DIRECCIONES GENERALES Y VICECONSEJERÍAS
Presidencia del GobiernoConsejería de Educación, Universidades, Cultura y Deportes
Consejería de Agricultura, Ganadería y Pesca
Consejería de Transición Ecológica, Lucha contra el Cambio Climático y Planificación Territorial
Consejería de Obras Públicas, Transportes y Vivienda
Consejería de Turismo, Industria y Comercio Consejería de Sanidad
Consejería de Economía, Conocimiento y Empleo
Consejería de Hacienda, Presupuestos y Asuntos Europeos
Consejería de Derechos Sociales, Igualdad, Diversidad y Juventud
Consejería de Administraciones Públicas, Justicia y Seguridad
3FACEBOOK
12
REDES SOCIALES:IMAGEN GRÁFICA
3.1 FACEBOOK - CONSTRUCCIÓN CABECERA COLOR GENÉRICO
colores web hexadecimal
828px
41px
41px
165px
41px
82px
315p
x
13
REDES SOCIALES:IMAGEN GRÁFICA
3.2 FACEBOOK - CONSTRUCCIÓN CABECERA CON IMAGEN
105px
828px
muestra 1 muestra 2
41px
315p
x
14
REDES SOCIALES:IMAGEN GRÁFICA
3.3 FACEBOOK - MUESTRA PANTALLA DE INICIO I
Cabecera con fondo de color asignado a la Consejería
Deberá aparecer el símbolo del Gobierno de Canarias y la web con tipografía corporativa (Lemonde Courrier Semibold) en color blanco.
Cabecera con imagen de fondo
Solo se usará una banda blanca con la web del Gobierno de Canarias escrita con la tipografía corporativa (Lemonde Courrier Semibold).
15
REDES SOCIALES:IMAGEN GRÁFICA
3.4 FACEBOOK - MUESTRA PANTALLA DE INICIO II
Consejería
Departamentoo Centro Directivo
Muestra con fondo de color asignado Muestra con imagen de fondo de cabecera
Organismo Autónomosin marca autorizada
Organismo Autónomo,Entidad Pública o Privada con marca autorizada
4TWITTER
17
REDES SOCIALES:IMAGEN GRÁFICA
4.1 TWITTER - CONSTRUCCIÓN CABECERA COLOR GENÉRICO
500p
x
1500px
colores web hexadecimal
75px
150px
75px
300px 75px
18
REDES SOCIALES:IMAGEN GRÁFICA
4.2 TWITTER - CONSTRUCCIÓN CABECERA CON IMAGEN
167px
75px
muestra 1 muestra 2
500p
x
1500px
19
REDES SOCIALES:IMAGEN GRÁFICA
4.3 TWITTER - MUESTRA PANTALLA DE INICIO I
Cabecera con fondo de color asignado a la Consejería
Deberá aparecer el símbolo del Gobierno de Canarias y la web con tipografía corporativa (Lemonde Courrier Semibold) en color blanco.
Cabecera con imagen de fondo
Solo se usará una banda blanca con la web del Gobierno de Canarias escrita con la tipografía corporativa (Lemonde Courrier Semibold).
20
REDES SOCIALES:IMAGEN GRÁFICA
4.4 TWITTER - MUESTRA PANTALLA DE INICIO II
Consejería
Departamentoo Centro Directivo
Muestra con fondo de color asignado Muestra con imagen de fondo de cabecera
Organismo Autónomosin marca autorizada
Organismo Autónomo,Entidad Pública o Privada con marca autorizada
5YOUTUBE
22
REDES SOCIALES:IMAGEN GRÁFICA
5.1 YOUTUBE - CONSTRUCCIÓN CABECERA COLOR GENÉRICO
Tamaños que genera Youtube en base al mayor de ellos:
Tamaño total (TV): 2560x1440 px
Ancho máximo (pc máx)2560x423 px
Mínimo de seguridad expandido (tablets): 1855x423 px
Mínimo de seguridad (siempre visible): 1556x423 px
colores web hexadecimal
75px
423p
x
2560px
508p
x50
8px
77px
154px
337px 77px
23
REDES SOCIALES:IMAGEN GRÁFICA
5.2 YOUTUBE - CONSTRUCCIÓN CABECERA CON IMAGEN
muestra 1 (tamaño total "TV")
muestra 2zona siempre visible
muestra 2tamaño para tablet
muestra 2tamaño para PC
muestra 2 (tamaño total "TV")
muestra 1zona siempre visible
muestra 1tamaño para tablet
muestra 1tamaño para PC
1440
px
2560px
141px
77px
24
REDES SOCIALES:IMAGEN GRÁFICA
5.3 GOOGLE - MUESTRA PANTALLA DE INICIO I
Cabecera con fondo de color asignado a la Consejería
Deberá aparecer el símbolo del Gobierno de Canarias y la web con tipografía corporativa (Lemonde Courrier Semibold) en color blanco.
Cabecera con imagen de fondo
Solo se usará una banda blanca con la web del Gobierno de Canarias escrita con la tipografía corporativa (Lemonde Courrier Semibold).
25
REDES SOCIALES:IMAGEN GRÁFICA
5.4 GOOGLE - MUESTRA PANTALLA DE INICIO II
Consejerías
Departamentoo Centro Directivo
Muestra con fondo de color asignado Muestra con imagen de fondo de cabecera
Organismo Autónomosin marca autorizada
Organismo Autónomo,Entidad Pública o Privada con marca autorizada
6OTRAS REDES
27
REDES SOCIALES:IMAGEN GRÁFICA
5.6 LINKEDIN - MUESTRA PANTALLA DE INICIO
Debido a las características adaptativas (responsive) de las cabeceras de flickr, se utilizará cualquier imagen relacionada con la temática. No se recomienda colocar campañas o carteles publicitarios, ya que se perdería mucha información dependiendo del dispositivo en el que se visualice.
28
REDES SOCIALES:IMAGEN GRÁFICA
5.6 FLICKR - MUESTRA PANTALLA DE INICIO
Debido a las características adaptativas (responsive) de las cabeceras de flickr, se utilizará cualquier imagen relacionada con la temática. No se recomienda colocar campañas o carteles publicitarios, ya que se perdería mucha información dependiendo del dispositivo en el que se visualice.
29
REDES SOCIALES:IMAGEN GRÁFICA
5.7 INSTAGRAM - MUESTRA PANTALLA DE INICIO
Instagram no posee cabecera, por lo que solo se configurará el avatar y se rellenará toda la información posible.
30
REDES SOCIALES:IMAGEN GRÁFICA
5.8 PINTEREST - MUESTRA PANTALLA DE INICIO
Debido a las características adaptativas (responsive) de la cabeceras de Pinterest, se utilizarán las imágenes representa-tivas de los tableros. No se recomienda colocar campañas o carteles publicitarios, ya que se perdería mucha información dependiendo del dispositivo en el que se visualice.
31
REDES SOCIALES:IMAGEN GRÁFICA
5.9 VIMEO - MUESTRA PANTALLA DE INICIO
Debido a las características adaptativas (responsive) de las cabeceras de Vimeo, se utilizará cualquier vídeo o imagen relacionado con la temática. No se recomienda colocar campañas o carteles publicitarios, ya que se perdería mucha información dependiendo del dispositivo en el que se visualice.
32
REDES SOCIALES:IMAGEN GRÁFICA
5.10 SLIDESHARE - MUESTRA PANTALLA DE INICIO
Slideshare no posee cabecera, por lo que solo se configurará el avatar y se rellenará toda la información posible.