Bitacora.Indd

15
INDICE Prologo Pre oresa digital Color e impresión Medios de produccion digital Clase 01 Clase 02 Periódico Prensa Diagrama- ció Geometria Diseño forma Clase 03 Periódico Prensa Diagrama- ció Geometria Diseño forma Clase 04 Clase 05 Periódico Prensa Diagrama- ció Geometria Diseño forma Clase 06 Periódico Prensa Diagrama- ció Geometria Diseño forma Clase 07 Periódico Prensa Diagrama- ció Geometria Diseño forma Clase 01 Clase 02 Periódico Prensa Diagrama- ció Geometria Diseño forma Clase 01 Clase 02 Periódico Prensa Diagrama- ció Geometria Diseño forma Clase 01 Clase 02 Periódico Prensa Diagrama- ció Geometria Diseño forma Clase 01 Clase 02 Periódico Prensa Diagrama- ció Geometria Diseño forma Clase 01 Clase 02 Periódico Prensa Diagrama- ció Geometria Diseño forma Clase 01 Clase 02 Periódico Prensa Diagrama- ció Geometria Diseño forma Diseño y Contenido Arquitectura de la información Pre oresa digital Color e impresión Medios de produccion digital Medios de produccion digital

Transcript of Bitacora.Indd

Page 1: Bitacora.Indd

INDI

CE

Prologo

Pre oresa digital

Color e impresión

Medios de produccion digital

Clase 01Clase 02

PeriódicoPrensa

Diagrama-ció

GeometriaDiseño

forma

Clase 03

PeriódicoPrensa

Diagrama-ció

GeometriaDiseño

forma

Clase 04Clase 05

PeriódicoPrensa

Diagrama-ció

GeometriaDiseño

forma

Clase 06

PeriódicoPrensa

Diagrama-ció

GeometriaDiseño

forma

Clase 07

PeriódicoPrensa

Diagrama-ció

GeometriaDiseño

forma

Clase 01Clase 02

PeriódicoPrensa

Diagrama-ció

GeometriaDiseño

forma

Clase 01Clase 02

PeriódicoPrensa

Diagrama-ció

GeometriaDiseño

forma

Clase 01Clase 02

PeriódicoPrensa

Diagrama-ció

GeometriaDiseño

forma

Clase 01Clase 02

PeriódicoPrensa

Diagrama-ció

GeometriaDiseño

forma

Clase 01Clase 02

PeriódicoPrensa

Diagrama-ció

GeometriaDiseño

forma

Clase 01Clase 02

PeriódicoPrensa

Diagrama-ció

GeometriaDiseño

forma

Diseño y Contenido

Arquitectura de la información

Pre oresa digital

Color e impresión

Medios de produccion digital

Medios de produccion digital

Page 2: Bitacora.Indd

Introducción Pre-prensa digital

Page 3: Bitacora.Indd

6

de

j

ul

io

Clase

5

Introducción Pre-prensa digital

La preprensa digital, geometria,diseño.Introduccion a la tematica de el curso en el tema de la preprensa digital, diseño periodistico y editorial. Se pantea la idea de una primer avance repsecto de la investigacion de los medios y el planteamiento de el diseño perio-distico como la complejidad de una constante que fortalese lo fi gurativo o mas bien una vguedad del periodico en cunatoa su bellesa constructiva.

El periodico elemento de comunicacion indirecto que proporciona informacion de acontecer cotidiano que reune una comunidad, ciudad, cultura,

etc. con un fi n primero de infor-mar y esto de forma rapida di-recta (enc uanto a informacion) presicion y conviccion.De lo que a nosotros com dise-ñadores nos preocupa su forma o fi gura de presentacion “ima-gen” sin que esta deje de ser concreta mente funcional y que identifi que siertas cualidades que lo dejan dentro de un marco optimo para su comersialisacion economica.

Diagramacion engeneral los periodicos utili-zan un sistema de columnageque se refi era la divicion geo-metrica del espacio o formato defi nido, formato que tiene di-recta proporcion con la diagramacion ya que todo lo que se ponga en ella tiene que ser medido por este espacio total.Uno de las cosas fundamenta-les de un periodico es el dis-

tingo, como hacer para que aparesca una noticia respecto de la otra y que noticia es mas importante o incluso cual debe ser leida mas calmadamente. todos estos puntos se tocan a la hora de diseñar un periodico. puntos que por supuesto si-guiendo un riguroso es quema y orden en el tiempo dejaran en evidencia una continuidad y un registro que permitira recono-cer un periodico de otro.

EncargoTomar la portada de un periódico no nacional y hacer un análisis des de el punto de vist a del diseño y

su es tructura.

Realizar una pres entación de lo encontrado.

Fragmento Periodico - img.1 Portada Periodico - img.2 Pelos, lineas estructuradoras - img.3

imagen de analicis de encargo- img.4

P e r i ó d i c o

P r e n s a D i a g r a m a c i ó

G e o m e t r i a

D i s e ñ o f o r m a

01

Page 4: Bitacora.Indd

6

de

j

ul

io

Clase

7

Introducción Pre-prensa digital

P e r i ó d i c o

T i p o s m ó v i l e s D i a g r a m a c i ó n

G u t e n b e r g

P r e n s a J e r a r q u í a

De la forma impresa a el DiseñoDada la existencia del diseño periodístico así también como su historia en el transcurso de muchos años la prensa se inicia como una forma, formal, de replicar la información y esta distribuirla, de un comienzo como principio básico es la im-prenta la que se desarrolla para modifi car en la historia de la escritura escrita a la impresa atreves de tipos móvi-les que serán creados por artesanos talladores en madera que después de un largo trabajo en la confección de las tipogra-fías desarrollaron técnicas, nuevas y mejores formas de hacer los tipos que imprimirían en secuencias ordenas las palabras.

Algunos detalles de la prensa que se dieron por ma-nifestación del impreso fue los pelos que quedan hasta el día de hoy como imagen de lo antiguo que hoy llama-dos fi letes, tiene funciones de separación y guía de textos.

Gutenberg tomo la iniciativa de la imprenta e in-venta una primera etapa de lo que hoy llamamos pre-prensa digital, en la cual se diseña o diagrama la disposición de las materias de una página. Con ayuda de los artesanos a quienes encarga lo tipos mó-viles y el diseño de un proce-so de impresión se hacen los primeros escritos no manus-critos “impresos”.

Con el tiempo comienzan a apa-recer algunas variaciones y de-cisiones gráfi cas como tipogra-fías líneas y diagramaciones.

02

Tipos móviles - img.5 Johannes Gutenberg - img.6 Dibujo imprenta antigua - img.7

Encargo - img.8

EncargoReproducir la portada del periodico ocupado en el en-

cargo anterior.Regist rar todos los pasos realizados ocupando InDe-

sign

Page 5: Bitacora.Indd

Color e Impresión

Page 6: Bitacora.Indd

6

de

j

ul

io

Clase

11

Color e impresión

C o l o r e s i m p r e s i ó n

C o n t r a s t e s

T r a m a s

T i n t a s

d i g i t a l

De lo digital a lo análogoSe presenta el color “como y para” según su uso este aparece tanto en el mundo digital como el material y entre ellos para el diseño se traspasa constante mente de uno a otro.El color es muy complejo dado que depende de cómo noso-tros lo vemos y de muchas variables que son determinantes para las variantes del color.

03

Existen en las teorías del color algunos conceptos como:

Color aditivo: Se refi ere a colores que se utili-zan en el mundo digital, pan-tallas monitores u otros. Y se les nombra aditivos por que se suman en sobre posición para generar mezclas y depende completamente de la luz, ya que las pantallas o sistemas digitales funcionan por luz.

Donde la suma de todos los colores da blanco.

Colores sustrac-tivos: Se le llaman a lo colores que provienen de ma-terias “pigmentos” y que en su suma se consigue el negro. Estos colore son usados en el mundo de las artes y de las impresiones. Tiene una ten-dencia en su superposición a oscurecerse.

El mundo digital funciona bajo el termino RGB (RED GREEN BLUE) y los colores sustracti-vo o de mundo materia se les nombra CMYK (CIAN MAGENTA YELLOW NEGRO (k COLOR)) de esto se desprende las impre-siones en cuatricromía por el uso de los 4 colores.

EncargoElaborar una bitácora en InDes ign usado las he-rr amientas res catadas y adentrandose en las des co-

nosidas.

La bitácora consist e en la elaboración de un cuader-no de anot ación de cada clace con apuntes persona-

les y ot ros.Esta entrega es paulati-na en el taller y acorde al

avance de cada clace.

Espectro de color digital - img.9

Sistema aditivo - img.10 Sistema sustractivo- img.11

1/2

Page 7: Bitacora.Indd

6

de

j

ul

io

Clase

13

Otros términosTono continuaSeparación entre colores. Se les llama así a imágenes digitalizadas.

Tramas de semitonoSon todas las tramas logradas con tinta negra en una escala de grises. 0% blanco y 100% negroEsto se produce con ángulos de trama y con distancia entre puntos con relación a un blanco de fondo.

Separación de colorPara una imprenta el color debe separarse en capas (cua-tricromía 4 capas de color mas un negro de registro) por esto es necesario que el diseñador cree los recortes calados re-servas para que los colores no aparezcan superpuestos si no lo desea.

Color e impresión03

Tonos continuos - img.12 Trama semitono - img13

TrappingSe refi ere al calzado del color con respecto a su espacio en pagina para que no se superpongan y queden área defectuosas que no deberían existir.Resolución de imagenLos DPI(PPP) son la unidad de medida que se refi ere a los puntos de individuales de tinta que tiene una imagen al ser traducida a un impreso.

Cuatricomia - img.14 Resolución de imag. - img.16

Separación de color - img.17

Trapping - img.15

2/2

Page 8: Bitacora.Indd

Medios de produccion digital

Page 9: Bitacora.Indd

6

de

j

ul

io

Clase

17

04 B i t a c o r a

I m a g e n

P a t r o n e s

D i g i t a l C a r p e t a

F o r m a t o

Indesig BitacoraAl igual que en la presa digital la elaboración de una bitácora se rige bajo patrones del diseño como la geometría que es decisión de diseñador lo que permite realizar diferentes juegos y entregar vida a un pagina, construyendo así un medio muy elaborado de comunicar.Dentro del trabajo digital para la producción existen varias situa-ciones que deben enfrentarse para decidir una buena composi-ción. Las imágenes, tipografías colores o no colores, ubicación o posición, entre otras.Inicio de trabajo / InDesignPrimero que todo, es requisito fundamental generar un sector (como una carpeta) de almacenamiento de la información para lo

que se va a realizar, tipografías imágenes textos, otros. Esta carpeta es importante ya que ahí estará nuestro archivo y la vinculación con su contenido.La importación de imágenesLas imágenes deben ser guar-dadas en una carpeta dentro de nuestro sector de alma-cenamiento esto para poder destinarlas e él. Luego en el programa se debe colorar vin-culándola, esto se hace para una correcta utilización de las imágenes y para mantener el peso del archivo independiente del contenido de mayor peso.

Formatos de imágenesTIFF (Tagged Image File Format)

La denominación en inglés “Tagged Image File Format” (formato de archivo de imá-genes con etiquetas) se debe a que los fi cheros TIFF contie-nen, además de los datos de la imagen propiamente dicha, “etiquetas” en las que se ar-chiva información sobre las características de la imagen, que sirve para su tratamiento posterior.

EPS(Encapsulated PostS-cript Languaje)Es un formato de archivo gráfi -co. Un archivo EPS es un archivo PostScript que satisface algu-nas restricciones adicionales. Estas restricciones intentan hacer más fácil a programas de

software el incluir un archivo EPS dentro de otro documento PostScript.Como mínimo, un archivo EPS contiene un comentario Boun-dingBox (bordes de la caja), describiendo el rectángulo que contiene a la imagen. Aplica-ciones pueden utilizar esta in-formación para distribuir ele-mentos en una página, incluso si son incapaces de interpretar el PostScript contenido en el archivo.

PSD (Photoshop Docu-ment) Es un formato que guarda una imagen como un grupo de capas, métodos de fusión, colores, textos, máscaras, ca-

EncargoAvance de la Bitacora

Continuar con la bitacora hasta la ultima clase.

Pres entsar ex pues ta en www.Slideshare.com y en-

viar links para revisar.

Rec onocer el uso de Estilos

Medios de produccion digital1/3

Compresion de pixeles en imagenes - img.18TR

Page 10: Bitacora.Indd

6

de

j

ul

io

Clase

19

04

nales de color, canales alfa, trazados, formas, confi gura-ción de tonos, entre otras. Éste es un formato muy popular que incluso es soportado por programas de la competencia. Este formato permite trabajar con distintas capas después de haber cerrado el programa, al contrario que el jpeg, pero ocupa mucho más espacio y no se puede abrir con programas como el visor de imágenes y fax de Windows, luego es ne-

cesario tener un programa que lea más formatos de imagen si no tienes Photoshop.JPG/JPEG (Joint Photo-graphic Experts Group) es un algoritmo diseñado para comprimir imágenes con 24 bits de profundidad o en escala de grises. JPEG es también el formato de fi chero que utiliza este algoritmo para comprimir imágenes.

GIF(Compuserve GIF o

Graphics Interchange For-mat) es un formato sin pérdida de calidad, siempre que partamos de imágenes de 256 colores o menos. Una imagen de alta calidad, como una imagen de color verdadero (profundidad de color de 24 bits o superior) debería reducir literalmente el número de colores mostrados para adaptarla a este formato, y por lo tanto existiría una pér-dida de calidad.

BMP (o también Bit Map-ped Picture) Es el formato propio del pro-grama Microsoft Paint, que viene con el sistema operativo Windows. Puede guardar imá-genes de 24 bits (millones de colores), 8 bits (256 colores) y menos. Puede darse a estos archivos una compresión sin pérdida de calidad: la compre-sión RLE (Run Length Encoding). El uso más común de este for-

mato es generar imágenes de poco peso para crear fondos para el escritorio de Windows.RAW (en inglés crudo) es un formato de archivo digi-tal de imágenes que contiene la totalidad de los datos de la imagen tal como ha sido capta-da por el sensor digital de la cámara fotográfi ca. El formato RAW no suele llevar aplicada compresión (sea con o sin pér-didas) como ocurre con el po-pular JPEG, aunque en algunos

casos sí se emplea.Debido a que RAW contiene la totalidad de los datos de la imagen captada por la cámara y una mayor profundidad de color (por lo general 30 ó 36 bits/píxel), sus fi cheros tienen un tamaño de archivo muy grande, salvo cuando incorpo-ran compresión, en cuyo caso no aumenta tanto.

Medios de produccion digital2/3

Compresion de pixeles en imagenes - img.19Comparación formato imagenes - img.20

Page 11: Bitacora.Indd

6

de

j

ul

io

Clase

21

3/3 Medios de produccion digital

TRUE TYPEEs un formato de fuente tipo-gráfi ca estándar desarrollada inicialmente por Apple Compu-ter a fi nales de los 1980s como competidor de la fuente Type 1 de Adobe, usada en PostS-cript. La principal fortaleza de TrueType fue que ofrecia a los diseñadores de fuentes un gran grado de control sobre la forma que sus fuentes se mos-traban a diferentes tamaños.

Bajo un convenio microsoft y appel utilisan el mismo for-mato que para las tipografi as.mas adelante microsoft creo varios formatos para su uso como opentype pero ningu-no de los mismos resultados.

PostScriptes un Lenguaje de Descripción de Página (en inglés PDL, Page Description Language), utilli-zado en muchas impresoras y como formato de transporte de archivos gráfi cos en talle-res de impresión profesional. Está basado en el trabajo realizado por John Gaffney en Evans y Sutherland en 1976. Posteriormente, continuaron el desarrollo ‘JaM’ (‘John and Martin’, Martin Newell) en Xerox PARC, y fi nalmente fue

implementado en su forma ac-tual por John Warnock y otros, luego de que él y Chuck Ges-chke fundaran Adobe Systems Incorporated (también cono-cido como Adobe) en 1982.

Sistema de impresion - img.21

04

Page 12: Bitacora.Indd

Diseño y contenido

Page 13: Bitacora.Indd

6

de

j

ul

io

Clase

25

Diseño y contenido05

El diseño contemporáneo pro-pone una concentración e su que hacer como diseño y sepa-ra la información y su diseño para poder entregar mayor funcionalidad al contenido. Al no tener diseño inserto en el se puede utilizar en diversos medios y darle diversas for-mas que serán modifi cables independientes de dicha infor-mación.

Un diseño propone un juego creativo que pretende hacer que el lector pueda interactuar con una página o un espacio di-señado. Existiendo así un sen-tido de orden que podríamos llamar “diagramación”.

Estilos Los estilos como bien se cono-cen en lo común o son formas preformadas o designadas de

alguna manera para generar un orden. Como en la moda o en la música se puede hablar de estilo agrupando diversos grupos que tiene ciertas ca-racterísticas, esto llevado al diseño es un poco más estric-to ya que en general son más bien características asignadas a contenidos para entregar ese orden expresivamente grafi co.

CSSEn el diseño digital esencial-mente en el web se utilizan los estilos con el nombre de casca-das de estilo.

Las hojas de estilo en cascada (Cascading Style Sheets, CSS) son un lenguaje formal usado para defi nir la presentación de un documento estructurado escrito en HTML o XML (y por

extensión en XHTML). El W3C (World Wide Web Consortium) es el encargado de formular la especifi cación de las hojas de estilo que servirá de estándar para los agentes de usuario o navegadores.La idea que se encuentra de-trás del desarrollo de CSS es separar la estructura de un do-cumento de su presentación.

Diseño Digital Encargo

1.-Levantamiento de con-tenidos Revist a WIRED

2.-Levantamiento de actividades de la es cuela

“calendarisación”.

Contenido

Page 14: Bitacora.Indd

Arquitectura de la información

Page 15: Bitacora.Indd

6

de

j

ul

io

Clase

29

Arquitectura de la información06

La Arquitectura de Información es la disciplina encargada del estudio, análisis, planifi ca-ción y fundamentación de la organización, disposición y estructuración de espacios de información, y de la selección y presentación de los datos contenidos en los sistemas de información interactivos.

Plan y forma

La Arquitectura de la Infor-mación no trata del estable-cimiento de un conjunto de pasos o guías predefi nidas, sino de la omnipresente inteli-gencia que subyace detrás del diseño de una interfaz o es-pacio de información. Trata de que interactividad, navegación y contenido, sinérgicamente, permitan una integración sis-témica con el cerebro del usua-

rio y se produzca un fenómeno de persuasión, conocimiento o información simbiótica, que se traspasa de un sistema a otro, según sean los objetivos del proyecto en general y los ob-jetivos iniciales del usuario al interactuar con la interfaz.

De esta forma las acciones de buscabilidad, encontrabilidad y recuperabilidad de informa-ción se realizan en un contexto óptimo en ambos nodos de in-

formación (interfaz y usuario), hacen simbiosis e inician un proceso de comunicación que los enriquece mutuamente. Por un lado la interfaz cumple con su objetivo y puede ser mejorada, y por otro, el usua-rio encuentra lo que busca y lo asimila con facilidad.

Encargo

1.- Construir una revis-ta para la es cuela. es to

implica una organizacion dela informacion posible y

selec cionada.

2.- bitacora al dia 10 de agosto.