REDES SOCIALES: IMAGEN GRÁFICA

Transcripción

1

2 Gobierno de Canarias Consejería de Presidencia, Justicia e Igualdad Inspección General de Servicios Redes sociales: imagen gráfica Primera Edición: Mayo 2013 Aviso legal No 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 participados 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 Diseño y Comunicación ( Gobierno de Canarias

3 indice 1 Construcción del avatar Introducción Construcción del avatar (Estructura) Construcción del avatar (Cromatismo Departamento y Centro Directivo) Construcción del avatar (Cromatismo Organismo Autónomo y Entidad) Cromatismo avatar Introducción y Círculo Cromático Gama de color Gama de color Gama de color Gama de color Gama de color Gama de color Gama de color Gama de color Gama de color Gama de color Asignación cromatismo del avatar Muestras gama de color Asignación lista departamentos Asignación departamento + nombre corto avatar Departamento Niveles emisores según Departamento I Niveles emisores según Departamento II Niveles emisores según Departamento III Otros elementos Asignación del color a otros elementos, según Departamento Cabecera Facebook Fondo vertical (Twitter) Cabecera (Twitter) Cabecera (Google+) Cabecera (Youtube) Muestras de imagen gráfica Facebook Facebook - Muestras tipos de cabeceras I Facebook - Muestras tipos de cabeceras II Twitter Twitter - Muestras tipos de cabeceras y fondo I Twitter - Muestras tipos de cabeceras y fondo II Google Google+ - Muestras tipos de cabeceras I Google+ - Muestras tipos de cabeceras II Youtube Google+ - Muestras tipos de cabeceras I Google+ - Muestras tipos de cabeceras II Flickr Slideshare... 49

4 1 CONSTRUCCIÓN AVATAR

5 INTRODUCCIÓN Esta guía proporciona un conjunto de criterios de identidad grafica 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 identificación, la de sus productos y la de sus servicios. 1.1 INTRODUCCIÓN 4

6 Z/8 Z/2 Z Z/16 Z/2 Z/4 Z Z/8 Z/8 Z/2 Z/2 espacio reservado para el nombre corto del avatar Se ha utilizado un cuadrado (base=z y altura=z) como base para la imagen de los avatares de las redes sociales por ser una forma estándar. La forma de la isla se obtiene de la Marca del Gobierno de Canarias, se ha utilizado este elemento como nexo de unión entre el aspecto visual en las redes sociales y la Marca del Gobierno de Canarias. 1.2 CONSTRUCCIÓN AVATAR (Estructura) 5

7 Departamento C = blanco opacidad al 60% opacidad % de blanco C 60% 40% 20% 0% degradado Centro Directivo C = blanco opacidad al 60% C 60% opacidad % de blanco 40% 20% 0% degradado A, B y C equivalen a los colores que se indican en el apartados de cromatismo de esta Guía. En el caso de ser un Departamento o Centro Directivo C (el relleno de la forma de la isla) será de color blanco al 60% de opacidad. 1.3 CONSTRUCCIÓN AVATAR (Cromatismo Departamento y Centro Directivo) 6

8 Organismo Autónomo C = R155 G164 B151 C 60% opacidad % de blanco 40% 20% 0% degradado Entidades Públicas o Privadas C = blanco opacidad al 100% C 60% opacidad % de blanco 40% 20% 0% degradado A, B y C equivalen a los colores que se indican en el apartados de cromatismo de esta Guía. En el caso de un Organismo Autónomo C (el relleno de la forma de la isla) tendrá siempre el color R155 G163 B151. En el caso de una Entidades Públicas o Privadas C (el relleno de la forma de la isla) tendrá siempre el color blanco al 100% de opacidad. 1.4 CONSTRUCCIÓN AVATAR (Cromatismo Organismo Autónomo y Entidades) 7

9 2 CROMATISMO AVATAR

10 INTRODUCCIÓN En este apartado se muestran las combinaciones cromáticas que se han designado para identificar a la Administración Pública de la Comunidad Autónoma y a las entidades públicas o privadas integrantes del sector público autonómico del Gobierno de Canarias. C A B Cada combinación de color será asignada a un Departamento, siempre procurando que el color tenga cierta relación conceptual con dicho Departamento. CÍRCULO CROMÁTICO Se ha creado un circulo cromático con tonos brillantes y que transmiten dinamismo, el círculo cromático se compone de 10 colores diferentes para realizar combinaciones para identificar a cada Departamento con una tonalidad. A: Primer círculo cromático, colores base utilizado para componer los avatares. B: Segundo círculo cromático, mismo color que A pero 50% más oscuro. C: En el caso de Departamento o Centro Directivo = Blanco al 60% de opacidad. C: En el caso de Organismo Autónomo: = R155 G163 B151. C: En el caso de Entidad Pública o Privada = Blanco 100% de opacidad. 2.1 INTRODUCCCIÓN Y CÍRCULO CROMÁTICO 9

11 COLOR A: AZUL Características: Simboliza, la profundidad inmaterial y del frío. La sensación de placidez que provoca el azul es distinta al de la calma o del reposo terrestres propios del verde. Es el color del infinito, de los sueños y de lo maravilloso, y simboliza la sabiduría, amistad, fidelidad, serenidad, sosiego, verdad eterna e inmortalidad. También significa descanso. COLOR B: AZUL OSCURO Color 50% más oscuro que el A Este color se usará para las cabeceras de Google+, Facebook y Twitter, ademas de en la imagen de fondo de Twitter. COLOR C: GRIS Y BLANCO degradado Organismo Autónomo: C = R155 G163 B151. Entidad Pública o Privada: C = R255 G255 B255. B R0 G51 B140 A R27 G91 B228 C Organismo Autónomo C Entidad Pública o Privada 2.2 GAMA DE COLOR 1 10

12 COLOR A: CYAN Características: Simboliza, la profundidad inmaterial y del frío. La sensación de placidez que provoca el azul es distinta al de la calma o del reposo terrestres propios del verde. Es el color del infinito, de los sueños y de lo maravilloso, y simboliza la sabiduría, amistad, fidelidad, serenidad, sosiego, verdad eterna e inmortalidad. También significa descanso. COLOR B: CYAN OSCURO Color 50% más oscuro que el A Este color se usará para las cabeceras de Google+, Facebook y Twitter, ademas de en la imagen de fondo de Twitter. COLOR C: GRIS Y BLANCO Organismo Autónomo: C = R155 G163 B151. degradado Entidad Pública o Privada: C = R255 G255 B255. B R0 G139 B141 A R28 G215 B228 C Organismo Autónomo C Entidad Pública o Privada 2.3 GAMA DE COLOR 2 11

13 COLOR A: VERDE TURQUESA Características: El turquesa es un color envolvente, refrescante y tranquilizante. El turquesa es aconsejable para el estrés mental, el cansancio y el sentimiento de limpiarse. Es un color, que nos anima a empezar de nuevo con fuerzas renovadas e ideas nuevas. COLOR B: V. TURQUESA OSCURO Color 50% más oscuro que el A Este color se usará para las cabeceras de Google+, Facebook y Twitter, ademas de en la imagen de fondo de Twitter. COLOR C: GRIS Y BLANCO Organismo Autónomo: C = R155 G163 B151. degradado Entidad Pública o Privada: C = R255 G255 B255. B R0 G143 B60 A R28 G228 B121 C Organismo Autónomo C Entidad Pública o Privada 2.4 GAMA DE COLOR 3 12

14 COLOR A: VERDE Características: El verde tiene una fuerte afinidad con la naturaleza y nos conecta con ella, nos hace empatizar con los demás encontrando de una forma natural las palabras justas. El verde nos crea un sentimiento de confort y relajación, de calma y paz interior, que nos hace sentir equilibrados interiormente. COLOR B: VERDE OSCURO Color 50% más oscuro que el A Este color se usará para las cabeceras de Google+, Facebook y Twitter, ademas de en la imagen de fondo de Twitter. COLOR C: GRIS Y BLANCO Organismo Autónomo: C = R155 G163 B151. degradado Entidad Pública o Privada: C = R255 G255 B255. B R26 G144 B0 A R54 G228 B28 C Organismo Autónomo C Entidad Pública o Privada 2.5 GAMA DE COLOR 4 13

15 COLOR A: AMARILLO VERDOSO Características: Es el color mas intelectual y puede ser asociado con una gran inteligencia. Los amarillos también suelen interpretarse como joviales, afectivos, excitantes e impulsivos. Están relacionados con la naturaleza. Psicologicamente se asocia con el deseo de liberación. COLOR B: AMARILLO V. OSCURO Color 50% más oscuro que el A Este color se usará para las cabeceras de Google+, Facebook y Twitter, ademas de en la imagen de fondo de Twitter. COLOR C: GRIS Y BLANCO Organismo Autónomo: C = R155 G163 B151. degradado Entidad Pública o Privada: C = R255 G255 B255. B R114 G146 B0 A R175 G228 B28 C Organismo Autónomo C Entidad Pública o Privada 2.6 GAMA DE COLOR 5 14

16 COLOR A: NARANJA AMARLLO Características: Simboliza entusiasmo y exaltación y cuando es muy encendido o rojizo, ardor y pasión. Posee una fuerza activa, radiante y expresiva, de carácter estimulante y cualidad dinámica positiva y energética. COLOR B: NARANJA A. OSCURO Color 50% más oscuro que el A Este color se usará para las cabeceras de Google+, Facebook y Twitter, ademas de en la imagen de fondo de Twitter. COLOR C: GRIS Y BLANCO Organismo Autónomo: C = R155 G163 B151. Entidad Pública o Privada: C = R255 G255 B255. degradado B R147 G93 B0 A R228 G165 B28 C Organismo Autónomo C Entidad Pública o Privada 2.7 GAMA DE COLOR 6 15

17 COLOR A: ROJO Características: Se le asocia con una personalidad extrovertida, que vive hacia afuera, tiene un temperamento vital, ambicioso y material, y se deja llevar por el impulso, mas que por la reflexión. Expresa sensualidad, virilidad y energía, considerado símbolo de una pasión ardiente y desbordada. Por su asociación con el sol y el calor es un color propio de las personas que desean experiencias fuertes. COLOR B: ROJO OSCURO Color 50% más oscuro que el A Este color se usará para las cabeceras de Google+, Facebook y Twitter, ademas de en la imagen de fondo de Twitter. COLOR C: GRIS Y BLANCO Organismo Autónomo: C = R155 G163 B151. degradado Entidad Pública o Privada: C = R255 G255 B255. B R148 G5 B0 A R228 G44 B28 C Organismo Autónomo C Entidad Pública o Privada 2.8 GAMA DE COLOR 7 16

18 COLOR A: ROSA Características: El rosa es un color emocionalmente relajado e influye en los sentimientos convirtiéndolos en amables, suaves y profundos. Nos hace sentir cariño, amor y protección. También nos aleja de la soledad y nos convierte en personas sensibles. COLOR B: ROSA OSCURO Color 50% más oscuro que el A Este color se usará para las cabeceras de Google+, Facebook y Twitter, ademas de en la imagen de fondo de Twitter. COLOR C: GRIS Y BLANCO Organismo Autónomo: C = R155 G163 B151. Entidad Pública o Privada: C = R255 G255 B255. degradado B R150 G0 B85 A R228 G28 B131 C Organismo Autónomo C Entidad Pública o Privada 2.9 GAMA DE COLOR 8 17

19 COLOR A: ÍNDIGO Características: El índigo es un color muy poderoso para la psíque, se le asocia con el funcionamiento del cerebro y es un estimulante de la imaginación y de la intuición. También es un fuerte sendante. COLOR B: ÍNDIGO OSCURO Color 50% más oscuro que el A Este color se usará para las cabeceras de Google+, Facebook y Twitter, ademas de en la imagen de fondo de Twitter. COLOR C: GRIS Y BLANCO Organismo Autónomo: C = R155 G163 B151. Entidad Pública o Privada: C = R255 G255 B255. degradado B R126 G0 B151 A R205 G28 B228 C Organismo Autónomo C Entidad Pública o Privada 2.10 GAMA DE COLOR 9 18

20 COLOR A: VIOLETA Características: El violeta, es el color de la templanza, la lucidez y la reflexión. Transmite profundidad y experiencia. Tiene que ver con lo emocional y lo espriritual. Es místico, meláncolico y se podría decir que también representa la introversión. En su variación al púrpura, es realeza, dignidad, suntuosidad. COLOR B: VIOLETA OSCURO Color 50% más oscuro que el A Este color se usará para las cabeceras de Google+, Facebook y Twitter, ademas de en la imagen de fondo de Twitter. COLOR C: GRIS Y BLANCO Organismo Autónomo: C = R155 G163 B151. degradado Entidad Pública o Privada: C = R255 G255 B255. B R36 G0 B153 A R84 G28 B228 C Organismo Autónomo C Entidad Pública o Privada 2.11 GAMA DE COLOR 10 19

21 ASIGNACIÓN 3 CROMATISMO DEL AVATAR

22 Gama de color 1 Gama de color 2 Gama de color 3 Gama de color 4 Gama de color 5 Gama de color 6 Gama de color 7 Gama de color 8 Gama de color 9 Gama de color MUESTRA GAMAS DE COLOR 21

23 Asignación de color según el departamento A fecha de publicación de esta Guía, existen 9 Departamentos, por lo cual no será necesario utilizar todas las combinaciones cromáticas creadas (10). A cada Departamento se le otorgará un cromatismo acorde a sus características y basado en la psicología del color. Los Organismos Autónomos que no posean marca autorizada por la Inspección General de Servicios (en adelante IGS), utilizarán el cromatismo asignado al Departamento del que dependan, con la diferencia de que el relleno de C (el símbolo de la isla) será de color gris (R163 G173 B153). Las Entidades Publicas o Privadas que no posean marca autorizada por la IGS, utilizarán el cromatismo asignado al Departamento del que dependan, con la diferencia de que el relleno de C (el símbolo de la isla) será de color blanco al 100% de opacidad (R255 G255 B255). Los Organismos Autónomos y Entidades Públicas o Privadas con marca autorizada por la IGS, emplearán su marca o símbolo como avatar de forma homogénea en todas las redes sociales en las que tengan presencia. Departamentos Gobierno de Canarias 1.- Presidencia del Gobierno 2.- Consejería de Educación, Universidades y Sostenibilidad 3.- Consejería de Economía, Hacienda y Seguridad 4.- Consejería de Presidencia, Justicia e Igualdad 5.- Consejería de Agricultura, Ganadería, Pesca y Aguas 6.- Consejería de Cultura, Deportes, Políticas Sociales y Vivienda 7.- Consejería de Empleo, Industria y Comercio 8.- Consejería de Obras Públicas, Transportes y Política Territorial 9.- Consejería de Sanidad 3.2 ASIGNACIÓN LISTA DEPARTAMENTOS 22

24 Presidencia del Gobierno Consejería de Educación, Universidades y Sostenibilidad Consejería de Agricultura, Ganadería, Pesca y Aguas No asignado Consejería de Empleo, Industria y Comercio Consejería de Obras Públicas, Transportes y Política Territorial Consejería de Sanidad Consejería de Economía, Hacienda y Seguridad Consejería de Cultura, Deportes, Políticas Sociales y Vivienda Consejería de Presidencia, Justicia e Igualdad 3.3 ASIGNACIÓN DEPARTAMENTO + NOMBRE CORTO AVATAR 23

25 3.4 DEPARTAMENTOS 24

26 Departamento Centro Directivo Organismo Autónomo Entidad Pública o Privada Presidencia del Gobierno Consejería de Educación, Universidades y Sostenibilidad Consejería de Economía, Hacienda y Seguridad 3.5 NIVELES EMISORES SEGÚN DEPARTAMENTO I 25

27 Departamento Centro Directivo Organismo Autónomo Entidad Pública o Privada Consejería de Presidencia, Justicia e Igualdad Consejería de Agricultura, Ganadería, Pesca y Aguas Consejería de Cultura, Deportes, Políticas Sociales y Vivienda 3.6 NIVELES EMISORES SEGÚN DEPARTAMENTO II 26

28 Departamento Centro Directivo Organismo Autónomo Entidad Pública o Privada Consejería de Empleo, Industria y Comercio Consejería de Obras Públicas, Transportes y Política Territorial Consejería de Sanidad 3.7 NIVELES EMISORES SEGÚN DEPARTAMENTO III 27

29 4 OTROS ELEMENTOS

30 Asignación de color a otros elementos, según el departamento En los Departamentos y Centros Directivos, los elementos visuales complementarios al avatar (cabeceras, los fondos, etc), deberán utilizar el color B correspondiente a su Departamento como color de fondo (B=segundo círculo cromático, mismo color que A pero 50% más oscuro; apartado 2 de la presente Guía). También se podrán utilizar imágenes de campañas o eventos, siempre y cuando se mantenga los elementos visuales (Símbolo del Gobierno de Canarias y texto gobcan.es) y éstos sean visibles. Los Organismos Autónomos y Entidades Públicas o Privadas con marcas autorizadas por la IGS, utilizarán en el avatar su marca o símbolo identificativo. En los elementos visuales complementarios al avatar (cabeceras, fondo, etc) podrán emplear el asignado para su Departamento, o uno acorde al color corporativo de su marca; o en su caso podrán utilizar imágenes de campañas o eventos, siempre y cuando se mantenga los elementos visuales (Símbolo del Gobierno de Canarias y texto gobcan.es) y éstos sean visibles. R0 G51 B140 R0 G139 B141 Presidencia del Gobierno Consejería de Educación, Universidades y Sostenibilidad R0 G143 B60 R26 G144 B0 R114 G146 B0 R147 G93 B0 Consejería de Agricultura, Ganadería, Pesca y Aguas No asignado Consejería de Empleo, Industria y Comercio Consejería de Obras Públicas, Transportes y Política Territorial R148 G5 B0 R150 G0 B85 R126 G0 B151 R36 G0 B153 Consejería de Sanidad Consejería de Economía, Hacienda y Seguridad Consejería de Cultura, Deportes, Políticas Sociales y Vivienda Consejería de Presidencia, Justicia e Igualdad 4.1 ASIGNACIÓN DE COLOR A OTROS ELEMENTOS, SEGÚN DEPARTAMENTO 29

31 Construcción cabecera Facebook 315px 851px R0 G51 B140 R0 G139 B141 R0 G143 B60 R26 G144 B0 R114 G146 B0 R147 G93 B0 R148 G5 B0 R150 G0 B85 R126 G0 B151 R36 G0 B CABECERA FACEBOOK 30

32 Construcción fondo Twitter R0 G51 B140 R0 G139 B141 R0 G143 B60 R26 G144 B0 500px R114 G146 B0 R147 G93 B0 R148 G5 B0 200px R150 G0 B85 R126 G0 B151 R36 G0 B FONDO VERTICAL (TWITTER) 31

33 Construcción cabecera Twitter 626px 1252px R0 G51 B140 R0 G139 B141 R0 G143 B60 R26 G144 B0 R114 G146 B0 R147 G93 B0 R148 G5 B0 R150 G0 B85 R126 G0 B151 R36 G0 B CABECERA (TWITTER) 32

34 Construcción cabecera Google+ 877px 1556px R0 G51 B140 R0 G139 B141 R0 G143 B60 R26 G144 B0 R114 G146 B0 R147 G93 B0 R148 G5 B0 R150 G0 B85 R126 G0 B151 R36 G0 B CABECERA (GOOGLE+) 33

35 Construcción cabecera Youtube 508,5px 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 423px Mínimo de seguridad expandido (tablets): 1855x423 px 508,5px Mínimo de seguridad (siempre visible): 1556x423 px 352,5px 154,5px 1546px 154,5px 352,5px R0 G51 B140 R0 G139 B141 R0 G143 B60 R26 G144 B0 R114 G146 B0 R147 G93 B0 R148 G5 B0 R150 G0 B85 R126 G0 B151 R36 G0 B CABECERA (YOUTUBE) 34

36 5 MUESTRAS DE

37 5.1 FACEBOOK 36

38 REDES SOCIALES: Muestra con fondo de color asignado Muestra con imagen oscura + logo/web blanco Muestra con imagen clara + logo/web negro Departamento Centro Directivo Organismo Autónomo sin marca autorizada Entidad Pública o Privada sin marca autorizada 5.1 FACEBOOK - MUESTRAS TIPOS DE CABECERAS I 37

39 REDES SOCIALES: Muestra con fondo de color asignado Muestra con imagen oscura + logo/web blanco Muestra con imagen clara + logo/web negro Organismo Autónomo con marca autorizada Entidad Pública o Privada con marca autorizada 5.1 FACEBOOK - MUESTRAS TIPOS DE CABECERAS II 38

40 5.2 TWITTER 39

41 REDES SOCIALES: Muestra con fondo de color asignado Muestra con imagen oscura + logo/web blanco Muestra con imagen clara + logo/web negro Departamento Centro Directivo Entidad Pública o Privada sin marca autorizada Entidad Pública o Privada sin marca autorizada 5.2 TWITTER - MUESTRAS TIPOS DE CABECERAS Y FONDO I 40

42 REDES SOCIALES: Muestra con fondo de color asignado Muestra con imagen oscura + logo/web blanco Muestra con imagen clara + logo/web negro Organismo Autónomo con marca autorizada Entidad Pública o Privada con marca autorizada 5.2 TWITTER - MUESTRAS TIPOS DE CABECERAS Y FONDO II 41

43 5.3 GOOGLE+ 42

44 REDES SOCIALES: Muestra con fondo de color asignado Muestra con imagen oscura + logo/web blanco Muestra con imagen clara + logo/web negro Departamento Centro Directivo Organismo Autónomo sin marca autorizada Entidad Pública o Privada sin marca autorizada 5.3 GOOGLE+ - MUESTRAS TIPOS DE CABECERAS I 43

45 REDES SOCIALES: Muestra con fondo de color asignado Muestra con imagen oscura + logo/web blanco Muestra con imagen clara + logo/web negro Organismo Autónomo con marca autorizada Entidad Pública o Privada con marca autorizada 5.3 GOOGLE+ - MUESTRAS TIPOS DE CABECERAS Ii 44

46 5.4 YOUTUBE 45

47 REDES SOCIALES: Muestra con fondo de color asignado Muestra con imagen oscura + logo/web blanco Muestra con imagen clara + logo/web negro Departamento Centro Directivo Organismo Autónomo sin marca autorizada Entidad Pública o Privada sin marca autorizada 5.4 YOUTUBE - MUESTRAS TIPOS DE CABECERAS I 46

48 REDES SOCIALES: Muestra con fondo de color asignado Muestra con imagen oscura + logo/web blanco Muestra con imagen clara + logo/web negro Organismo Autónomo con marca autorizada Entidad Pública o Privada con marca autorizada 5.4 YOUTUBE - MUESTRAS TIPOS DE CABECERAS II 47

49 5.5 FLICKR 48

50 5.6 SLIDESHARE 49

51