Diseño Gráfico
description
Transcript of Diseño Gráfico
![Page 1: Diseño Gráfico](https://reader036.fdocumentos.tips/reader036/viewer/2022062501/56816511550346895dd78c1d/html5/thumbnails/1.jpg)
Diseño Gráfico
![Page 2: Diseño Gráfico](https://reader036.fdocumentos.tips/reader036/viewer/2022062501/56816511550346895dd78c1d/html5/thumbnails/2.jpg)
Objetivos
• Discutir los elementos del diseño gráfico para ambientes virtuales.
• Aplicar los fundamentos del diseño gráfico en una presentación electrónica, para un curso en línea.
• Discutir ley de derechos de autor para la utilización de recursos de la web.
![Page 3: Diseño Gráfico](https://reader036.fdocumentos.tips/reader036/viewer/2022062501/56816511550346895dd78c1d/html5/thumbnails/3.jpg)
Introducción
• Uniformidad en el menú de navegación• El uso del color• Diseño• La consistencia• El peso de los gráficos según el espacio (resulución)• Plantillas Virtuales• Elementos gráficos• Tipografía
![Page 4: Diseño Gráfico](https://reader036.fdocumentos.tips/reader036/viewer/2022062501/56816511550346895dd78c1d/html5/thumbnails/4.jpg)
Resolución
Primero vamos aprender que es resoluciónla resolución o (DPI dots per inch) son los cuadritos que componen una imagen. Mientras más cuadritos mejor resolución o calidad va a ser la imagen. Pero, recuerde mientras más cuadritos (más alta la resolución y más pesada va ser la imagen). Para la web debes tener cuidado con esto.
![Page 5: Diseño Gráfico](https://reader036.fdocumentos.tips/reader036/viewer/2022062501/56816511550346895dd78c1d/html5/thumbnails/5.jpg)
Resolución
Tamaños que se usan en frecuencia para la resolución
• 72 dpi Web, video o imagén que no se va imprimir.
• 150- imagén que se va a imprimir en blanco y negro o un tamaño exesivamente grande “billboard”por ejemplo.
• 300- imagen que se va imprimir a color de buena calidad.
![Page 6: Diseño Gráfico](https://reader036.fdocumentos.tips/reader036/viewer/2022062501/56816511550346895dd78c1d/html5/thumbnails/6.jpg)
Resolución
• Formas para poder controlar la resolución de una imagén: Photoshop (edit-image size) Scanner (antes de escanear la imagen pon el tamaño deseado. Cámara digital (en los “settings” puedes cambiar el tamaño de la foto, pero no la resolución)
![Page 7: Diseño Gráfico](https://reader036.fdocumentos.tips/reader036/viewer/2022062501/56816511550346895dd78c1d/html5/thumbnails/7.jpg)
Color
• Audiencia y el tema• Escoja el color del fondo primero• Evite los arcoiris (máximo de 3 a 4 colores por
visual)• Consitencia en los colores• Consistencia entre los contrastes del fondo y
las letras
![Page 8: Diseño Gráfico](https://reader036.fdocumentos.tips/reader036/viewer/2022062501/56816511550346895dd78c1d/html5/thumbnails/8.jpg)
Combinación de colores
negro sobre amarillo verde sobre blanco azul sobre blanco blanco sobre azul negro sobre blanco amarillo sobre negro amarillo sobre azul blanco sobre rojo Entre otros…
Puede visitar:http://kuler.adobe.compuede ver diferentes combinaciones de colores creadas por diseñadores de alredeor del mundo.
Visite esta página y con una combinacióndiferente a la de esta página crea una plantilla. Texto y fondo
Título, parrafo y fondo.
![Page 9: Diseño Gráfico](https://reader036.fdocumentos.tips/reader036/viewer/2022062501/56816511550346895dd78c1d/html5/thumbnails/9.jpg)
Fondos
• Fáciles de leer Colores Pasteles• Atractividad• Color- provee significados
Rojo- Pasión, sangre, etc Negro- Soledad, muerte, etc Blanco- Pureza, Paz, etc
Recuerde que la definición de un color tiene un significado diferente para cada persona o región.
![Page 10: Diseño Gráfico](https://reader036.fdocumentos.tips/reader036/viewer/2022062501/56816511550346895dd78c1d/html5/thumbnails/10.jpg)
Resolución
• 300 DPI (es para una imagen que se va a imprimir a color de alta calidad)
• 150 DPI (es para una imagen que va ser impresa o blanco y negro o calidad periódico)
• 72 DPI (es para una imagen que no va ser impresa ósea, video, web o televisión)
Para el propósito de este módulo solo trabajaremos con imágenes de 72 dpi
![Page 11: Diseño Gráfico](https://reader036.fdocumentos.tips/reader036/viewer/2022062501/56816511550346895dd78c1d/html5/thumbnails/11.jpg)
Resolución
• Puedes bajar la resolucion o tamaño de una imagén: Programa de manipulación de imágenes (photoshop, illustrator, Gymp (gratis). Cámara (cambiarle los “settings”para tomar una foto más pequeña de tamaño. Scanner antes de scanear la foto baja el tamaño de resolución
![Page 12: Diseño Gráfico](https://reader036.fdocumentos.tips/reader036/viewer/2022062501/56816511550346895dd78c1d/html5/thumbnails/12.jpg)
Elementos del Diseño
• Color Propiedad Fundamental = Luz Primarios: rojo, amarillo y azul Efecto psicológico y social
![Page 13: Diseño Gráfico](https://reader036.fdocumentos.tips/reader036/viewer/2022062501/56816511550346895dd78c1d/html5/thumbnails/13.jpg)
TipografíaHay miles de tipografias juega con ellas para ver cual es la que mejor te funciona. Recuerda la información es mas importante que si el font se ve bonito o no.
![Page 14: Diseño Gráfico](https://reader036.fdocumentos.tips/reader036/viewer/2022062501/56816511550346895dd78c1d/html5/thumbnails/14.jpg)
Diseño de Visuales-Texto
No apropiados Apropiados Forte Arial Script Verdana Mistral Articulate
La tipografía depende la situación o estilo en que se esta trabajando el diseño.
![Page 15: Diseño Gráfico](https://reader036.fdocumentos.tips/reader036/viewer/2022062501/56816511550346895dd78c1d/html5/thumbnails/15.jpg)
Características de los visuales de texto
• Tamaños de letras Televisión- no menos de 36 puntos Proyecciones- no menos de 24 puntos
Párrafo (impresión y web) 12 puntos legal (impresión) 9 puntos
Recuerde que depende del tipo de font que este usando puede variar el tamaño del font
![Page 16: Diseño Gráfico](https://reader036.fdocumentos.tips/reader036/viewer/2022062501/56816511550346895dd78c1d/html5/thumbnails/16.jpg)
Características de los visuales de texto
• Regla del 6 x 6 6 palabras por línea 6 líneas por visual
36 palabras por visual
Ahora te toca crear una presentación en powerpoint de dos páginas usando la regla que acabo de instruir.
![Page 17: Diseño Gráfico](https://reader036.fdocumentos.tips/reader036/viewer/2022062501/56816511550346895dd78c1d/html5/thumbnails/17.jpg)
Características
• Evite escribir todas las palabras en mayúsculas
Juan Carlos (correcto)
JUAN CARLOS (INCORRECTO)
Evite los “CAPS”
![Page 18: Diseño Gráfico](https://reader036.fdocumentos.tips/reader036/viewer/2022062501/56816511550346895dd78c1d/html5/thumbnails/18.jpg)
Formatos
• GIF (graphic Interchange Format) 256 colores creación de títulos, botones o animaciones creado por CompuServe en 1987 para dotar de un formato de imagen a color para sus áreas de descarga de ficheros, sustituyendo su temprano formato RLE en blanco y negro
![Page 19: Diseño Gráfico](https://reader036.fdocumentos.tips/reader036/viewer/2022062501/56816511550346895dd78c1d/html5/thumbnails/19.jpg)
Formatos
• JPEG (Joint Photographic Experts Group) algoritmo para comprimir imágenes con 24 bits de profundidad o en escala de grises. Formato de fichero para comprimir imágenes sólo trata imágenes fijas: MPEG-para videos JEPEG se abrevia frecuentemente JPG
![Page 20: Diseño Gráfico](https://reader036.fdocumentos.tips/reader036/viewer/2022062501/56816511550346895dd78c1d/html5/thumbnails/20.jpg)
Formatos
• PNG (Portable Network Graphics) Formato gráfico basado en un algoritmo de compresión sin pérdida para bitmaps no sujeto a patentes. Desarrollado para solventar las deficiencias del formato GIF. Permite almacenar imágenes con una mayor profundidad de color.
![Page 21: Diseño Gráfico](https://reader036.fdocumentos.tips/reader036/viewer/2022062501/56816511550346895dd78c1d/html5/thumbnails/21.jpg)
Leyes
• Protección proporcionada por las leyes de EE.UU
• Título 17, del Código Federal Autores de “obras originales” Literarias Dramáticas Musicales Artisticas Intelectuales
![Page 22: Diseño Gráfico](https://reader036.fdocumentos.tips/reader036/viewer/2022062501/56816511550346895dd78c1d/html5/thumbnails/22.jpg)
Leyes
Que está protegidoIdeastítulosNombresURL’sTrabajos en dominio públicoLogos y lemas no registradosFormularios (recopilan información)
![Page 23: Diseño Gráfico](https://reader036.fdocumentos.tips/reader036/viewer/2022062501/56816511550346895dd78c1d/html5/thumbnails/23.jpg)
Leyes
Que está protegidoObras literarias Obras arquitectónicasTrabajos musicales Trabajos pictóricos,Obras dramáticas gráficos y Trabajos esculturalescoreográficos Programa de Películas computadorasGrabaciones Animaciones
![Page 24: Diseño Gráfico](https://reader036.fdocumentos.tips/reader036/viewer/2022062501/56816511550346895dd78c1d/html5/thumbnails/24.jpg)
Alto
Instrucciones:1. Seleccione un tema2. Crea una presentación en PowerPoint3. Inserte gráficos
![Page 25: Diseño Gráfico](https://reader036.fdocumentos.tips/reader036/viewer/2022062501/56816511550346895dd78c1d/html5/thumbnails/25.jpg)
Alto
Perfil del profesorFotoDatos de contactoEnlace a página WEB personal o profesional(si aplica)
![Page 26: Diseño Gráfico](https://reader036.fdocumentos.tips/reader036/viewer/2022062501/56816511550346895dd78c1d/html5/thumbnails/26.jpg)
Webibliografía
Templates gratuitos para presentaciones en Powerpoint Powerpoint templates Sonia Coleman-Digital Studio Website E Estates Graphic Island Maniactive Brainy Betty