Diferencia entre revisiones de «LC1 2010»

De Casiopea
Sin resumen de edición
 
(No se muestran 11 ediciones intermedias de 5 usuarios)
Línea 1: Línea 1:
{{Curso
{{Curso
|Nombre=Lenguaje Computacional 1
|Asignaturas Relacionadas=Lenguaje Computacional 1
|Año=2010
|Tipo de Curso=Ramo Lectivo
|Tipo de Curso=Ramo Lectivo
|Profesores=Jorge Barahona
|Profesores=Jorge Barahona
|Ayudantes=Daisy Vera
|Ayudantes=Daisy Vera
|Alumnos=Andrea Cifuentes, Maria Jesus Abarca, Nicole Arce, Paulina Ávalos, Samira Bajbuj, Antonia Casali, Caterina Da Silva, Camila de la Vega, Consuelo Encina, Christopher Fattori, Constanza Muñoz, Carolina Nuñez, Daniela Pardo, Carla Renault, Alison Saravia, Bernardo Silva, Nicol Valenzuela, Camila Valenzuela
|Palabras Clave=lenguaje, diseño, imagen digital, web, edición, medios digitales
|Palabras Clave=lenguaje, diseño, imagen digital, web, edición, medios digitales
|Carreras Relacionadas=Diseño Gráfico
|Carreras Relacionadas=Diseño Gráfico
|Año=2010
|Nombre=Lenguaje Computacional 1
}}
}}
<div style="border: 1px solid #F6CECE; border-style: dashed; background-color: #ECF8E0; color: #6d6d72; padding: 1em;">
<div style="border: 1px solid #F6CECE; border-style: dashed; background-color: #ECF8E0; color: #6d6d72; padding: 1em;">
Línea 36: Línea 38:
Las imágenes de mapa de bits (bitmaps o imágenes raster) están formadas por una rejilla de celdas, a cada una de las cuales, denominada pixel (Picture Element, Elemento de Imagen), se le asigna un valor de color y luz propios, de tal forma que su agrupación crea la lectura de una imagen de tono continuo.
Las imágenes de mapa de bits (bitmaps o imágenes raster) están formadas por una rejilla de celdas, a cada una de las cuales, denominada pixel (Picture Element, Elemento de Imagen), se le asigna un valor de color y luz propios, de tal forma que su agrupación crea la lectura de una imagen de tono continuo.


'''Pixel:'''es una unidad de información, pero no una unidad de medida, ya que no se corresponde con un tamaño concreto. Un píxel puede ser muy pequeño (0.1 milímetros) o muy grande (1 metro).
'''Pixel:''' es una unidad de información, pero no una unidad de medida, ya que no se corresponde con un tamaño concreto. Un píxel puede ser muy pequeño (0.1 milímetros) o muy grande (1 metro).


Las características que posee una imagen Mapa de Bits son 4: Medida (en pixeles), Tamaño de Impresión, Modo y Extensión.
Las características que posee una imagen Mapa de Bits son 4: Medida (en pixeles), Tamaño de Impresión, Modo y Extensión.
Línea 48: Línea 50:
'''Resolución de las Imágenes'''<br>
'''Resolución de las Imágenes'''<br>
La resolución depende del medio en el que la imagen vaya a ser visualizada o tratada. Se puede hablar de resolución de un archivo digital, resolución de impresión, resolución de escaneado, etc.
La resolución depende del medio en el que la imagen vaya a ser visualizada o tratada. Se puede hablar de resolución de un archivo digital, resolución de impresión, resolución de escaneado, etc.
El tamaño y la resolución idóneos se definen según del tipo de soporte, por ejemplo: Web: 72 ppi,Impresión de imágenes en Diarios: 150 ppi, Impresión de imágenes en papeles de alta performance (satinados, estucados, etc.): 300 ppi.<br>
El tamaño y la resolución idóneos se definen según del tipo de soporte, por ejemplo: Web: 72 ppi, Impresión de imágenes en Diarios: 150 ppi, Impresión de imágenes en papeles de alta performance (satinados, estucados, etc.): 300 ppi.<br>


'''Resolución para medios digitales''' ''Tamaño en pixeles''<br>
'''Resolución para medios digitales''' ''Tamaño en pixeles''<br>
Línea 214: Línea 216:
===Infografía===
===Infografía===


La infografía es una representación más visual que la propia de los textos, en la que intervienen descripciones, narraciones o interpretaciones, presentadas de manera gráfica normalmente figurativa, que pueden o no coincidir con grafismos abstractos y/o sonidos. La infografía nació como un medio de trasmitir información gráficamente. Los mapas, gráficos, viñetas, etc. son infogramas, es decir unidades menores de la infografía, con la que se presenta una información completa aunque pueda ser complementaria o de sintesis.
La infografía es una representación más visual que la propia de los textos, en la que intervienen descripciones, narraciones o interpretaciones, presentadas de manera gráfica normalmente figurativa, que pueden o no coincidir con grafismos abstractos y/o sonidos. La infografía nació como un medio de trasmitir información gráficamente. Los mapas, gráficos, viñetas, etc. son infogramas, es decir unidades menores de la infografía, con la que se presenta una información completa aunque pueda ser complementaria o de síntesis.


Las infografías tienen la capacidad de contar una historia (story telling) muy usado en comunicación,  son muy importantes porque enriquecen el lenguaje de comunicación, se pueden expresar más cosas, permite sacar mayor provecho de los textos, basados en idiomas, sino que se relaciona con la iconografía, que es de carácter universal. Ejemplo: instructivos, explicaciones digitales, planos, etc.
Las infografías tienen la capacidad de contar una historia (story telling) muy usado en comunicación,  son muy importantes porque enriquecen el lenguaje de comunicación, se pueden expresar más cosas, permite sacar mayor provecho de los textos, basados en idiomas, sino que se relaciona con la iconografía, que es de carácter universal. Ejemplo: instructivos, explicaciones digitales, planos, etc.
Línea 221: Línea 223:


Publicidad, infografías, videos explicativos, planos (mapa metro de Londres ejemplo de abstracción)
Publicidad, infografías, videos explicativos, planos (mapa metro de Londres ejemplo de abstracción)


==Clase nº 3, 06 julio:  Imagen digital para preprensa e Imagen digital para redes==
==Clase nº 3, 06 julio:  Imagen digital para preprensa e Imagen digital para redes==
Línea 879: Línea 878:
Estilos para establecer diferencias visuales y reconocer jerarquías.
Estilos para establecer diferencias visuales y reconocer jerarquías.
* En libros son [http://help.adobe.com/es_ES/InDesign/5.0/help.html?content=WS60910FA3-2BD7-449d-9904-05CFA551665D.html Estilos de Párrafo o Caracter].
* En libros son [http://help.adobe.com/es_ES/InDesign/5.0/help.html?content=WS60910FA3-2BD7-449d-9904-05CFA551665D.html Estilos de Párrafo o Caracter].
* En web son cascadas de estilos [http://en.wikipedia.org/wiki/Cascading_Style_Sheets CSS] para [http://es.wikipedia.org/wiki/HTML HTML].
* En web son cascadas de estilos [http://en.wikipedia.org/wiki/Cascading_Style_Sheets CSS] para [http://es.wikipedia.org/wiki/HTML HTML]. ''Ver'' [http://www.w3.org/Style/Examples/011/firstcss W3C]
''Ver'' [http://www.w3.org/Style/Examples/011/firstcss W3C]


====Diseño de la Información====
====Diseño de la Información====
Línea 911: Línea 909:
* [http://www.dubberly.com/concept-maps/creating-concept-maps.html Hugh Dubberly]
* [http://www.dubberly.com/concept-maps/creating-concept-maps.html Hugh Dubberly]


==Clase nº 10, 24 agosto: Corrección trabajos de reproducción de Mapas==
===Fuentes===
Cuando un archivo se envía a imprimir (Prensa o impresión doméstica) los archivos deben estar con las tipografías trazados o incluir una carpeta con los archivos de las fuentes. 
Cuando se trazan las tipografías de un archivo se debe guardar un original con los textos editables.
En la industria cuando se mandan los archivos a prensa se debe prever las dificultades técnicas y de compatibilidad.
===Capas===
* Ordenadas según estructura de contenidos
* Para una mejor organización se pueden crear subcapas, un grupo de capas puede ser subsidiario.
''Ver''
* [http://es.wikipedia.org/wiki/Taxonom%C3%ADa Taxonomia] o Taxonomy
* Folksonomy [http://www.interacciones.com.ar/folksonomy-lo-que-se-viene/ Folksonomy]
* [http://es.wikipedia.org/wiki/Etiqueta_%28metadato%29 Tags o etiquetas]
===Dibujos de trazado===
* Dibujo de curvas
* Girar elementos
* Herramienta pluma
* Vértices y puntos de ancla
** Convertir punto de ancla
** Atajos con teclado para hacer rectas y ángulos de 90 grados. Restringir, el nodo se mueve en angulo recto.
* Unión de líneas
* Herramientas buscatrazos (Pathfinder)para fusionar imágenes
* Trazo (Stroke)
** Puntos de la linea
** Tipos de remates
** Uniones  en los vértices
** Líneas discontinuas
* Alinear
* Degradado
Hay acciones que no se deben hacer manualmente. Para ello se usan herramientas de transformación, se seleccionan varios elementos, así se modifican en serie con mayor precisión.
Recursos de dibujo muy usados en trabajos de imagen corporativa.
===Herramientas de textos===
Opciones para posicionar y modular la secuencia lineal de los textos





Revisión actual - 12:09 12 ago 2013


Asignatura(s)Lenguaje Computacional 1
Año2010
Tipo de CursoRamo Lectivo
ProfesoresJorge Barahona
Profesor(es) Ayudante(s)Daisy Vera
EstudiantesAndrea Cifuentes, Maria Jesus Abarca, Nicole Arce, Paulina Ávalos, Samira Bajbuj, Antonia Casali, Caterina Da Silva, Camila de la Vega, Consuelo Encina, Christopher Fattori, Constanza Muñoz, Carolina Nuñez, Daniela Pardo, Carla Renault, Alison Saravia, Bernardo Silva, Nicol Valenzuela, Camila Valenzuela
Palabras Clavelenguaje, diseño, imagen digital, web, edición, medios digitales
Carreras RelacionadasDiseño Gráfico"Diseño Gráfico" is not in the list (Arquitectura, Diseño, Magíster, Otra) of allowed values for the "Carreras Relacionadas" property.

Estudiantes




Índice de Contenidos

  1. Vectores v/s Bits
  2. Imagen digital para preprensa e Imagen digital para redes
  3. Tratamiento de la Imagen Digital desde la escánica.
  4. Sistemas y nomenclaturas generales de medición y modificación.
  5. Modificación de la Imagen digital.
  6. Aplicación de conceptos de foto mecánicos tradicionales.
  7. Aplicación de conceptos fotográficos básicos
  8. Fotografía digital y análoga.
  9. Conexión con otros programas.

Desarrollo de los Contenidos

Clase nº 1, 22 junio: Imágenes Mapa de Bits

Mapa de Bits

Las imágenes de mapa de bits (bitmaps o imágenes raster) están formadas por una rejilla de celdas, a cada una de las cuales, denominada pixel (Picture Element, Elemento de Imagen), se le asigna un valor de color y luz propios, de tal forma que su agrupación crea la lectura de una imagen de tono continuo.

Pixel: es una unidad de información, pero no una unidad de medida, ya que no se corresponde con un tamaño concreto. Un píxel puede ser muy pequeño (0.1 milímetros) o muy grande (1 metro).

Las características que posee una imagen Mapa de Bits son 4: Medida (en pixeles), Tamaño de Impresión, Modo y Extensión.

Las decisiones que determinan cada unos de estos valores deben ser tomadas en función del soporte y las técnicas de reproducción utilizadas para producir el diseño.

Ejemplo imagen de mapa de bits


Medida

Resolución de las Imágenes
La resolución depende del medio en el que la imagen vaya a ser visualizada o tratada. Se puede hablar de resolución de un archivo digital, resolución de impresión, resolución de escaneado, etc. El tamaño y la resolución idóneos se definen según del tipo de soporte, por ejemplo: Web: 72 ppi, Impresión de imágenes en Diarios: 150 ppi, Impresión de imágenes en papeles de alta performance (satinados, estucados, etc.): 300 ppi.

Resolución para medios digitales Tamaño en pixeles
PPI: pixel per inch, Pixeles por pulgada.
Esta resolución está muy ligada al concepto de resolución de pantalla en un monitor, referida al número de píxeles por pulgada existentes en la pantalla del monitor en el que se visualiza la imagen. Una configuración del monitor en alta resolución exhibirá más píxeles por pulgada, por lo que éstos serán más pequeños, permitiendo una mejor visualización de la imagen en pantalla. El tamaño de los píxeles dependerá del tamaño físico de la pantalla, medido en pulgadas. Las resoluciones de pantalla más comunes en la actualidad son 800x600 y 1024x768 píxeles.

Resolución para medios impresos Tamaño de impresión
DPI: doths per inch, Puntos por pulgada.
En trabajos con imágenes destinadas a la impresión se maneja el concepto de resolución de impresión, que se refiere a la capacidad máxima de discriminación que tiene una máquina de impresión, es decir, los puntos de tinta o toner que puede colocar una impresora u otro dispositivo de impresión dentro de una pulgada para imprimir la imagen. Cuantos más puntos, mejor calidad tendrá la imagen impresa.

La resolución de una imagen no debe ser nunca mayor que la del medio en el que se va a publicar, ya que es un exceso de información que no va a ser utilizada. En el extremo contrario, resoluciones menores que las del medio suelen producir una mala visualización o impresión, imágenes con efecto de "pixelado".

Modo

Bitmap: imagen que tiene sólo dos valores posibles de color, "prendido y apagado".

Escala de Grises: tiene un determinado número de valores de grises (depende de la cantidad de bits, 4 u 8) para componer una imagen.

Monotono: tiene un canal de color, una tinta que se aplica conforme a una curva.

Duotono: tiene dos canales de color, dos tintas que se aplican, cada una conforme a una curva.

RGB: (del inglés Red, Green, Blue) es un modelo de color basado en la síntesis aditiva, con el que es posible representar un color mediante la mezcla por adición de los tres colores luz primarios que son: el rojo, el verde y el azul.

CMYK: (Cyan, Magenta, Yellow y Key color [Black]) es un modelo de colores sustractivos que se utiliza en la impresión en colores.


Color expresado en frecuencia de bits
Tipos de imágenes de mapa de bits según su profundidad de color.

  • 1 bit por pixel: 21= 2 colores posibles por pixel (Modo BMP)
  • 4 bits por pixel: 22= 16 colores posibles por pixel (Modo Escala de Grises)
  • 8 bits por pixel: 28= 256 colores posibles por pixel (Modo Escala de Grises, Modo Color Indexado, admite formatos GIF y PNG)
  • 16 bits por pixel: 216 = 65.536 colores posibles por pixel (High Color)
  • 24 bits por pixel: 224= 16.777.216 colores posibles por pixel (True Color, Modo RGB 8 bits por canal, Modo Lab 8 bits por canal)
  • 32 bits por pixel: 232= 4.294.967.296 colores posibles por pixel (Modo CMYK)

Extensión

Existen diferentes extensiones dependiendo del soporte en que se reproducirá el archivo y el estado de original, intercambio y de compresión.

Definición de los diferentes tipos de extensión

BMP: Bits Maps Protocole es un formato estándar que Windows utiliza para almacenar imágenes independientes del dispositivo e independientes de la aplicación.


GIF: Graphic Interchange Format un formato común de las imágenes que aparecen en páginas Web. Los archivos GIF funcionan bien para dibujar líneas, imágenes con bloques de color sólido e imágenes con límites definidos entre colores. Los archivos GIF se comprimen, sin que se pierda información durante el proceso de compresión; una imagen descomprimida es exactamente igual que la imagen original. En un archivo GIF se puede especificar un color como transparente, de forma que la imagen tenga el color de fondo de cualquier página Web en la que se muestre. Una secuencia de imágenes GIF puede almacenarse en un único archivo para formar un GIF animado. Los archivos GIF almacenan como máximo 8 bits por píxel, por lo que se limitan a 256 colores.


JPG: Joint Photographic Experts Groupes un esquema de compresión ideal para el manejo de imágenes livianas. Durante el proceso de compresión se pierde información. Los archivos JPEG almacenan 24 bits por píxel, por lo que son capaces de mostrar más de 16 millones de colores. Los archivos JPEG no admiten transparencia ni animación.


PICT: es un formato de archivo gráficos introducido por el sistema original de Apple Macintosh, como su estándar de formato de metarchivo. Permite el intercambio de gráficos (tanto de mapa de bits y vectoriales ), y algo de apoyo limitado del texto, entre las aplicaciones de Mac, y el formato nativo de gráficos QuickDraw .


PNG: Portable Network Graphics es un formato gráfico basado en un algoritmo de compresión sin pérdida para bitmaps no sujeto a patentes. Este formato fue desarrollado en buena parte para solventar las deficiencias del formato GIF y permite almacenar imágenes con una mayor profundidad de contraste y otros importantes datos.


Photoshop: es un formato estándar de photoshop con soporte de capas, guarda toda la información de chanels, historial, capas, etc. que permite volver a ser editado.f


Photoshop EPS: Encapsulated PostScript es un formato compatible, archivo PostScript que satisface algunas restricciones adicionales. Estas restricciones intentan hacer más fácil a programas de software el incluir un archivo EPS dentro de otro documento PostScript.


RAW: (en español: crudo) formato que guarda toda la información binaria sin compresión, es un archivo digital de imágenes que contiene la totalidad de los datos de la imagen tal como ha sido captada por el sensor digital de la cámara fotográfica.


TIFF: Tagged Image File Format es un formato de archivo de imágenes con etiquetas. Esto se debe a que los ficheros TIFF contienen, además de los datos de la imagen propiamente dicha, "etiquetas" en las que se archiva información sobre las características de la imagen, que sirve para su tratamiento posterior. Estas etiquetas describen el formato de las imágenes almacenadas, que pueden ser de distinta naturaleza: Binarias (blanco y negro), Niveles de gris, Paleta de colores.


  • Extensiones usadas para archivos originales y de edición

Photoshop, Photoshop EPS, RAW, TIFF.

  • Extensiones usadas para archivos de impresión

Photoshop, Photoshop EPS, BMP, PICT, JPG, TIFF.

  • Extensiones usadas para archivos de intercambio, soportes digitales y web

BMP, PICT, GIF, JPG, PNG.

Conceptos aplicados

Fotomecánica: Se le llama fotomecánica a la técnica para obtener transparencias negativas o positivas de dibujos, fotografías y textos. Que servirán en primer lugar para hacer una copia exacta en la plancha, estando en pleno contacto con ella. Se le conoce también, como la técnica de elaboración de negativos y positivos para su reproducción por diferentes medios de impresión.

El llamado Negativo, se obtiene de películas fotosensibles que contienen el elemento sensible a la luz denominado: Alogenuro de Plata. Sales de Plata microscópica, obtenida de la misma plata aprovechando su propiedad de ennegrecimiento al contacto con la luz.

Las transparencias que se denominan fotolitos, son elementos indispensables para la impresión en talleres gráficos, utilizando diferentes técnicas: offset, huecograbado, serigrafía…

Con la nueva tecnología CTP llamada también directo a plancha aplicado al offset, elimina los fotolitos en los pasos de producción de prensa, aseguran un mejor registro en los trabajos.

Síntesis Aditiva
Síntesis Sustractiva
Pigmentos
Postcript
Pantone


Clase nº 2, 29 junio: Imagen Vectorial

Introducción: Situación actual del diseñador ante las herramientas computacionales
Porque usamos sistemas digitales, son la clave de los procesos productivos en diseño, en todo se usan las herramientas computacionales.
Afán de edición, producir cosas para ser reproducidas, parte del encargo, proceso del trabajo de imagen digital, llamado pre-prensa digital, todas las imágenes transferidas deben ser puestas en la plancha offset.

Imágenes vectoriales

Construidas con algoritmos matemáticos, tienen la gran capacidad de utilizar los sistemas postcript o pdf para imprimir en forma vectorial, los vectores formulaciones matemáticas, que pueden ser escalables, porque son exponenciales, cuando son enviadas a programas software de edición como Indesign se transforman en imagen de bits.
Hoy en día Indesign es un programa vectorial, cuando se manda a imprimir tiene partes en mapa de bits y vectores.
El programa por excelencia es Illustrator, se pueden usar en flash, y otros. También se pueden integrar imágenes, lo que se traduce en infografía. Por código html también puede hacer un vector.


Ejemplo imagen vectorial


Las características esenciales son 3: Fondo, línea y posición


Fondo

Se pueden administrar con colores planos, texturas, efectos, etc. Partes: tiene nodos que construyen y unen segmentos de línea. El vector básicamente tiene un destino y es ser impreso, lo que no quita que se use para otras cosas.

Color tramado: color que se le asigna una trama de impresión, el color ya no se compone por un relleno, cuando se degrada en matiz o transparencia, el software aplica el mismo principio de la fotomecánica en impresión. No imprime lleno sino que con puntos más o menos distanciados.

Línea (filete)

Cuerpo perimetral de la línea vectorial, la línea, el path o trazo, es aquella que se mide en su espesor, ese concepto viene del tiralíneas, los tiralíneas se median en puntos (pt), los mismos puntos que sirven para medir las tipografías, las líneas pueden tener una expresión 0 pt y siguen siendo parte del dibujo vectorial, desaparece visualmente, pero no en el trazado.

La línea también tiene otras características similares al relleno, color, ciertas texturas (pincel o brush), la línea sigue siendo vectorial, a diferencia del relleno que puede incluir imágenes de mapa de bits (raster).

Posición

Está dada por el plano cartesiano, el curso da la ubicación cartesiana de la figura en la hoja, se expresa con las coordinas x,y en plano cartesiano. Los tamaños se pueden medir en mm, cm, mt, pt, pulgadas.

Cuando se abre un archivo se define tamaño de lienzo (canvas size), que es distinto al tamaño de la hoja de impresión, formato ceñido a las opciones que tiene el sistema de impresión usado. Ej. Tabloide, Carta, A2, A4, Folio, personalizado, etc. En las imágenes de vectores el archivo puede integrar varios dibujos e imágenes.


Construir lenguaje visual – credibilidad de la representación Imágenes pixeladas generan un quiebre en el puente de la comunicación, su credibilidad se ve afectada, porque la representación es una traducción de la realidad, lo que diseñamos es superior cuando se tiene o logra una buena técnica. Ej cine es una magia, un juego, cuando el lector pierde definición “contacto” pierde magia, se pierde por técnica.


Características

  • Distintas a las imágenes rasterizadas, mapas de bits, compuestas por pixeles.
  • Están compuestas por el sistema métrico medido en milímetros.

Imagen construida por fórmulas matemáticas, su definición es superior, ya que es escalable, sin efecto de pixelación, porque lo que construye son fórmulas matemáticas.

  • Esta compuesta por figuras geométricas. Todas las posibilidades, líneas, curvas.
  • El escalamiento sin distorsión y deformación.
  • Se pueden hacer líneas figuras y curvas
  • Textos, a través de tipografías, o se pueden transformar en objeto, crear contornos. Se vuelve una imagen, figura geométrica de vectores.
  • Impresión escalable (PS o PDF). El plotter de corte identifican en una imagen vectorial la línea perimetral como la línea de corte, esto viene de los troqueles (cortes o plisados). Afecta al papel en su composición molecular.
  • Animaciones, comics, hechos a través de ilustraciones con vectores.

El dibujante hace dibujos en lápiz, son escaneados, los pintan, los sistema productivos pueden ser más rápidos gracias al uso de las imágenes vectoriales.


Infografía

La infografía es una representación más visual que la propia de los textos, en la que intervienen descripciones, narraciones o interpretaciones, presentadas de manera gráfica normalmente figurativa, que pueden o no coincidir con grafismos abstractos y/o sonidos. La infografía nació como un medio de trasmitir información gráficamente. Los mapas, gráficos, viñetas, etc. son infogramas, es decir unidades menores de la infografía, con la que se presenta una información completa aunque pueda ser complementaria o de síntesis.

Las infografías tienen la capacidad de contar una historia (story telling) muy usado en comunicación, son muy importantes porque enriquecen el lenguaje de comunicación, se pueden expresar más cosas, permite sacar mayor provecho de los textos, basados en idiomas, sino que se relaciona con la iconografía, que es de carácter universal. Ejemplo: instructivos, explicaciones digitales, planos, etc.

Ilustración puede generar una empatía positiva, que no es lo mismo que una imagen directa.

Publicidad, infografías, videos explicativos, planos (mapa metro de Londres ejemplo de abstracción)

Clase nº 3, 06 julio: Imagen digital para preprensa e Imagen digital para redes

Edición de imágenes digitales

El objetivo de las imágenes digitales, por lo general es prepararlas para ser procesadas en otros programas de edición de contenidos. Es por eso que la edición de las imágenes digitales es parte de un proceso mayor, que puede incluir textos y otros tipos de ilustraciones.

Procesos de edición de contenidos

Los programas editores de contenidos para preprensa (por ejemplo InDesign) permiten hacer los ajustes necesarios para realizar la reproducción en imprenta, o impresoras de uso doméstico; también con menos frecuencia, se usa para exportar los contenidos, con el fin de ser visualizados y descargados en la web, por ejemplo, archivos con extensión PDF que incluyen etiquetas y marcadores para XML.

Concepto de impresión

Se refiere al proceso de reproducción de proyectos en soportes análogo, tiene que ver con las tintas, papeles, etc. También se usa de modo menos formal, cuando se hace referencia a la visualización en la pantalla, en lo que sería una reproducción digital.

Conceptos básicos de medios digitales

Software

soporte lógico de un computador que comprende el conjunto de los componentes necesarios para hacer posible la realización de tareas específicas.

Hardware

corresponde a todas las partes físicas de un computador: sus componentes eléctricos, electrónicos, electromecánicos y mecánicos; sus cables y cualquier otro elemento físico involucrado.

Sistemas operativos

Un Sistema operativo es un software que actúa de interfaz entre los dispositivos de hardware y los programas usados por el usuario para manejar un computador. Es responsable de gestionar, coordinar las actividades y llevar a cabo el intercambio de los recursos y actúa como estación para las aplicaciones que se ejecutan en la máquina.

Los más conocidos Windows, MacOS, Linux, este último es abierto y gratuito, Ubuntu de Linux está más relacionado quienes usan lenguaje de programación.

Las gamas de colores son distintas entre los equipos Mac y PC, trabajan con diferentes curvas. Mac desarrolla interfases que preivilengian la visualuzación gráfica, los PC son para procesos productivos donde la visualización gráfica no es indispensable, de tos modos, PC tiene ha desarrollado sistemas operativos con mejor interfaz gráfica, pero son mucho más lentos porque ocupan más recursos de hardware.

Software de Diseño

El aprendizaje de los software de diseño para edición gráfica no es lo mismo que aprender a diseñar, aprender ha usar estas herramoentas es parte del proceso ejecutivo, quién usa estas herramientas es quien sabe producir sus propias obras. Se debe diferenciar a quién produce en software gráficosm de quién diseña, diseñadores que trabajan en softaware correnel riesgo de converter se en productores. Cuando se aprende ha usar un programa se desarrolla una habilidad, no así la respuesta al diseño, la cual no está en el software. Diseñar en la pantalla es muy difícil , es una habilidad que pocos tienen. Por ejemplo, se pueden usar las paletas de colores que están por defecto en los programas, o software que crean paletas de color, pero la decisión depende de los conocimientos del diseñador en cuanto a conceptos cromáticos y y teoría del color.

Interfaz

Según la RAE: (Del ingl. interface, superficie de contacto) Infomrática Conexión física y funcional entre dos aparatos o sistemas independientes.

La interfaz gráfica de usuario es un programa informático que actúa de interfaz de usuario, utilizando un conjunto de imágenes y objetos gráficos para representar la información y acciones disponibles en la interfaz. Su principal uso, consiste en proporcionar un entorno visual sencillo para permitir la comunicación con el sistema operativo de una máquina o computador.


Comparación de funciones e interfases entre programas editores de imágenes mapa de bit

Se ponen como ejemplo el programa Photoshop y Fireworks de Adobe.

Interfaz que facilita el trabajo de imágenes análogas

Photoshop tiene herramientas e interfaz enfocadas a procesos editoriales análogos (para ser impresas). Luego pueden ser usadas en programas como InDesign.

Interfaz que facilita el trabajo de imágenes para redes

Fireworks pone mayor énfasis en procesos editoriales multimedia, es decir, edición de imágenes destinadas a medios digitales, web, redes, que pueden ser visualizados en diferentes pantallas desde móviles hasta televisión digital. Luego pueden ser usadas en programas como Coda.

Principales diferencias en la información que muestra la Interfaz de cada programa

En Photoshop la lectura de la interfaz entrega información sobre en el peso del documento, minetras mayor información contenga el archivo de la imagen, mayor será su resolución, por tanto, major su definición a la hora de imprimir, es pore so que es importante la información sobre el peso del archivo. El tamaño de impresión de una imagen digital, se ve en pixeles en la pantalla. Mientras más información existe para imprimir mucho mejor, en cambio en la web se necesita optimizar el tiempo de visualización a través acotando la resolución y aumentando la compresión.

Fireworks capacidad de transferir la imagen en redes, la lectura de la interfaz entrega información sobre las pantallas, tamaño en pixeles y velocidad de descarga basado en la resolución y velocidad de la conexión de Internet.

5 segundos esperando descargar una imagen es mucho tiempo en la web, no se puede convencer a alguien se quede para a leer en todo este tiempo. 2,5 segundos de espera está en el límite de los apropiado. Para usar una imagen en la web, se debe bajar la resolución, no el tamaño, aunque esto está vinculado en su tamaño en pixeles. Cuando la imagen se exporta para internet, se exporta en RGB, normalmente debe tener como máximo 450 px de ancho.

La visualización al 100% de la pantalla en ambos programas es distinta, como resultado de las variables de resolución y la finalidad de la imagen.


Ajustes de tamaño y resolución

En fotografía digital es importante tener un original y hacer una copia, guardando también para web y dispositivos (móviles, pantallas digitales), esta opción la otorga ambos programas.

Cuando se baja la resolución , baja en su información de pixeles, baja la definición de la nitidez, profundidad del color, pero la imagen formalmente se ve parecida.

Compresión de datos

La compresión es un caso particular de la codificación, cuya característica principal es que el código resultante tiene menor tamaño que el original. La compresión de datos consiste en la reducción del volumen de información tratable (procesar, transmitir o grabar). En principio, con la compresión se pretende transportar la misma información, pero empleando la menor cantidad de espacio.

La compresión se debe hacer sobre la base de una decisión técnica, determinada por el destino de la imagen digital.

Ejemplo: extension GIF, está extension tiene 256 colores standard, esa paleta se lee en todas las pantallas mundiales, diferentes sistemas operativos, la compatibilidad permite que se vea igual en otros computadores. Por eso los logotipos normalmente se usan en formato GIF, para asegurar que el color se lea correctamente dentro de este estandar. En archivos comprimidos se usan paletas de colores más livianas, de este modo, se despligan más rápido en la pantalla porque se requiere menos memoria y hardware. La nitidez y las escalas de medios tonos son más vulnerables a la compresión, se ven más afectadas porque en la compresión se prescinde de está información.

Compresión Progresiva

En internet cuando se sube alguna fotografía en jpg, el browser para leer la imagen lee todas las filas de pixels, una por una, desde arriba hacia abajo. En conexiones rápidas esto ya casi no se nota, pero pensando en usuarios con conexiones lentas está la opción de compresión progresiva, este sistema guarda los datos de la imagen de forma escalonada para mostrarlos poco a poco. Cuando se baja uno de estos archivos desde una página Web, aparecerá una imagen previa de muy baja resolución a los pocos segundos de iniciar la descarga. Posteriormente, la imagen final se irá definiendo poco a poco a la vez que se reciben los datos. Puede ser utilizado en las imágenes GIF y JPG.

Metadatos

(del griego μετα, meta, «después de» y latín datum, «lo que se da», «dato»), literalmente «sobre datos», son datos que describen otros datos. En general, un grupo de metadatos se refiere a un grupo de datos, llamado recurso. El concepto de metadatos es análogo al uso de índices para localizar objetos en vez de datos. Por ejemplo, en una biblioteca se usan fichas que especifican autores, títulos, casas editoriales y lugares para buscar libros. Así, los metadatos ayudan a ubicar datos. Las fotografías digitales, llevan empaquetada mucha información valiosa, tamaño, resolución, lugar, hora, tipo de cámara usada, propietario de la cámara, copyright, exif data, apertura del lente, focal, lengh, coordenandas geográficas, etc. En las opciones de compresión se puede incluir o sacar los metadatos. Los meta datos pueden ser útiles en muchos casos, por ejemplo para georeferenciar una fotografía, pero su desventaja es que agregan peso al archivo.


Clase nº 4, 13 julio: Herramienta Capas, usos en imágenes digitales

Corrección Encargo: Infografías

Una Infografía debe contar una historia, se enfoca en una experiencia de narración, se debe inventar una narrativa visual, para crear una experiencia.

Narrativa Visual

Consiste en el desarrollo de la historia, por un lado está el tema elegido, la novedad contada, se valora la capacidad de mirar y re-descubrir un tema, proceso o fenómeno, trayéndolo al lector como una cosa nueva. Por otro lado, se mide la capacidad de graficar la historia, contarla haciendo uso de la inmediatez de la imagen.

Diseño de experiencias

Es un proceso provocado en el lector a través una narrativa visual, ya sea en una infografía o en una interfaz gráfica.

Desarrollo de estética

Es un proceso complejo y relacionado a la experiencia, que va más allá de un tema de gustos. Un buen diseñador debe desarrollar un estilo, cuidando la versatilidad de su trabajo, en base a un criterio estético propio, que es distinto a trabajar en base a gustos personales. Para definir una paleta de recursos gráficos en cada proyecto, se debe elegir en función de convencer al lector, atrayendo su atención y mirada., o mejor aún, detener su mirada.

Aprender a usar Herramientas digitales

Este curso se trata de aprender el uso de las herramientas digitales que nos permiten diseñar, por lo tanto, es un requerimiento hacer un buen uso de las herramientas de estudio, como es la Wiki Casipea, la cual permite mantener un registro dinámico de nuestro estudio, y la exposición de los trabajos de investigación y/o prácticos realizados.

Un buen uso implica en primer lugar una precisión del lenguaje, que abarca desde el desarrollo de los textos publicados (discurso, orden, ortografía) hasta el correcto uso del código de programación (nombres de archivos, uso de mayúsculas y minúsculas, espaciado, párrafos, etc.)

Desarrollo de Lenguaje Semántico

Lo mencionado anteriormente sobre la precisión del lenguaje, afecta directamente al correcto desarrollo del Lenguaje Semántico, de la Wiki Casiopea en este dado como ejemplo aplicado, y de cualquier otro sistema o invención de estructuras de contenidos.

Corrección Encargo: Línea de Progresión Pantallas Digitales

En el desarrollo y concreción de la tarea se exige:

  • Cumplir con con requerimientos específicos del encargo, ejemplo: seguir instrucciones de formatos.
  • Se cobra la capacidad de visualizar, y finiquitar un trabajo.

En cuanto a los contenidos específicos del curso se exige:

  • Impresión por partes un lienzo continuo.
  • Relaciones en los tamaños de pantalla.
  • Construcción de familias de iconos, cuando se hacen iconos se crea un lenguaje, la relación gráfica debe ser clara y concisa.
  • Dar cuenta de una visión total del contenido, independiente de la completitud y extension de la investigación dada como caso de estudio. Respecto al caso abordado se debe quedar claramente expuesta la idea central: la progresión tiene una curva generada por la capacidad de los soportes de mostrar colores a través de la frecuencia de bits.

Este trabajo implica el desarrollo de destrezas y habilidades que permiten producir y reproducer proyectos de diseño hacienda un correcto uso de las técnicas aplicadas, cualquiera que estas sean.


Usos de la Herramienta de Capas

Orden - Estructura de trabajo y contenidos

Fundamentalmente las capas son una herramienta de organización de los contenidos, ordenados, diferenciados y clasificados por sus características gráficas.

El criterio para distribuir y el numero de capas utilizadas depende de la complejidad del proyecto y de la estructura de trabajo. Se pueden organizar: por secciones según similitud, elementos comunes, elementos tipográficos, elementos vectoriales, color; por nomenclatura, taxonomía, clasificaciones, etc.

La herramienta de Capas permite la superposición de elementos en el plano separándolos según un determinado orden, las capas permiten la sumatoria de objetos, esto facilita la edición por partes de una imagen total.

Esta herramienta se incluye en diferentes tipos de software y archivos, tanto en software de diseño: Illustrator, Photoshop; u otros tipos de software usados diseño, arquitectura o ingeniería, por ejemplo: Autodesk Inventor, ArcGis, etc.

Imágenes mapa de bit y vectoriales trabajadas con capas

En imágenes fotográficas e imágenes de vectores se ven una serie de elementos o dibujos en un mismo plano, pero cada elemento se puede trabajar en capas distintas que se superponen.

Una primera capa puede adquirir la función de plantilla, se puede tomar una imagen y usarla como guía, lo que se conoce como calcado, para esto primero se bloquea y se atenúa su visualización modificando los porcentajes de transparencia. Las capas se pueden bloquear, y ocultar su visualización.

En la medida que se suman capas, se superponen, la primera va quedando más atrás, por lo tanto, existe un fondo y un frente, que en distintos programas se denominan con nombres diferentes

Capas en Photoshop

En el caso de Photoshop cuando se abre una imagen ésta queda como fondo. Para las herramientas de dibujo y borrado se tiene un color de fondo y un color de los nuevos dibujos o elementos añadidos en frente, además si se borra parte de la imagen aparece el espacio de transparencia. (concepto que viene de la fotografía análoga, de las diapositivas) Photoshop también tiene la propiedad de translucidez y opacidad de los elementos de cada capa. Cada vez que se agregan elementos se agregan capas, el trabajo en capas permite mover y seleccionar contenido de manera independiente.

Capas en Illustrator

En el caso de Illustrator el trabajo de capas se pueden significar un ahorro de recursos y un sistema más efectivo de trabajo, ejemplo archivos con textos en diferentes idiomas, se pueden editar paralelamente, e imprimir eligiendo sólo las capas necesarias. Si se quiere seleccionar varios elementos o todos en una capa se puede hacer rápidamente y de una sola vez. Agiliza el trabajo bloqueando ciertos elemento para no afectarlos mientras se editan otras cosas.

Compatibilidad de Capas en diferentes programas

Ciertos programas y extensiones de archivos permiten guardar la información de las capas para ser editadas en otras aplicaciones, por ejemplo los programas Adobe tienen compatibilidad entre sí usando extensiones: psd, pdf, eps, etc. Y además permiten importar archivos con capas creados en otros tipos de software que hacen uso de imágenes vectoriales, por ejemplo Inventor, ArcGis usando extensiones: eps, pdf, wmf (windows metafile), etc.


TIPS

  • Después de exportar a archivos de compresión como jpg se pierden las capas, para guardarlo se deben conservar su archivo nativo, como psd.
  • La imágenes GIF no permite el trabajo con capas.
  • Nombrar capas con sus contenidos específicos
  • Usar diferentes colores para distinguir las capas y sus elementos.


Clase nº 5, 20 julio: Diseño de Iconos e Interfases

Iconos

El ser humano por naturaleza tiene la necesidad de comunicación, esto lo expresa de modo oral y escrito, desde la prehistoria existen representaciones gráficas que transmiten ideas y conociminetos, que conducen a interpretaciones del mundo -lo que se quiere comunicar- a través de signos.

Esta necesidad de comunicación implica la construcción lenguajes, primero el habla, y más adelante su registro por medio del lenguaje gráfico: jeroglifos, pictogramas, alfabetos, etc., que con el tiempo y dependiendo de cada cultura pueden adquirir significados universales.

La iconografia depende de esta característica de universalidad para su correcto uso y entendimiento. Ejemplo de signos universales: iconos de reproducción de video y música.

Un objeto cualquiera, con una característica o cualidad determianda puede se transformar en un icono, ya sea por analogía, herencia o tradición. Ejemplo: Dibujo de máquina filmadora antigua usada como icono que representa herramientas de video modernas.

Los iconos pueden ser signos abstractos si son parte de convenciones, o construidos figurativamente cuando su dibujo se hace por analogía y señalan nuevas funciones u aplicaciones desconocidas.

El dibujo de un icono debe ser simple y representativo para ello se debe hacer uso de objetos y herramientas caracterísiticas de una función.

Convenciones y Estandares

Como consecuencia de este proceso cultural de desarrollo de lenguajes universales, se originan convenciones que pertencence al inconciente colectivo de ciertas culturas, occidental, oriental, países, pueblos, etc. Por ejemplo, los colores en señalización: rojo: peligro, prohibición amarillo: precaución, atención verde: seguridad, vía libre

Debido a la globalización se hace imperativo la creación de estándares para en entendimiento y traspaso de información.

  • Signos de reproducción: play, rew, ff, record, pause, usados en equipos electrónicos.
  • Señales de direcciones (signo de flechas) y servicio en aeropuertos.

Ver:


Caso contrario, es la construcción de interfases que no han logrado convertirse en un estándar, por ejemplo en máquinas lavadoras los iconos de agua, temperatura, centrifugado, etc.no tienen convención, en diferenctes marcas y modelos son distintas, lo que a veces provoca un uso errático.

Familias de Iconos

El icono es una parte de la interfaz, su construcción que genera una familia. Para la creación de una familia de iconos se require de estudio conceptual, studio representativo y una propuesta estética. Existen diferentes géneros según utilidad y aplicaciones, la diferenciación de un grupo se reconoce con elementos gráficos en común, color, forma, brillos, grafías, etc.

No se puede partir de cero, se debe considerer y hacer uso del lenguaje visual consolidado, recurrir al aprendizaje cultural instaurado.


Interfases

Se pueden denominar como interfases a todo tipo de señales o indicaciones que se leen alrededor, el término no se reduce sólo a interfases digitales. Las interfases deben construir un lenguaje para que se produzca comunicación.

El lenguaje construye realidad

Cuestionamiento sobre las comunicaciones desde un punto de vista filosófico. El lenguaje es el modo como nos comunicamos y construimos la realidad.

Ver:
Ontología del Lenguaje

Los diseñadores creamos lenguajes gráficos, ya sea diseño de sitios web o diseño de señaléticas.
Todo lo que reproducimos es interfaz, desde el diseño de libros hasta la cinfiguración de medios digitales.

Las interfases y sus signos son lenguajes que dotan a un objeto o a un sistema (a propósito medios digitales e internet), de un lenguaje que permite sus uso. No existe objeto, ni sistema que no tenga una interfaz para poder ser usada. Una de las interfases más antiguas que conocemos son los folios de los libros (numeración de páginas), lo habitual es colocarlos en los extremos exteriores de las páginas.

Tipos de interfaz

Se pueden diferenciar dependiendo de los sentidso con los que son percibidas.

  • Interfaz auditiva, ejemplos: señales en semáforos, señales en ordenadores.
  • Interfaz táctil, ejemplos: sistema braile, tecla del numero 5 en teléfonos, suelos de calles en relieve, señalizadas para no videntes.
  • Interfaz gráfica, ejemplos: textos, imágenes, iconos, etc.

Las interfases permiten visualizar los sistemas, un ejemplo completo de esto son los medios digitales, un sitio web es una interfaz en sí misma. Como caso podemos mencionar a Google como empresa, la interfaz de google es el producto, el negocio.

Apple se diferencia de sus competidores porque pone énfasis en el desarrollo de la interfaz, la experiencia de usuario lograda a través de un lenguaje visual atractivo, por ejemplo su producto iphone, que funciona sólo a través de interfases.

Los usuarios pueden dar pasos inmediatos e inconcientes gracias al uso de interfases consideradas como convención o estándar.

Las interfases se relacionan con la capacidad humana de ejecutar cosas, cuando se ejecuta una interfaz se ejecutan acciones, ya sea en un computador, microondas, teléfono, sitio web, señalética, etc.

Diálogo entre ser humano y máquina

Para que el ser humano pueda hacer un correcto uso de las máquinas, ya sean análogas o digitales, se necesita construir un diálogo, en funciones sencillas como on/off, hasta pasos y en secuencias más complejas.

A través de una interfaz con iconos los usuarios pueden acceder a las posibles acciones que ofrece la “máquina” o sistema, poner en funcionamiento tales acciones, y ejecutar procesos.

  • prender - apagar
  • despertar - dormir
  • levantar - acostar

Para que exista un feed-back, el usuario require de notificaciones que confirman que la ejecución de un proceso, éstas notificaciones pueden ser sonoras y/o visuales.

Interfases en la web

El diseño en la web, se hace con interfases visuales. Elementos de un sitio web: menu, botones, scroll, imágenes, textos. Un botón en un sitio web puede tomar diferentes valores en una interfaz. roll-over, roll-off, bevel-in y bevel-out.

Todos elementos están hechos para interectuar con ellos, cumplen una función. Las interfases siempre tienen un verbo, ya sea ir, ver, anotar, buscar , encontrar, etc. ¿Por que tienen relación con los verbos? porque nos llevan a hacer acciones, nos guian en movimientos, procedimientos, el verbo es aquello que construye en la interfaz.

La interfaz clásica o básica de un sitio web es un hipervínculo, texto subrayado de azul que se reconoce como hipertexto. Es azul porque este color es el más rápido en ser reconocido por las señales ópticas que se interpretan en el cerebro humano.

En una página web la lentitud y la ambiguedad del lenguaje provoca dudas, el sistema debe notificar las ejecuciones, a través de signos, palabras, textos, imagenes, tacto, sonido, etc. Por eso la clave de las interfases es el diálogo. Cuando se hace una inversión de los sonidos y los contrastes, se hace diferencia entre dos valores.

Para construir sistemas de interfases idealmente se deben construir analogías, por ejemplo: los iconos de las herramientas de Photoshop que usa conceptos de fotografia y reproducción análoga; Botón de prendido o apagado, su analogia viene de las tuercas de las radios para sintonizar el vial.

También existen algunos casos en que se pueden hacer sistemas de reconocimiento rápido, por ejemplo los nuevos iconos de los programas de Adobe, los cuales se diferencian principalemente por el color en sus recuadros, ás el uso de una abreviación tipográfica.

Expresiones gráficas que se traducen en movimientos, señales que confirman el movimiento del cursor., activaciones y desactivaciones. En Illustrator o Fireworks se pueden crear botones con estas expresiones.

En resumen las interfases son la construcción de lenguaje para que los usuarios interactuen con los sistemas, el usuario es el lector, el foco fundamental, si el usuario no recibe el mensaje, la interfaz no sirve.


Bibliografía

  • Libro: Signos, símbolos, marcas, señales

Título: Signos, símbolos, marcas, señales. (1a. ed.)
Autor: Frutiger, Adrián
Año: 1981
Datos de publicación: Gustavo Gili. Barcelona. Espana
Código de pedido Biblioteca: 704.946 FRU


  • Revista: Experimenta

Editorial Experimenta Madrid, España
45, julio 2003
Artículo Buena Señal, Pág. 35

  • Revista: Experimenta

Editorial Experimenta Madrid, España
51, abril 2005
Artículo Es sencillo lo que nace sencillo: la obra de Susan Kare, Pag.59


Clase nº 6, 27 julio: Corrección encargo: diseño de familia de iconos

¿Que es un lenguaje?

  • Un sistema
  • Una convención: ponerse de acuerdo en algo

¿Que sucede cuando construyo lenguaje?

  • Se transmite información

¿Que se logra con el lenguaje?

  • Comunicar, nombrar cosas, identificar
  • El lenguaje debe propugnar la comunicación, construye realidad, existe, un lenguaje es un sistema.

Argumento y estilo gráfico

El argumento permite tener un estilo gráfico, el estilo se refiere a la esencia del contenido más allá de sus características estéticas. Permite dar razones y convencer -¿a quién? al lector.

En diseño el estilo otorga una serie de razones que hacen creíble al sistema, en este caso el lenguaje establecido como una serie de signos, los iconos.

Estilo se construye con argumentos, cuando se hace un set de iconos el argumento debe ser común, debe haber un mismo estilo y argumento, la misma analogía, esa coherencia se comprueba cuando los iconos son creados originalmente, o copiados.

Características gráficas de los iconos

Los iconos pueden ser muy simples o hiperrealista. En ambos casos no debe haber duda en su interpretación. El uso cualquiera de ambos modos depende del soporte y su fin.

Simplificación

deben ser simples para su reconocimiento rápido. Los elementos gráficos que se integran son ajustados y precisos, mientras más cosas añado es más difícil diferenciar el dibujo y reconocer su significado. La efectividad es mayor con la reducción de elementos, los detalles deben ser ajustados sino provocan “ruido”, se debe evitar ruido y distracciones para lograr mayor consistencia.

Iconos dibujados con elementos simples, líneas y figuras geométricas. Iconos que dibujan el gesto o insinuar formas, pero no dibujan una figura completa. La elección de una paleta de colores acotada o dibujo monocromo es un recurso de simplificación. La técnica de dibujos con pixeles es un modo de dibujo basado en una simplificación.

Por ejemplo:

  • Pictogramas realizados por Otl Aicher para los Juegos Olímpicos de Múnich

Hiperrealismo

Se usan recursos de ilustración y efectos de iluminación para mostrar posición y volumen de lo dibujado. Elementos como la perspectiva, punto de fuga, sombras, foco y punto de inclinación simulan una captura fotográfica (cámara imaginaria que enfoca) para insinuar el modo en que se observa el objeto que hace la analogía.

Por ejemplo:

Analogías

Es un modo de dar significado a un dibujo pictográfico, trasladación de significados de un objeto a un concepto mayor o más complejo. Ejemplo: acto de comer, o servicios relacionados con restaurantes y cocina que se reconocen con dibujos de herramientas o materias primas, como son los instrumentos de cocina y los alimentos.

Recursos gráficos que permiten asociar una familia de iconos Uso de elementos comunes, homogeneizar a través de un hilo en común. Se pueden usar uno o varios recursos gráficos que definen formas, colores, fondos, líneas, marcos, etc. Para lograr una coherencia entre ellos, valores y tamaños equivalentes. Proporciones deben ajustar, transformar la realidad para visualizar el sistema homogéneamente, esto ocurre con los cambios las proporciones de los objetos dibujados, ejemplo tamaño figura humana en comparación a un objeto más pequeño. Borde como recurso de unificación, que permite que todo lo que sucede dentro pertenece a la misma familia.

Identificación

En cuanto a significado
La identidad, se logra con transformación de los dibujos en signos. Signos que se reconocen por el contexto cultural y convenciones.

En cuanto a cualidades gráficas
Expresión grafica con detalles de dibujo y pintado.

Metodología usada en el diseño de iconos

El diseño es una elaboración en base a una reflexión, la capacidad de diseñar tiene que ver con reflexionar, imaginar algo que no existe, para eso creamos lenguaje. “Reflexionamos con tinta negra y papel blanco”. Dibujar a mano antes de hacer dibujos digitales es un buen método de estudio de contenido y la forma.

Clase nº 7, 03 agosto: Fotografía Análoga y Digital

Fotografía (de foto griego φωτο, de la raíz de φῶς, φωτός, luz) y grafía (griego γραφία, de la raíz de γράφειν, escribir)

Principios básicos de iluminación

Luz cenital

Tipo de luz que proyecta incide sobre los objetos de forma vertical y describiendo un ángulo muy agudo. Desfigura los rostros de los personajes y produce un efecto muy especial en la escena.

Los conceptos fotográficos son usados habitualmente en diseño. Muchos trabajos de diseño se componen en base a criterios y ojo fotográfico, prestando atención a los equilibrios lumínicos de la obra. Se aplica en una decisión de dirección de arte fotográfica.

ver Ansel Adams

Definición de conceptos básicos en fotografía

Objetivo

Se denomina objetivo al conjunto de lentes convergentes y divergentes que forman parte de la óptica de una cámara tanto fotográfica como de vídeo. Su función es recibir los haces de luz procedentes del objeto y modificar su dirección hasta crear la imagen óptica, réplica luminosa del objeto. Esta imagen se lanzará contra el soporte sensible: Sensor de imagen en el caso de una cámara digital, y película sensible en la fotografía química.

Tipos de objetivos

Profundidad de campo

Por profundidad de campo se entiende tradicionalmente en óptica y fotografía en particular como la zona en la cual la imagen captada por el objetivo es nítida (es decir enfocada), de manera que en la fotografía que se realice, las personas y objetos que se encuentren dentro de esa zona aparecerán también nítidos.

Distancia focal

Exposición: cantidad de tiempo que esta expuesto el negativo en la luz, pelicula sensible a la luz, cuando se abre el diafragma el negativo queda expuesto por un tiempo determinado

Exposición

Se llama exposición a la cantidad de luz que recibe el material fotosensible (en fotografía química) o el sensor de imagen (en fotografía digital) para que se forme una imagen. Matemáticamente: exposición = iluminancia x tiempo.

Obturador

es el dispositivo que controla el tiempo durante el que llega la luz al elemento sensible (película o sensor). Junto con la abertura del diafragma, la velocidad de obturación es el principal dispositivo para controlar la cantidad de luz que llega al elemento fotosensible.

Velocidad de obturación

también llamada tiempo de exposición, es el periodo de tiempo durante el cual está abierto el obturador de una cámara fotográfica. Se expresa en segundos y fracciones de segundo.

Apertura

La abertura de un sistema óptico es aquella que determina el ángulo del cono de un haz de rayos que se enfoca en el plano de imagen. La magnitud de la abertura está controlada por el diafragma, el cual es una estructura interpuesta en la trayectoria de la luz para regular la cantidad de ésta admitida en el sistema. En combinación con la velocidad de obturación, el tamaño de abertura regula el grado de exposición a la luz del filme o sensor, determinando así el Valor de exposición.

El diafragma

Está compuesto por unas pequeñas laminillas metálicas, imbricadas entre sí en el interior del objetivo. Estas, forman un orificio regular que determina el diámetro del haz luminoso y por tanto la intensidad de luz que tendrá el plano focal.

Escala de sensibilidad fotográfica

La escala de sensibilidad fotográfica, físicamente se define la sensibilidad como la inversa de la entrada necesaria para obtener una respuesta predeterminada en un sistema.

En fotografía la entrada es la exposición y la salida es la densidad obtenida. La sensibilidad fotográfica por tanto puede definirse como la inversa de la exposición necesaria para obtener una densidad predeterminada. En el negativo blanco y negro este nivel de densidad está fijado en 0,1 unidades de densidad sobre la densidad mínima. Esta referencia es la base del sistema DIN, el antiguo ASA (hoy ANSI) el BS y el ISO.

Escalas normalizadas

Grano

se entiende por granularidad o grano el tamaño de las partículas que forman la capa fotosensible que recubre la película fotográfica o el papel fotográfico. La granularidad determina por la sensibilidad a la luz del material: a mayor grano, corresponde mayor sensibilidad a la luz.

Ver también:

Diferencias entre fotografía análoga y digital

Cantidad de grises que se pueden capturar y definir. En cuanto a gama de grises (valores que van desde el negro al blanco), es mucho más potente con capturas de fotografía análoga, se puede obtener mayor profundidad y precisión de escala de grises.

Proceso de captura, edición y reproducción fotográfica

El paso de la composición lumínica de una fotografía a un software de computador para ser enviada a prensa. Proceso productivo que permite tomar y editar fotografías para enviarlas a una máquina de reproducción y ser impresas en papel.

  • Instrucciones de dirección de arte (basadas en brief del cliente)
  • Sesión fotográfica. Toma de fotografía: Equilibrio de tamaños distancias complejidad asociada al hacer general y versátil del diseño.
  • Digitalización: escáner de negativos
  • Edición digital en programa software (PhotoShop) para calibraciones lumínicas y de color, variabilidad enorme según destino, depende del tipo de papel y calidad de impresión.
  • Impresión: puede ser desde una impresora doméstica hasta máquinas Offset de última tecnología.

Edición en programa Photoshop

Las visualizaciones de pantalla entregan información lumínica irreal. Totalmente distinto a como se verá impreso en el papel. El papel no brilla como en la pantalla.

Por eso los ajusten en Photoshop son necesarios para ajustar la imagen y se lean los mayores distingos de grises posibles. Para usar el programa se debe tener conocimientos de fotografía e impresión, Photoshop se sitúa en medio.

Herramientas de calibración lumínica

  • Curvas
  • Niveles
  • Exposición
  • Brillo-contraste
  • Histograma
  • Cuentagotas: El programa permite tomar medidas de grises, se toma un pixel con el cuenta gotas, y los niveles la fotografía se equilibran según el valor del pixel seleccionado.
  • Información: Permite ver la cantidad de tinta de cada porción de color de la imagen fotográfica. Como se va a comportar un color en la impresión.

Todas estas herramientas permiten ajustar:

  • Puntos de impresión
  • Tramas de negro
  • Calibración en la imprenta
  • Posibles empastes

Tipos de tramas de impresión

  • En impresoras de inyección de tinta el tipo de trama aleatoria o estocástica, no se sabe como se va comportar el punto, los puntos de tinta se ubican a “azar”.

Trama estocástica

Sistema de tramado de imágenes por el que se reproducen los distintos tonos de color distribuyendo los puntos de tinta de forma controlada pero aparentemente aleatoria (es decir: De forma "estocástica"). El tamaño de los puntos no varía, varía la frecuencia de su distribución (por eso se llaman también 'tramas de frecuencia modulada'). En las zonas claras, hay menos puntos, en las oscuras hay más.

  • En impresoras láser las tramas de puntos se ubican sobre la base del principio cartesiano, el punto tiene una ubicuidad. Los puntos en una trama están medidos en el plano cartesiano.

Bibliografía

  • Título: Manual de fotografía digital
  • Autor: Daly, Tim
  • Año: 2000
  • Datos de publicación: Taschen, Colonia, Alemania.
  • Código de pedido Biblioteca: 771.32 DAL (fondo activo)


  • Título: Recetario fotográfico: manual práctico de todas las manipulaciones empleadas en los estudios fotográficos, compendio de métodos y formulas modernas. (3a. ed.)
  • Autor: Wall, E. J -o- Jordan, Frakin I.
  • Año: 1953
  • Datos de publicación: Reverte, Barcelona, España.
  • Código de pedido Biblioteca: 771 WAL (fondo activo)


  • Título: Toda la fotografía en un solo libro: manera fácil de sacar buenas fotografías. (8a. ed.)
  • Autor: Emanuel, W. D.
  • Año: 1971
  • Datos de publicación: Omega, Barcelona, España.
  • Código de pedido Biblioteca: 771 EMA (fondo pasivo)


Clase nº 8, 10 agosto: Técnicas y tecnologías relacionadas a la definición e impresión de imágenes digitales

Corrección encargo: Trabajo explorativo de edición e impresión de fotografías

Problemas técnicos que afectan a la definición de la imagen

  • Fidelidad a la escala de grises
  • Problemas de fidelidad de color cuando se convierten formatos, como PDF
  • Pantallas de vidrio son más contrastadas
  • Calibración de blancos muy difícil en fotografía digital.

Conclusiones

  • Lo que se visualiza en la pantalla no es igual a lo que se imprime.
  • Diferencia de impresión láser e inyección de tinta

Recomendaciones para la composición lumínica y el color en fotografías

  • Colores cálidos para fotografías de alimentos
  • Colores fríos para imágenes de arquitectura, esculturas, generan mayor contraste.

Proceso para realizar la tarea

  • Edición de imagen fotográfica en Photoshop, imagen en extensión .jpg
  • Edición de lámina en In-design o Illustrator para crear gráficos y diagramar, extensión .ind o .ai
  • Exportar a PDF para imprimir (hay compresión)

Durante este proceso se usan diferentes extensiones y tipos de compresión, que afectan la definición de la imagen y la fidelidad con la fotografía original. Por ejemplo: JPG archivo de compresión, se pierde información, de una fotografia, se pierden detalles, características graficas de la imagen. ver clase 1

Proceso profesional

  • Formato raw como original
  • Se manipulan varias versiones
  • Se exporta en TIFF, PSD, o EPS (archivos sin compresión)
  • Edición en programas Illustator o InDesign
  • Exportar en PDF con modos de compresión para ser enviado a imprenta.


En Illustrator Opciones de Perfil al crear un documento

  • Imprimir
  • Web
  • Móvil y dispositivos
  • Video y pelicula
  • CMYK básico
  • RGB básico
  • otros perfiles (importar)

Archivos de imágenes incrustados

Las imágenes quedan dentro del archivo Illustrator, el archivo .ai o .ind no trabaja con vinculos o enlaces.

Ventaja:

  • se pueden fusionar imágenes

Desventajas:

  • archivo muy pesado porque es el archivo en si mismo más la imagen incrustada.
  • no se pueden reemplazar

Archivos de imágenes encadenados

Las imágenes y fuentes están vinculadas, se almacenan en carpetas y son llamados por el archivo .ai o .ind.

Para trabajar con esta lógica de trabajo se requiere criterios de manejo documental, y orden en el manejo de los archivos, nombres, versiones, etc.

Ventajas:

  • los vínculos se reemplazan automáticamente por ruta y nombre
  • los archivos .ai y .ind son livianos

Desventajas:

  • se pueden desvincular los archivos si no se manejan con orden, de todos modos, existen funciones de los programas que permiten volver a vincular automáticamente.

Tipografías

Las fuentes pueden estar vinculadas a un archivo .ai o .ind; o ser trabajadas como trazado.

Fuentes viculadas

Vector que depende de un archivo font, se puede editar el texto, corregir acentos, cambiar palabras, etc.

Fuentes trazadas

Tipografía editable como dibujo, se puede editar en color y forma, pero no el texto dinámicamente, sólo se puede editar como dibujo.

Illustator no es para editar mucho texto, es solo para folletos o afiches, para textos extensos como un libro se usa In-design que maneja grandes cantidades de texto.

Recomendaciones para procesos productivos

  • Orden de los archivos
  • En realización de maquetas, duplicación de imágenes a más baja resolución, proceso llamado bach.
  • Guardar archivos originales en ai, para hacer modificciones.
  • Para guardar versiones se puede exportar en pdf por ejemplo, en diferentes resoluciones.

Diferentes valores de compresión y calidad de las imágenes, para web o impresión de alta calidad. Dependiendo del modo de crear el PDF, este conservara o no capacidades para editar .

La compresión para imprenta depende del destino del archivo, va a depender del tipo de impresión y performance de los papeles. Ejemplo: Imagen de calidad máxima, 300 dpi, suficiente para imprimir en papel couche.

Según la compresión será el peso del archivo

Calibración de pantalla

  • Factores Gama (Windows o Mac)
  • Hardware se equilibra con el software
  • Tecnología color Sync
  • Construcción del color
  • Calibracion de la luz
  • Perfiles

Ver

Tecnologías relacionadas a la alta definición de la imagen digital y video

Fotografías HDR En procesamiento de imágenes, gráficos por ordenador y fotografía, las imágenes de alto rango dinámico (HDR) son un conjunto de técnicas que permiten un mejor rango dinámico de luminancias entre las zonas más claras y las más oscuras de una imagen, del que técnicas de imagen digital estándar o métodos fotográficos pueden ofrecer.

Blu-ray

Clase nº 9, 17 agosto: Diseño de Interfases

Softwares de dibujo vectorial libre o gratuito. Aplicaciones de código abierto. List of vector graphics editors

Organización de contenidos en Trabajo con Capas

Principio establecido para todos los software gráficos. Permite trabajar con objetos superpuestos, objetos bloqueables, uso de plantillas. Es fundamental organizar los contenidos, separar objetos para seleccionar o deseleccionar elementos en común, es decir, hacer subconjuntos de elementos gráficos, figuras, textos, etc. Organización de contenidos, disgregar porciones de contenidos, para su edición más sencilla, rápida y sistematizada. A medida que se utilizan mas capas el archivo será más pesado.

Compatibilidad en programas adobe, sobre todo Illustrator e InDesign, también con Photoshop aunque es un poco menos expedito porque debe rasterizar las imágenes.

Diseño de Interfaz

Acrobat002.jpg

Diseño de interacción

Antes de diseñar hay un proceso, el diseño siempre se mide con límites, la formulación de proyectos.

¿Cuales son las condicionantes para un proyecto?

  • Lo primero es el usuario, el lector,
  • Que se lea correctamente
  • Las necesidades del usuario, los usuarios validan el diseño.
  • Especificaciones funcionales
  • También se necesitan los contenidos, los requerimientos de contenidos,

Cuando se determina eso se puede proyectar las características formales de un diseño, ya sea cualquier tipo de objetos gráfico o soporte.

Las especificaciones funcionales determina como el usuario va a interactuar con el objeto, ya sea un libro, folleto, un sitio web, un plano, etc., en cada uno de ellos de debe saber como se va a manipular el objeto de diseño.

Arquitectura de la Información

Está estrictamente relacionada con las capas y la organización de contenidos. Mapas de navegación, mapas conceptuales, esquemas, indices, se analizan y establecen jerarquías.

Como se distribuye la información, reconocer los vínculos y relaciones que permitan armar un visualización compleja e interactiva.

Construir modelos antes de diseñar para entender procesos y dar soluciones de diseño, como se inter-relacionan los contenidos. Tiene que ver con la interpretación que se hace de los contenidos, identificar cuales son las estructuras del contenido.

Capa visual

Estilos para establecer diferencias visuales y reconocer jerarquías.

Diseño de la Información

Se refiere a los elementos gráficos que se utilizaran para visualizar la información, sobre la base de las jerarquías de contenidos. Inventar o usar protocolos, los estándares, establecer simbologías o códigos. Los protocolos se establecen sobre la base de distingos en los contenidos.

La capa visual es la que finalmente interactúa con el usuario. El sistema entrega estas señales, por ejemplo, distingos ya establecidos, todo apagado o desactivado. Distingos en las interfases para establecer los elementos, ejemplos interfaz de los software, de color neutral gris, y colorados en la activación o roll-over.

Los elementos son extremadamente sutiles resultan ser muy comprensibles: superficies, textos, iconos, las interfases trabajan con el aprendizaje para los usuarios, modelo de aprendizaje donde el usuario aprende una vez y queda adquirido. Hablamos del proceso cognitivo de los seres humanos, de aprender cosas. Todos los modelos del diseño de la interfaz trabajan sobre la base del aprendizaje, que debe ser fácil.

¿Que es lo que comanda el sistema? Los menús, elementos que hacen comandar el sistema, ya sea una interfaz de web, software, juego, etc. “Diseño para el recuerdo”

Usabilidad

Diseño para que las cosas puedan ser usadas, enfocado en los usuarios, para que las interfases sean fáciles de manejar.

¿Cuales son las dinámicas lógicas detrás aplicaciones de los software? Para aprender a usar un software determinado no es necesario aprenderse todas las herramienta de memoria, si es que se tiene claro el modelo que hay detrás. La compresión del sistema permite formular soluciones de diseño. El comportamiento de las imágenes por ejemplo, hay modelo aplicable en diferentes tipos de software.

Referencias


Clase nº 10, 24 agosto: Corrección trabajos de reproducción de Mapas

Fuentes

Cuando un archivo se envía a imprimir (Prensa o impresión doméstica) los archivos deben estar con las tipografías trazados o incluir una carpeta con los archivos de las fuentes. Cuando se trazan las tipografías de un archivo se debe guardar un original con los textos editables.

En la industria cuando se mandan los archivos a prensa se debe prever las dificultades técnicas y de compatibilidad.

Capas

  • Ordenadas según estructura de contenidos
  • Para una mejor organización se pueden crear subcapas, un grupo de capas puede ser subsidiario.

Ver

Dibujos de trazado

  • Dibujo de curvas
  • Girar elementos
  • Herramienta pluma
  • Vértices y puntos de ancla
    • Convertir punto de ancla
    • Atajos con teclado para hacer rectas y ángulos de 90 grados. Restringir, el nodo se mueve en angulo recto.
  • Unión de líneas
  • Herramientas buscatrazos (Pathfinder)para fusionar imágenes
  • Trazo (Stroke)
    • Puntos de la linea
    • Tipos de remates
    • Uniones en los vértices
    • Líneas discontinuas
  • Alinear
  • Degradado

Hay acciones que no se deben hacer manualmente. Para ello se usan herramientas de transformación, se seleccionan varios elementos, así se modifican en serie con mayor precisión.

Recursos de dibujo muy usados en trabajos de imagen corporativa.

Herramientas de textos

Opciones para posicionar y modular la secuencia lineal de los textos