SlideShare una empresa de Scribd logo
INTRODUCCION AL
DISEÑO DIGITAL
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
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.
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
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.
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
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.
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
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
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
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
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).
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.
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
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
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
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
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
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
Formatos nativos de aplicaciones de
diseño
Ver Apunte

Más contenido relacionado

La actualidad más candente

Qué es world wide web
Qué es world wide webQué es world wide web
Qué es world wide web
LauJaim
 
Diseño gráfico digital
Diseño gráfico digital Diseño gráfico digital
Diseño gráfico digital
Jorge Hernandez
 

La actualidad más candente (20)

El diseño web
El diseño webEl diseño web
El diseño web
 
1 Qué es una presentación digital
1 Qué es una presentación digital1 Qué es una presentación digital
1 Qué es una presentación digital
 
Historia de la web 4.0
Historia de la web 4.0Historia de la web 4.0
Historia de la web 4.0
 
Planificacion sitio Web educativo
Planificacion sitio Web educativoPlanificacion sitio Web educativo
Planificacion sitio Web educativo
 
Páginas web
Páginas webPáginas web
Páginas web
 
Ventajas y Desventajas de los Sitios Web
Ventajas y Desventajas de los Sitios WebVentajas y Desventajas de los Sitios Web
Ventajas y Desventajas de los Sitios Web
 
INTERNET
INTERNETINTERNET
INTERNET
 
LOS MEDIOS MULTIMEDIALES
LOS MEDIOS MULTIMEDIALESLOS MEDIOS MULTIMEDIALES
LOS MEDIOS MULTIMEDIALES
 
Internet
InternetInternet
Internet
 
El chat
El chatEl chat
El chat
 
Blender
BlenderBlender
Blender
 
"Maquetación"
"Maquetación" "Maquetación"
"Maquetación"
 
Correo electronico
Correo electronicoCorreo electronico
Correo electronico
 
Qué es world wide web
Qué es world wide webQué es world wide web
Qué es world wide web
 
Diseño gráfico digital
Diseño gráfico digital Diseño gráfico digital
Diseño gráfico digital
 
¿Que es Multimedia?
¿Que es Multimedia?¿Que es Multimedia?
¿Que es Multimedia?
 
Navegadores web
Navegadores webNavegadores web
Navegadores web
 
Diapositivas sobre el internet
Diapositivas sobre el  internetDiapositivas sobre el  internet
Diapositivas sobre el internet
 
Web 1.0, 2.0, 3.0.4.0
Web  1.0, 2.0, 3.0.4.0Web  1.0, 2.0, 3.0.4.0
Web 1.0, 2.0, 3.0.4.0
 
Herramientas digitales
Herramientas digitalesHerramientas digitales
Herramientas digitales
 

Similar a INTRODUCCION AL DISEÑO DIGITAL (20)

Clase 5 imágenes
Clase 5   imágenesClase 5   imágenes
Clase 5 imágenes
 
Actv 8
Actv 8Actv 8
Actv 8
 
3.1
3.13.1
3.1
 
Corel draw x5
Corel draw x5Corel draw x5
Corel draw x5
 
Corel draw x5
Corel draw x5Corel draw x5
Corel draw x5
 
Corel draw x5
Corel draw x5Corel draw x5
Corel draw x5
 
Introducción a la imagen
Introducción a la imagenIntroducción a la imagen
Introducción a la imagen
 
Corel
CorelCorel
Corel
 
Fdw imagenes 2010-ii
Fdw imagenes 2010-iiFdw imagenes 2010-ii
Fdw imagenes 2010-ii
 
Técnicas Digitales: Clase15 illustrator an2017
Técnicas Digitales: Clase15 illustrator an2017Técnicas Digitales: Clase15 illustrator an2017
Técnicas Digitales: Clase15 illustrator an2017
 
TD_Clase15 illustrator an2018
TD_Clase15 illustrator an2018TD_Clase15 illustrator an2018
TD_Clase15 illustrator an2018
 
Gaga (1)
Gaga (1)Gaga (1)
Gaga (1)
 
Programas para crear diagramas
Programas para crear diagramasProgramas para crear diagramas
Programas para crear diagramas
 
Entorno de trabajo de Adobe flash 8
Entorno de trabajo de Adobe flash 8Entorno de trabajo de Adobe flash 8
Entorno de trabajo de Adobe flash 8
 
trabajo
trabajotrabajo
trabajo
 
Trabajo
TrabajoTrabajo
Trabajo
 
Software
SoftwareSoftware
Software
 
Insckape
InsckapeInsckape
Insckape
 
Insckape
InsckapeInsckape
Insckape
 
Introducción al Diseño Gráfico
Introducción al Diseño GráficoIntroducción al Diseño Gráfico
Introducción al Diseño Gráfico
 

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