arte y diseño gráfico de un curso en línea
DESCRIPTION
Arte y diseño gráfico de un curso en línea. Por: Juan C. Peña Martínez Diseñador Gráfico. Contenido. Arte para comunicar Arte para educar Diseño gráfico Regla del 6x6 Etiqueta de Comunicación Ajustar el Master Fotografía digital. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Arte y diseño gráfico de un curso en línea](https://reader034.vdocuments.pub/reader034/viewer/2022051118/568166d5550346895ddae8bb/html5/thumbnails/1.jpg)
Arte y diseño gráfico de un curso en línea.
Por: Juan C. Peña MartínezDiseñador Gráfico
![Page 2: Arte y diseño gráfico de un curso en línea](https://reader034.vdocuments.pub/reader034/viewer/2022051118/568166d5550346895ddae8bb/html5/thumbnails/2.jpg)
Contenido
• Arte para comunicar• Arte para educar • Diseño gráfico• Regla del 6x6• Etiqueta de Comunicación• Ajustar el Master• Fotografía digital
Esta presentación tiene notas aclaratorias e informativas
adicionales .
![Page 3: Arte y diseño gráfico de un curso en línea](https://reader034.vdocuments.pub/reader034/viewer/2022051118/568166d5550346895ddae8bb/html5/thumbnails/3.jpg)
Introducción
![Page 4: Arte y diseño gráfico de un curso en línea](https://reader034.vdocuments.pub/reader034/viewer/2022051118/568166d5550346895ddae8bb/html5/thumbnails/4.jpg)
Introducción
Bienvenidos al Tema 5: Arte y diseño gráfico de un curso en línea.
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.
![Page 5: Arte y diseño gráfico de un curso en línea](https://reader034.vdocuments.pub/reader034/viewer/2022051118/568166d5550346895ddae8bb/html5/thumbnails/5.jpg)
Arte para Comunicar
![Page 6: Arte y diseño gráfico de un curso en línea](https://reader034.vdocuments.pub/reader034/viewer/2022051118/568166d5550346895ddae8bb/html5/thumbnails/6.jpg)
Arte para Comunicar
• Para comunicar a través del arte hay que tener un entendimiento básico de lo que es semiótica.– 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.
![Page 7: Arte y diseño gráfico de un curso en línea](https://reader034.vdocuments.pub/reader034/viewer/2022051118/568166d5550346895ddae8bb/html5/thumbnails/7.jpg)
Arte para Comunicar
• En otras palabras, hay que conocer los símbolos y sus significados. – Es importante tomar en cuenta la
audiencia a la cual está dirigido el mensaje.– Los símbolos que son pertinentes y
correctos para el mensaje dependen del conocimiento de la sociedad a la que se desea afectar.
– Los colores que la sociedad identifica como simbólicos también ganan peso en el mensaje.
![Page 8: Arte y diseño gráfico de un curso en línea](https://reader034.vdocuments.pub/reader034/viewer/2022051118/568166d5550346895ddae8bb/html5/thumbnails/8.jpg)
Ejercicio: Semiótica
Compare los siguientes símbolos. Identifique elementos en común
![Page 9: Arte y diseño gráfico de un curso en línea](https://reader034.vdocuments.pub/reader034/viewer/2022051118/568166d5550346895ddae8bb/html5/thumbnails/9.jpg)
Ejercicio: Semiótica
Compare los siguientes símbolos. Identifique elementos en común
![Page 10: Arte y diseño gráfico de un curso en línea](https://reader034.vdocuments.pub/reader034/viewer/2022051118/568166d5550346895ddae8bb/html5/thumbnails/10.jpg)
Arte para Comunicar
Principios para el uso de colores• Considere a la audiencia y el tema• Escoja el color del fondo antes que el
color de las letras• Evite la sobrecarga de colores en un
solo “slide”.• Mantenga consistencia en los colores• Mantenga consistencia entre los
contrastes del fondo y las letras
![Page 11: Arte y diseño gráfico de un curso en línea](https://reader034.vdocuments.pub/reader034/viewer/2022051118/568166d5550346895ddae8bb/html5/thumbnails/11.jpg)
Arte para Comunicar
• Una buena combinación de colores permite que el mensaje sea legible.
• Refuerza el tema y la idea.
• Nos da base para el escogido de imágenes.Estos son ejemplos de colores de buen
contraste para una presentación.
![Page 12: Arte y diseño gráfico de un curso en línea](https://reader034.vdocuments.pub/reader034/viewer/2022051118/568166d5550346895ddae8bb/html5/thumbnails/12.jpg)
Ejemplo: Colores
• Ejemplos de colores y su aplicación a un tema
BbAa
BbAa
BbAa
BbAa
• Naturaleza• Salud / Vida• Vegetales
• Tiempo• Mar / Playa• Aire / Volar
• Historia• Libros• Antigüedad
• Tecnología• Ciencia• Espacio
![Page 13: Arte y diseño gráfico de un curso en línea](https://reader034.vdocuments.pub/reader034/viewer/2022051118/568166d5550346895ddae8bb/html5/thumbnails/13.jpg)
Ejemplo: Legibilidad
TextoTítulo
TextoTítulo
LlamativoLegible
LlamativoNo es Legible
TextoTítulo
TextoTítulo
SerioLegible
SerioNo es Legible
![Page 14: Arte y diseño gráfico de un curso en línea](https://reader034.vdocuments.pub/reader034/viewer/2022051118/568166d5550346895ddae8bb/html5/thumbnails/14.jpg)
Arte para Educar
![Page 15: Arte y diseño gráfico de un curso en línea](https://reader034.vdocuments.pub/reader034/viewer/2022051118/568166d5550346895ddae8bb/html5/thumbnails/15.jpg)
Arte para Educar
• El arte para educar expande en algunos puntos clave las “reglas” del arte para comunicar.– Tenemos 2 audiencias principales. (Estudiantes,
Facultad)– Tenemos temas específicos para
ellos. (Cursos, Materias…)– Su labor principal es reforzar el
material no suplantarlo. (Es más práctico una imagen con descriptivos que un capítulo de texto.)
![Page 16: Arte y diseño gráfico de un curso en línea](https://reader034.vdocuments.pub/reader034/viewer/2022051118/568166d5550346895ddae8bb/html5/thumbnails/16.jpg)
Arte para Educar
• Elementos de Diseño a tomar en consideración en una presentación.– Uniformidad
• Color - Mantener un set de colores establecido.• Jerarquía - Los niveles de importancia de la información.• Tipografía/Estilos de fuentes (fonts) –Letras legibles. No
cansar la vista.• Fondos - Color de fondo, textura, efectos según necesario.• Contraste - Legibilidad del texto con el fondo e imágenes.
![Page 17: Arte y diseño gráfico de un curso en línea](https://reader034.vdocuments.pub/reader034/viewer/2022051118/568166d5550346895ddae8bb/html5/thumbnails/17.jpg)
Arte para Educar
• Al compartir la información debe conocer el formato en la cual la va a compartir.
• Algunos formatos son mejores para unos tipos específicos de información
• Los archivos informativos se dividen en varias clasificaciones:– Texto, Gráfico, Audio/Video,
Multimedio(combinación de los anteriores)
![Page 18: Arte y diseño gráfico de un curso en línea](https://reader034.vdocuments.pub/reader034/viewer/2022051118/568166d5550346895ddae8bb/html5/thumbnails/18.jpg)
Arte para Educar
¿Qué formato de imagen debo utilizar?• Gif – Formato de compresión de imágenes.
– Utiliza 256 colores o menos y puede hacer transparencia.
– Este formato es muy utilizado en diseño de páginas por sus capacidades. (transparencia, animación sencilla)
• Jpg – Formato de compresión de imágenes– Utiliza miles de colores – Tiende a crear deformaciones leves pero es el mejor
para fotos en el Web.• Existen otros pero estos ya mencionados son los comunes.
![Page 19: Arte y diseño gráfico de un curso en línea](https://reader034.vdocuments.pub/reader034/viewer/2022051118/568166d5550346895ddae8bb/html5/thumbnails/19.jpg)
Arte para Educar
• Detalles de archivos– Peso – Se refiere a el espacio en disco que ocupa el
archivo. (Numeración en Bites, Kb, Mb, Gb etc…)– Tamaño – se refiere a la medida en pantalla que tiene
el archivo.(Numeración en pixels, pulgadas, picas, puntos, etc… )
– Calidad – Se refiere a cuán bien se VE la imagen para efectos de su uso.(Relacionado con la resolución)
– Formato – Se refiere a la extensión o el tipo de archivo que es. (Ej. BMP, GIF, JPG, PNG,Doc, Pdf, Swf, Avi…)
![Page 20: Arte y diseño gráfico de un curso en línea](https://reader034.vdocuments.pub/reader034/viewer/2022051118/568166d5550346895ddae8bb/html5/thumbnails/20.jpg)
Diseño Gráfico
![Page 21: Arte y diseño gráfico de un curso en línea](https://reader034.vdocuments.pub/reader034/viewer/2022051118/568166d5550346895ddae8bb/html5/thumbnails/21.jpg)
Diseño Gráfico
• 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.– 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.
![Page 22: Arte y diseño gráfico de un curso en línea](https://reader034.vdocuments.pub/reader034/viewer/2022051118/568166d5550346895ddae8bb/html5/thumbnails/22.jpg)
Diseño Gráfico
• 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.– Tipografía(letras, fonts)– Imágenes(video, fotos, ilustraciones)– Colores– Elementos adicionales como (texturas, formas, líneas)
![Page 23: Arte y diseño gráfico de un curso en línea](https://reader034.vdocuments.pub/reader034/viewer/2022051118/568166d5550346895ddae8bb/html5/thumbnails/23.jpg)
Ejercicio: Diseño Gráfico
• Organice los siguientes elementos en una forma en la cual sea práctica, legible y comunique un mensaje.
CambioReglas:
•Todos los elementos pueden ser cambiados en color, tamaño y posición.
•El producto final debe ser un solo elemento compuesto de todos los anteriores.
![Page 24: Arte y diseño gráfico de un curso en línea](https://reader034.vdocuments.pub/reader034/viewer/2022051118/568166d5550346895ddae8bb/html5/thumbnails/24.jpg)
Ejercicio: Posible soluciónCa
mbi
o
![Page 25: Arte y diseño gráfico de un curso en línea](https://reader034.vdocuments.pub/reader034/viewer/2022051118/568166d5550346895ddae8bb/html5/thumbnails/25.jpg)
Diseño Gráfico
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.”
- JCP 2009
![Page 26: Arte y diseño gráfico de un curso en línea](https://reader034.vdocuments.pub/reader034/viewer/2022051118/568166d5550346895ddae8bb/html5/thumbnails/26.jpg)
Regla de 6x6
![Page 27: Arte y diseño gráfico de un curso en línea](https://reader034.vdocuments.pub/reader034/viewer/2022051118/568166d5550346895ddae8bb/html5/thumbnails/27.jpg)
Regla del 6x6
• La regla del 6x6 tiene como meta:– La legibilidad de las presentaciones.
• Recuerde que las presentaciones deben ser guías del contenido:– No es aceptable, práctico o funcional la
sobrecarga de texto .– Recuerde respetar los márgenes de su
presentación deje algo de “aire” nosobrecargue la página.
![Page 28: Arte y diseño gráfico de un curso en línea](https://reader034.vdocuments.pub/reader034/viewer/2022051118/568166d5550346895ddae8bb/html5/thumbnails/28.jpg)
Regla del 6x6
Esta regla existe para aumentar la legibilidad y funcionalidad de las presentaciones.
• 6 palabras por línea• 6 líneas por visual____________________36 palabras por visual• Usualmente utilizado en
Televisión pero aplica a otros medios.
Respete sus márgenes
![Page 29: Arte y diseño gráfico de un curso en línea](https://reader034.vdocuments.pub/reader034/viewer/2022051118/568166d5550346895ddae8bb/html5/thumbnails/29.jpg)
Etiqueta de Comunicación
![Page 30: Arte y diseño gráfico de un curso en línea](https://reader034.vdocuments.pub/reader034/viewer/2022051118/568166d5550346895ddae8bb/html5/thumbnails/30.jpg)
Etiqueta de Comunicación
• Regla 1: Nunca olvide que la personaque lee el mensaje es, en efecto, humanacon sentimientos que pueden ser lastimados.
• Regla 2: Adhiérase a los mismos estándares de comportamiento en línea que usted sigue en la vida real.
![Page 31: Arte y diseño gráfico de un curso en línea](https://reader034.vdocuments.pub/reader034/viewer/2022051118/568166d5550346895ddae8bb/html5/thumbnails/31.jpg)
Etiqueta de Comunicación
• Regla 3: Reconozca en qué parte del ciberespacio se encuentra para que adapte su vocabulario, actitud pensamiento de ser necesario.
• Para más información Vea - el Decálogo http://es.wikipedia.org/wiki/Netiquette
![Page 32: Arte y diseño gráfico de un curso en línea](https://reader034.vdocuments.pub/reader034/viewer/2022051118/568166d5550346895ddae8bb/html5/thumbnails/32.jpg)
Etiqueta de Comunicación
• ¿Sabe usted que…– EL ESCRIBIR UN MENSAJE EN MAYÚSCULAS
REDUCE SU LEGIBILIDAD Y CANSA LA VISTA– Cada letra(font) tiene su uso y lugar– Es recomendable usar 3 o menos tipos de letra
para no causar confusión– La lectura en Occidente es de Izquierda a Derecha
![Page 33: Arte y diseño gráfico de un curso en línea](https://reader034.vdocuments.pub/reader034/viewer/2022051118/568166d5550346895ddae8bb/html5/thumbnails/33.jpg)
Etiqueta de Comunicación
• ¿Sabe usted que…– Cuando quiere escribir
verticalmente piense en el formato utilizado en lomos de libros.
– También recuerde nuestro método de escritura no fué diseñado para lectura vertical.
Esto
es m
ás L
egib
le Esto es m
enos legible
• Algunos libros no siguen esta línea. Recientemente se ha creado conciencia acerca de esto.
Esto es poco legible
![Page 34: Arte y diseño gráfico de un curso en línea](https://reader034.vdocuments.pub/reader034/viewer/2022051118/568166d5550346895ddae8bb/html5/thumbnails/34.jpg)
Etiqueta de Comunicación
Transiciones… • Las transiciones entre “slides” tienen como
meta el descanso de la vista entre una imagen y otra.
• Es recomendable el uso de una transición, el uso de múltiples transiciones es un distractor que crea confusión, incertidumbre y ansiedad.
![Page 35: Arte y diseño gráfico de un curso en línea](https://reader034.vdocuments.pub/reader034/viewer/2022051118/568166d5550346895ddae8bb/html5/thumbnails/35.jpg)
Ajustar el Master
![Page 36: Arte y diseño gráfico de un curso en línea](https://reader034.vdocuments.pub/reader034/viewer/2022051118/568166d5550346895ddae8bb/html5/thumbnails/36.jpg)
¿Qué es el Master?
• El master es el control de fondo principal de su presentación.
• Este maneja cómo se ve la misma y cómo se ven los “slides” y los tipos de “slides”.
• Le permite dar un “look” único a su presentación mientras evita el sobrecargarla con imágenes de fondo.
![Page 37: Arte y diseño gráfico de un curso en línea](https://reader034.vdocuments.pub/reader034/viewer/2022051118/568166d5550346895ddae8bb/html5/thumbnails/37.jpg)
Ajustar el Master
• En el tab de “view” encontrará los controles para ver la presentación.
• Escoja “Slide Master”
![Page 38: Arte y diseño gráfico de un curso en línea](https://reader034.vdocuments.pub/reader034/viewer/2022051118/568166d5550346895ddae8bb/html5/thumbnails/38.jpg)
Ajustar el Master
Cada uno de estos cuadros representa un tipo de vista de la presentación. El primero controla la mayor parte de la presentación
Este es el botón para cerrar la vista del “master”y regresar a el modo regular de la presentación
![Page 39: Arte y diseño gráfico de un curso en línea](https://reader034.vdocuments.pub/reader034/viewer/2022051118/568166d5550346895ddae8bb/html5/thumbnails/39.jpg)
Ajustar el Master
En la presentación puede dar “right click” al “slide” que esté trabajando y notará que existe un item del menú que dice “layout”. De esta forma escoje el modo de ese “slide” en particular.
![Page 40: Arte y diseño gráfico de un curso en línea](https://reader034.vdocuments.pub/reader034/viewer/2022051118/568166d5550346895ddae8bb/html5/thumbnails/40.jpg)
Fotografía Digital
![Page 41: Arte y diseño gráfico de un curso en línea](https://reader034.vdocuments.pub/reader034/viewer/2022051118/568166d5550346895ddae8bb/html5/thumbnails/41.jpg)
Fotografía Digital
• Una vez conocemos los aspectos básicos de formato, es importante aplicar los mismos.
• La fotografía digital es muy popular. Estas preguntas le ayudarán a escoger o tomar buenas fotografías para sus presentaciones.– ¿Qué hace una buena foto digital?– ¿Cuánta calidad para una presentación?– ¿Cuál es el tamaño en que debe estar la foto?
![Page 42: Arte y diseño gráfico de un curso en línea](https://reader034.vdocuments.pub/reader034/viewer/2022051118/568166d5550346895ddae8bb/html5/thumbnails/42.jpg)
Fotografía Digital: Peso
• Peso de la imagen: – Se refiere a la utilización de recursos de la máquina.– 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.
– 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.
– Recuerde que las presentaciones tienen que ser prácticas.
![Page 43: Arte y diseño gráfico de un curso en línea](https://reader034.vdocuments.pub/reader034/viewer/2022051118/568166d5550346895ddae8bb/html5/thumbnails/43.jpg)
Fotografía Digital: Peso
• Peso de la imagen(recuerde los archivos): – Detalles a tomar en consideración. – ¿Qué desea mostrar en la presentación?
• ¿Necesito que se vean los poros de la cara de la persona?
• ¿Necesito poder ver una milla de distancia del paisaje y poder ver la gente que está en el carro a la distancia?
Suena exagerado pero eso es exactamente lo que ocurre cuando se coloca una imagen con demasiada calidad.
![Page 44: Arte y diseño gráfico de un curso en línea](https://reader034.vdocuments.pub/reader034/viewer/2022051118/568166d5550346895ddae8bb/html5/thumbnails/44.jpg)
Fotografía Digital
• Calidad:– No utilice más calidad
de la necesaria pero tampoco escatime al punto de colocar imagenes de pésima calidad. Busque un punto medio.
1
2
3
![Page 45: Arte y diseño gráfico de un curso en línea](https://reader034.vdocuments.pub/reader034/viewer/2022051118/568166d5550346895ddae8bb/html5/thumbnails/45.jpg)
Fotografía Digital: Comparativo
Si comparamos la imagen 1 (alta calidad) con la imagen 3 (agrandada al mismo tamaño) Notaremos la clara diferencia en calidad.
![Page 46: Arte y diseño gráfico de un curso en línea](https://reader034.vdocuments.pub/reader034/viewer/2022051118/568166d5550346895ddae8bb/html5/thumbnails/46.jpg)
Fotografía Digital: Comparativo
Si comparamos la imagen 1 (alta calidad) con la imagen 2 (agrandada al mismo tamaño) Notaremos la que la diferencia no es tan evidente. Esta imagen 2 es aceptable y “pesa” menos.
![Page 47: Arte y diseño gráfico de un curso en línea](https://reader034.vdocuments.pub/reader034/viewer/2022051118/568166d5550346895ddae8bb/html5/thumbnails/47.jpg)
Programas
Adobe • Photoshop• Illustrator• Macromedia• Fireworks• FreeHand• Flash• Corel
•CorelDRAW•CorelPAINT•CorelTRACE•Microsoft
• Paint• PowerPoint• Publisher
•Picture Manager
![Page 48: Arte y diseño gráfico de un curso en línea](https://reader034.vdocuments.pub/reader034/viewer/2022051118/568166d5550346895ddae8bb/html5/thumbnails/48.jpg)
¡Gracias por su atención!
• Nota: Esta presentación con todas sus imágenes y sus 48 “slides” sólo mide 1.06MB lo cual es una medida ideal para internet, cursos en línea y transferencias digitales.
• Procure al crear presentaciones para sus cursos que las mísmas no ocupen más de 4MB de espacio en cuanto sea posible.