Bitacora Damaris1º parte

LENGUAJECOMPUTACIONALDAMARIS SEPULVEDA T.

LC1

L C 1INDICELENGUAJECOMPUTACIONAL

3-8

9-11

18-19

23-25

1-2

20-22

15-17

12-14

26-27

CLASES

TAREAS

INVESTIGACION

Indice

Del diseño Gráfico yLa Tipografía

modelo RGBmodelo CMYK

bitmap, mapa rasterizadoimagen Vectorial

portadas de periodicos

color e impresion

procesos en editorial

Introducción

Diagramacion de un medio de comunicacion visual

Modos deColor I

La edición

Formatos imagenesdigitales

BitmapEscala de GrisesIndexadoLabDuotonoMulticanal

36-38

45-50

54-56

28-35

51-53

42-44

39-41

Modos de Color II

Bitácora

investigación y desarrollo

Diseño

RegistroDigital

Imagen Digital

Desarrollo

TipoDigital

63-65

57-60

61-62

true type & postcript

GlosarioTipos de formato de imagen

DiseñoDigital

Revista Wired Wired

Arquitectura de laInformación

DiagramaciónInformación

AI

El Contenido

McLuhanAldea Global

La AldeaGlobal

DD E LD I S E Ñ O GRAFICOY LA TIPOGRAFÍA

INTRODUCCIÓN

D Al revisar la historia de la humanidad se puede reparar que el diseño, como grafía, se encuentra en la esencia del hombre desde que el hombre toma conciencia de si mismo, como ejemplo de esto son las pinturas rupestres,que nacen por la necesidad de comunicacion visual del hombre, y de plasmarla en el tiempo. Esto más tarde luego de muchos evoluciones deriva en el desarrollo del alfabeto actual.El libro de Kells (una Bi-blia manuscrita profusamente ilustrada, realizada por monjes irlandeses del siglo IX d. de

C.)es para algunos un muy hermoso y temprano ejemplo de diseño gráfico. Para otros, se trata de una manifestación gráfica, de alto valor artístico.La historia de la tipografía (y por carácter transitivo, tam-bién la historia del libro) está muy vinculada a la del dis-eño gráfico, probablemente porque prácticamente no ex-isten diseños gráficos que no incluyan este tipo de elemen-tos gráficos.

De ahí que cuando se habla de la historia del diseño gráfico, también se cita la tipografía de la columna trajana, las minia-turas medievales, la imprenta

de Johannes Gutenberg, la evo-lución de la industria del li-bro, los afiches parisinos, el Movimiento de Artes y Ofi-cios (Arts and Crafts), Wil-liam Morris, la Bau-haus, etc.

LAHISTORIADE LA INFLUENCIA La introducción de los tipos móviles por

. 4

D E LD I S E Ñ O GRAFICOY LA TIPOGRAFÍA

fragmento del libro de Kells

Johannes Gutenberg hizo los libros más baratos de producir, aumentando su difusión. Los primeros libros impresos (in-cunables) marcaron el modelo a seguir hasta el siglo XX. El diseño gráfico de esta época se conoce como Estilo Antiguo (especialmente la tipografía que estos primeros tipógrafos usaron) o Humanista, como la escuela filosófica pre-dominante de la época.

En el siglo XIX en las calles se presentaron los carteles comoexpresión de la vida social, económica y cultural. Aqui es donde se presenta la influencia de Toulouse-Lautrec (1864-1901), influyó notable-mente en la elaboración del cartel moderno (poster). En-tendía que los carteles eran un medio de comuni-cación con otras personas, que se dirigía a cierta audiencia. Descubrió la importancia de trasladar su trabajo a la im-prenta, y a provechó la lito-grafía a gran escala. En Berlín, un grupo de dise-ñadores asociado con una fir-

ma de impresión (Hollerbaum und Schmidt) rompió una nueva barrera: sus carteles re-stringieron la imagen al obje-to que se estaba anunciando, y las pa-labras a la marca del fabricante. Este estilo se con-oce como cartel - objeto (Sachplakat).

Pero mi interes en este caso es detenerme en el desarrollo

ToulouseLautrecDivan Japonais1893

. 5

TOULOUSELAUTREC

relación del diseño con la era industrial

del diseño gráfico tal como lo conocemos hoy, el diseño que se desarrolló gracias a todos los cambios sucedidos por la revolucion industrial.José Ignacio Armentia apunta esta relación entre el diseño y la era industrial: “La idea de un producto concretada teóricamente después de estu-dios previos de necesidades de mercado y de sistemas y costes de producción, a fin de val-orar la funcionalidad y rent-abilidad, exige una proyección gráfica que posibilite su mate-rialización. Sería aquí donde

entraría en juego el diseño. Se trataría de crear formas con-jugando estética y funciona-lismo, y seleccionar entre ellas la más adecuada al fin pro-puesto.” (1) Herbert Spencer en su li-bro Pioneros de la Tipografá moderna,(1995) “El nuevo vocabulario de la tipografía y del diseño gráfico se fraguó en menos de veinte años (...) Por supuesto, la tipografía moder-na no fue fruto de la repentina invención de un hombre, ni si-quiera de un grupo. Nació como una respuesta a las

nuevas exigencias y a las nue-vas oportunidades que el siglo XIX trajo consigo. La violen-cia con la que la tipografía moderna irrumpe en escena a comienzos del siglo XX refleja la agresividad con la que los nuevos conceptos sobre arte y diseño, en cada campo, bar-rieron convenciones agotadas y atacaron actitudes que no tenían relevancia en una so-ciedad altamente industrial-izada.”

La Bauhaus, la famosa escuela de artes y artesanías, establecida en Weimar (Ale-mania), en 1919. La Bauhaus estuvo justamente en el plano de la comunicación gráfica, en la conformación de su especialidad como un área moderna de incumben-cia, no equiparable a las an-tiguas artes gráficas. Allí in-tervinieron, aportes técnicos y conceptuales de la psicología, la publicidad y la propaganda de masas, generando un espacio nuevo de articulación y de expresión, donde la proyec-tación se abría no solamente

La emblemáti-ca tipografía diseñada en los propios talleresde la Bauhaus.1923

.6

BAUHAUS SCHULE

Holland post-er by Dick Elfers.a la innovación tipográfica y formal sino a la inclusión de la fotografía y otras composicio-nes plásticas. La utopía del or-den y el ideal de la ilustración de lograr la democratización del acceso al conocimiento y a la distinción de los sa-beres, se plasmaban aquí en un primer paso fundamental: la legibilidad.

En los años 60, La revolución electrónica ofreció la posi-bilidad de utilizar imágenes almacenadas desde períodos anteriores y de transformar sus contenidos en algo contemporáneo, a través de la manipulación digital. La evolución de la comu-nicación impresa se debió entonces, principalmente, a los avances de las nuevas técnicas y de la tecnología informática, que entregaron

al diseñador el control sobre los medios gráficos de produc-ción y reproducción. Pero los cambios de estilo estuvieron provocados, más allá de los avances de la tecnología y de los medios de comunicación, por las mudanzas en el com-portamiento de la sociedad.

El diseño gráfico fue llamado

a solucionar problemas de comunicación y acabó siendo reconocido por los consumi-dores como sinónimo de moda y buen gusto. La teoría “el medio es el mensaje” El desarrollo de la tecnología gráfica propició el control casi absoluto del diseñador sobre la producción . 7

EVOLUCIÓNDE LACOMUNICACIÓNIMPRESA

poster del festival Holland por Dick Elfers.

13.07CLASE 3LENGUAJECOMPUTACIONAL

Mapa 3D de laWorld Wide Web

Desde los 60 hasta el auge de los 80, la informática permitió progresivamente que la cre-ación, la organización y el al-macenamiento de los elemen-tos gráficos se concentrasen en el ámbito controlado por el diseñador.

Durante el siglo veinte, los me-dios de comunicación adop-taron nuevas formas y cada nueva técnica desarrollada aportó al diseñador un control mayor sobre el proceso gráfico. Es innegable, pues, que en los años 90 las nuevas formas de comunicación de la era digital, como es el caso del sistema de distribución de información World Wide Web de Internet, están presentando nuevos desafíos al diseñador y por ende al futuro del di-seño gráfico. Las páginas web son en reali-dad documentos electrónicos

con enlaces de hipertexto o hipermedia que posibilitan la navegación virtual por las in-formaciones disponibles en Internet.

H T M LHasta 1993, la tarea de crear una página Web estuvo reser-vada a los técnicos en infor-mática que sabían manejar las etiquetas y códigos HTML (Hypertext Markup Language / Lenguaje de Marcas de Hip-ertexto), necesarios para la composición de los elemen-

tos de presentación visual. En verdad, la WWW es un nue-vo y complejo campo para el diseño gráfico. Su particular arquitectura y las múltiples posibilidades de añadir imá-genes móviles en animación o en vídeo, fotos, gráficos y tex-tos en un ambiente inter-activo, exigen un estudio de diseño gráfico mucho más profundo, porque al revés que el grafismo impreso, aún no ha habido tiempo para establ-ecer patrones estables para la reciente interfaz gráfica de la Red.

W O R L D WIDEW E B

8 .

PCLASE 1PORTADAS DE P E R I Ó D I C O S

A P U N T E S


“La libertad de un diseña-dor comienza cuando te-nemos claros los límites” J.B.

¿ Cómo hacemos para lle-var las noticias a un medio impreso?En este caso es conocer a que publico esta dirigido el diario, eso definirá que temas queremos abordar

y el diseño que el diario tendra. Para entender el proceso productivo de la priori imprenta permite enteder el diseño actual, gutember por ejemplo las letras actuales tienen directa relacion con la madera. En la priori imprenta las le-tras eran puestas en un encuadre de madera, algo asi como una caja. Al ver la diagramacion de una pagina se puede ver la geometria que ya habia sido pensada con la invención de la imprenta.

portadas de periodicos

tarea 1Reconocer la geometria de un diario, cual es su diagramación , es un analisis gráfico.En este ejemplo se muestra el analisis de grafias, en busca de una escala de grises.

primero un tipo era de Gutember y despues caja de madera donde se calsaban la letras.

10 .

“Los procesos productivos van condicionando al diseño”J.B.

La portada viene a una geometria, hay que entender que el diseño de la portada de un diario no es mas impor-tante que el contenido. Enseñar a la gente a usar la tipo-grafia. Es uno como diseñor el que propone el juego al lector, al tener una estructura constante del diseño de nuestro diario, se crea una imagen indentitiva del diario. El lector sabe que ese diseño representa a ese diario y no a otro.

logotipo: Entra en juego el logo del diario, que identifica el caracter del dia-rio, puede apoyarse en imá-genes tambien.

legibilidad en el diseñoLa consideración clave al elegir un tipo de texto en la diagramación de un diario es su legibilidad. Por legibilidad entendemos la facilidad con la que las palabras pueden leerse cómodamente, a una velocidad normal de lectura.Ejemplos de comparaciones de tipo de letras y texto en funcion de la legibilidad: .con serif- sin serif . caja alta - caja baja.tamaño del tipoChristofer Perfect, Tipografía

Quad City Times Iowa, EEUU. diario elegido para el estudio gráfico.

11.

CCLASE 2C O L O R E IMPRESIÓN

A P U N T E S


“El diseño es ductil a la infor-macion”Modelo aditivo RGBRojo,verde, azul tiende hacia la luz plena, es el color usado para las pan-tallas como dice su nombre,los colores se dan por la su-ma de estos tres colores.Modelo sustractivo CMYK cian, magenta, amarillo más ki( seria el negro)

es una cuatricromia este modelo de color es el que se usa para todo lo que es impresión. Tratar de calibrar el color de la pantalla al perfil de color de la impresora es algo muy complicado ya que estos dos trabajan con dos modelos de colores diferentes.Tono continuo imagen digitalizada, un original de tono continuo está formado por un número de variable de tonos intermedios entre blanco y negro ya sean imágenes mono-cromáticas opolicromáticas.

color e impresión

tarea 2Luego de la primera tarea, donde se hizo un analisis gráfico de la portada de un diario, con ese mismo analisis se hace una reproducción de la por-tada.

Modelo RGB

13.

Tramas de semitonoTinta negra escala de grises 1 a 100. Postcrpit adobe pérmite hacer traducciones de imagenes y tipografias.tramas: como se cier-ran y abren los cuatro tonos dispuestos en puntos, esto se llama punto de roseta ya que la disposición de puntos describe una figura

geométrica hexagonal),llamado ángulo de trama, donde cada color básico de selección (CMYK), posee un ángulo particular,que permite,al entrecruzarse todas las retículas, la formación de la roseta. Su función es, por ilusión óptica fundir tales puntos en la retina del ojo para que se pueda apreciar “tonos” y no “puntos”. Tinta plana TpEs una tinta sin puntos la tinta es traslucida y acuosa, la sumatoria de colores, por eso muchas ocurre un efecto lla-mado trapping que es cuando dos tintas se juntan ima-genes que se imprimen. relaciondas con su soporte, ppi.

Modelo CMYK

efecto moiréLa superposición de dos o más patrones de dibujos repetitivos (las tramas de semitono lo son) suelen producir la aparición de un nuevo patrón repetitivo no deseado. A este molesto y muy evidente patrón se le llama con el galicismo aceptado de muaré (en francés moirè).En impresión, el muaré se evita ante todo con la variación de ángulos de trama y con la superposición acertada de esas tra-mas para que formen un pequeño motivo llamado roseta y me-diante el uso de tramas estocásticas.

14.

MMODELOS DE COLORCMYK-RGB

T A R E A S

cianmagenta amarillonegro(ki)

Modo de color CMYKEl modelo CMYK se basa en la cualidad de absorber y rechazar luz de los objetos. Si un objeto es rojo esto sig-nifica que el mismo absorbe todas las componentes de la luz exceptuando la compo-nente roja. Los colores sustracti-vos ( CMY) y los aditivos ( RGB) son colores com-plementarios. Cada par de colores sustractivos crea un color aditivo y viceversa.

.16

MMODELOS DE COLORC M Y K

En el modo CMYK de Photoshop, a cada píxel se le asigna un valor de por-centaje para las tintas de cuatricromía. Los colo-res más claros ( iluminados) tienen un porcentaje peque-ño de tinta, mientras que los más oscuros ( sombras) tienen porcentajes mayores.

Por ejemplo, un rojo brillan-te podría tener 2% de cyan, 93% de magenta, 90% de amarillo y 0% de negro. En las imágenes CMYK, el blanco puro se genera si los cuatro componentes tienen valores del 0%. Se utiliza el modo CMYK en la preparación de imá-genes que se van a imprimir en cualquier sistema de im-presión de tintas. Aunque CMYK es un modelo de color estándar, puede variar el rango exacto de los colo-res representados, depen-diendo de la imprenta y las condiciones de impresión.

. 17

MODELO

R G Brojo verde azul

La descripción RGB (del inglés Red, Green, Blue; “rojo, verde, azul”) de un color hace referencia a la composición del color en términos de la intensidad de los colores primarios con que se forma: el rojo, el verde y el azul. Este espacio es el adecuado para representar imágenes que serán mostradas en monitores de computadora o que serán impresas en impre-soras de papel fotográfico.

.18

El color es la sensación pro-ducida por los rayos lumino-sos al impresionar los órganos visuales (ojos) en función de la longitud de onda.

Las imágenes RGB utili-zan tres colores para repro-ducir en pantalla hasta 16,7 millones de colores. RGB es el modo por defecto para las imágenes de Photoshop.

MONITORR G B Los monitores de or-denador muestran siem-pre los colores con el modelo RGB. Esto significa que al trabajar con modos de color diferentes, como CMYK, Photoshop convierte tem-poralmente los datos a RGB para su visualización. Para indicar con qué pro-porción mezclamos cada color, se asigna un valor a cada uno de los colores primarios, de manera, por ejemplo, el valor 0 signifi-ca que no interviene en la mezcla, y a medida que ese valor aumenta, se entiende que aporta más intensidad a la mezcla. .19

R G B

El modo RGB asigna un valor de intensidad a cada píxel que oscile entre 0 ( negro) y 255 ( blanco) para cada uno de los componentes RGB de una imagen en color. Por ejemplo, un color rojo brillante podría tener un valor R de 246, un valor G de 20 y un valor B de 50. El rojo más brillante que se puede conseguir es el R: 255, G: 0, B: 0. Cuando los valores de los tres componentes son idénticos, se obtiene un matiz de gris. Si el valor de todos los com-ponentes es de 255, el resultado será blanco puro y será negro puro si todos los componentes tienen un valor 0. Este espacio de color tiene su representación en el selector de color de Photoshop.

ACLASE 3PROCESOS

DE EDITORIAL

A P U N T E S


IndesignPara tener una imagen en un documento .idd hay que crear un vínculo entre esta imagen y el archivo de la imagen, no es llegar y copiar. Tener la costumbre de hacer una carpeta nueva para la tarea, y dentro de ella crear

una carpeta para las imagenes, y también para las fuentes.El problema típico del diseñador es usar tipografías y no tener un respaldo, tener el archivo de la fuente guar-dado en un carpeta y al llevar el archivo a la imprenta se encuentra con que la tipografia no es reconocida por el sistema. Esto mismo suele ocurrir con las imagenes si uno no tiene una carpeta, estas al ser abiertas en otro computa-dor se pueden perder. Todo este procedimiento servirá para poder realizar la próxima tarea. Esta es una tarea continua, un tra

procesos e neditorial

Realización de una bita-cora,, algo asi como un cuaderno de registro digital de todas las clases. Esta bitacora se basa en un geometría de pagina ba-sada en 1/3 de la pagina.

tarea 3

21 .


bajo alimentado periodi-camente en el tiempo. Es una bitácora digital se indentifican las clases ab-stract. se trata de tal cosa dibujos textos, etc. ubicar en algun lugar las cosas que se descubren. En un PDF y un .idd a la mano se trae orga-

nizada la informacion que se tiene.

tips and t r i c k sCtrl + D placeCtrl + T ventana de caracterCtrl + N nuevo documentoCtrl + C copiar

Ctrl + X cortarCrtl + V pegarV herramienta de selec-ciónA Herramienta de selección directa.T textoN herramienta lineaF herramienta marco rectangular

imagen vectorialPara evitar los defectos y pérdidas de imagen que se producen en la imágenes tipo bitmap, las imágenes compuestas por líneas, figuras planas y textos se pueden guardar como imágenes vectoriales donde los elementos gráficos se forman utilizando vectores. La principal ventaja de las imágenes vectoriales es su capacidad de almacenar los dibujos en un archivo muy compacto, ya que sólo se requiere la información necesaria para generar cada uno de los vectores. Los vectores pueden definir algunas propiedades de los objetos como el grosor de la línea o in-cluso el color de relleno de los objetos.

imagen vectorial

22.

IDDE LOSFORMATOS IMAGENESDIGITALES

INVESTIGACION

ID24 .

IMAGENVECTORIAL(Gráficos de vector, gráficos orientado a objetos (object-oriented graphics), SVG)

Se refiere al uso de fórmu-las geométricas para repre-sentar imágenes por software y hardware. Esto significa que los gráficos vectoriales son creados con primiti-vas geométricas como puntos, líneas, curvas o polígonos.Las imágenes vectoriales son más flexibles que las de mapa de bits porque pu-eden ser redimensionadas y extendidas sin perder cali-dad. Incluso la animación por gráficos vectoriales suele ser más sencilla y ocupar menos espacio que las de gráficos de mapa de bits. Otra ventaja de los gráficos vectoriales es que su representación suele requerir menos memoria y menos es-pacio de almacenamiento.

La mayoría de los siste-

Los gráficos vectoriales almacenan la información en fórmulas matemáticas.

mas gráficos sofisticados (CADD y software de ani-mación) utilizan gráficos por vector. Las fuentes son representadas como vectores llamadas fuentes orientadas a objetos o fuentes de vectores. La mayoría de los dis-positivos de salida (im-presoras, monitores, demás) están basados en imágenes por puntos, esto significa que todos los grá-ficos vectoriales deben ser convertidos a un mapa de bits antes de su salida.

gráficos vectoriales.Ha de destacarse que las fotografías no pueden al-macenarse vectorialmente, pero sí existen programas trazadores de imágenes que intentan llevar las imágenes de mapa de bits hacia grá-ficos vectoriales. El re-sultado es una imagen tipo dibujo animado.

En tanto, aquellas imágenes que contienen texto (por ejemplo un texto escaneado), pueden convertirse a gráfi-cos vectoriales y así hacer el texto editable. Estos siste-mas son llamados OCR.El flash, las fuentes, los gráf-icos en 3D, etc. utilizan grá-ficos vectoriales.Algunos de los formatos gráficos que aceptan vec-tores son AI (de Illustra-tor), CDR (de Corel Draw), DXF (formato de intercam-bio de AutoCad)

. 25

26 .

El gráfico Rasterizado es también llamado mapa de bits o bitmap. Un gráfico o imagen rasterizada es un fichero de datos que repre-senta una matriz de píxeles (puntos de colores) denomi-nada raster. En esta matriz el color de cada píxel es definido individualmente.

Los gráficos rasterizados al ser ampliados comienzan a pixelarse, o sea, se agran-dan los elementos constitu-yentes del gráfico, y pierden calidad. En cambio los grá-ficos vectoriales pueden am-pliarse sin límites.

B I TMAPG R Á F I C O R A S T E R I Z A D O

Los gráficos rasterizados son útiles para imágenes fotográficas, las cuales no pueden ser representadas por vectores.La calidad de las imágenes rasterizadas es determinada por el total de píxeles que poseen (resolución) y la cantidad de información en cada píxel (generalmente llamada profundidad de col-or).

Los gráficos rasterizados (mapa bit) necesitan ser comprimidos porque suelen necesitar muchos datos para poder almacenar imágenes de alta calidad. Algunas técnicas de com-presión, para lograr un tamaño menor, sacrifican información de la imagen para lograr su objetivo. Esto hace que la imagen pierda calidad y que esta no pueda ser recuperada.

Un método para representar imágenes gráficas es a través de mapa de bits o gráfico ras-terizado, en donde la ima-gen está compuesta por una matriz de puntos (píxeles). error en mapa bit

. 27

Bitacora Damaris1º parte

Travel

Transcript of Bitacora Damaris1º parte