Recomendados
Más contenido relacionado
Similar a Sesion03_DW.pdf
Similar a Sesion03_DW.pdf (20)
Más de USAT
Último
Último (20)
Sesion03_DW.pdf
- 1. www.usat.edu.pe www.usat.edu.pe Unidad III Unidad II Unidad I Diseño gráfico para web DISEÑO WEB Ing. Ernesto Nicho Córdova ncordova@usat.edu.pe SESIÓN 03
- 2. www.usat.edu.pe • Prender cámara Web (Todas las clases al inicio) Presentación inicial • Marcar asistencia
- 3. www.usat.edu.pe Objetivo de la sesión: ● Comprender conceptos de diseño ● Utilizar herramientas gráficas para la creación y retoque de imágenes. Propósito de la sesión Competencia del perfil de egreso : La asignatura DISEÑO WEB, que corresponde al área de estudios de Especialidad, contribuye al logro del perfil de egreso, específicamente a la(s) competencia(s): - CE3: DESARROLLO DE SOFTWARE - CG4: COMUNICACIÓN ORAL Y ESCRITA Resultado de Aprendizaje de la Unidad 01: R1: Realiza diseños web con herramientas de diseño gráfico y maquetado web básico. Contribuye al logro Contribuye al logro 3
- 4. www.usat.edu.pe 4 Análogo vs Digital • En el mundo analógico la representación de la imagen está basada en pigmentos • La luz es la imagen digital, manipulando la luz se crean los colores
- 5. www.usat.edu.pe 5 Pixel y resoluciones • La resolución de una pantalla es la cantidad de “puntos” individuales llamados píxeles. La resolución es la exactitud o claridad en la reproducción de una imagen. • La resolución afecta a la nitidez de la imagen, cuanto mayor es la resolución de una pantalla, mayor es su nitidez. • Densidades populares: –72 DPI para pantallas –144 DPI para retina –300 DPI para impresión
- 6. www.usat.edu.pe 6 Mapas de Bits y Vectores • Mapas de bits: Cualquier fotografía. Es una retícula, una consecución de pixeles que juntos dan una apariencia de imagen. • Vectores: Un vector está hecho de nodos. Cada nodo está conectado. la conexión es el trazo. Podemos cambiar el tamaño y no se pierde calidad. La diferencia entre un nodo y un mapa de bits, es que el uno está compuesto por muchas puntos que tienen un limite y los nodos una formula que es infinita!
- 7. www.usat.edu.pe • Cuando hablamos de color, estamos hablando de luz rebotando en un objeto y que llega a nuestros ojos para darnos la perspectiva visual. • Los tipos de colores principales son: –a) Colores primarios. Amarillo, azul y rojo. –b) Colores secundarios. Verde, naranja, violeta. • La temperatura del color es basada en la sensación de cómo percibimos el color. Según esto hay estos tipos de colores: –a) Colores Fríos. Verdes, azules, morados. –b) Colores Cálidos. Amarillos, naranjas, rojos. 7 Círculo cromático y temperatura de color
- 8. www.usat.edu.pe • RGB. Mundo digital. Modelo de mezcla aditivo. partimos del negro y según el uso de luz llegamos al blanco. • CMYK. Mundo análogo, del pigmento. Empezando y generando en digital, este es el formato de color para impresiones. Modelo de mezcla sustractiva. • HSB. Hue Satutartion Brightness La obtención del negro absoluto es llevando todos los colores al máximo. 8 Sistemas de color • Por eso al mezclar los colores CMYK nos da como resultado el negro y si mezclamos los colores del sistema RGB nos da lo contrario blanco
- 9. www.usat.edu.pe Armonías cromáticas = Racionalización de cómo funciona un color con otro: 9 Paletas de color
- 10. www.usat.edu.pe 10 Ejemplo de paleta Herramientas para paletas de colores https://color.adobe.com http://www.colourlovers.com/ http://colorhunt.co/ https://coolors.co/ https://flatuicolors.com/ http://paletton.com https://www.colorcombos.com/ •App: Palette
- 12. www.usat.edu.pe • La psicología del color tiene que ver con cómo conectamos nuestra marca con el color. Las evocaciones emocionales en el ser humano es lo que le da sentido a la percepción de los colores utilizados en el diseño. • La psicología del color Intenta agrupar esas evocaciones que da cada color, pero esto no debe tomarse literal, sino tomar esos precedentes para construir algo. Es decir, romper las reglas según la necesidad de nuestros diseños, pero guiándonos un poco en los ejemplos de las percepciones de cada color. 12 Psicología del color
- 14. www.usat.edu.pe Vibración • El primero de ellos es enfrentar a dos colores muy dominantes. Dos colores complementarios es el caso más común pero también ocurre con otros: 14 Errores comunes en el uso del color (1)
- 15. www.usat.edu.pe Cantidad de Color • El color es un recurso visual muy valioso y debemos usarlo como tal. Un diseño con demasiados colores perjudica su lectura. 15 Errores comunes en el uso del color (2)
- 16. www.usat.edu.pe Contexto • En un interfaz estamos acostumbrados a leer el rojo o el naranja como elementos de urgencia. Tratar de cambiar eso es muy complicado y en la inmensa mayoría de casos no es necesario luchar en contra e intentar reescribir esa predisposición. Al contrario, podemos aprovecharla. • El contexto cultural también es importante, por ejemplo: El naranja en India es considerado sagrado y en Japón es el color que simboliza al amor. • Desconocer los contextos en los que será leído nuestro diseño y nuestro color puede cambiar completamente el mensaje que queremos entregar. 16 Errores comunes en el uso del color (3)
- 17. www.usat.edu.pe • Con el texto podemos encontrar la combinación entre algo estéticamente bueno y algo con mucha narrativa. • La tipografía da identidad a marcas o proyectos. • La tipografía logra dar posicionamiento de marca solo con tipografías. 17 Tipografía en el diseño
- 18. www.usat.edu.pe • Clasificación de tipografías: • Sans Serif o Palo Seco. Figuras y cortes muy limpios. Es recomendada para títulos. No es recomendada para textos largos impresos, recomendada para textos largos en digital. • Serifa. Terminaciones casi ornamentales, más suaves, son decorativas. Recomendada para títulos, para textos largos impresos. No es recomendada para texto largo en digital. • Display. Titulares principalmente. vertiente de las sans serif, son mu experimentales. Da más carácter al diseño, da más contexto de lo que queremos comunicar. • Handwritten. Se utiliza en cosas específicas, tiene un carácter más humano. • Lettering. Letras con un toque personal, se ve mucho en publicidad y caligrafía. 18 Selección tipográfica
- 19. www.usat.edu.pe • GIMP (GNU Image Manipulation Program) es un programa de edición de imágenes digitales en forma de mapa de bits. • Es un programa libre y gratuito, disponible bajo la Licencia pública general de GNU. • Se le puede considerar como una alternativa firme, potente y rápida a Photoshop para muchos usos.[1] 19 GIMP https://www.gimp.org/
- 20. www.usat.edu.pe • Descarga e instalación –https://www.gimp.org/downloads/ 20 GIMP • Seleccionar la segunda opción • Adicional, puede descargar el archivo de ayuda en español (esta en la misma página, mas abajo) • Seguir los pasos de instalación
- 21. www.usat.edu.pe • Manejo del entorno • Ejercicios básicos 21 Demostración de uso del programa
- 22. www.usat.edu.pe • Curso de GIMP en video (ver) • Tutorial Oficial español (ver) • Manual GIMP –Español (ver) 22 Revisar Manuales
- 23. www.usat.edu.pe • Realizar un buen producto de diseño gráfico implica conocer varios aspectos del diseño y mucha creatividad • Existen herramientas de software libre muy potentes que permitirán realizar productos de diseño gráfico igual que herramientas de pago. 23 Conclusiones
- 24. www.usat.edu.pe • Práctica: Edición y retoque de imágenes utilizando Inkscape y GIMP 24 Próxima sesión
- 25. www.usat.edu.pe 25 • [1] C. Jiménez y E. Arrieta, «Curso de Introducción al Diseño,» Platzi, [En línea]. Disponible: https://platzi.com/cursos/fundamentos-diseno/. [Último acceso: Abril 2019]. • [2] EcuRed, «Gimp,» 2019. [En línea]. Disponible : https://www.ecured.cu/Gimp. [Último acceso: 31 marzo 2020]. • [3] M. Davies, «GIMP 2.10 - Tutorial para principiantes,» 27 agosto 2018. [En línea]. Disponible: https://daviesmediadesign.com/es/20-gimp-2-10-tutorials-for- beginners/. [Último acceso: 31 marzo 2020]. • [4] J. Sánchez y J. Ruiz, «Manual de Gimp,» [En línea]. Disponible: https://www.edu.xunta.gal/centros/cafi/aulavirtual2/pluginfile.php/8794/mod_reso urce/content/0/Sesion_5/ManualGIMP.pdf. [Último acceso: 31 marzo 2020]. Referencias