SlideShare una empresa de Scribd logo
1 de 9
Descargar para leer sin conexión
A2
Composición
gráfica básica
Percepción Visual, aplicación práctica
Beatriz García Fernández
UOC Grado Multimedia · Abril 2012
percepción
visual



Principios perceptivos y leyes visuales                  contrastes compositivos utilizados según Dontis
utilizados según gestalt
                                                         Para darle un toque de viveza y de dinamismo he utilizado
Para realizar el icono para la aplicación me he basado   las siguientes características compositivas:
en los siguientes principios y leyes:
                                                         ·Inestabilidad: genera inquietud y hace que los elementos
·  rincipio perceptivo de reificación, creando la
  P                                                        de la composición tengan un papel más activo.
  percepción de un elemento sin dibujarlo (en el
  caso del icono realizado se sugiere la forma de un     · simetría: realza lo inesperado y le quita clasicismo.
                                                          A
  smartphone).                                           · La espontaneidad de las formas geométricas (tamaños,
·  ey visual del parecido: he unificado varios
  L                                                         orientación y distribución) y la actividad (la inclinación
  elementos vectoriales regulares como círculos y           y el degradado) sugieren movimiento y viveza.
  estrellas a otros sin forma regular utilizando el      ·  leatoriedad de las formas: hace de la composición algo
                                                           A
  mismo color (en este caso, el mismo degradado).          casual y vivo.

                                                         · Acento: el smartphone de color plano destaca sobre la
                                                             mancha vectorial de color degradado, que a su vez también
                                                             crea un acento de color.
percepción
visual



colores utilizados

Los colores seleccionados han sido los siguientes:




  #FFF                     #0099FF                 #CC00FF
  RGB (0, 0, 0)            RGB (0, 153, 255)       RGB (204, 0, 255)



Los colores de tono azul y de tono magentoso tienen
una luminosidad y una saturación muy parecida, siendo
el color azul un color más frío que el color lila que tiene
componentes magentosos que le dan más calidez.
percepción
visual



peso visual, puntos de atracción
y direccionalidad

Tanto la direccionalidad como el peso visual vienen
dados por la inclinación y por la irregularidad de las
formas, potenciado con la utilización de un degradado
circular que centra la atención en un punto.
iconos
finales


versión 3 tintas
                   versión 1 tinta en negativo   miniaturas
iconos
finales


diferentes versiones
de color del icono


                       Siempre que no haya rivalidad de colores entre el
                       icono y su fondo, se utilizará la versión original.

                       En el caso que exista confrontación de colores,
                       el icono se puede adaptar al fondo sobre el que
                       se coloque, tanto en versión positiva como en
                       negativa.
datos
iptc


datos básicos IPTC DEL
ICONO DE LA APLICACIÓN

Autor
Beatriz García Fernández
Título
Aplicación_descarga_vectores
Descripción
Icono realizado para aplicación de descarga de elementos
vectoriales desde una aplicación móvil.
Aviso de Copyright
Este obra está bajo una licencia de Creative Commons
Reconocimiento-NoComercial-CompartirIgual 3.0
Términos de Uso de Derechos
Visitar el siguiente link para conocer los términos de uso de la
imagen: http://creativecommons.org/licenses/by-nc-sa/3.0/
comentario




La versión que iba a ser la definitiva para el      Comparación de miniaturas de las
icono estaba compuesto por diferentes elementos     diferentes versiones. Al compararlas
                                                    se demuestra que el icono formado
vectoriales con degradados realizados a partir
                                                    por la superposición de elementos
de los 2 colores principales, dándole volumen.      pierde legibilidad.
Pero a la hora de realizar la miniatura se perdía
legibilidad ya que la superposición de elementos
creaba confusión (sobretodo comparándola con
la versión en negativo que era visualmente más
potente).

Así que a partir de ese momento decidí eliminar
la superposición de los elementos y unificarlo
en una misma forma y aplicarle el degradado de
forma común, sacrificando el volumen por una
imagen plana y bidimensional, pero más potente.
DG A2: Composición gráfica básica (percepción visual, aplicación práctica)

Más contenido relacionado

La actualidad más candente

Tecnología gráficos digitales
Tecnología gráficos digitalesTecnología gráficos digitales
Tecnología gráficos digitalesNelson Rico
 
Fotografias cau copia (3)
Fotografias cau   copia (3)Fotografias cau   copia (3)
Fotografias cau copia (3)RubiahCau24
 
Composición estructura del campo visual
Composición estructura del campo visualComposición estructura del campo visual
Composición estructura del campo visualCLP12
 
diseño
 diseño diseño
diseñoeder
 
La imagen. Lectura de imagen fija. Comunicación Audiovisual. Fotografía.
La imagen. Lectura de imagen fija. Comunicación Audiovisual.  Fotografía.La imagen. Lectura de imagen fija. Comunicación Audiovisual.  Fotografía.
La imagen. Lectura de imagen fija. Comunicación Audiovisual. Fotografía.Isabel Arenas Fonollosa
 
Ud 1 percepcion y lectura de imagenes
Ud 1 percepcion y lectura de imagenesUd 1 percepcion y lectura de imagenes
Ud 1 percepcion y lectura de imagenesJoseanjel Gonzalo
 
Aspectos relevantes de las imágenes
Aspectos relevantes de las imágenesAspectos relevantes de las imágenes
Aspectos relevantes de las imágenesDavid Ricaurte
 
Taller lenguaje audiovisual
Taller lenguaje audiovisualTaller lenguaje audiovisual
Taller lenguaje audiovisualBelén Ferreira
 
Percepcionylacomunicacionvisual
PercepcionylacomunicacionvisualPercepcionylacomunicacionvisual
Percepcionylacomunicacionvisualanahmsi
 

La actualidad más candente (16)

Diseño
DiseñoDiseño
Diseño
 
Tecnología gráficos digitales
Tecnología gráficos digitalesTecnología gráficos digitales
Tecnología gráficos digitales
 
Presentacion imagen
Presentacion imagenPresentacion imagen
Presentacion imagen
 
Fotografias cau copia (3)
Fotografias cau   copia (3)Fotografias cau   copia (3)
Fotografias cau copia (3)
 
La imagen fija
La imagen fijaLa imagen fija
La imagen fija
 
Lenguaje visual
Lenguaje visualLenguaje visual
Lenguaje visual
 
Gabriel solis
Gabriel solis Gabriel solis
Gabriel solis
 
Imagen y Percepción
Imagen y PercepciónImagen y Percepción
Imagen y Percepción
 
Composición estructura del campo visual
Composición estructura del campo visualComposición estructura del campo visual
Composición estructura del campo visual
 
diseño
 diseño diseño
diseño
 
La imagen. Lectura de imagen fija. Comunicación Audiovisual. Fotografía.
La imagen. Lectura de imagen fija. Comunicación Audiovisual.  Fotografía.La imagen. Lectura de imagen fija. Comunicación Audiovisual.  Fotografía.
La imagen. Lectura de imagen fija. Comunicación Audiovisual. Fotografía.
 
Ud 1 percepcion y lectura de imagenes
Ud 1 percepcion y lectura de imagenesUd 1 percepcion y lectura de imagenes
Ud 1 percepcion y lectura de imagenes
 
El Lenguaje Visual
El Lenguaje VisualEl Lenguaje Visual
El Lenguaje Visual
 
Aspectos relevantes de las imágenes
Aspectos relevantes de las imágenesAspectos relevantes de las imágenes
Aspectos relevantes de las imágenes
 
Taller lenguaje audiovisual
Taller lenguaje audiovisualTaller lenguaje audiovisual
Taller lenguaje audiovisual
 
Percepcionylacomunicacionvisual
PercepcionylacomunicacionvisualPercepcionylacomunicacionvisual
Percepcionylacomunicacionvisual
 

Similar a DG A2: Composición gráfica básica (percepción visual, aplicación práctica)

fndamentos d diseño grafico.pdf
fndamentos d diseño grafico.pdffndamentos d diseño grafico.pdf
fndamentos d diseño grafico.pdfFredgerard
 
El dibujo vectorial en aplicaciones y videojuegos
El dibujo vectorial en aplicaciones y videojuegosEl dibujo vectorial en aplicaciones y videojuegos
El dibujo vectorial en aplicaciones y videojuegosMaria de la luz Ayometzi
 
Guia Elementos Del DiseñO
Guia Elementos  Del DiseñOGuia Elementos  Del DiseñO
Guia Elementos Del DiseñOcreaticsnetwork
 
Manual Coreldraw Yessy Lucas Carrasco
Manual Coreldraw Yessy Lucas CarrascoManual Coreldraw Yessy Lucas Carrasco
Manual Coreldraw Yessy Lucas CarrascoCECYTEM
 
Espacio en el mensaje publicitario
Espacio en el mensaje publicitarioEspacio en el mensaje publicitario
Espacio en el mensaje publicitariochupipao
 
Factores de influencia en el diseño grafico
Factores de influencia en el diseño graficoFactores de influencia en el diseño grafico
Factores de influencia en el diseño graficoMariaBelenG6
 
Elementos de la imagen
Elementos de la imagenElementos de la imagen
Elementos de la imagenEva Avila
 
Factores de influencia en el diseño grafico
Factores de influencia en el diseño graficoFactores de influencia en el diseño grafico
Factores de influencia en el diseño graficoPaul Miniguano Miniguano
 
Revolución digital ecologico
Revolución digital  ecologicoRevolución digital  ecologico
Revolución digital ecologicoBrenda Ivonne
 
Patrones interactivos con Material Design
Patrones interactivos con Material DesignPatrones interactivos con Material Design
Patrones interactivos con Material DesignMauricio Angulo
 

Similar a DG A2: Composición gráfica básica (percepción visual, aplicación práctica) (20)

Examen g
Examen gExamen g
Examen g
 
fndamentos d diseño grafico.pdf
fndamentos d diseño grafico.pdffndamentos d diseño grafico.pdf
fndamentos d diseño grafico.pdf
 
El dibujo vectorial en aplicaciones y videojuegos
El dibujo vectorial en aplicaciones y videojuegosEl dibujo vectorial en aplicaciones y videojuegos
El dibujo vectorial en aplicaciones y videojuegos
 
Guia Elementos Del DiseñO
Guia Elementos  Del DiseñOGuia Elementos  Del DiseñO
Guia Elementos Del DiseñO
 
Manual Coreldraw Yessy Lucas Carrasco
Manual Coreldraw Yessy Lucas CarrascoManual Coreldraw Yessy Lucas Carrasco
Manual Coreldraw Yessy Lucas Carrasco
 
Umberto eco
Umberto ecoUmberto eco
Umberto eco
 
Espacio en el mensaje publicitario
Espacio en el mensaje publicitarioEspacio en el mensaje publicitario
Espacio en el mensaje publicitario
 
Factores de influencia en el diseño grafico
Factores de influencia en el diseño graficoFactores de influencia en el diseño grafico
Factores de influencia en el diseño grafico
 
Imagenyforma
ImagenyformaImagenyforma
Imagenyforma
 
Estructura y diseño de un sitio web
Estructura y diseño de un sitio webEstructura y diseño de un sitio web
Estructura y diseño de un sitio web
 
Trabajo practico nº6
Trabajo practico nº6Trabajo practico nº6
Trabajo practico nº6
 
Trabajo practico nº6
Trabajo practico nº6Trabajo practico nº6
Trabajo practico nº6
 
Trabajo practico nº6
Trabajo practico nº6Trabajo practico nº6
Trabajo practico nº6
 
Elementos de la imagen
Elementos de la imagenElementos de la imagen
Elementos de la imagen
 
Factores de influencia en el diseño grafico
Factores de influencia en el diseño graficoFactores de influencia en el diseño grafico
Factores de influencia en el diseño grafico
 
IlustracióN Vectorial1
IlustracióN Vectorial1IlustracióN Vectorial1
IlustracióN Vectorial1
 
Diseño grafico
Diseño graficoDiseño grafico
Diseño grafico
 
Revolución digital ecologico
Revolución digital  ecologicoRevolución digital  ecologico
Revolución digital ecologico
 
Presentation1
Presentation1Presentation1
Presentation1
 
Patrones interactivos con Material Design
Patrones interactivos con Material DesignPatrones interactivos con Material Design
Patrones interactivos con Material Design
 

Más de Bea Garcia Fernandez

AI PRÁCTICA: Propuesta de arquitectura para una web
AI PRÁCTICA: Propuesta de arquitectura para una webAI PRÁCTICA: Propuesta de arquitectura para una web
AI PRÁCTICA: Propuesta de arquitectura para una webBea Garcia Fernandez
 
AI PAC02: Evaluación de la arquitectura de la información de webs
AI PAC02: Evaluación de la arquitectura de la información de websAI PAC02: Evaluación de la arquitectura de la información de webs
AI PAC02: Evaluación de la arquitectura de la información de websBea Garcia Fernandez
 
AI Pac01: Arquitectura de la información
AI Pac01: Arquitectura de la informaciónAI Pac01: Arquitectura de la información
AI Pac01: Arquitectura de la informaciónBea Garcia Fernandez
 
FEM PRACTICA: Análisis crítica de aplicaciones interactivas: Facebook
FEM PRACTICA: Análisis crítica de aplicaciones interactivas: FacebookFEM PRACTICA: Análisis crítica de aplicaciones interactivas: Facebook
FEM PRACTICA: Análisis crítica de aplicaciones interactivas: FacebookBea Garcia Fernandez
 
DG A1 Utilización de imágenes digitales, derechos de autor y propiedad intele...
DG A1 Utilización de imágenes digitales, derechos de autor y propiedad intele...DG A1 Utilización de imágenes digitales, derechos de autor y propiedad intele...
DG A1 Utilización de imágenes digitales, derechos de autor y propiedad intele...Bea Garcia Fernandez
 
PAC2_FEM: Origen y vigencia del multimedia
PAC2_FEM: Origen y vigencia del multimediaPAC2_FEM: Origen y vigencia del multimedia
PAC2_FEM: Origen y vigencia del multimediaBea Garcia Fernandez
 

Más de Bea Garcia Fernandez (9)

Proyecto final Postgrado UX
Proyecto final Postgrado UXProyecto final Postgrado UX
Proyecto final Postgrado UX
 
AI PRÁCTICA: Propuesta de arquitectura para una web
AI PRÁCTICA: Propuesta de arquitectura para una webAI PRÁCTICA: Propuesta de arquitectura para una web
AI PRÁCTICA: Propuesta de arquitectura para una web
 
AI PAC02: Evaluación de la arquitectura de la información de webs
AI PAC02: Evaluación de la arquitectura de la información de websAI PAC02: Evaluación de la arquitectura de la información de webs
AI PAC02: Evaluación de la arquitectura de la información de webs
 
AI Pac01: Arquitectura de la información
AI Pac01: Arquitectura de la informaciónAI Pac01: Arquitectura de la información
AI Pac01: Arquitectura de la información
 
FEM PRACTICA: Análisis crítica de aplicaciones interactivas: Facebook
FEM PRACTICA: Análisis crítica de aplicaciones interactivas: FacebookFEM PRACTICA: Análisis crítica de aplicaciones interactivas: Facebook
FEM PRACTICA: Análisis crítica de aplicaciones interactivas: Facebook
 
FEM PAC3: Digital vs real
FEM PAC3: Digital vs realFEM PAC3: Digital vs real
FEM PAC3: Digital vs real
 
DG A1 Utilización de imágenes digitales, derechos de autor y propiedad intele...
DG A1 Utilización de imágenes digitales, derechos de autor y propiedad intele...DG A1 Utilización de imágenes digitales, derechos de autor y propiedad intele...
DG A1 Utilización de imágenes digitales, derechos de autor y propiedad intele...
 
PAC2_FEM: Origen y vigencia del multimedia
PAC2_FEM: Origen y vigencia del multimediaPAC2_FEM: Origen y vigencia del multimedia
PAC2_FEM: Origen y vigencia del multimedia
 
FEM Manovich
FEM ManovichFEM Manovich
FEM Manovich
 

DG A2: Composición gráfica básica (percepción visual, aplicación práctica)

  • 1. A2 Composición gráfica básica Percepción Visual, aplicación práctica Beatriz García Fernández UOC Grado Multimedia · Abril 2012
  • 2. percepción visual Principios perceptivos y leyes visuales contrastes compositivos utilizados según Dontis utilizados según gestalt Para darle un toque de viveza y de dinamismo he utilizado Para realizar el icono para la aplicación me he basado las siguientes características compositivas: en los siguientes principios y leyes: ·Inestabilidad: genera inquietud y hace que los elementos · rincipio perceptivo de reificación, creando la P de la composición tengan un papel más activo. percepción de un elemento sin dibujarlo (en el caso del icono realizado se sugiere la forma de un · simetría: realza lo inesperado y le quita clasicismo. A smartphone). · La espontaneidad de las formas geométricas (tamaños, · ey visual del parecido: he unificado varios L orientación y distribución) y la actividad (la inclinación elementos vectoriales regulares como círculos y y el degradado) sugieren movimiento y viveza. estrellas a otros sin forma regular utilizando el · leatoriedad de las formas: hace de la composición algo A mismo color (en este caso, el mismo degradado). casual y vivo. · Acento: el smartphone de color plano destaca sobre la mancha vectorial de color degradado, que a su vez también crea un acento de color.
  • 3. percepción visual colores utilizados Los colores seleccionados han sido los siguientes: #FFF #0099FF #CC00FF RGB (0, 0, 0) RGB (0, 153, 255) RGB (204, 0, 255) Los colores de tono azul y de tono magentoso tienen una luminosidad y una saturación muy parecida, siendo el color azul un color más frío que el color lila que tiene componentes magentosos que le dan más calidez.
  • 4. percepción visual peso visual, puntos de atracción y direccionalidad Tanto la direccionalidad como el peso visual vienen dados por la inclinación y por la irregularidad de las formas, potenciado con la utilización de un degradado circular que centra la atención en un punto.
  • 5. iconos finales versión 3 tintas versión 1 tinta en negativo miniaturas
  • 6. iconos finales diferentes versiones de color del icono Siempre que no haya rivalidad de colores entre el icono y su fondo, se utilizará la versión original. En el caso que exista confrontación de colores, el icono se puede adaptar al fondo sobre el que se coloque, tanto en versión positiva como en negativa.
  • 7. datos iptc datos básicos IPTC DEL ICONO DE LA APLICACIÓN Autor Beatriz García Fernández Título Aplicación_descarga_vectores Descripción Icono realizado para aplicación de descarga de elementos vectoriales desde una aplicación móvil. Aviso de Copyright Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial-CompartirIgual 3.0 Términos de Uso de Derechos Visitar el siguiente link para conocer los términos de uso de la imagen: http://creativecommons.org/licenses/by-nc-sa/3.0/
  • 8. comentario La versión que iba a ser la definitiva para el Comparación de miniaturas de las icono estaba compuesto por diferentes elementos diferentes versiones. Al compararlas se demuestra que el icono formado vectoriales con degradados realizados a partir por la superposición de elementos de los 2 colores principales, dándole volumen. pierde legibilidad. Pero a la hora de realizar la miniatura se perdía legibilidad ya que la superposición de elementos creaba confusión (sobretodo comparándola con la versión en negativo que era visualmente más potente). Así que a partir de ese momento decidí eliminar la superposición de los elementos y unificarlo en una misma forma y aplicarle el degradado de forma común, sacrificando el volumen por una imagen plana y bidimensional, pero más potente.