Arte y diseño gráfico de un curso en línea.

5,778 views
5,618 views

Published on

Esta presentación cubre elementos de diseño y arte aplicables a cursos en linea y otros metodos de difusion de conocimiento. Trata de resumir algunos aspectos importantes en cuanto al mejoramiento de presentaciones para cursos.

3 Comments
7 Likes
Statistics
Notes
No Downloads
Views
Total views
5,778
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
3
Likes
7
Embeds 0
No embeds

No notes for slide
  • Importancia de conocer los símbolos y su significado.http://es.wikipedia.org/wiki/Semi%C3%B3tica
  • Comience con una idea que pueda expresarla en forma clara y precisa. Losmateriales gráficos, para que sean útiles, deben someterse a una cuidadosaplanificación. Evite la complicación y la sobrecarga en el uso de elementosdecorativos, mejor cree dramatismo e impacto con los gráficos.Pregúntese lo siguiente:¿Qué -voy a comunicar?¿Porqué - lo voy a comunicar?¿Cómo - lo voy a comunicar?¿A quién- está dirigido el mensaje?
  • Prueba de concepto.
  • Prueba de concepto.
  • Un buen escogido de colores permite que su presentación sea llamativa y legible.
  • Aquí hay una descripción un poco más abarcadora de los términos mencionados.Tipografía•Fuentes (Fonts)•Ej: Arial, Times New Roman, Verdana•Tamaño de letra adaptado al medio y al mensaje•Estilos - Evite el "Bold" y el "Italic“ en textos extensos.•Subrayar puede ser confundido con un enlace o vínculo.Color•Propiedad Fundamental = Luz•Primarios: rojo, amarillo y azul•Efecto psicológico y socialContraste•Entre las fuentes (fonts) y el fondo•Usar combinaciones de colores
  • Los archivos gráficos tienen distintos detalles que pueden ayudar a escoger el mas apto para su uso en cursos y presentaciones. Contrario al uso común entre educadores No es recomendado copiar los mismos a word y luego usarlos en sus presentaciones ya que los mismos pierden calidad en el proceso. Es mejor bajarlos a su maquina (rightclick – saveimage as).
  • 5 minutos.
  • Es conocimiento común de quienes se comunican en el internet de que existen unas reglas básicas de etiqueta.Lea http://www.usergioarboleda.edu.co/grupointernet/netiquete.htm (o puede revisar http://es.wikipedia.org/wiki/Netiquette)Como referencia básica de etiqueta. Este link contiene información aplicada a e-mails pero esas reglas básicas aplican a otros medios de comunicación escrita hoy día.
  • Es conocimiento común de quienes se comunican en el internet de que existen unas reglas básicas de etiqueta.Lea http://www.usergioarboleda.edu.co/grupointernet/netiquete.htm (o puede revisar http://es.wikipedia.org/wiki/Netiquette)Como referencia básica de etiqueta. Este link contiene información aplicada a e-mails pero esas reglas básicas aplican a otros medios de comunicación escrita hoy día.
  • Es conocimiento común de quienes se comunican en el internet de que existen unas reglas básicas de etiqueta.Lea http://www.usergioarboleda.edu.co/grupointernet/netiquete.htm (o puede revisar http://es.wikipedia.org/wiki/Netiquette)Como referencia básica de etiqueta. Este link contiene información aplicada a e-mails pero esas reglas básicas aplican a otros medios de comunicación escrita hoy día.
  • Términos a conocer: DPI = Dots per inch (puntosporpulgada) Es la medida “fisica” en calidad de suimagen al imprimir o mostrar en pantalla. 72dpi es el tamañocomún de pantalla. 150dpi escalidadaceptable y esregularmenteutilizadoparaimprenta no parapresentaciones. 300dpi o másesconsideradoaltacalidad y esregularmenteutilizadoparaimprenta no parapresentaciones.Estamedida (dpi) en combinación con el tamaño en pulgadasafectadirectamente el tamaño en disco duro(y en pantalla) de suimagen mayor calidadrequieremayoresrecursos(memoria, disco).
  • En el listado coloco los programas que comúnmente se pueden utilizar para arreglar/editar/crear imágenes. En el caso de los programas de adobe; esta compañía provee versiones a precios más razonables y también versiones temporeras. No olviden que como entidad educativa y como profesores/estudiantes tienen derecho a comprar programas a precio educativo en los respectivos websites de sus compañías o en lugares como www.creationengine.com que se dedican a ofrecer software a precio educativo.(con las debidas credenciales)
  • Arte y diseño gráfico de un curso en línea.

    1. 1. Arte y diseño gráfico de un curso en línea.<br />Por: Juan C. Peña Martínez<br />Diseñador Gráfico<br />
    2. 2. Contenido<br />Arte para comunicar<br />Arte para educar <br />Diseño gráfico<br />Regla del 6x6<br />Etiqueta de Comunicación<br />Ajustar el Master<br />Fotografía digital<br />Esta presentación tiene notas aclaratorias e informativas adicionales .<br />
    3. 3. Introducción<br />
    4. 4. Introducción<br />Bienvenidos al Tema 5: Arte y diseño gráfico de un curso en línea. <br />En este tema se explica brevemente la importancia del diseño gráfico en un curso en línea y cómo ayuda a aumentar la efectividad del mismo reforzando su mensaje.<br />
    5. 5. Arte paraComunicar<br />
    6. 6. Arte para Comunicar<br />Para comunicar a través del arte hay que tener un entendimiento básico de lo que es semiótica.<br />La semiótica se define como el estudio de los signos, su estructura y la relación entre el significante y el concepto de significado. <br />
    7. 7. Arte para Comunicar<br />En otras palabras, hay que conocer los símbolos y sus significados. <br />Es importante tomar en cuenta la audiencia a la cual está dirigido el mensaje.<br />Los símbolos que son pertinentes y correctos para el mensaje dependen del conocimiento de la sociedad a la que se desea afectar.<br />Los colores que la sociedad identifica como simbólicos también ganan peso en el mensaje.<br />
    8. 8. Ejercicio: Semiótica<br />Compare los siguientessímbolos. <br />Identifiqueelementos en común<br />
    9. 9. Ejercicio: Semiótica<br />Compare los siguientessímbolos. <br />Identifiqueelementos en común<br />
    10. 10. Arte para Comunicar<br />Principios para el uso de colores<br />Considere a la audiencia y el tema<br />Escoja el color del fondo antes que el color de las letras<br />Evite la sobrecarga de colores en un solo “slide”.<br />Mantenga consistencia en los colores<br />Mantenga consistencia entre los contrastes del fondo y las letras<br />
    11. 11. Arte para Comunicar<br />Una buena combinación de colores permite que el mensaje sea legible.<br />Refuerza el tema y la idea.<br />Nos da base para el escogido de imágenes.<br />Estos son ejemplos de colores de buen contraste para una presentación.<br />
    12. 12. Ejemplo: Colores<br />Aa<br />Aa<br />Bb<br />Bb<br />Ejemplos de colores y suaplicación a un tema<br />Aa<br />Aa<br />Bb<br />Bb<br /><ul><li>Naturaleza
    13. 13. Salud / Vida
    14. 14. Vegetales
    15. 15. Tiempo
    16. 16. Mar / Playa
    17. 17. Aire / Volar
    18. 18. Historia
    19. 19. Libros
    20. 20. Antigüedad
    21. 21. Tecnología
    22. 22. Ciencia
    23. 23. Espacio</li></li></ul><li>Ejemplo: Legibilidad<br />Título<br />Título<br />Llamativo<br />Legible<br />Serio<br />Legible<br />Texto<br />Texto<br />Título<br />Título<br />Llamativo<br />No es Legible<br />Serio<br />No es Legible<br />Texto<br />Texto<br />
    24. 24. Arte paraEducar<br />
    25. 25. Arte para Educar<br />El arte para educar expande en algunos puntos clave las “reglas” del arte para comunicar.<br />Tenemos 2 audiencias principales. (Estudiantes, Facultad)<br />Tenemos temas específicos para ellos. (Cursos, Materias…)<br />Su labor principal es reforzar el material no suplantarlo. (Es más práctico una imagen con descriptivos que un capítulo de texto.)<br />
    26. 26. Arte para Educar<br />Elementos de Diseño a tomar en consideración en una presentación.<br />Uniformidad<br />Color - Mantener un set de colores establecido.<br />Jerarquía - Los niveles de importancia de la información.<br />Tipografía/Estilos de fuentes (fonts) –Letras legibles. No cansar la vista.<br />Fondos - Color de fondo, textura, efectos según necesario.<br />Contraste - Legibilidad del texto con el fondo e imágenes.<br />
    27. 27. Arte para Educar<br />Al compartir la información debe conocer el formato en la cual la va a compartir. <br />Algunos formatos son mejores para unos tipos específicos de información<br />Los archivos informativos se dividen en varias clasificaciones:<br />Texto, Gráfico, Audio/Video, Multimedio(combinación de los anteriores)<br />
    28. 28. Arte paraEducar<br />¿Qué formato de imagen debo utilizar?<br />Gif – Formato de compresión de imágenes. <br />Utiliza 256 colores o menos y puede hacer transparencia.<br />Este formato es muy utilizado en diseño de páginas por sus capacidades. (transparencia, animación sencilla)<br />Jpg – Formato de compresión de imágenes<br />Utiliza miles de colores <br />Tiende a crear deformaciones leves pero es el mejor para fotos en el Web.<br />Existen otros pero estos ya mencionados son los comunes.<br />
    29. 29. Arte para Educar<br />Detalles de archivos<br />Peso – Se refiere a el espacio en disco que ocupa el archivo. (Numeración en Bites, Kb, Mb, Gbetc…)<br />Tamaño – se refiere a la medida en pantalla que tiene el archivo.(Numeración en pixels, pulgadas, picas, puntos, etc… )<br />Calidad – Se refiere a cuán bien se VE la imagen para efectos de su uso.(Relacionado con la resolución)<br />Formato – Se refiere a la extensión o el tipo de archivo que es. (Ej. BMP, GIF, JPG, PNG,Doc, Pdf, Swf, Avi…)<br />
    30. 30. Diseño Gráfico<br />
    31. 31. DiseñoGráfico<br />El diseño gráfico es una disciplina estudiada y aprendida. Se refiere a la organización de los elementos, colores, símbolos, texturas etc. de forma tal, que comuniquen con mayor efectividad la idea.<br />Contrario a la idea común, el diseñador y el artista gráfico no son lo mismo. Es tan diferente y similar como un médico y un enfermero, están en un campo similar, pero ejercen labores diferentes.<br />
    32. 32. Diseño Gráfico<br />El término diseñador gráfico se refiere a quien emplea un número de disciplinas artísticas enfocadas en la comunicación visual y presentación de un tema. Entre sus herramientas de mayor uso están las siguientes.<br />Tipografía(letras, fonts)<br />Imágenes(video, fotos, ilustraciones)<br />Colores<br />Elementos adicionales como (texturas, formas, líneas)<br />
    33. 33. Ejercicio: DiseñoGráfico<br />Organice los siguienteselementos en una forma en la cual sea práctica, legible y comunique un mensaje.<br />Reglas:<br /><ul><li>Todos los elementospueden ser cambiados en color, tamaño y posición.
    34. 34. El producto final debe ser un solo elementocompuesto de todos los anteriores.</li></ul>Cambio<br />
    35. 35. Ejercicio: Posiblesolución<br />Cambio<br />
    36. 36. DiseñoGráfico<br />El artista gráfico trabaja por inspiración, gusto y estética, éste puede decir… “No meGusta”, el diseñador gráfico debe trabajarpor estudio, análisis y raciocinio, éste debedecir… “No funciona.”<br />- JCP 2009<br />
    37. 37. Regla de 6x6<br />
    38. 38. Regla del 6x6<br />La regla del 6x6 tiene como meta:<br />La legibilidad de las presentaciones.<br />Recuerde que las presentaciones deben ser guías del contenido:<br />No es aceptable, práctico o funcional la sobrecarga de texto .<br />Recuerde respetar los márgenes de su presentación deje algo de “aire” nosobrecargue la página. <br />
    39. 39. Regla del 6x6<br />Esta regla existe para aumentar la legibilidad y funcionalidad de las presentaciones.<br />6 palabrasporlínea<br />6 líneas por visual<br />____________________<br />36 palabras por visual<br />Usualmenteutilizado en Televisiónperoaplica a otrosmedios.<br />Respetesusmárgenes<br />
    40. 40. Etiqueta de Comunicación<br />
    41. 41. Etiqueta de Comunicación<br />Regla 1: Nunca olvide que la personaque lee el mensaje es, en efecto, humanacon sentimientos que pueden ser lastimados.<br />Regla 2: Adhiérase a los mismos estándares de comportamiento en línea que usted sigue en la vida real.<br />
    42. 42. Etiqueta de Comunicación<br />Regla 3: Reconozca en qué parte del ciberespacio se encuentra para que adapte su vocabulario, actitud pensamiento de ser necesario.<br />Para más información Vea - el Decálogo http://es.wikipedia.org/wiki/Netiquette<br />
    43. 43. Etiqueta de Comunicación<br />¿Sabeustedque…<br />EL ESCRIBIR UN MENSAJE EN MAYÚSCULAS REDUCE SU LEGIBILIDAD Y CANSA LA VISTA<br />Cadaletra(font) tienesuuso y lugar<br />Es recomendableusar 3 o menostipos de letrapara no causarconfusión<br />La lectura en Occidentees de Izquierda a Derecha<br />
    44. 44. Etiqueta de Comunicación<br />¿Sabeustedque…<br />Cuandoquiereescribirverticalmentepiense en el formatoutilizado en lomos de libros.<br />Tambiénrecuerdenuestrométodo de escritura no fuédiseñadoparalectura vertical.<br />Estoespoco legible<br />Estoesmás Legible <br />Estoesmenos legible<br /><ul><li>Algunoslibros nosiguenestalínea. Recientemente se ha creadoconcienciaacerca de esto.</li></li></ul><li>Etiqueta de Comunicación<br />Transiciones… <br />Las transiciones entre “slides” tienen como meta el descanso de la vista entre una imagen y otra. <br />Es recomendable el uso de una transición, el uso de múltiples transiciones es un distractor que crea confusión, incertidumbre y ansiedad.<br />
    45. 45. Ajustar el Master<br />
    46. 46. ¿Quées el Master?<br />El master es el control de fondo principal de supresentación.<br />Este manejacómo se ve la misma y cómo se ven los “slides” y los tipos de “slides”.<br />Le permitedar un “look” único a supresentaciónmientrasevita el sobrecargarla con imágenes de fondo.<br />
    47. 47. Ajustar el Master<br />En el tab de “view” encontrará los controlesparaver la presentación.<br />Escoja “Slide Master”<br />
    48. 48. Ajustar el Master<br />Este es el botónparacerrar la vista del “master”yregresar a el modo regular de la presentación<br />Cadauno de estoscuadrosrepresenta un tipo de vista de la presentación. El primerocontrola la mayor parte de la presentación<br />
    49. 49. Ajustar el Master<br />En la presentaciónpuededar “right click” al “slide” queestétrabajando y notaráqueexiste un item del menúque dice “layout”. <br />De esta forma escoje el modo de ese “slide” en particular.<br />
    50. 50. Fotografía Digital<br />
    51. 51. Fotografía Digital<br />Una vez conocemos los aspectos básicos de formato, es importante aplicar los mismos.<br />La fotografía digital es muy popular. Estas preguntas le ayudarán a escoger o tomar buenas fotografías para sus presentaciones.<br />¿Qué hace una buena foto digital?<br />¿Cuánta calidad para una presentación?<br />¿Cuál es el tamaño en que debe estar la foto?<br />
    52. 52. Fotografía Digital: Peso <br />Peso de la imagen: <br />Se refiere a la utilización de recursos de la máquina.<br />Se compara la medida en espacio de disco, memoria o tamaño de una imagen al peso de un objeto. Esto es para simplificar el entendimiento del concepto.<br />Una imagen que original mente mide 14 pulgadas por 14 pulgadas a 72dpi es demasiada calidad para una presentación, “pesa” mucho. Fácilmente resuelve con una imagen 4x4 a 72dpi y aún así, es bastante grande.<br />Recuerde que las presentaciones tienen que ser prácticas.<br />
    53. 53. Fotografía Digital: Peso <br />Peso de la imagen(recuerde los archivos): <br />Detalles a tomar en consideración. <br />¿Qué desea mostrar en la presentación?<br />¿Necesito que se vean los poros de la cara de la persona?<br />¿Necesito poder ver una milla de distancia del paisaje y poder ver la gente que está en el carro a la distancia?<br />Suena exagerado pero eso es exactamente lo que ocurre cuando se coloca una imagen con demasiada calidad.<br />
    54. 54. Fotografía Digital<br />Calidad:<br />No utilicemáscalidad de la necesariaperotampocoescatime al punto de colocarimagenes de pésimacalidad. Busque un puntomedio.<br />1<br />2<br />3<br />
    55. 55. Fotografía Digital: Comparativo<br />Si comparamos la imagen 1 (altacalidad) con la imagen 3 (agrandada al mismotamaño) Notaremos la claradiferencia en calidad.<br />
    56. 56. Fotografía Digital: Comparativo<br />Si comparamos la imagen 1 (altacalidad) con la imagen 2 (agrandada al mismotamaño) Notaremos la que la diferencia no es tan evidente. Estaimagen 2 esaceptable y “pesa” menos.<br />
    57. 57. Programas<br /><ul><li>CorelDRAW
    58. 58. CorelPAINT
    59. 59. CorelTRACE
    60. 60. Microsoft
    61. 61. Paint
    62. 62. PowerPoint
    63. 63. Publisher
    64. 64. Picture Manager</li></ul>Adobe <br />Photoshop<br />Illustrator<br />Macromedia<br />Fireworks<br />FreeHand<br />Flash<br />Corel<br />
    65. 65. ¡Gracias porsuatención!<br />Nota: Estapresentación con todassusimágenes y sus 48 “slides” sólomide 1.06MB lo cualesunamedida ideal para internet, cursos en línea y transferenciasdigitales.<br />Procure al crearpresentacionesparasuscursosquelasmísmas no ocupenmás de 4MB de espacio en cuanto sea posible.<br />

    ×