Elementos de la Composición. Fundamentos de composición. Ana Maria Arrieta León Magister en Diseño y Creación Interactiva
Este documento se presenta como recurso para todos aquellos interesados en comunicar información, ideas, pensamientos y conocimientos a través de la expresión gráfica. En este módulo se estudian los elementos constitutivos de una composición gráfica: Imagen, texto, color, forma, plano y retículas.
Los elementos de la composición son los materiales que se usan para crear piezas gráficas: imágenes, textos, formas, colores, planos, retículas.
Aplicando principios y reglas compositivas, se establecen relaciones entre dichos elementos que permiten la construcción y transmisión de mensajes.
Introducción
Elementos de la composici贸n
Elementos de la composici贸n
Plano o formato Ret铆culas Forma Imagen Texto o tipograf铆a Color
El plano o formato Es el espacio o soporte sobre el cual se disponen los elementos de la composici贸n.
Puede ser una p谩gina, una pantalla, una pared, una valla. El formato puede presentar diversas formas.
Valla publicitaria en barrio de Londres del รกlbum Celebration de Madonna
Disponible en: http://madonnalicious.typepad.com/madonnalicious/celebration/
Formato: Valla
Formato: Pantalla
Captura de Pantalla del Home del sitio web del artista Mr. Brainwash
Disponible en: http://www.mrbrainwash.com/
Formato: Pared
Foto de grafitti en una calle en Bogotรก
Composici贸n hecha sobre papel artesanal
Formato Papel
Disponible en: http://lindalewisatcreativeartworks.blogspot.com/2011/07/handmade-paper-posters-rock.html
Elementos de la composición
Retículas
Plano o formato Retículas Forma Imagen Texto o tipografía Color
Las retĂculas Presentan diversas formas para diagramar el plano o formato. Las retĂculas proporcionan una ruta a la composiciĂłn, distribuyendo y conectando los elementos que constituyen el mensaje.
Las retículas Si bien existen varios tipos en este caso nos Concentraremos en la:
retícula modular una muy buena guía para distribuir el espacio e integrar, textos, imágenes y formas a la composición.
Módulo: Unidad individual de espacio que repetida a lo largo del formato crea las columnas y las filas.
Fila
Zona espacial: Grupo de módulos que conforman diferentes campos. A cada campo se le puede asignar un rol para mostrar información.
Margen:
Retícula Modular: Componentes
Columna
Espacio entre el borde del plano o formato y el contenido el cual rodea y define el área donde imágenes, formas y textos son organizados.
Ej: un campo horizontal puede ser reservado para imágenes y el campo siguiente se puede utilizar para columnas de texto.
En los siguientes ejemplos de uso de la retícula modular, los módulos sombreados con gris representan formas e imágenes y los módulos en blanco representan áreas de texto y áreas libres.
Retícula Modular: Distribución de los elementos de la composición
Ret铆cula Modular: Distribuci贸n de los elementos de la composici贸n
Ret铆cula Modular: Distribuci贸n de los elementos de la composici贸n
Ret铆cula Modular: Distribuci贸n de los elementos de la composici贸n
Elementos de la composición
Forma
Plano o formato Retículas Forma Imagen Texto o tipografía Color
Figura que representa un cuerpo: Triangulo, cuadrado, círculo, rectángulo. Características Contorno: diferencia y separa la forma del plano.
Contenido: puede ser un color, una textura, una imagen o texto. Tamaño: Dimensión de la forma.
Forma • • • • •
Tipos Geométricas Orgánicas Rectilíneas Manuscritas Accidentales
Una forma se considera geomĂŠtrica si su contorno es regularizado, si sus medidas externas son similares matemĂĄticamente y si presenta bordes angulares y definidos.
Forma geomĂŠtrica
Forma circular sin contorno y relleno de color.
Forma cuadrada sin contorno y relleno con textura.
Forma estrella con contorno y relleno con patr贸n que se repite.
Formas geom茅tricas
Formas irregulares, complejas y altamente diferenciadas son consideradas orgรกnicas.
Formas orgรกnicas
Elementos de la composición
Imagen
Plano o formato Retículas Forma Imagen Texto o tipografía Color
Realizada directamente de la realidad a través de dispositivos específicos (cámaras fotográficas y de video).
1
Obtenidas por la reproducción de originales hechas por otros medios (filme, diseño, gráfica, pintura, video).
2
Generadas únicamente con recurso de computación derivadas de la imaginación o de la realidad, incluso imitación, invención o simulación (ilustraciones y animaciones 2D y 3D).
3
Las resultantes de la manipulación (reconstrucción, combinación o fusión de cualquiera de las formas anteriores) (animación + filme, fotografía + animación, video + fotografía).
4
Imagen Formas de generación
Forma de generaci贸n
1
Fotograf铆a
Fotograma extraído de la película Viaje a la Luna.
Diseño gráfico
http://es.wikipedia.org/wiki/Viaje_a_la_Luna
http://www.youtube.com/watch?v=JwQZQygg3Lk
Dibujo http://bastiondorado.blogspot.com/2011/07/geisha.html
Forma de generación
2
Imagen generada a partir de fotografiar el entorno del mundo virtual del video juego SPORE.
Forma de generación
3
Imagen generada a partir de la manipulación con software especializado para ello (photoshop – gimp - Illustrator) http://www.cibermitanios.com.ar/2008/01/250-animales-que-no-existirian-sin.html
Forma de generaci贸n
4
Fotograma capturado del video de la presentaci贸n de los MTV movie awards 2006, Madonna se presenta con la banda virtual Gorillaz, se combinan aqu铆 el video y la animaci贸n 3D. Video disponible en el siguiente enlace: http://www.youtube.com/watch?v=n4baCx8TovY
Elementos de la composición
Texto
Plano o formato Retículas Forma Imagen Texto o tipografía Color
Cuando se habla de la cultura del impreso, se hace referencia al texto como dispositivo de transmisión de información, es a través del texto como se hace desde hace siglos la transmisión del conocimiento y de la información. La transformación de los procesos comunicativos obliga al texto a contraer su extensión, tanto así que ya fácilmente expresamos ideas e información en 140 caracteres (caso del microblogueo). Al emprender la tarea de una composición visual se entiende que el poder de la tipografía se encuentra en expresar y transmitir mensajes en tan sólo una frase, una palabra, una letra o un signo.
Texto
La tipografía en el contexto de la composición visual es el arte y la técnica de seleccionar y disponer signos, letras, palabras, frases y textos con el objeto de transmitir un mensaje.
Lo anterior resulta totalmente obvio, es de hecho una fortaleza del texto pero se debe tener en cuenta que de lo que este manual trata es de la ejercitación del lenguaje visual en el que el texto pierde su densidad, se vuelve liviano, concreto y ligero pero CONTUNDENTE al momento de construir y transmitir el mensaje.
En el ejercicio de la composición visual y la construcción de imágenes se aprovecha del texto además de su cualidad informativa su cualidad decorativa.
Texto
Categorías de los tipos o familias tipográficas. Existe gran cantidad de diferentes estilos tipográficos, pero todos ellos se pueden agrupar en los siguientes seis grupos:
Oldstyle Modern Sans serif
Script
Texto
Decorativa
Diferencias y similitudes de las familias tipogrĂĄficas.
Conocer las particularidades de la tipografĂa es muy importante, porque el estilo de texto es un elemento fundamental al momento de fortalecer y contextualizar un tema o una idea.
Texto
Poster inspirado en la pelĂcula American History sobre el Neonazismo en Estados Unidos.
Texto
Tomado de http://www.flickr.com/photos/imendezgd_portafolio/4657944975/in/photostream/
Stress: Tensión entre los strocks
Serifas
Elementos de la tipografía
P m Strok
Grosor de los stroks
Las familias agrupan fuentes que comparten las mismas características en sus elementos.
A continuación se presentan las características d de los elementos en cada familia tipográfica.
Elementos de la tipografía
Serifa pronunciada Serifa inclinada: para las min煤sculas
Stress diagonal
Oldstyle Moderada transici贸n del grosor en los strokes
Fuentes de la misma familia Goudy
Texto: Oldstyle
Garamond
Times Palatino
Baskerville
Stress verticall
Serifa delgada y horizontal: para las min煤sculas
Modern Trancisi贸n radical en el grosor de los strokes
Fuentes de la misma familia
Bodoni Texto: Modern
Times Bold
Onyx
Serifa horizontal y gruesa: para las min煤sculas
Stress verticall
Slab serif Trancisi贸n radical en el grosor de los strokes
Fuentes de la misma familia Clarendon
Bodoni Texto: Slab Serif
Copse
Typo slab serif
No hay stress por que no hay presencia de stroks
Sin serifas
Sans serif El grosor de los stroks no varĂa, se mantiene regular.
Fuentes de la misma familia Anonymous
Bonveno Texto: Sans Serif
Lilly
Cursiva
En esta familia se incluyen todas aquellas fuentes con apariencia de haber sido creadas Manualmente, se agrupan en esta familia las Cursivas y las que tienden a ser cursivas pero Caracteres aparecen separados.
Fuentes de la misma familia
Mystral Blackadder Texto: Cursiva
Vardian Script
Decorativa La fuentes decorativas son fĂĄciles de identificar, divertidas, frescas y llamativas; sin embrago esta Ăşltima cualidad tiene como consecuencia un uso moderado de este tipo de fuentes.
Fuentes de la misma familia
Waker Sybil Green Texto: Decorativa
Earwing factory
Hurry up
En el ejercicio de la composiciรณn visual y la construcciรณn de imรกgenes se aprovecha del texto ademรกs de su cualidad Informativa, su cualidad decorativa.
como elemento informativo Texto
Funciรณn como elemento decorativo
Texto
Una de las tareas más importantes al momento de componer es dar a la información un orden que permita al espectador una ruta que conecte Los diferentes textos utilizados. Este orden se denomina jerarquía de la información, y se basa en el nivel de importancia asignado a cada parte del texto.
Texto Como Elemento Informativo:
Jerarquía
La Importancia permite al observador Identificar: el texto que debe ser leído primero, segundo, tercero…
Texto Como Elemento Informativo: Jerarquía
Cambio en el tamaño del texto
Dar más peso al texto aplicando el formato negrita
Cambio en la alineación
Formas de generar jerarquía
Texto Como Elemento Informativo: Jerarquía
Cambio en el ritmo del texto
Cambio del espaciado entre los caracteres o entre las frases
Formas de generar jerarquía
Cambio de la postura de los caracteres o de las frases, puede ser aplicando el formato cursiva o alterando la posición a través de
Texto Como Elemento Informativo: JerarquĂa
Cambio en el valor del color
Contraste del texto con el fondo
Formas de generar jerarquĂa
Al momento de usar fuentes dentro de una composici贸n, tenga en cuenta:
Para cuerpos de texto use fuentes con serifas ; las gu铆an el ojo serifas favoreciendo la lectura. Tips
Al momento de usar fuentes dentro de una composici贸n, tenga en cuenta:
Las fuentes decorativas son 煤tiles al momento de contextualizar el mensaje.
Tips
Al momento de usar fuentes dentro de una composici贸n, tenga en cuenta:
Script
Las son siempre elegantes, pero deben ser ser usados de manera moderada al igual que las decorativas.
Tips
Elementos de la composición
Color
Plano o formato Retículas Forma Imagen Texto o tipografía Color
Percepci贸n visual generada por la luz. A trav茅s de esta percepci贸n se interpretan y distinguen diferentes longitudes de onda que se materializan ante nosotros como colores.
Color
Matiz: Identidad del color. Rojo, verde, azul.
Saturaci贸n: Intensidad del color. Viveza/palidez/
Valor: Luminosidad u oscuridad del color.
Caracter铆sticas del color
Colores cálidos
Características del color
Colores fríos
Temperatura
AnĂĄlogos: Colores adyacentes.
Relaciones del color
Complementarios: Dos colores que aparecen opuestos.
Triada: Conformada por 3 colores a 120° uno del otro
Bibliografía Pujagut, Jaume y colaboradores. Desarrollo de un proyecto gráfico. 2010. Editorial Index Book. Barcelona, España.
Samara, Timothy. Design Elements: A graphic style manual: Undesrtanding the rules and broken them. 2007. Editorial Rockport. New York, U.S.A.
Scott, Robert G. Fundamentos del diseño. 1984. Editorial Victor Leru S. Buenos Aires, Argentina. Williams, Robin. The non-designers design book: Design and typographic principles for the visual novice. 2004. Peachpit press. California, U.S.A.
Webgrafía Madonnalicious http://madonnalicious.typepad.com/madonnalicious/celebration/ Mr. BrainWash http://www.mrbrainwash.com/ Blog: Creative art works http://lindalewisatcreativeartworks.blogspot.com/2011/07/handmade-paper-posters-rock.html Película: Viaje a la Luna http://es.wikipedia.org/wiki/Viaje_a_la_Luna Video: The Time Black eyed peas http://www.youtube.com/watch?v=JwQZQygg3Lk Blog: Bastion dorado http://bastiondorado.blogspot.com/2011/07/geisha.html Video: Madonna + Gorillaz http://www.youtube.com/watch?v=n4baCx8TovY 250 animales que no existirían sin Photoshop http://www.cibermitanios.com.ar/2008/01/250-animales-que-no-existirian-sin.html Poster inspirado en la prlícula: American X http://www.flickr.com/photos/imendezgd_portafolio/4657944975/in/photostream/