ASIGNATURA: DISEÑO DIGITAL

BLOQUE : I.

ASESOR:
M.T.E. JOSÉ LUIS PÉREZ GARCÍA

Correo electrónico del asesor

[email protected]
Página web para los materiales
joseluisperez.sealapiedad.edu.mx
 SIMBOLOGÍA
Icono Descripción
Este icono te invita a que prestes especial atención al
tema tratado. Sé cuidadoso en estos puntos, debido a
que, por su relevancia, debes enfocarte un poco más en
ellos.
Cuando este icono aparezca en tus guías de estudio
significa que tu maestro de asignatura te está haciendo
una invitación a que, por medio de una lectura detallada,
logres tus objetivos de aprendizaje.
Mediante este icono te podrás dar cuenta de los espacios
en que se implementarán actividades donde se valoren
los conocimientos que has construido.
En esta sección de la guía encontrarás diversos
elementos que te permitirán practicar lo aprendido,
incluidos, por ejemplo, resúmenes, mapas mentales,
ejercicios, tareas, reportes de lecturas, etc.
Es fundamental que este icono lo tengas en
consideración, debido a que te indicará aspectos de tu
guía que debes analizar cuidadosamente, gracias a su
importancia en el desarrollo adecuado de los temas
estudiados.
Este símbolo hace énfasis en aquellos aspectos de la guía
que no debes dejar pasar por alto, debido a la enorme
importancia que implican para el avance de tu guía.
Esta sección de tu guía hace referencia a aquellas
actividades que has realizado y que deben ser
“almacenadas” como evidencia de tu avance académico.
Es importante que guardes estos elementos, debido a
que podrán ser requeridos durante toda tu estancia en el
bachillerato y con cualquiera de tus maestros y sus
respectivas asignaturas.
Al enviar un mensaje de correo electrónico al asesor
debes asegurarte que lo envíes con la siguiente
OBLIGACIÓN información en el apartado Asunto o subject. Nombre de
la actividad, nombre de la asignatura y tu nombre
completo.
 CONTENIDO

1 Introducción al diseño digital.

Software para edición de gráficos

2
vectoriales y de mapas de bits.

Animaciones multimedia.
3

4
Software de diseño editorial
Evaluación Diagnóstica
Contesta con cuidado, conscientemente
y de manera reflexiva.

1. ¿Has realizado una cartulina con dibujos y letras para llamar la atención?

2. Si tu respuesta es sí, entonces ¿Crees que eso es diseño?

3. ¿Qué diferencia existe entre el diseño normal y diseño digital?

4. ¿Qué entiendes por animación multimedia?

Sistema de Evaluación

Que se te calificará:
1. Elaboración del borrador de los 4 softwares vistos 40%.
2. Uso del software de aplicación para la elaboración digital del
producto final 60 %.
 Fundamentos del Diseño Digital

¿Qué es Diseño?
Diseño es la actividad creativa que tiene por fin proyectar objetos que sean útiles y
estéticos.

¿Qué es Diseño Digital?

El Diseño Digital es aquella forma de informar, expresar algo a través de un lenguaje visual
y con apoyo de herramientas computacional y similares.

Gráfico es un tipo de representación de datos, generalmente numéricos,

mediante recursos visuales, para que se manifieste visualmente
Gráficos vectoriales
Están formados por líneas formadas por ecuaciones matemáticas.
Cada línea está delimitada por dos puntos llamados nodos. Las
líneas curvas son llamadas curvas Bézier y obtienen su forma gracias
a unas pequeñas asas adjuntas a los nodos. Los gráficos vectoriales
son muy ligeros, es decir, pesan muy pocos bytes. También son
independientes de la resolución, o sea, no se distorsionan cuando
los agrandas. Desafortunadamente los colores que puede
representar un vector son limitados a color de relleno y color de
contorno. Los utilizamos en textos, logotipos, dibujos, CAD, diseños
para corte por navaja, láser o CNC.

Gráficos de mapas de bits

Este tipo de gráficos está formado por una matriz de pixeles. Cada
píxel puede almacenar un color diferente. Los gráficos de mapas de
bits son muy pesados ya que deben de almacenar el color de cada
píxel del cual está formada. Como están formados de pixeles están
limitados a formas rectangulares además que al agrandarse los pixeles comienzan a
hacerse más visibles. Esto ocasiona que la imagen se pixelee y pierda definición.

El píxel es la unidad más pequeña y diminuta de una imagen digital

y está presente en un inmensurable número para formar una
imagen completa. Cada píxel es una unidad homogénea de color
que en suma y con una importante variación de colores dan como
resultado una imagen más o menos compleja.

Formatos de gráficos
Los tipos de formato en diseño gráfico más comunes actualmente nos permiten elegir
entre muchas opciones que afectan a su calidad y peso, creando diferentes
funcionalidades para suplir cualquier necesidad de tus diseños.
Tipos de formato utilizados en diseño gráfico existen muchos, aquí un resumen de los
más usados:

Joint Photographic Experts Group o JPEG

Con total seguridad has oído hablar de él porque se trata del archivo de mapa de bits más
utilizado entre los formatos de imagen. Sus características de compresión lo hacen un
archivo muy ligero y que apenas ocupa espacio. Todo esto a costa de su calidad, aunque
puede ser elegida al momento de guardar para adaptarse a nuestras necesidades. Muy
común en el ámbito de impresión y es el formato indicado para utilizar en internet.

Windows Bitmap o BMP

Formato propio del programa Paint. Un formato de mapa de bits que viene instalado de
serie por el sistema operativo. Ofrece buenas calidades de imagen, pero ocupan una
significativa cantidad de espacio en el disco. Es poco útil para internet.

Graphics interchange formato o GIF

Otro archivo con formato en mapa de bits y bastante antiguo. Soporta únicamente 256
colores, lo que significa una pérdida de calidad en imágenes que posean un mayor
número de colores. Lo verdaderamente importante de este formato es que admite
animación, o lo que es lo mismo, imágenes en movimiento. Su uso es continuado
actualmente porque casi todas las plataformas y navegadores son capaces de mostrar
estas animaciones sin ayuda de softwares externos. Posee además un formato de
compresión propio, el LZW, lo que le permite comprimirse sin tener perdidas en la
calidad.

Portable Network Graphics o PNG

El PNG surgió como respuesta a la poca calidad de las imágenes en formato GIF. Es capaz
de utilizar canales RGB, lo que permite su modificación en programas de edición. Otra
característica es que admite fondos transparentes que permiten el uso de siluetas y
objetos con transparencias. Posee mucha más calidad que el GIF ya que no tiene la
limitación de los 256 colores y se comporta como un JPEG con la diferencia de que el PNG
no tiene pérdida de calidad por compresión.

RAW
También conocido como “en crudo” o “en bruto”, este formato en mapa de bits se crea
del archivo original de la cámara fotográfica que realizó la captura sin ninguna
compresión. Su tamaño es enorme pero también lo es su calidad por la gran cantidad de
información que posee. Este formato es el ideal para trabajar en programas de edición de
imágenes.
Tagged Image File Format o TIFF
Formato bastante habitual en el mundo de la impresión de calidad. Es un archivo en
mapa de bits que no pierde calidad por las mismas razones que el GIF: tiene un tipo de
compresión basado en el LZW. Con este formato las imágenes no se estropean al
guardarlas una y otra vez, pero su peso es significativamente mayor.

Encapsuled PostScript o EPS

Archivo de imagen vectorial muy utilizada en programas como Illustrator. Muy utilizada
en impresión ya que no tiene problemas de resolución y puede imprimirse en todo tipo
de tamaños. Requiere de un software específico para poder abrir los archivos, por lo que
un ordenador normal no es capaz de leer este formato. También puede abrirse en
programas como Photoshop y convertir los archivos vectoriales en mapas de bits, con sus
limitaciones de calidad.

Scalable Vector Graphics o SVG

El SVG es el único formato digital en archivo vectorial capaz de ser interpretado por los
navegadores. Se trata de una apuesta por el diseño gráfico en páginas web con
ilustraciones vectoriales sin pérdida de calidad. Es una gran ventaja frente a las imágenes
de mapas de bits ya que podremos usar las imágenes SVG en nuestros proyectos con la
libre posibilidad de modificar el tamaño.
Modos de color

La siguiente es una manera de ver o entender los modos de color. Sin embargo, son sólo
los conceptos básicos, muy básico. Pero servirán para entender.

Diferentes modos de color:

1 - Modo RGB (millones de colores).
2 - Modo CMYK (cuatricromía).
3 - Modo indexado (256 colores).
4 - Modo de escala de grises (256 grises).
5 - Modo de mapa de bits (2 colores).

El modo de color o modo de imagen determina la combinación de los colores en función

del número de canales de un modelo de color. Los diferentes modos de color dan lugar a
diferentes niveles de detalle de color y tamaño de archivo.

Por ejemplo, utilice el modo de color CMYK para las imágenes de un folleto para
impresión a todo color y utilice el modo de color RGB para las imágenes web o de correo
electrónico para reducir el tamaño del archivo y mantener la integridad del color.
Tipos de Software de diseño
Existen una gran diversidad de software, programas y apps que permiten el diseño digital,
es decir que te permite ilustrar, animar, aplicar diseño y otros aspectos para trasmitir
ideas y favorecer tu creatividad digital.

Ahora, realiza la siguiente investigación:

1. Investiga un software de los más usados actualmente para los siguientes tipos de
diseño.
a. Software para edición de gráficos vectoriales.
b. Software para edición de gráficos de mapas de bits.
c. Software de edición editorial.
d. Y software de animación multimedia.

En seguida un ejemplo de software vectorial y de mapas de bits.

El poder de Photoshop (Software aquí tratado)

➢ Una probada (https://www.youtube.com/watch?v=Ak6DG6XscZE)

Software para la edición de gráficos Vectoriales

Adobe Photoshop

Editor de gráficos rasterizados desarrollado por Adobe Systems

Incorporated. Usado principalmente para el retoque de fotografías y
gráficos, su nombre en español significa literalmente "taller de fotos".
La rasterización es el proceso por el cual una imagen descrita en un
formato gráfico vectorial se convierte en un conjunto de píxeles o
puntos para ser desplegados en un medio de salida digital, como una pantalla de
computadora, una impresora electrónica o una Imagen de mapa de bits (bitmap).
Con el simple hecho de dibujar una línea, un cuadro u otra forma, en un nuevo documento
de Photoshop estas creando un gráfico vectorial. Luego entonces aprendamos a usar un
poco más el software adobe Photoshop.

Entorno de Photoshop:

Herramientas básicas
Conjunto de opciones de las que Photoshop dispone para el trabajo básico y principal para el
diseño digital.
Dibujo de objetos
Practiquemos realizando un cuadrado, un círculo y un objeto de forma libre con la
herramienta pluma.
Para lo anterior utiliza la barra de herramientas, antes mostrada.

Texto
Agrega un par de palabras (texto) a tus tres formas (dibujos) anteriores.
Practica para que obtengas algo como lo siguiente (no tomes en cuenta el cuadriculado de la
hoja):
Transformar
Este conjunto de herramientas las encuentras en el menú “edición”, opción “transformar”,
ahora ve y práctica con las diversas opciones de la herramienta.
Propiedades
Expone o muestra información valiosa del documento con el que estamos trabajando.

La localizaras en la parte inferior de la pantalla. Existen varios espacios de propiedades los

cuales iremos descubriendo con la práctica.

Edición y Efectos de objeto

Si seleccionamos la capa o el objeto se desplegarán elementos de edición, propiedades e
incluso posibles efectos, a aplicar a lo seleccionado, en la barra de “opciones”. Sólo basta
con seleccionarlos para manipularlos.

La localizaras en la parte superior de la pantalla.

Los siguientes videos te apoyaran en tu proceso de aprendizaje, el segundo no necesitas

verlo es un apoyo más profundo en el caso de que tu proyecto requiera más detalle.
Ejemplo de vectorización simple: Sin Internet (clic abajo):
https://www.youtube.com/watch?v=SxIMG7_btAU Video 1.

Todas las herramientas: https://www.youtube.com/watch?v=u- Video 2.

ONXMM8NmE
Otro ejemplo de vectorizado de una fotografía de un rostro de mujer:
https://www.youtube.com/watch?v=P2YTBplHvh8
¿Y si deseo convertir esta imagen vectorial a mapa de bits?
Basta con ir al menú “archivo”, seleccionar la opción “exportar” y seleccionar el formato de
imagen que desees.

 Es momento de que elijas un tema para tu proyecto. El proyecto es realizar un meme

digital propio utilizando tu creatividad de manera respetuosa.
 Crea un borrador/esbozó de tu gráfico vectorial.
 Realices un diseño digital vectorizado en el software.
 No olvides en todo momento que este proyecto debe incluir los temas o herramientas
vistas en este material de estudio.
 Al terminar guárdalo, pues al final de la asignatura deveras enviarlo al asesor cuando se te
indique.
Software para la edición de gráficos de Mapas de Bits
Adobe Photoshop

Ya sea que nos gustó una imagen que vimos en Internet, una foto que tomamos con nuestro
celular, una imagen escaneada o similares; todas ellas comparten la característica de ser
imágenes de mapas de bits.
Luego entonces todos esos tipos de formatos de imágenes puedes ser abiertas y
manipuladas en Photoshop.
En seguida ve este video que te dará una breve idea del potencial de Photoshop al momento
de modificar y tratar imágenes de mapas de bits. Sin Internet (clic abajo):
Video 1.
En la playa: https://www.youtube.com/watch?v=pCN8GAJh74o
Atardecer: https://www.youtube.com/watch?v=4_nT4-h0L1I Video 2.

Capas
Las capas se utilizan en la edición de imágenes digitales para separar diferentes elementos
de una imagen. Una capa puede compararse con una transparencia sobre la cual los efectos
de imagen o las imágenes se aplican y colocan sobre o debajo de una imagen.
Capas: https://www.youtube.com/watch?v=8L-GE-9qUBE Sin Internet (clic abajo):
Video 1.

Efectos
Los básicos los encontraras en el menú “imagen”, en la opción “ajustes”. Practica con ellos.
Los efectos avanzados dependen del conocimiento que tengas del Photoshop y tu
imaginación.
Ya pudiste observar que las mismas herramientas que usaste en gráficos vectoriales las
utilizas para los efectos avanzados en mapas de bits, sólo con mayor detalle y control.

Es momento de practicar.
 Es momento de que elijas un tema para tu proyecto. El proyecto es realizar un meme
digital propio utilizando tu creatividad de manera respetuosa.
 Crea un borrador/esbozó de tu gráfico de mapa de bits.
 Realices un diseño digital del mapa de bits en el software.
 No olvides en todo momento que este proyecto debe incluir los temas o herramientas
vistas en el material.
 Al terminar guárdalo, pues al final de la asignatura deveras enviarlo al asesor cuando se te
indique.
Software para la Animación Multimedia
Adobe After Efects
¿Qué son las animaciones?

Animación se refiera a:
✓ El proceso de generación de imágenes donde cada imagen es una alteración de
la anterior.
✓ La presentación de estas imágenes a una velocidad suficiente produce la
sensación de movimiento.

Animación digital:
✓ Es el conjunto de técnicas que emplea una computadora para la generación de
escenas que produzcan sensación de movimiento.

Tipos animaciones:
✓ Animación digital Bidimencional (2D).
✓ Animación digital Tridimencional (3D).

Tipos de archivos más usados en la animación:

✓ AVI
✓ MPEG
✓ SWF
✓ GIF

Software más usado:

* Cinema 4D * ToonBoom Harmony
* After Effects * Anime Studio (v. 5 o superior)
* Animate * 3D Studio Max
* Blender 3D * Maya LT
* Edge Animate

NOTA: Si tu utilizas o deseas usar otro software de Animación Multimedia, diferente al After
Efects, para realizar el proyecto de este tema es momento de que lo platiques con el asesor.
Manipular objetos
Técnicas de creación a usar en After Effects
En nuestro caso utilizaremos la técnica Stop motion:
✓ Es una técnica que consiste en crear un movimiento simulado de objetos
estáticos (Lego, plastilina, etc.) o dibujos realizados por nosotros mismo, por
medio de la toma de fotografías cuadro por cuadro.
✓ After Effects es una poderosa herramienta que puede ayudar a ser creativo con
los diseños a animar que se crean en la computadora.
✓ Al igual que en el cine se deben captura 24 imágenes por segundo y dar la
apreciación de movimiento. Pero, no hay de qué preocuparse, no tendremos
que hacer las 24 tomas, el software After Effects lo hará por nosotros.

El trabajo se realiza con los Objeto (es todo elemento con el que se trabaja):
✓ Gráficos vectoriales.
✓ Imágenes fijas.
✓ Texto estático y animado.
✓ Sonidos.
✓ Videos.

Qué es la manipulación a objetos (alteración o edición de un objeto):

✓ Estirar/modificar una imagen.
✓ Cambiar de color a un texto.
✓ Cambiar de posición o lugar a un objeto, etc.
 ¿Cómo funciona After Effects?
Elementos de la ventana de trabajo
Trabaja mediante:
✓ Composiciones.
✓ Superposición de capas.
✓ Se desenvuelve a través de una línea de tiempo.
✓ Tienen una amplia lista de efectos y atributos que permiten articular
creativamente el material audiovisual.

Inicia
Elije un proyecto o problemática de tu vida diaria para dar solución a través de una
animación. Y realiza un borrador de tu idea de solución al problema elegido.

1. En After Effects todo inicia con una composición.

2. Una composición es el marco para una película. Cada composición dispone de su
propia línea de tiempo. Una composición típica incluye varias capas que representan
diversos componentes, como elementos de material de archivo de vídeo y audio,
texto animado y gráficos vectoriales, imágenes fijas y luces.

¿Qué sigue después de insertar una nueva composición?

Lo que sigue son las capas:
 ✓ Una capa es un espacio o nivel, sobre el que creamos, o insertamos, distintos
elementos (como lo haría un dibujante clásico de la productora Walt Disney sobre un
"papel cebolla"). Estas se visualizan en el panel de composición de la ventana de
trabajo.
✓ Elemento: todo objeto en el espacio de trabajo. Ejemplo: texto, imagen, circulo,
sonido, otro.

Apoyos/ayudas para hacer una Animación y/o Película

✓ Trabajo con proyectos.

(https://www.youtube.com/watch?list=PLEtcGQaT56cjabrIJatsuNKAGopPc7XZ -
&v=s6tld0WrLf0).
✓ Composiciones.
(https://www.youtube.com/watch?v=i3AGK7urwd8&index=2&list=PLEtcGQaT
56cjabrIJatsuNKAGopPc7XZ-).
✓ Capas.
(https://www.youtube.com/watch?v=vLStLk7Bluk&list=PLEtcGQaT56cjabrIJats
uNKAGopPc7XZ-&index=3).
✓ Panel de la línea de Tiempo.
(https://www.youtube.com/watch?v=0Oq83f1XbQ8&index=4&list=PLEtcGQaT
56cjabrIJatsuNKAGopPc7XZ-).
✓ Crear y personalizar formas.
(https://www.youtube.com/watch?v=twxSOqyH77M&list=PLEtcGQaT56cjabrIJ
atsuNKAGopPc7XZ-&index=28 ).
✓ Crear una animación de Texto. (https://youtu.be/YpQFNh8ldN0).
✓ Incluir audio y video.
(https://www.youtube.com/watch?v=uePPDbHELyA&index=34&list=PLEtcGQa
T56cjabrIJatsuNKAGopPc7XZ- ).

Un ejemplo más:
✓ 10 PRIMEROS PASOS para usar AFTER EFFECTS
(https://www.youtube.com/watch?v=M7OrHpGRIIQ).
Publicación de película

Exportación de la película – Renderización (Tecla Crtl + M)

 Crea un borrador/esbozó de tu animación/película, intenta que sea algo real o necesario

para ti.
 Realices un diseño digital de la animación en el software.
 No olvides en todo momento que este proyecto debe incluir los temas o herramientas
vistas en el material.
 Al terminar guárdalo, pues al final de la asignatura deveras enviarlo al asesor cuando se te
indique.
Software de Diseño Editorial
Este software ayuda a realizar estrategias creativas e innovadoras, en la transmisión de
ideas. Por ejemplo, es usado en el diseño de periódicos, revistas, incluso libros.

Publisher
Para esta actividad académica utilizaremos un programa de la familia de Microsoft llamado
Publisher.

Para iniciar ve este video de la creación de una portada básica para: Sin Internet (clic abajo):
Revista: https://www.youtube.com/watch?v=cjmjdHSd_ZM Video 1.
Tríptico: https://www.youtube.com/watch?v=u-YIQuo6Bfw Video 2.

Boceto con guías y cuadricula

Las guías de diseño son organizadores del texto, las imágenes y otros objetos en columnas y
filas para que la publicación tenga un aspecto coherente.
Una cuadrícula es una red de líneas horizontales y verticales espaciadas uniformemente que
se utiliza para identificar ubicaciones en la página. A menudo, las etiquetas de filas y
columnas de una cuadrícula de referencia identifican ubicaciones.
Puedes acceder a estás y sus combinaciones en la pestaña “vista”, en el grupo “mostrar”.

Páginas y marcos
Algo similar a lo anterior es este tema.
Puedes ajustar los requerimientos al tipo, tamaño y estilo de página en la pestaña “diseño
de página”, en el grupo “configurar página”.
Respecto a los marcos localízalos en la pestaña “insertar”, el grupo “bloques de creación”,
opción “bordes y acentos”.

Finalmente, este video te enseña algo más avanzado, ha hacer un

catálogo de productos: Sin Internet (clic abajo):
https://www.youtube.com/watch?v=_lTLcpUpGnE Video 1.
 Es momento de que elijas un tema/necesidad/proyecto.
 Crea un borrador/esbozó de tu diseño editorial, intenta que sea algo real o necesario
para ti.
 Pasa tu borrador al software de diseño editorial.
 No olvides en todo momento que este proyecto debe incluir los temas o herramientas
vistas en el material.
 Al terminar guárdalo, pues al final de la asignatura deveras enviarlo al asesor cuando se
te indique.

Ya que finalizaste todos tus proyectos (diseño vectorial, diseño de mapa de bits, diseño
editorial y la animación) envíalos a tu asesor por correo electrónico para que te califiquen
tus proyectos/trabajos.
No olvides, en todos los proyectos debes enviar el archivo original creado en el software
que aprendiste a utilizar.
Si tu(s) producto(s) de los diseños son muy grandes en tamaño/peso súbelos a alguna
plataforma (youtube, drive) y envía la liga en el correo.

Recuerda guardar copias de tus proyectos en el Portafolio.

 Revisando tus conocimientos

Qué sabes hacer ahora…

Contesta con atención y honestamente. Si tienes serias dificultades para

contestar estas preguntas es mejor que estudies un poco más, tu material
de estudio, antes de avanzar.

1. ¿Qué es diseño digital?

2. ¿Cuál es la diferencia entre imagen de mapa de bits y una imagen

vectorizada?

3. ¿Cuáles son los formatos digitales de diseño gráfico más usados?

4. ¿Cuál es el modo de color que usaste en tus proyectos?

5. Menciona tres herramientas de Photoshop.

6. Menciona con que elemento se inicia un proyecto de animación en After

Efects.

7. Menciona tres herramientas de Publisher.