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

Report
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
Esta presentación tiene notas
aclaratorias e informativas
Fotografía digital
adicionales .
Introducción
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.
Arte para Comunicar
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.
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.
Ejercicio: Semiótica
Compare los siguientes símbolos.
Identifique elementos en común
Ejercicio: Semiótica
Compare los siguientes símbolos.
Identifique elementos en común
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
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.
Ejemplo: Colores
• Ejemplos de colores y su aplicación a un tema
Aa
Bb
•
•
•
Naturaleza
Salud / Vida
Vegetales
Aa
Bb
•
•
•
Tiempo
Mar / Playa
Aire / Volar
Aa
Bb
•
•
•
Historia
Libros
Antigüedad
Aa
Bb
•
•
•
Tecnología
Ciencia
Espacio
Ejemplo: Legibilidad
Título
Texto
Título
Texto
Llamativo
Legible
Título
Texto
Serio
Legible
Llamativo
No es Legible
Título
Texto
Serio
No es Legible
Arte para Educar
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.)
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.
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)
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.
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…)
Diseño Gráfico
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.
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)
Ejercicio: Diseño Gráfico
• Organice los siguientes elementos en una
forma en la cual sea práctica, legible y
comunique un mensaje.
Reglas:
•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.
Ejercicio: Posible solución
Diseño Gráfico
El artista gráfico trabaja por inspiración,
gusto y estética, éste puede decir… “No me
Gusta”, el diseñador gráfico debe trabajar
por estudio, análisis y raciocinio, éste debe
decir… “No funciona.”
- JCP 2009
Regla de 6x6
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” no
sobrecargue la página.
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
Etiqueta de Comunicación
Etiqueta de Comunicación
• Regla 1: Nunca olvide que la persona
que lee el mensaje es, en efecto, humana
con 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.
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
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
Esto es menos legible
Esto es más Legible
Etiqueta de Comunicación
E
s
t
o
• ¿Sabe usted que…
p
o
c
o
– 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.
l
e
g
i
b
l
e
• Algunos libros no siguen
esta línea. Recientemente se
ha creado conciencia acerca
de esto.
e
s
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.
Ajustar el Master
¿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.
Ajustar el Master
• En el tab de “view” encontrará los controles
para ver la presentación.
• Escoja “Slide Master”
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
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.
Fotografía Digital
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?
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.
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.
Fotografía Digital
1
• Calidad:
2
– No utilice más calidad
de la necesaria pero
tampoco escatime al
punto de colocar
imagenes de pésima
calidad. Busque un
punto medio.
3
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.
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.
Programas
Adobe
• Photoshop
• Illustrator
• Macromedia
• Fireworks
• FreeHand
• Flash
• Corel
•CorelDRAW
•CorelPAINT
•CorelTRACE
•Microsoft
•Paint
•PowerPoint
•Publisher
•Picture Manager
¡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.

similar documents