El documento aborda la introducción al diseño digital y las herramientas utilizadas en este campo, como programas de composición, ilustración y tratamiento de imágenes. Se destacan los tipos de publicaciones impresas y digitales, así como principios básicos de diseño que deben guiar la creación visual. Además, se analizan las diferencias entre programas de pintura y dibujo, las ventajas del formato vectorial, y los formatos de imagen apropiados para la web.

1. INTRODUCCION AL
DISEÑO DIGITAL

2. INTRODUCCION
• Los programas de composición de página, como
Pagemaker, QuarkXpress o Indesign. Pretenden hacer lo
mismo algunas alternativas más domésticas como el
Publisher de Microsoft.
• Aplicaciones de ilustración (o dibujo vectorial) como
Illustrator, CorelDraw o Freehand.
• Utilidades de tratamiento de imágenes y fotografías,
como Photoshop o Paintshop Pro.
EVOLUCION del Proceso de Producción Editorial
INTEGRACION DE ESTAS FUNCIONES

3. PUBLICACION
• IMPRESA:
– revistas, libros, boletines, folletos, tarjetas,
volantes, etc.
• DIGITAL:
– Portales o Sitios Web, revistas, libros, boletines,
publicidad, brochures digitales, etc.
– WEB – EMAIL – CD – DVD – etc.

4. Diseñar con sentido común
• El diseño ha de servir al contenido, y debe elaborarse en
función de éste.
• El diseño debe estar bien organizado o estructurado.
• Debe existir contraste entre los elementos, ayudando a
diferenciarlos, pero dentro de una unidad.
• Los elementos clave deben enfatizarse.
• Un buen diseño a menudo tiende a la simplicidad.
• La consistencia debe ser un criterio prioritario.
Las reglas básicas del diseño son aplicables
también al diseño digital
PASAR por la biblioteca

5. Edición de gráficos e imagen
• La industria editorial actual se basa en medios
infográficos.
• La clave del tratamiento de las imágenes son los
programas de gráficos
• A estos podemos dividirlo en dos categorías principales:
– Programas de Pintura (PAINT)
– Programas de Dibujo (DRAW)
• Esta división obedece a la manera que tienen estos
programas de crear y manejar las imágenes.

6. Los programas de pintura (Paint)
• Se emplean para el retoque fotográfico y para
efectuar montajes de imágenes
• Los archivos de imagen de estos programas son una
especie de mosaico de puntos minúsculos —cada
punto es un píxel o elemento de la pantalla— al que
asignan colores para formar la imagen
• Resultado: fotografías, imágenes con un aspecto de
pintura o dibujo natural

7. Los programas de dibujo o
ilustración (Draw)
• Crean las formas como objetos geométricos
caracterizados por:
– una combinación de líneas rectas y curvas,
abiertas o cerradas
– Tienen un contorno de grosor y color a elegir, y
con relleno o sin él.
– Los objetos pueden ordenarse unos respecto de
otros, agruparse o mantenerse independientes
• Resultado: gráficos que difícilmente pueden ser tan
realistas como los bitmaps, pero que pueden
escalarse a cualquier tamaño sin perder calidad.

8. Las elecciones más
profesionales
• Pintura (DRAW) :
– Adobe Photoshop,
– Corel PhotoPaint,
– MetaCreations Painter,
– Ulead PhotoImpact,
– PaintShop Pro
• Dibujo o Ilustración (DRAW):
– CorelDraw,
– Adobe Illustrator,
– Macromedia Freehand
– Xara
La realidad es
que muchos de
estos programas
ya combinan
ambas funciones
pero su fuerte es
una

9. Mapas de bits – BitMaps –
Raster Images
• Es la producción de un
programa de Pintura,
asignando un color a cada
punto de la pantalla o píxel.
(Esto se hace evidente al ampliar al
máximo una imagen de mapa de bits
cualquiera )
• El conjunto de estos puntos
crea la ilusión de una imagen

10. Colores – Resolucion – Capas,
Canales y Mascaras (Bitmaps)
• Los mapas de bits pueden estar definidos en un número
de colores variable.
• Cuantos más colores tenga la imagen, mayor calidad
tendrá y ocupara mayor espacio de almacenamiento
• Existen diferentes sistemas de compresión: GIF, PNG o
JPG
• Color en términos de bits: 1 bit = 2 col, 4 bit = 16 col
• CAPAS
• CANALES
• MASCARAS

11. Adquisición de imágenes:
escanear
• Qué es un Escáner?
• Costo
• El escáner es una herramienta invaluable para el
diseñador
• Podemos incorporar rápidamente fotografías o
Diapositivas
• Podemos incorporar dibujos para calcar y retocar

12. Dibujo e ilustración vectorial
• Los programas de ilustración se distinguen por dibujar
una serie de objetos, definidos de forma matemática, ej:
– Photoshop dibuja un círculo como un conjunto de puntos en
forma redonda (tan bien como puede).
– CorelDraw genera una instrucción geométrica: dibuja un
círculo con centro en el punto (x,y) y con un radio r (circulo
perfecto)
• VECTOR: objeto constituído por una serie de puntos y
líneas rectas o curvas, definidas matemáticamente, (a
través de las llamadas Curvas de Bézier).

13. Curvas de Bézier
• Se trata de definir puntos de
anclaje (también nodos) unidos
entre si por una recta o curva,
la cual se define mediante los
puntos de control (también
manejadores o manecillas)
• Tienen:
– Contorno (de espesor y
color configurable)
– Relleno (de color
configurable) si el Vector u
objeto es cerrado.
• Modo de creación de un Vector
y Modificación.

14. Ventajas del formato vectorial
(y limitaciones.)
• No importa el tamaño a que queramos dibujar; siempre
aparecerá con la misma nitidez, sin merma de calidad por
el escalado.
• Cada objeto viene definido por sus propias fórmulas y se
maneja independientemente del resto. Puede escalarse,
distorsionarse, cambiar de forma o resituarse sin afectar
para nada los otros elementos del dibujo.
• Se puede controlar con gran precisión la forma,
orientación y ordenación de los elementos.
• Cualquier efecto que se aplique a los objetos puede
rectificarse en cualquier momento: el dibujo es siempre
editable.
• Las principales limitaciones de los vectores son sobre
todo su aspecto más frío, más de ordenador

15. Formatos vectoriales principales
• CorelDraw son .CDR, los de Xara, .XAR, los de windows
Draw, .DRW... estos ficheros son incompatibles entre sí, y
a menudo, de una versión a otra también
• El más importante dentro del mundo de la impresión y del
diseño gráfico es el PostScript. Se trata de un lenguaje de
definición de páginas y objetos en formato vectorial
(estándar mundial)
• Adobe Illustrator y Freehand crean ficheros en PostScript
nativo, con una extensión .AI o .ART el primero y .EPS el
segundo.
Cada programa de ilustración maneja su propio formato

16. FORMATOS GRÁFICOS PARA LA WEB
• Requisito de una imagen para la web:
– debe poder ser vista en diferentes exploradores
– Su tamaño
• En resumidas cuentas, podemos decir que existen tres
tipos de formato de imagen que están pensados para la
web:
– GIF
– JPG
– PNG

17. GIF
• Puede tener un máximo de 256 colores (8 bits)
• Es, hoy por hoy, el único formato que permite mostrar
animaciones
• Se utiliza para Imágenes que contengan una baja gama
de colores por ejemplos dibujos (no así fotografías)
JPEG GIF PNG
4.974 bytes 2.394 bytes 1.613 bytes

18. JPG
• JPG es una maravilla por sus posibilidades de
compresión, podemos tener una imagen con millones de
colores sin que por ello el tamaño del archivo sea muy
grande
• Es utilizado gralmente para imágenes fotográficas.
JPEG GIF PNG
6.565 bytes
24 bits
25.522 bytes
256 cols
52.361 bytes
24 bits

19. PNG
• Posee gran parte de las ventajas de un GIF y gran parte
de las ventajas de un JPG
• Este formato no está soportado por algunos exploradores.
JPEG GIF PNG

20. Formatos nativos de aplicaciones de
diseño
Ver Apunte