Curso "El Periodismo Digital en la Escuela", Cantabria, 09/03/2011. Florián Manuel Pérez Sánchez.

1. U.D. 3 – Diseño gráfico El Periódico Digital en la Escuela FETE – 2011 Florián Manuel Pérez Sánchez

2. Diseño gráfico Partes del tema: 1. Conceptos generales. 2. Tratamiento de imágenes con GIMP. 3. Herramientas de gráficos vectoriales.

4. Refresco vertical: Hz. Estabilidad. 75, 85 Hz.

5. Resolución y medidas PPP (pixel por pulgada): medida abstracta que no tienen en cuenta la resolución ni la escala de la pantalla. PC y MAC: 7 2 ppp. Windows en los textos: 96 ppp.

6. Geometría y proporciones Proporción tradicional: 4:3 Pantallas panorámicas: 16:9 Cuidado al combinar tarjetas vídeo y con monitores.

7. Color en pantalla Cada pixel: 3 subpíxeles. Cada subpíxel: 8 bits. En conjunto: 24 bits -> 16,8 millones de colores. 32 bits: canal alpha, transparencia.

9. Se emite luz.

10. Usado en monitores de ordenador.

11. Igual proporción de colores primarios: gris.

12. Al máximo los 3: blanco.

13. Conocido como RGB.

15. Se absorbe luz. Se usa en imprenta.

16. Colores primarios: cian, magenta y amarillo.

17. Se añade el negro debido a impurezas.

18. Se llama: CMYK.

19. Tintas Planas

21. Muchos filtros sólo funcionan en RGB.

22. Los colores no son iguales de unos monitores a otros.

24. Menos posibilidades de edición en los programas.

25. Es posible hacer conversiones entre RGB y CMYK.

27. Máximo de 256 colores.

28. Archivos pequeños.

29. Apropiado para gráficos sencillos, sin muchas variaciones de color.

30. Gestión de color Objetivo: correspondencia de colores entre monitores y con trabajos de imprenta. Windows: Adobe Gamma. Software profesional: usan “colorímetros”.

31. Tipografía - Fuentes Una fuente es un juego de caracteres. Incluye: letras del alfabeto, números arábigos, signos de puntuación y otros signos ortográficos. Los textos internamente se codifican como números relacionados con el carácter a representar. Los caracteres de un juego tienen en común ciertas características tipográficas.

32. Tipografía – Tipos de fuentes. Serifas: con remates; fáciles de leer en pasajes largos; las más usadas en libros y periódicos Sin serifas: sin remates; ideales para titulares y cajas de texto. Decorativas : para embellecer; difíciles de leer. Monospace: ancho fijo; “informáticas”.

33. Tipografía – Reglas básicas de uso Pensar en el lector. Usar inicialmente sólo dos fuentes. No usar fuentes parecidas. Resaltar con negrita y cursiva, no con mayúsculas o subrayado. Cuerpos de 9 a 12 puntos. Usar combinaciones ya probadas.

34. Tipografía – Instalación de fuentes Conseguir fuentes en Internet. Instalarlas en sistemas Windows.

35. Tipografía – Fuentes web seguras. Diversidad según sistemas. Definición flexible en CSS. Ejemplos: font-family: Verdana,"Bitstream Vera Sans",sans-serif; font: 10px Arial,Helvetica,sans-serif; font: 75%/150% Arial,Helvetica,sans-serif;

36. Colores Primarios: amarillo, rojo y azul. Secundarios, intermedios, terciarios, cuaternarios. Fríos: interviene el azul. Cálidos: interviene el rojo o amarillo.

37. Círculo cromático

38. Colores

39. Colores

40. Colores y sus significados  Rojo: fuerza, energía; simboliza amor y violencia; llama la atención, estimula la mente.  Verde: sensación calmante; simboliza esperanza; se relaciona con la naturaleza; habitual en lugares de alta tensión emocional.  Azul: frescura, transparencia; efecto tranquilizados; en la empresas se usa el azul oscuro para transmitir madurez y sabiduría.

41. Colores y sus significados  Amarillo: simboliza alegría; simpatía; se vincula con el sol y la luz; habitual en ofertas de viaje a zonas de sol.  Blanco: luminosidad; simboliza pureza y verdad; los productos lo usan para aparentar limpieza y claridad.  Negro: significado contradictorio. misterio, muerte; nobleza dignidad.

42. Colores web seguros Garantizan su visualización “correcta” en cualquier sistema y navegador. http://es.html.net/tutorials/html/lesson7_216websafecolourchart.php

43. Proporción de las imágenes Fotografía tradicional: 3:2 Fotografía digital: 4:3 Importante tomar decisiones en el manual de estilo. http://es.wikipedia.org/wiki/Relaci%C3%B3n_de_aspecto

44. La regla de los tercios. Consiste en dividir la imagen en tres tercios imaginaros, horizontales y verticales. Los cuatro puntos de intersección son los puntos de interés de la foto, no su centro. Si sólo hay un punto de interés en la foto hay que situarlo en uno de esos puntos de interés (puntos fuertes).

45. Diseño web Consiste en la planificación, diseño e implementación de sitios y páginas web. Incluye: navegabilidad, interactividad, usabilidad, arquitectura de la información e integración de texto, imágenes, sonido y vídeo.

46. Principios del diseño web Balance: equilibrio entre los elementos de la página web. Contraste: distinción entre los elementos. Énfasis: destacar ciertos elementos. Repetición o ritmo: establecer patrones. Proximidad o unidad: colocar juntos elementos relacionados.

47. Diseño web, pruebas básicas Hacer pruebas en varios navegadores, sistemas operativos y monitores de distintos tamaños.

48. Gimp - Presentación http://www.gimp.org/

49. Gimp – Visión general Menús y cajas de herramientas

50. Gimp – Herramientas de selección Porciones, zonas, colores...

51. Gimp – Proporciones y recortes Elegir proporción de selección y recortar.

52. Gimp – Voltear y girar Dar la vuelta, reflejar y girar.

53. Gimp – Ajustes de la imagen Colores, brillo, contraste, curvas, etc.

54. Gimp – Capas Manejar capas y establecer transparencias.

55. Gimp – Texto Insertar cuadros de texto.

56. Gimp – Dibujar Herramientas de dibujo.

57. Gimp – Clonar Herramienta de clonación.

58. Gimp – Filtros Aplicación de filtros.

59. Gimp – Modos de imagen Cambios de modo: RGB, CMYK, indexado.

60. Gimp – Guardar las imágenes. Guardar y elegir el tipo de archivo.

61. Gimp – Formatos de imágenes. RAW: en crudo, ocupa mucho. TIFF: bueno para gran calidad. JPG: imágenes web con muchos tonos. GIF: imágenes planas. PNG: similar a GIF pero más potente.

62. Herramientas de gráficos vectoriales. OpenOffice Draw www.openoffice.org InkScape www.inkscape.org

63. OpenOffice Draw: manejo básico.

64. Créditos y licencia. Curso de Periodismo Digital - Cantabria, marzo, 2011 por Florián Manuel Pérez Sánchez se encuentra bajo una Licencia Creative Commons Reconocimiento-NoComercial-CompartirIgual 3.0 Unported. Basada en una obra en cursoperiodismodigital.wordpress.com. Material didáctico elaborado por Florián Manuel Pérez Sánchez, para el curso “El periódico digital en la escuela”, organizado por FETE-UGT, Cantabria, marzo 2011. Más información: http://cursoperiodismodigital.wordpress.com