SlideShare ist ein Scribd-Unternehmen logo
1 von 20
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

Weitere ähnliche Inhalte

Was ist angesagt?

web 3.0 y 4.0 características , diferencias y similitudes
web 3.0 y 4.0 características , diferencias y similitudesweb 3.0 y 4.0 características , diferencias y similitudes
web 3.0 y 4.0 características , diferencias y similitudes
laurenramirez98
 
Ejercicios del blog
Ejercicios del blogEjercicios del blog
Ejercicios del blog
Payball94
 
Diferencias y similitudes
Diferencias y similitudesDiferencias y similitudes
Diferencias y similitudes
Ydal jhohana
 
Elementos de la comunicacion diseño grafico
Elementos de la comunicacion diseño graficoElementos de la comunicacion diseño grafico
Elementos de la comunicacion diseño grafico
juan carlos
 

Was ist angesagt? (20)

Web 1.0 2.0 3.0 características, definiciones, ejemplos.
Web 1.0 2.0 3.0 características, definiciones, ejemplos.Web 1.0 2.0 3.0 características, definiciones, ejemplos.
Web 1.0 2.0 3.0 características, definiciones, ejemplos.
 
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
 
Páginas web
Páginas webPáginas web
Páginas web
 
Dibujo vectorial
Dibujo vectorialDibujo vectorial
Dibujo vectorial
 
Web 1.0, 2.0, 3.0 Que es, Caracteristicas, Ventajas Y Desventajas
Web 1.0, 2.0, 3.0 Que es, Caracteristicas, Ventajas Y DesventajasWeb 1.0, 2.0, 3.0 Que es, Caracteristicas, Ventajas Y Desventajas
Web 1.0, 2.0, 3.0 Que es, Caracteristicas, Ventajas Y Desventajas
 
Páginas web
Páginas webPáginas web
Páginas web
 
web 3.0 y 4.0 características , diferencias y similitudes
web 3.0 y 4.0 características , diferencias y similitudesweb 3.0 y 4.0 características , diferencias y similitudes
web 3.0 y 4.0 características , diferencias y similitudes
 
Introducción a adobe animate cc
Introducción a adobe animate ccIntroducción a adobe animate cc
Introducción a adobe animate cc
 
Ejercicios del blog
Ejercicios del blogEjercicios del blog
Ejercicios del blog
 
Diapositiva Pagina Web
Diapositiva Pagina WebDiapositiva Pagina Web
Diapositiva Pagina Web
 
Imagen vectorial y mapa de bits
Imagen vectorial y mapa de bitsImagen vectorial y mapa de bits
Imagen vectorial y mapa de bits
 
Caracteristicas De Multimedia
Caracteristicas De MultimediaCaracteristicas De Multimedia
Caracteristicas De Multimedia
 
Diferencias y similitudes
Diferencias y similitudesDiferencias y similitudes
Diferencias y similitudes
 
Diseño editorial: Retículas
Diseño editorial: RetículasDiseño editorial: Retículas
Diseño editorial: Retículas
 
Elementos de la comunicacion diseño grafico
Elementos de la comunicacion diseño graficoElementos de la comunicacion diseño grafico
Elementos de la comunicacion diseño grafico
 
Que es un blog y sus caracteristicas
Que es un blog y sus caracteristicasQue es un blog y sus caracteristicas
Que es un blog y sus caracteristicas
 
Software educativo, presentacion
Software educativo, presentacionSoftware educativo, presentacion
Software educativo, presentacion
 
géneros, estilos, categor+ias de la ilustración gráfica.
géneros, estilos, categor+ias de la ilustración gráfica. géneros, estilos, categor+ias de la ilustración gráfica.
géneros, estilos, categor+ias de la ilustración gráfica.
 
Materiales multimedia
Materiales multimediaMateriales multimedia
Materiales multimedia
 
Tipos de paginas web
Tipos de paginas webTipos de paginas web
Tipos de paginas web
 

Ähnlich wie 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
 
Software
SoftwareSoftware
Software
 
trabajo
trabajotrabajo
trabajo
 
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
 

Kürzlich hochgeladen (6)

La busqueda de la relevancia en la economia (Harberger).pptx
La busqueda de la relevancia en la economia (Harberger).pptxLa busqueda de la relevancia en la economia (Harberger).pptx
La busqueda de la relevancia en la economia (Harberger).pptx
 
Vision de asignatura ESTRUCTURA DE DATOS.pptx
Vision de asignatura ESTRUCTURA DE DATOS.pptxVision de asignatura ESTRUCTURA DE DATOS.pptx
Vision de asignatura ESTRUCTURA DE DATOS.pptx
 
PRESENTACION SISTEMAS OPERATIVOS MOVILES_20240424_235225_0000.pdf
PRESENTACION SISTEMAS OPERATIVOS MOVILES_20240424_235225_0000.pdfPRESENTACION SISTEMAS OPERATIVOS MOVILES_20240424_235225_0000.pdf
PRESENTACION SISTEMAS OPERATIVOS MOVILES_20240424_235225_0000.pdf
 
La muerte de El Senequita (Amadeo Martinez-Ingles).pdf
La muerte de El Senequita (Amadeo Martinez-Ingles).pdfLa muerte de El Senequita (Amadeo Martinez-Ingles).pdf
La muerte de El Senequita (Amadeo Martinez-Ingles).pdf
 
CLASE 1 H.I.pptx,INFORMATICANIVEL AVANZADO
CLASE 1 H.I.pptx,INFORMATICANIVEL AVANZADOCLASE 1 H.I.pptx,INFORMATICANIVEL AVANZADO
CLASE 1 H.I.pptx,INFORMATICANIVEL AVANZADO
 
Mapa conceptual de el hardware y software
Mapa conceptual de el hardware y softwareMapa conceptual de el hardware y software
Mapa conceptual de el hardware y software
 

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