6934 Diseño Digital

Guía didáctica
SEXTO SEMESTRE
1
Quirino Ordaz Coppel
Gobernador Constitucional del estado de Sinaloa
Juan Alfonso Mejía López
Secretario de Educación Pública y Cultura
Sergio Mario Arredondo Salas
Director General del Colegio de Bachilleres
del Estado de Sinaloa
Oscar Lara Salazar
Secretario General del Colegio de Bachilleres
del Estado de Sinaloa
Lydia María López Barraza
Directora Académica
Responsables de compilación:
María de los Ángeles Uriarte Félix

Roxivel Munguía García
Edición con fines educativos no lucrativos.

Colegio de Bachilleres del Estado de Sinaloa
Número de registro de obra:
2
ÍNDICE
Presentación
MOMENTO 1
Competencias Genéricas, Profesionales básicas y Aprendizajes esperados
Lecturas y actividades de aprendizajes
Introducción al diseño digital
Tipos de gráfico
Mapa de Bits
Vectores
Formatos de Gráficos
Modos de color
Tipos de Software de diseño y que ofrecen
Software para edición de gráficos vectoriales
Entorno
Herramientas básicas
Dibujo de objetos
Texto, creación y edición
Transformación y propiedades
Edición y efectos de objetos
Práctica integradora
Ligas de interés
Evaluación de los aprendizajes
Autoevaluación
Coevaluación
Registra tu evaluación del momento 1
MOMENTO 2
Software de Edición de mapa de bits
Entorno
3
Trabajo con capas
Efectos de imagen
Animaciones Multimedia
Conceptos básicos
Ligas de interés
Autoevaluación
Coevaluación
MOMENTO 3

Aplicar animaciones al objeto
Botones manipulación
Aplicar sonido y video
Software de diseño editorial
Entorno
Ajustes de lienzo, marcos y páginas
Bocetaje con guías y cuadricula
Capas
Ligas de interés
Autoevaluación
Coevaluación
Portafolio de Evidencias
Referencias bibliográficas
4
Presentación
Estimados alumnos y alumnas,
Para fortalecer el desempeño académico que desarrollas en cada submódulo de tu

capacitación, ponemos a disposición una guía didáctica con lecturas básicas de los
temas que contribuyen al logro de los aprendizajes y que integran el programa de
estudio conforme a la Nueva Escuela Mexicana.
La guía es un recurso de apoyo adicional para que se trabaje de manera conjunta con
las directrices de tu profesor, lo que te permitirá explorar e indagar cada uno de los
aprendizajes abordados de manera directa en el espacio de clase y en actividades
extraclase.
Con un lenguaje propio de la cultura juvenil, los contenidos abordados presentan

actividades de aprendizajes que permitirán contrastar situaciones de problemáticas
reales con los conocimientos adquiridos, facilitando el desarrollo de competencias
genéricas y competencias profesionales básicas para el logro del perfil de egreso del
bachillerato.
Encontrarás en el contenido: las competencias genéricas con sus atributos, y

competencias profesionales básicas que desarrollas en el submódulo de la
capacitación, así como los aprendizajes esperados en cada momento. Las lecturas y
actividades de aprendizaje abordados orientan el desarrollo de habilidades y actitudes
valorativas hacia el estudio.
Un apartado destacable es el de evaluación de los aprendizajes, donde de manera

directa participarás en un proceso de reflexión y metacognición de lo aprendido. Esto
permite que te des cuenta de los avances en cada momento y en compañía de tu
profesor y/o profesora conozcan el desempeño y evidencias de aprendizaje que tienes
integradas, lo que orienta a una mejora permanente.
Aprovecha al máximo este recurso didáctico que fue elaborado por tus maestros, para
que seas parte de la generación de jóvenes bachilleres que estamos formando en
COBAES y que se caracterizan por su emprendimiento, perfil competitivo y proactivo
acorde a la dinámica de la sociedad actual.
MC. Sergio Mario Arredondo Salas

Director General
5
MOMENTO I
6
MOMENTO I
MÓDULO IV. Software de diseño
Submódulo 2. Diseño digital
COMPETENCIAS GENÉRICAS Y ATRIBUTOS

CG 4. Escucha, interpreta y emite mensajes pertinentes en distintos contextos mediante la
utilización de medios, códigos y herramientas apropiados.
4.5. Maneja las tecnologías de la información y la comunicación para obtener información y
expresar ideas.
COMPETENCIAS PROFESIONALES BÁSICAS

8.Elabora diversos recursos gráficos publicitarios utilizando software de diseño, permitiendo su
publicación en medios digitales e impresos para comunicar ideas o emociones aplicables a
contextos laborales, escolares y de la vida cotidiana.
APRENDIZAJES ESPERADOS
Ilustra ideas publicitarias y de comunicación a través de diseño de imágenes digitales, utilizando
diferentes herramientas de las aplicaciones de software de diseño, en un ambiente responsable
y creativo.
HABILIDADES
Identifica los elementos básicos del diseño digital.
Experimenta utilizando diferentes aplicaciones de software y herramientas para crear gráficos.
ACTITUDES
Se comunica de manera asertiva y empática.
Favorece el propio pensamiento crítico.
Muestra innovación en las diferentes formas de expresarse en su contexto.
7
Evaluación diagnóstica
1. Son imágenes formadas por una matriz de pixeles, donde cada pixel puede almacenar un
color; también es conocida como Bitmap
a) Gráficos Vectoriales b) Gráficos de mapa de bits c)Jpg d)CDR
2. Programas diseñados para la creación de dibujos hechos a base de vectores o mapa de
bits, que permiten crear materiales publicitarios
a) Diseño WEB b) Diseño Vectorial c) Diseño Multimedia d) Diseño Flash
3. Este modo de color se constituye por tres colores: Rojo, Verde y Azul, permite representar 16.7
millones de colores
a) Color RGB b) Color LAB c) Color Indexado d) Color CMYK
4. ¿Qué Software de edición de imágenes que nos permiten crear, agregar, modificar, eliminar,
retocar o cambiar detalles de imágenes digitales, entre otros?
a) CorelDraw b) PhotoShop c) Dream Weaver d) Macromedia Flash
5. Estas son muy importantes al editar imágenes en Photoshop se muestran como si fueran varias
hojas apiladas de acetato.
a) Archivo b) Capa c) Lienzo d) Entorno de trabajo
6. Este formato guarda imágenes de alto grado dinámico (permite altas luces y sombras), se
utiliza para el intercambio entre plataformas (MAC y PC).
a) PSD b) PDF c) TIFF d) PNG
7. Es posible crear y trabajar con imágenes vectoriales al igual que CorelDraw solo que este
programa no es tan pesado como CorelDraw
a) CorelDraw b) Illustrator c) Diseño Multimedia d) Diseño Flash
8. Con esta tecla se puede activar la biblioteca de símbolos
a) F1 b) F5 c) F 10 d) F11
9. Este tipo de formato es estándar para guardar imágenes sin perder demasiados detalles en
las imágenes.
a) Gráficos Vectoriales b) Gráficos de mapa de bits c)JPG d)CDR
10. Texto que permite seguir alguna forma geométrica o una línea y sus contornos.
a) Texto a figura b) Texto a trayecto c) Texto contorno d) Texto único
11. Realizan selecciones a mano alzada, poligonales (rectilíneas) y magnéticas
a) Varita mágica b) Lazo c) Selección d) Cuentagotas
8
MOMENTO I:
Submódulo II. Diseño digital
Conocimientos:
Introducción al diseño Digital:
 Tipos de gráficos: Mapa de bits y

vectorial.
 Herramientas básicas
 Formatos de gráficos.
 Modos de color.
 Tipo de software de diseño y que
ofrecen.
Lectura 1: Introducción al diseño digital
En la actualidad el diseño digital ha tenido grandes avances principalmente por la facilidad que
se tiene al acceso a los medios digitales y por ende a una gran variedad de programas que
permiten el diseño y la edición de imágenes digitales.
Es muy común encontrar en cualquier medio digital imágenes ilustrativas, carteles promocionales,
memes, logos, slogans, lo cual favorece al marketing digital.
Tipos de gráficos: Mapa de bits y vectorial.
Al hablar de gráficos se hace referencia a la representación visual de información, mensajes.
Mapas de bits (bitmaps o imágenes raster): están formadas por una rejilla de celdas. A cada una
de estas celdas, que se denominan píxeles, se le asigna un valor de color y luminancia propios.
(Santiago, 2005)
Gráficos Vectoriales: Son imágenes se conforman a través de trazos geométricos determinados

por cálculos y fórmulas matemáticas. (Santiago, 2005)
9
Formatos de gráficos
Un archivo gráfico puede tener una gran variedad de formatos, donde cada uno tiene sus
propias características y ventajas en función del tipo de imagen que se vaya a guardar.
BMP (Bitmap)
Es el formato de las imágenes de mapa de bits de Windows. Su uso fue muy extendido, pero los archivos
son muy grandes dado la escasa compresión que alcanzan. (Santiago, 2005)
JPG / JPEG (Joint Photographic Expert Group)
Santiago (2005) afirma que la imagen JPG (Joint Photographic Experts Group) se utiliza
usualmente para almacenar fotografías y otras imágenes de tono continuo, permitiendo
conservar la información de color: CMYK (Cian, Magenta, Amarillo y Negro), RGB (Rojo, Verde y
Azul) y escala de grises (sin transparencia).
PNG (Gráficos de Red Portátiles)
Santiago (2005) afirma que las imágenes PNG son las siglas del grupo que lo desarrollo Portable
Networks Graphics pensando en un formato ideal para su distribución en Internet.
Modos de color
Actualmente existen una gran variedad de modos de color los cuales ofrecen una infinidad de
posibilidades para el diseño profesional de imágenes, entre los cuales podemos mencionar
escala de grises, multifuncional, RGB entre otros.
Tipos de software de diseño y que ofrecen
El software de Diseño gráfico son programas que se especializan en la creación de imágenes, de

dibujos vectoriales, diseño web, y edición de fotografías. Este tipo de software permite crear todo
tipo de logotipos, anuncios publicitarios, efectos de fotografías, ilustraciones profesionales. A
continuación, clasificaremos los
diferentes Diseño Web programas de
Diseño gráfico:
Clasificación Diseño vetorial
Diseño Multimedia
10
Diseño web.
Este tipo de software se utiliza para crear sitios web completos. Su objetivo es crear documentos
con hiper enlazados con imágenes e información. Las características más importantes de estos
programas son la integración y conexión de medios como audio, texto, video, imagen, entre otras
cosas. Los programas de diseño web más conocidos y utilizados son: Adobe Dreamweaver,
Google Sites.
Diseño vectorial.
Programas diseñados para la creación de dibujos hechos a base de vectores o mapa de bits,
que permiten crear materiales publicitarios o ilustraciones a base de formas geométricas básicas
con colores y rellenos. Con ellos podemos crear logotipos, imago tipos, ilustraciones, etcétera.
Algunos programas son: CorelDRAW, AutoCAD, Adobe Illustrator.
Diseño multimedia.
Este tipo de programas permite editar fotografías, animaciones, videos, sonidos, efectos 3D y
textos. Es posible poner efectos, filtros a las fotografías, efectos de textos, etc. Ejemplo: Adobe
Photoshop, Adobe Flash, After Effects, etc.
Actividad de aprendizaje1: Realizar una investigación sobre los diferentes modos de color,
deberás definir cada uno de ellos.
Modo de color Definición

Escala de grises
Multicanal
Duotono.
Color RGB.
Color CMYK.
Color indexado
Color Lab.
11
MOMENTO I.
Conocimientos:
Software para edición de gráficos vectoriales
 Entorno.
 Herramientas básicas.
 Dibujo de objetos.
 Texto, creación y edición.
 Trasformación y propiedades.
 Edición y efectos de objetos.
Lectura 2. Software para edición de gráficos vectoriales
Entorno de trabajo de CorelDraw
En CorelDraw se pueden crear fácilmente ilustraciones profesionales, este es un programa de

diseño vectorial donde se pueden elaborar desde logotipos, carteles o complejas ilustraciones,
las herramientas con las que cuenta este software fueron diseñadas para cumplir con las
necesidades de los profesionales del sector de artes gráficas.
A
B
C
D
E
I H F
A. Barra de título B. Barra de Menús C. Barra de herramientas D. Barra de propiedades E. Caja de herramientas
F. Paleta de colores G. Contador de páginas H. Barras de desplazamiento I. Área de Dibujo. J. Reglas.
12
De acuerdo con la guía de usuario de Corel Dram 11, cada uno de estos menús se define de
la siguiente forma:
A. Barra de títulos: Aparece en la parte superior principal de la ventana indicando el nombre
del programa.
B. Barra de menús: Contienen comandos que ayudan a la modificación, transformación,

cambios y almacenamiento de los archivos elaborados en Corel Draw.
C. Barra de herramientas (estándar): Son botones que nos ayudan a elegir opciones de una
manera fácil y rápida en una barra que se encuentra debajo de la barra de menús.
D. Barra de propiedades: Aparece debajo de la barra de herramientas, el contenido de esta

va a ser de acuerdo a la herramienta seleccionada (en la caja de herramientas).
E. Caja de herramientas: Aparece en la parte izquierda de Corel Draw Contiene

herramientas que nos ayudan a elaborar objetos, en ella podemos elegir la herramienta
que más nos conviene para darle un acabado final de calidad a un objeto o dibujo.
F. Paleta de colores: Aparece en forma vertical en el lado derecho de la pantalla, en ella

elegimos los colores que le aplicamos a los dibujos y a los contornos (líneas) de los dibujos.
G. Contador de página: Se encuentra en la parte inferior izquierda de la ventana, justo arriba

de la barra de estado, en ella se indica el número de hojas que tiene la página.
H. Barras de desplazamiento: Estas nos sirven para desplazarnos por toda el área de dibujo
que contiene CorelDraw.
I. Área de dibujo: Es la parte que rodea el marco de página en ella podemos elaborar los
objetos, para terminar el objeto final.
J. Reglas: Estas nos ayudan a tener unas coordenadas exactas sobre algunos tipos de
objetos que se elaborar en CorelDraw.
Herramientas básicas de CorelDraw
CorelDraw es un programa que ofrece una gran variedad de herramientas que permiten el
diseño de diversos objetos digitales, accediendo con ello a la creación de diseños profesionales
debido a la diversidad de herramientas. (R.A.V.E., 2002)
13
R.A.V.E (2002) describe las herramientas como se muestra en la tabla siguiente:
Herramienta Descripción
Selección esta opción permite modificar el tamaño de un objeto, inclinar,

girar y hasta seleccionarlo.
Selección de mano alzada permite seleccionar como si lo hicieras con un

lápiz.
Forma permite modificar la forma de los objetos.
Recortar permite recortar la parte seleccionada de un objeto
Cuchillo permite cortar los objetos.
Pincel Deformador como su nombre lo dice, esta opción permite

distorsionar un objeto con solo arrastrarlo fuera de su trayecto.
Pincel Agreste distorsiona el contorno arrastrando el cursor a lo largo del

contorno.
Zoom esta opción permite cambiar el tamaño de la ventana de dibujo.
Mano permite mover la parte del dibujo que es seleccionada en la

ventana de dibujo.
Pluma Permite dibujar curvas segmento a segmento.
Polilínea permite dibujar líneas y curvas en modo pre visualización.
Mano alzada permite dibujar segmentos de líneas y curvas.
Medios artísticos da acceso a Pincel, Diseminador, Pluma caligráfica y

Presión.
Rectángulo permite dibujar rectángulos y cuadrados.
Elipse permite dibujar elipses y círculos.
Polígono permite dibujar polígonos y estrellas simétricos.
Texto permite escribir palabras en la pantalla como texto artístico o de

párrafo.
Herramientas Cota paralela dibuja líneas de cotas inclinadas.
14
Mezcla interactiva permite mezclar dos objetos.
Silueta interactiva permite agregar una silueta al objeto seleccionado.
Distorsión interactiva permite aplicar una distorsión Empujar y tirar,

Cremallera o Torbellino a un objeto.
Envoltura interactiva permite arrastrar los nodos y distorsionar el objeto.
Extrusión interactiva permite aplicar la ilusión de profundidad a los objetos.
Sombra interactiva permite aplicar una sombra a un objeto.
Transparencia interactiva permite aplicar transparencias a los objetos.
Cuentagotas permite seleccionar un relleno a partir de un objeto de la

ventana de dibujo.
Bote de pintura permite rellenar un objeto de la ventana de dibujo después

de haber seleccionado un relleno con la herramienta Cuentagotas.
Relleno interactivo permite aplicar distintos rellenos.
Dibujo con objetos CorelDraw
En el presente tema se dará una descripción general de las herramientas básicas con las que
cuenta la caja de herramientas.
Rectángulos: Corel Draw tiene ya predefinidos la creación de rectángulos o cuadrados, solo

debes de seleccionar la opción y arrastrarlo en diagonal o especificando la altura y la anchura.
Después de dibujar un rectángulo o cuadrado, es posible cambiar su forma totalmente lineal a
redondeando por sus esquinas. (R.A.V.E., 2002)
Pasos para dibujar un Rectángulo o Cuadrado:
1. Abra el menú lateral Rectángulo y haga clic en la herramienta Rectángulo.

2. En el caso de un cuadrado es necesario presionar la tecla Ctrl y posteriormente arrastre
el cursor en la ventana de dibujo hasta que el obtenga el tamaño deseado; en caso de
un rectángulo no se presiona la tecla Ctrl solo se arrastra el cursor en la ventana de
dibujo.
15
Elipses o círculo: Es posible dibujar una elipse o un círculo arrastrando en diagonal, o bien
especificando la anchura y la altura. Es posible dibujar una elipse o un círculo y cambiar su forma
a arco o sector circular. (R.A.V.E., 2002)
Pasos para dibujar una Elipse o círculo:
1. Abra el menú lateral Elipse y haga clic en la herramienta Elipse.

2. Arrastre el cursor en la ventana de dibujo hasta que la elipse tenga el tamaño que desee;
en el caso del circulo presiona la tecla Ctrl, arrastrar hasta que el obtenga el tamaño
deseado.
Líneas rectas: Existe varias formas de realizar una línea recta únicamente se especificarán 2
formas.
Forma 1
1. Haga clic en la herramienta Mano alzada.

2. Haga clic en el punto donde debe comenzar la línea y luego en el punto donde debe
finalizar.
Forma 2
1. Abrir el menú lateral Mano alzada y dar clic en la herramienta Bézier.

2. Haga clic en el lugar donde desee que comience la línea.
3. Haga doble clic en el lugar donde desee finalizar la línea.
Líneas onduladas: Existe varias formas de realizar una línea recta únicamente se especificarán 2
formas.
Forma 1
1. Hacer clic en la herramienta Mano alzada.
2. Hacer clic en el punto donde debe comenzar la línea y arrastre para dibujar la línea.
Forma 2
1. Abra el menú lateral Curva y haga clic en la herramienta Bézier.
2. Haga clic en el punto donde desee colocar el primer nodo y arrastre el punto de control
en la dirección en que debe curvarse la línea.
Medios artísticos: esta herramienta permite añadir efectos de pincel diseminador y medios
gráficos y caligráficos mediante mano alzada. (R.A.V.E., 2002)Los pasos para realizarlos son:
16
1. Seleccionar la herramienta medios artísticos
2. Elegir el trazo de pincel que se desea realizar.
3. Realizar el diseño del trazo como si lo hicieras a mano alzada.
Herramienta de relleno interactivo: permite rellenar un objeto ya sea de forma uniforma,

degradada, patrón vectorial, patrón de mapa de bits u de patrón de dos colores.
Texto creación y edición.
Herramienta Texto: Esta herramienta permite al usuario utilizar dos tipos de texto:
1. Texto Artístico: Este tipo de texto permite que se le aplique algún tipo de efecto como
sombras, texturas o alguna dirección.
2. Texto párrafo: Es utilizado para insertar bloque de texto, utilizado principalmente para dar
información, en alguna revista folleto, etc.
El texto tiene algunas características afirma R.A.V.E (2002):
 El tipo de fuente tipográfica: Normal, Normal Cursiva, Negrita, Negrita Cursiva.

 El Tamaño de fuente: El Rango de espacio manual. Al seleccionar un texto este botón
permite aumentar o disminuir el espacio entre caracteres.
 Tipo de relleno: Es posible elegir entre los siguientes rellenos: uniforme, degradado, de
patrón de dos colores, etcétera.
 Color del Texto: Permite elegir el color del texto.
 Tipo de relleno de fondo: Aquí se elige el relleno que deseamos aplicar al fondo de la
tipografía.
 Anchura de contorno: Permite seleccionar el ancho del contorno de la tipografía o bin
sin contorno.
Para insertar un texto artístico es necesario realizar lo siguiente:
1. Seleccionar la herramienta texto.

2. Dar clic en el área que se desea teclear.
3. Teclear el texto deseado.
Texto a trayecto
El texto a trayecto es aquel que permite a un texto seguir alguna forma geométrica o
simplemente una línea y sus contornos.
17
Hay dos tipos de trayecto: el abierto y el cerrado.
 Abierto. El texto se crea partiendo de una línea curva o recta y se aplica a textos artísticos
o párrafos. Los pasos para insertarlo son:
1. Tener una Línea recta o curva.
2. Seleccionar la herramienta texto.
3. Dar clic sobre la línea cuando cambie a forma de , empezar a teclear.
 Cerrado. El texto sólo se adapta al trayecto de alguna forma geométrica. Los pasos
para realizarlos son:
1. Tener una figura geométrica (rectángulo, ovalo, polígono, etc).
2. Dar clic en la herramienta texto.
3. Dar clic sobre el contorno cuando tome el puntero la forma siguiente , teclear
la palabra deseada.
Transformación y propiedades de objetos
CorelDraw ofrece la opción de modificar o transformar las propiedades de los objetos, en los
cuales es posible modificar lo siguiente:
Posición: Permite especificar la posición del objeto en la página.
Girar: permite especificar la rotación del objeto.
Escalar y reflejar: permite escalar y reflejar el objeto en cierto porcentaje.
Tamaño: permite especificar las dimensiones del objeto.
Inclinar: permite inclinar el objeto de forma vertical u horizontalmente.
Edición y efectos de objetos
Los objetos en CorelDraw pueden ser editados tanto en su tamaño, como en su forma para ello
es posible aplicar efectos específicos a continuación se mencionan algunos de los más utilizados:
Sombra: Aplica sombras detrás de los objetos o bajo ellos.
Silueta: permite aplicar una serie de formas concéntricas que se extienden de forma
radical hacia el exterior o interior del objeto.
18
Mezcla: permite mezclar objetos creando una progresión de objetos intermedios.
Distorsión: permite transformar objetos aplicando efectos de empujar y tirar entre otros.
Envoltura: permite cambiar la forma de un objeto aplicando y arrastrando los nodos del
objeto.
Extursión: permite aplicar efecto 3D a los objetos.
Para utilizar cualquiera de estos efectos es necesario realizar los siguientes pasos:
1. Tener seleccionado un objeto.

2. Dar clic en el efecto deseado (sombra, silueta, mezcla, distorsión, envoltura, extursión).
3. Dar clic así donde se desea obtener el efecto y arrastrar hasta el lugar deseado del objeto.
Actividad de aprendizaje 2. Realiza el siguiente ejercicio utilizando las herramientas de medios

artísticos, óvalos, rectángulos, mano alzada, pincel, la herramienta de degradado, entre otras.
Actividad de aprendizaje 3: Realizar la siguiente actividad utilizando los efectos de sombra,

silueta, mezcla, distorsión, envoltura, extrusión.
19
Práctica Integradora.
1. Forma equipos de dos integrantes

2. Juntos busquen información sobre alguna enfermedad que exista en tu comunidad y las
medidas de salud que hay que tomar.
3. Utilizando Corel Draw elabora un cartel que contenga lo siguiente:
a) Información acerca de la enfermedad seleccionada.
b) Imágenes
c) Texto artístico
d) Efecto a Texto e imágenes
e) Transformación y propiedades de objetos
4. Guarda el cartel con Practica1_ Cartel_ nombre y apellido tuyo y de tu compañero
ejemplo: Practica1_ Cartel_Jesús López_y_Juan Pérez
5. Envía vía correo electrónico a tu maestro
6. Imprime el cartel y pégalo en tu plantel para que todos conozcan sobre esta enfermedad.
20
EVALUACIÓN DE LOS APRENDIZAJES
Autoevaluación
En el siguiente cuadro te invitamos a que registres las evidencias que fuiste desarrollando durante
el momento y reflexiona sobre cómo lo lograste y lo que puedes hacer para mejorar:
¿Qué puedo
Aprendizajes ¿Cómo lo
Evidencias hacer para
esperados lograste?
mejorar?
Ilustra ideas publicitarias y

de comunicación a través
de diseño de imágenes
digitales, utilizando
diferentes herramientas
de las aplicaciones de
software de diseño, en un
ambiente responsable y
creativo.
De las evidencias mencionadas en el cuadro anterior, encierra en un círculo las que forman
parte de tu portafolio.
A lo largo del momento trabajaste las siguientes competencias genéricas y atributos:
Competencias genéricas Atributos
CG 4. Escucha, interpreta y emite mensajes

4.5. Maneja las tecnologías de la información
pertinentes en distintos contextos mediante
y la comunicación para obtener información
la utilización de medios, códigos y
y expresar ideas
herramientas apropiados.
A continuación, se presenta una serie de preguntas, con la intención de que reflexiones en

torno a las Competencias que desarrollaste hasta el momento:
1. ¿Qué diferencia existe entre una imagen de mapa de bits y una imagen vectorial?
2. ¿Corel Draw permite el diseño de logotipos?
3. Corel Draw permite que el texto se adapte a trayectoria en qué puedo utilizar dicha
propiedad?
21
Coevaluación
La evaluación del trabajo entre pares, es decir, entre compañeros es formativa porque permite
revisar el grado de participación, compromiso y desempeño, lo que orienta un ejercicio de
mejora de los aprendizajes. La Coevaluación además fomenta la práctica de valores como el
respeto, honestidad y empatía.
Con al apoyo de tu profesor (a), selecciona una actividad de aprendizaje que hayas trabajado
colaborativamente. En una escala de 0 a 4 otorga un puntaje a cada integrante del equipo
según su desempeño:
4= Destacado, 3=Satisfactorio, 2= Regular, 1=Necesita mejorar, 0= No trabajó
Actividad de aprendizaje: _____________________________________________________________
Competencia (s) que desarrollan: ______________________________________________________
_______________________________________________________________________________________
Integrantes del equipo Evaluación general

Criterios a evaluar
1 2 3 4 5 de la actividad
Escribe el nombre de los integrantes del equipo:
1.
2.
3.
4.
5.
22
tu evaluación del Momento I
Los docentes califican los aprendizajes adquiridos en cada momento (parcial), considerando tres
aspectos:
Portafolio de evidencias 40%
Examen parcial 40%
Actividades complementarias 20%
También recuerda que para acreditar una asignatura debes cubrir el 80% de asistencia a clases,
es importante que en cada parcial revises tus asistencias.
Valora y registra tus resultados académicos del momento con la ayuda del docente.
Aspecto de evaluación ¿En qué consiste? ¿Qué resultado tienes?
Son las evidencias que indicó

tu profesor para que
Portafolio de evidencias desarrollaras durante el
momento. Deben ser mínimo
3 evidencias.
Evalúa tus conocimientos y

Examen parcial
aprendizajes del momento.
Incluye tu participación,
tareas, disciplina,
Actividades
responsabilidad y
complementarias
proactividad dentro y fuera
del aula.
Registro de asistencia a clase

Asistencia que tiene tu profesor durante
el momento.
Después de registrar tus avances y resultados del momento, reflexiona sobre: ¿cómo has
participado?, ¿cuál ha sido tu desempeño?, ¿qué calificación obtienes del momento? y ¿cómo
puedes mejorar?
Acércate a tu profesor, tutor de grupo u orientador educativo para compartir dudas que se te
presenten.
23
MOMENTO II
24
MOMENTO 2

CG 5. Desarrolla innovaciones y propone soluciones a problemas a partir de métodos
establecidos.
5.1 Sigue instrucciones y procedimientos de manera reflexiva, comprendiendo como cada uno
de sus pasos contribuye al alcance de un objetivo
5.6 Utiliza las tecnologías de la información y comunicación para procesar e interpretar
información.

Crea animaciones multimedia, favoreciendo un ambiente de tolerancia y creatividad, para
expresar ideas que den solución a problemas en su entorno.
HABILIDADES
Experimenta utilizando diferentes aplicaciones de software y herramientas para crear gráfico.
ACTITUDES
Se informa a través de diferentes fuentes antes de tomar decisiones.
Aporta ideas en la solución de problemas promoviendo su creatividad.
25
Momento II.
Conocimientos:
Software para edición de gráficos de
mapa de bits.
 Entorno
 Herramientas básicas
 Trabajo con capas
 Efectos de imágenes
Lectura 1. Introducción al Software de edición de gráficos de mapa de bits.
Los programas de edición de imágenes nos permiten crear, agregar, modificar, eliminar, retocar
o cambiar detalles de imágenes digitales, entre otros.
Cada una de las imágenes que trabajamos con los editores de imágenes pierden algunas de sus
características dejando de ser fotografías y convirtiéndose en imagen de mapa de bits, lo cual
nos permite modificarlas por medio de pixeles logrando una mejor calidad.
Existen diferentes programas de edición de imágenes entre ellos:
 Photoshop Adobe Systems
 Macromedia fireworks Adobe Systems
 Photo paint Corel corporation
 Corel Draw Corel corporation
En esta guía se trabajará con Adobe Photoshop desarrollado por Adobe Systems Incorpórate®.
Photoshop el cual es uno de los editores de imagen más popular por su infinidad de funciones,
filtros y efectos que ofrece, muy utilizado por profesionales de fotografía, diseño y multimedia, así
como por quienes desean sólo aprender a manipular alguna imagen.
Tiene una interfaz sencilla y amigable, lo cual facilita su uso, sin embargo, también contiene
algunas funciones no tan sencillas y con un poco de complejidad que van desde reducir,
recortar, ampliar, retocar, etc., hasta realizar restauraciones, HDR, montajes, ilustraciones,
animaciones, entre otros.
26
Formatos de imágenes
Una de las ventajas de Adobe Photoshop es que soporta una gran cantidad de formatos para
trabajar y guardar imágenes.
A continuación, describiremos algunos de los formatos que soporta Adobe Photoshop tomando
en cuenta la página (Fotoshop Elements Guia de usuario, 2020)
Formato Descripción
PSD Formato de Photoshop. Guarda todos los atributos desde capas, filtros,
efectos, CMYK, RGB, etc., lo cual permite su edición posterior, este formato es
el más recomendado ya que si empiezas a editar una imagen y la guardas
para seguir trabajando en posteriores ocasiones, te permite hacerlo de
manera más sencilla ya que como se mencionó anteriormente guarda el
archivo con todos sus atributos.
JPG Es un formato muy popular para web ya que pierde poca calidad la imagen
ayudando a conservar la información de color: CMYK, RGB y escala de grises.
GIF Guarda imágenes de hasta 256 colores y con transparencias, se utiliza
normalmente para web ya que permite guardar pequeñas animaciones.
PDF Es un formato de documento portátil de Adobe Acrobat gráficos vectoriales,
información de color, etc.
PNG Se utiliza para guardar imágenes para Internet, dentro de sus ventajas
encontramos una calidad de imagen alta; permite imágenes de hasta 24 bits
en RGB, así como también en escala de grises.
TIFF Este formato guarda imágenes de alto grado dinámico (permite altas luces y
sombras), se utiliza para el intercambio entre plataformas (MA C y PC).
El tamaño máximo que soporta este formato es de 4 Gb. Permite guardar las
capas de Photoshop, admite imágenes CMYK, RGB, Escala de grises, etc.
27
Entorno de trabajo
Es el área del programa donde editamos las imágenes aquí se encuentran los elementos para
crear, diseñar y manipular las imágenes.
Como todo programa de Windows Adobe Photoshop PSCS6 contiene elementos como barra de
menos, barra de propiedades, ventanas, etc.
B. de menú
B. de opciones
Ventana de documento
Área de trabajo
Caja de herramientas
Ventana de capas
Panel de herramientas
Barra de menús. Barra de navegación que aparece por defecto en la parte superior de
Photoshop.
Cada menú contiene diferentes comandos para trabajar en Photoshop, a continuación, se

describe cada uno de ellos menús.
28
Menú archivo.
Contiene los comandos de las operaciones básicas
del documento, como: Nuevo, Abrir, Cerrar, Guardar,
Imprimir, Abrir documentos recientes, Colocar (traer
alguna a imagen al documento que estamos
trabajando), así como Importar, Compartir pantalla,
Exportar, Automatizar, Automatizar para HDR,
Secuencia de comandos, Información de archivo o
Salir del programa Photoshop.
Menú edición.
Contiene los comandos de transformación y
desplazamiento de las imágenes completas o por
sección: Rehacer, Paso adelante, Paso atrás,
Transición, Cortar, Copiar, Pegar, Pegado especial,
Revisar ortografía, Buscar y Reemplazar texto,
Rellenar, Contornear, Escala según el contenido,
Transformación libre, Transformar: A escala, Rotar,
Distorsión, Perspectiva, Transformación de nodos, y
Voltear horizontal y verticalmente, Definir valor de
pincel, Definir motivo, Purgar, Ajustes
preestablecidos, Ajustes de color, Convertir en
perfil, Métodos abreviados del teclado, Menús y
preferencias.
29
Menú imagen. Contiene los comandos necesarios para ajustar la imagen seleccionada como
ajustes, tamaño y rotación de imagen, tamaño de lienzo, entre otros..
Menú capa.
Este menú nos ayuda a acceder a los
comandos de la creación, transformación,
agrupaciones y efectos para trabajar con
las capas, y convertir el texto en dibujo.
30
Menú selección.
Contiene los comandos de selección de una
imagen o parte de ésta: Todo, Deseleccionar,
Invertir (cambiar de selección), Perfeccionar
borde (abre una ventana para modificar el
borde antes de cortar
o copiar dicha selección. Ayuda a que la
selección sea más precisa y que se vea menos
el corte de la misma).
Otras funciones son Volver a seleccionar, Gama
de colores, Modificar, Extender, Similar,
Transformación de
selección, Editar máscara rápida, Cargar
selección y Guardar selección.
Menú texto contiene opciones exclusivas
para trabajar con textos.
Menú filtro
Permite elegir filtros de

Photoshop para lograr
efectos y retoques
fotográficos, como
artísticos, texturas,
desenfoque,
distorsión, etcétera.
31
Menú Ventana
Contiene opciones para trabajar con las diferentes ventanas de adobe Photoshop
Barra de opciones
La mayoría de las herramientas cuentan con diferentes opciones que aparecen en esta barra,
cambia según la herramienta que se seleccione. Algunos ajustes de la barra de opciones son
comunes en las diferentes herramientas.
Barra de herramientas
“Adobe Photoshop cuenta con varias herramientas para pintar y editar imágenes en color. La
herramienta Pincel y la herramienta Lápiz funcionan como las herramientas de dibujo
tradicionales aplicando color mediante trazos de pincel. Herramientas como Borrador,
Desenfocar o Dedo modifican los colores existentes de la imagen.” (Guía del usuario de
Photoshop, 2020)
Todas las herramientas se pueden configurar de acuerdo con nuestras necesidades, accederá a
ella dando clic sobre la herramienta y posteriormente en la barra de opciones.
Cada herramienta cuanta con la barra de opciones la cual te permite configurar la herramienta
para que esta pueda ser utilizada de manera más útil.
32
A continuación, se muestra un cuadro de herramientas el cual contiene las herramientas de
Photoshop y la función de cada una de ellas.
Descripción de las herramientas
Herramienta NOMBRE FUNCIÓN

Mover Permite mover selecciones, capas y guías.
Selección Las herramientas de marco permiten seleccionar elipses,

rectángulos, filas o columnas.
Lazo La herramienta Lazo te permite dibujar segmentos de forma libre

de un borde de selección de una imagen.
Varita La herramienta Varita mágica permite seleccionar un área
Mágica coloreada sin necesidad de ir trazando su contorno poco a poco.
Recortar Te permite separar imágenes.
Cuentagotas Su función es tomar muestras de un color para designar el

nuevo color frontal o de fondo.
Pincel Permite pintar con una muestra de color o motivo para
corrector reparar imperfecciones en una imagen.
Pincel La herramienta pincel no solo pinta trazos, también se puede

personalizar el pincel utilizando el selector de pinceles o
modo pintura.
Tampón de Permite pintar con una muestra que se debe tomar de
clonar imagen.
Borrador Borra píxeles y restaura algunas partes de la imagen a un estado

que ya fue guardado previamente.
Bote de Esta herramienta te permite rellenar áreas de colores similares

pintura con el color frontal.
Dedo Esta herramienta simula el efecto que se logra pasando

un dedo por pintura fresca. Esta herramienta recoge el color
en el punto donde comienza el trazo y lo va empujando
mediante su arrastre.
Esponja Permite modificar o corregir la exposición de una imagen
Pluma Dibujan trazados de bordes suaves
Texto Esta herramienta te permite insertar texto en una imagen
Forma Sirve para crear formas rectangulares, rectángulos

redondeados, cuadrados, elipses, círculos
33
Mano Mueve la imagen en la ventana
Zoom Te permite ampliar o reducir la vista de una imagen
Trabajado con Photoshop

Adobe Photoshop te permite editar imágenes de manera profesional, ofreciendo una gran
variedad de filtros, máscaras, tipos de texto, efectos especiales entre otros.
Como crear un archivo nuevo en Photoshop
1.Abrir el Software Adobe Photoshop. Al abrir Adobe Photoshop nos muestra la siguiente ventana,
donde podemos empezar a trabajar.
2.Crear un archivo nuevo dando clic Archivo/nuevo o bien presionando la combinación de

teclas CTRL-N
A continuación, se muestra la ventana para configurar el lienzo.
Un lienzo es el espacio de trabajo en el cual se ubican una o varias imágenes las cuales se pueden
retocar o manipular posteriormente.
34
Nombre del lienzo Tamaño de la imagen
Nombre: Nombre del lienzo

Predefinir: se debe seleccionar la opción más adecuada de acuerdo al tamaño de imagen que
vas a editar, cada una de las opciones proporciona medidas diferentes, entre las opciones se
encuentra las siguientes:
Por ejemplo, si se selecciona dispositivos y móviles los tamaños para esta opción son:
35
Anchura y tamaño puedes configurarla en diversas unidades de medida como pixeles, pulgadas,
centímetros, milímetros, puntos, picas, etc.
La resolución también se puede definir en pixeles o centímetros, entre mayor resolución mayor
calidad, así como también el tamaño de almacenamiento será mayor.
“Las dimensiones en píxeles miden el número total de píxeles de altura y anchura de la imagen.
La resolución es la precisión del detalle en las imágenes de mapa de bits, que se mide en píxeles
por pulgada (ppp). Cuantos más píxeles por pulgada, mayor resolución. En general, las imágenes
con más resolución producen una calidad de impresión mejor.” (Guía del usuario de Photoshop,
2020)
Modo de color se configura de acuerdo al uso que vayas a utilizar a la imagen que estas
editando por ejemplo escala de grises, RGB para visualizar en monitor, CMYK para impresiones,
etc.
36
Contenido de fondo, si deseas fondo color blanco, transparente, por último, dar clic en ok para
aceptar la configuración del lienzo.
Y por último se muestra la ventana, donde se puede empezar con la edición de imágenes.
Los pasos para abrir una imagen son:
1.Clic en el Menú archivo/Abrir o bien presionar la combinación de teclas CRTL -O
2.Seleccionar la imagen que deseamos abrir (la Debe estar previamente guardada en el equipo
o en un medio de almacenamiento).
37
3.Clic en abrir
Nombre de la imagen
Nota: Una vez abierta una imagen ya puedes empezar a editarla o guardar el archivo el APS
Los pasos para guardar un archivo son:
1.Clic en archivo/Guardar o bien la combinación de teclas CTRL-S
Muestra la siguiente ventana donde debemos:
a) Seleccionar la unidad donde se guardará el archivo
b) Escribir el nombre del archivo
c)Seleccionar el formato
d)Clic en guardar
38
a)Seleccionar unidad donde deseo guardar el archivo
b)Escribir el nombre del archivo
d)Guardar
c) Seleccionar el formato
que deseo para el archivo
Nota: Si el archivo ya fue guardado y deseamos guardarlo con otro nombre, en otra ubicación o
bien con otro formato, se debe seleccionar Archivo/Guardar como o la combinación de teclas
MAYUS-CTRL-S
Los archivos de Adobe Photoshop (APS), tienen la extensión PSD, los cuales contienen capas y
estos pueden ser modificados de manera sencilla. Pero APS como otros programas te permiten
guardar sus archivos con diferentes formatos tales como: *.bmp, *.gif, *.png,,*.jpg, entre otros.
Actividad de aprendizaje 1: Crear un archivo nuevo en Photoshop donde debes abrir una
imagen, posteriormente guardas el archivo en diferentes formatos (BMP,JPG,GIF y PNG), una vez
guardados los archivos verificas el tamaño de cada archivo y lo anotas en la tabla que se te
proporciona a continuación.
1. Abrir una imagen
39
2. Guarda la imagen con diferentes anota el tamaño de cada uno de los archivos
generados:
Formato Tamaño
BMP
PSD
GIF
PNG
Después de haber guardado las imágenes con los diferentes formatos observa si además del
tamaño de cada archivo encuentras otra diferencia y anótalas a continuación.
Nota. Es importante que cuando trabajes con una imagen, guardes siempre el archivo en formato
PSD, para que puedas realizar modificaciones en caso de necesitarlas.
Pasos para utilizar cada una de las herramientas

Herramienta mover
1) Haz clic en la herramienta mover

2) Con el ratón selecciona y arrastra lo que deseas mover
Herramienta selección
Las herramientas de este grupo realizan selecciones basadas en dos formas principales: El marco
rectángulo, elíptico, fila única y columna única.
1) Seleccionar la herramienta selección que necesites

2) Seleccionar el área de la imagen que necesitas
Para deseleccionar presiona la combinación de teclas CTRL-D
40
Crear una capa a partir de la selección
1) Selecciona el área que desees con la herramienta selección

2) Presionar CTRL-J
Herramienta lazo
Con el lazo se pueden seleccionar porciones de la imagen que tengan cualquier forma irregular.
Existen 3 tipos de lazos.
1) Seleccionar el área que necesites con el lazo de tu preferencia

2) Presionar CTRL-J para crear una capa a partir de la selección
Herramienta varita mágica
El método de selección con herramienta varita mágica se basa

en color, su forma de uso es muy sencilla, basta con hacer clic
en el color que desees seleccionar y su comportamiento varía de acuerdo con la configuración
de las opciones.
A continuación, se te muestra un ejemplo.
41
Abrir una imagen Seleccionar herramienta Utilizar herramienta añadir
varita mágica y empezar
a seleccionar y restar selección para
completar la selección deseada
Herramienta recortar te permite eliminar con facilidad partes de una fotografía.
Pasos que debes seguir para recortar:
1) Selecciona la herramienta recortar

2) Arrastra el apuntador del ratón sobre la parte de la imagen que deseas conservar para
crear un marco
3) Presionar la tecla Enter
Herramienta cuentagotas sirve para seleccionar un color que luego queramos utilizar.
Pasos que debes seguir para utilizar la herramienta cuentagotas
1) Clic en la herramienta cuentagotas

2) Clic sobre en la imagen sobre el color que se necesite
Nota: En este ejemplo se utilizó la herramienta cuentagotas para seleccionar el

color de la flor y colorear texto.
En la barra de herramientas donde está el color frontal y el de fondo, cambiara el color frontal
por el que se seleccionó.
Al seleccionar la herramienta
Color frontal Color frontal
cuentagotas cambiara
Color de fondo el color frontal Color de fondo
Configurar manualmente el color frontal
1) Clic en configurar color frontal
42
2) Seleccionar el color que necesites
3) Clic en Ok
1)Configurar color frontal
2)Color deseado
3)OK
Herramienta lápiz y pincel
El lápiz y el pincel permiten pintar con el color frontal, la herramienta pincel sirve para crear trazos
suaves mientras que el lápiz pinta con bordes más irregulares.
Ejemplo con lápiz
Ejemplo con pincel
Tampón clonar
“Esta herramienta hace una copia exacta de una zona de la imagen y te permite trasladarla a
otra zona del lienzo.” (Aula clic, s.f.)
1. Seleccionar la herramienta Tampón de Clonar en el panel de herramientas
2. Seleccionar un tamaño de pincel adecuado a lo que deseas clonar
43
3. Mantener pulsada la tecla Alt para seleccionar la zona de la imagen que se desea
copiar haciendo clic sobre ella.
Nota: Puedes utilizar el Zoom para trabajar más de cerca
Ya que seleccionaste la zona a clonar, el tampón está listo para copiar. Debes mover el puntero
del ratón al lugar donde quieres modificar y dar clic en el botón izquierdo del ratón creando
tantos trazos como sea necesario.
Utiliza el tampón clonar para eliminar el cable de la imagen de la manzana
Antes Después
Borrador
La herramienta Borrador te permite eliminar la pintura de una zona determinada del lienzo
y cambiarla por el color de Fondo.
Si nos fijamos, en la barra de opciones observar que prácticamente todas las opciones nos
resultan familiar, el borrador se puede utilizar el borrador como si fuera un pincel, considerando
que se debe configurar su opacidad y dureza, hasta adaptarse a nuestras necesidades.
Bote de pintura y degradado
“La herramienta Bote de pintura te permite pintar de un color toda un área del lienzo.
44
Esta herramienta evalúa el punto donde haces clic y pinta todos los píxeles contiguos del mismo
color con el color Frontal.” (Aula clic, s.f.)
Seleccionar el color frontal y el color de fondo
1) Dibujar un rectángulo con la herramienta forma
2) Seleccionar la herramienta bote de pintura
3) Cambiar el color frontal

4) Dar clic en el rectángulo dibujado
La herramienta Degradada es capaz de crear degradados sobre el

lienzo.
Un degradado es una sucesión gradual entre dos o más colores. Su uso es muy sencillo:
1) Seleccionar la herramienta Degradado en el Panel de Herramientas.
2) Seleccionar el color de Fondo y Frontal que prefieras en el panel de herramientas.

“Los dos colores serán parte del degradado del objeto”.
3) Haz clic donde quieres que comience el degradado.
4) Arrastra el ratón hasta el lugar donde quieras que termine y suelta el botón del ratón.
Recuerda que si mantienes pulsada la tecla Shift podrás hacer degradados en línea
recta o en 45º.” (Aula clic, s.f.)
Arrastrar el
Dibujar puntero del
Seleccionar la
herramienta Rectángulo mouse del
degradado, luego con la centro hacia la
el color frontal y herramienta parte superior
de fondo forma derecha.
Herramienta dedo
La herramienta dedo simula un efecto como si pasaras el dedo por

una pintura que aún no se ha secado. Selecciona el color o
combinación de colores del lugar donde iniciamos su aplicación y
lo va extendiendo conforme vayamos moviendo el puntero del ratón, como se muestra en las
siguientes imágenes.
45
Foto original Foto herramienta dedo
Herramienta esponja
La herramienta esponja te permite elegir un pincel para

desaturar o saturar un área determinada en la imagen.
desatorado, es bajar la intensidad del color y el saturado es
aumentar la intensidad del color o abrillantar una imagen.
Original Sobrexponer Subexponer
Herramienta Pluma
La herramienta pluma sirve para hacer una pequeña incursión en el campo del dibujo vectorial,
aunque Photoshop no está diseñado para crear dibujos vectoriales, pero no quiere decir que no
pueda trabajar con ellos.
Ejemplo:
Herramienta Pluma
Herramienta Pluma forma libre
46
Herramienta Texto
La herramienta Texto nos permitirá escribir textos en

horizontal, textos en vertical, o utilizando la Máscara de
texto Horizontal o la Vertical.
La barra de Opciones de Texto es la siguiente:
Tipos de fuente Tamaño Alineado Deformación
Estilo de fuente Modo de suavizado Color Paleta de texto
Texto horizontal Texto Vertical

Con efectos
Herramienta forma
Formas predefinidas
Las herramientas de forma
sirven para crear trazados,
pero en este caso basados en
formas ya predefinidas.
Herramienta mano
La herramienta mano sirve para movernos por la imagen, haciendo clic y arrastrando sobre
ella
47
Herramienta Zoom
Al hacer clic en una imagen con la herramienta zoom , se amplía la vista hasta un nivel
preestablecido. Así pues, se puede hacer clic y arrastrar hacia la zona que queremos ampliar,
posteriormente Photoshop aumenta inmediatamente el área específica.
Reducir
Aumenta
r
Otra de las ventanas que debemos de tomar en cuenta que es igual de importante es la ventana
de capas, con ella se puede manipular las capas de la imagen que se vaya a editar. Esta ventana
se puede mostrar u ocultar presionando la tecla F7 o seleccionando la opción capas del menú
ventana.
Actividad de aprendizaje 2: Crear un archivo en Photoshop donde debes abrir una imagen y
guardarla con extensión PSD ya que se utilizará en la próxima actividad.
1. Abrir Adobe Photoshop
2. Configurar un lienzo con la siguiente información
3. Abrir una imagen

a) Archivo/Abrir/
48
b) Seleccionar la imagen/Abrir
4. Guardar la imagen con extensión PSD para continuar trabajando con ella los próximos
ejercicios.
Trabajo con capas

¿Qué son las capas?
En Photoshop puedes ver las capas como si fueran varias hojas apiladas de acetato. Es posible
ver las capas que se encuentran debajo, en cada capa puedes colocar los objetos que desees,
y todos serán parte de la imagen final, de esta manera será más fácil su edición. Se puede
agregar el número de capas que se necesite, estas capas les puedes poner nombre y un color si
se desea.
“Las capas permiten añadir componentes a una imagen y trabajar en ellas de una en una sin
cambiar la imagen original.” (Fotoshop Elements Guia de usuario, 2020)
Como agregar una capa
Para agregar una capa lo puedes hacer de diferentes maneras:
1.Menu capa/nueva/capa
2.Mayus+Ctrl+N
3.Clic en el icono nueva capa ubicado en la ventana de capas
Crear una capa nueva
49
A cada capa se le puede poner un nombre y un color, lo puedes hacer al momento de crear la
capa o después.
Para cambiar el nombre a la capa debes hacer lo siguiente:
1.Doble clic sobre la capa/Escribir el nombre que desees
Para cambiar el color a la capa:
1.Clic derecho sobre la capa/en el menú contextual que muestra elegir el color que desees.
Ocultando capas
Para ocultar o mostrar capas se debe dar clic en el icono llamado “visibilidad de capa”, el
cual podemos observar al lado izquierdo de cada capa.
Visibilidad de la capa
Moviendo capas dentro del lienzo
Las capas se pueden mover de acuerdo con las necesidades de la imagen a editar.
Es necesario que la capa que desee mover este activa, para activarla es debes dar clic sobre la
capa que desees mover, arrastrarla y soltarla en el lugar deseado (En la ventana de capas).
Cambiando orden de las capas
Las capas también se pueden mover hacía en frete, hacia delante, atrás, etc. Se hace mediante
la opción organizar del menú capas.
Dar clic en la capa que deseas mover/seleccionar menú capas/Seleccionar organizar/elegir la

opción que necesites.
50
Eliminando capas
Activa la capa que deseas eliminar en la ventana de capas y arrástrala hasta la herramienta
eliminar capa de la ventana de capas.
Nueva capa
Eliminar capa
Nota: Para deshacer las acciones es decir regresarte a la acción anterior presiona la combinación
de tecla CTRL-ALT-Z
Alterando el tamaño de una capa
Para alterar el tamaño de una capa lo puedes hacer dando clic en la opción “transformación
libre” del menú edición o bien con la combinación de teclas CTRL-T.
Una vez seleccionada la opción transformación libre se muestra una imagen como la siguiente:
51
Se puede transformar el tamaño de la imagen o girarla colocando el puntero del mouse de
alguno de los tiradores que se muestran alrededor de la imagen.
A continuación, realizar el ejercicio 3 para el cual necesitas solo tomar una foto a una manzana.
Actividad Ejercicio 3. Realizar actividad utilizando capas, herramienta rectángulo y herramienta

bote de pintura, para la cual debes tomar una fotografía a una fruta de tu preferencia, a
continuación, se te muestra los pasos a seguir para realizar la actividad.
1. Abrir Adobe Photoshop

2. Abrir el ejercicio 2 (Con la imagen de un amanzana)
3. Agregarle 4 capas
4. A la primera capa poner el nombre de manzana 1, a la segunda capa manzana 2 , la
tercera capa, texto y a la cuarta fondo.
5. Con la herramienta de lazo poligonal seleccionar la manzana y copiarla a la capa
manzana 1, y a la capa manzana 2,
6. La manzana de la capa manzana 2 utilizar la herramienta transformación libre del menú
edición para girarla
7. En la capa texto insertar un texto en la parte superior que diga “Dieta de la manzana”
8. Y en la parte inferior otro texto que diga “¿Cómo perder peso”
9. En la capa fondo dibujar un rectángulo del tamaño de la capa y con la herramienta
bote de pintura escoger un color de fondo
52
El ejercicio quedará así: Y la ventana de capas:
53
Efectos de imagen
Actualmente a los jóvenes les atrae editar imágenes aplicado diferentes efectos, Photoshop
ofrece una gran variedad de filtros, degradados, texturas y modo de fusión de capas que
combinados logran infinidad de efectos personalizados.
El menú filtro cuenta con diferentes categorías de filtros y estos a su vez tienen diferentes
categorías como se muestra a continuación.
54
Estos filtros se combinan con las opciones de capas y los modos de fusión de capas.
Opciones de capas Modos de fusión
Los efectos se van creando de acuerdo con las necesidades de la imagen que estas editando.
Por ejemplo, puedes utilizar otras herramientas de la barra de herramientas para estilizar las
manzanas o el fondo, como se muestra a continuación.
55
Al fondo le pintas de color rosa con la herramienta bote de pintura.
En el menú vista se encuentra la opción aumentar, para aumentar el zoom y de esta manera
trabajar más cómodamente con la herramienta tampón clonar.
Utilizando el Tampón clonar, dedo y esponja, puedes cambiar el color a la manzana de la capa
manzana 2.
Quedando como se muestra anterior.
Se aplicará un efecto diferente a cada manzana como (Superposición lineal a la capa manzana
2 y luz fuerte a la capa manzana 1)
Luz fuerte
Superposición
lineal
También podemos aplicar Filtros, los cuales se encuentran en el menú Filtro.
A continuación, se aplicará un filtro diferente a cada manzana (Destramar y molinete)
Destramar se encuentra en: Menú Filtro/Ruido/Destramar
Molinete se encuentra en: Menú Filtro/Distorsionar/Molinete
56
Molinete
Destramar
57
Actividad de aprendizaje 4: Efecto Blanco y negro brillante, debes convertir la capa a
objeto inteligente, posteriormente pasar la capa a blanco y negro, luego les vas a aplicar
el modo de fusión multiplicar. A continuación, se te mostraran los pasos a seguir para
realizar la actividad.
1. Crear un archivo nuevo

2. Configurar el lienzo
3. Abrir un archivo
4. Duplicar la capa, CTRL-J

5. Convertir la capa a objeto inteligente
Clic derecho sobre la capa/Convertir a objeto inteligente
6. Pasar la capa a blanco y negro
Imagen/Ajustes/Blanco y negro
7. Modo de fusión multiplicar
58
Multiplicar
8. Crea una capa de ajustes “mapa de degradado”
Capa/Nueva capa de ajustes/Mapa de degradado/Sobreexponer color
Actividad Integradora. Elaborar la siguiente actividad portada de revista con Efecto Bokeh,
donde deberás tomarte una fotografía y descargar un archivo Bokeh de internet, para realizar
esta actividad utilizarás las diferentes herramientas abordadas en clase anteriores.
Se le llama Bokeh a unas luces desenfocadas dentro de la fotografía, solo se tienen que ponerlas
encima de cualquier imagen y son las que la hacen especiales y festivas.
59
1. Crear un archivo nuevo/Configurar lienzo
3.Coloca sobre la capa

2.Abre tu imagen de base 4.Cambia el modo de fusión
de fondo una imagen de
un Photoshop un Bokeh de fondo oscuro. de la capa del Bokeh a
Puedes encontrar muchas “Multiplicar” y baja su
buscando “Bokeh” en opacidad si fuera
Unsplash.* necesario.
1. Formar equipos de dos integrantes

2. Seleccionar alguna fotografía que quieran mejorar
3. Agrega a la imagen texto con efectos (por lo menos tres efectos al texto)
4. Agrega algunos efectos a la imagen (por lo menos tres)
5. Agrega un bokeh a la imagen para hacerla más divertida
6. Guada la fotografía con los cambios en ella y guárdala con el siguiente nombre:
Practica2_ fotografía_ nombre y apellido tuyo y de tu compañero ejemplo: Practica2_
Fotografía_Jesús López_y_Juan Pérez
8. Imprime la fotografía editada y muéstrala a tus compañeros de clase.
60
Ligas de interés
Uso de capas
https://www.youtube.com/watch?v=gVJv79CjhEc
Uso de pluma
https://www.youtube.com/watch?v=ftByP1AdNEw
Uso de pincel, lápiz y borrador
https://www.youtube.com/watch?v=fVD0SWftUjA
Uso de Tampón clonar
https://www.youtube.com/watch?v=j8f0BBR2ds8
Uso de herramienta texto
https://www.youtube.com/watch?v=KVel8fUVsmE
https://www.youtube.com/watch?v=aR1SpxZqvro
61
Momento III
62
MOMENTO III

CG 8. Participa y colabora de manera afectiva en equipo diversos.
8.1. Propone maneras de solucionar un problema o desarrollar un proyecto en equipo,
definiendo un curso de acción con pasos específicos.

Crea animaciones multimedia, favoreciendo un ambiente de tolerancia y creatividad para
expresar ideas que den solución a problemas de su entorno.
Aplica software de diseño editorial para realizar estrategias creativas e innovadoras en la

transmisión de ideas. Favoreciendo su creatividad en un ambiente ético y responsable dentro
de su contexto.
HABILIDADES
Distingue los elementos básicos que integran la animación multimedia.
Prueba realizar animaciones con diversas temáticas.
Distingue los elementos básicos que integran el software de diseño editorial.
Experimenta con Software de diseño editorial.
ACTITUDES
Se comunica de manera asertiva y empática.
Muestra innovación en las diversas formas de expresar en su contexto.
Se informa a través de diferentes fuentes antes de tomar decisiones.
63
MOMENTO III.
Conocimientos:
Animaciones multimedia:
 Entorno
 Conceptos básicos
 Aplicar animación a un objeto
 Botones de manipulación
 Aplicar sonido y video
Lectura 1. Animaciones multimedia
Conociendo Macromedia Flash 8
Macromedia Flash nos sirve para crear animaciones y objetos interactivos, este programa es muy
utilizado ya que el tamaño de sus archivos es pequeño.
Este Software no solo es un programa para crear gráficos, sino un lenguaje de programación
utilizado normalmente para crear presentaciones, anuncios, gráficos y páginas web. Las
animaciones creadas en flash les puedes incluir efectos atractivos e interactividad con los usuarios
para realizar algunas acciones.
En Macromedia flash se trabajan prácticamente 3 aspectos principales que son:
 Dibujar y diseñar los objetos que se necesitan en la película.

 La animación de los objetos que lo requieren.
 Aplicar interactividad a los objetos que consideres que lo necesitan.
En Macromedia flash puedes manejar dos tipos de archivo: los de extensión .fla y los .swf.
A continuación, se te presenta la pantalla principal de Macromedia flash, donde se describen los

elementos principales.
64
Elementos de la ventana de Macromedia Flash
5
4
3
6
2
Descripción de cada una de las partes de la ventana de Macromedia Flash.
1.La barra del menú muestra menús con comandos principales del programa, cada uno de ellos
despliega una lista de opciones con funciones de Flash.
2.La barra de herramientas contiene botones que te permiten crear las figuras las cuales servirán
para formar la película, así como también las opciones de cada herramienta.
3. Las capas te permiten modificar el contenido de una capa sin afectar el contenido de otras
capas. De acuerdo con (Gonzales, 2005, pág. 84) Una capa “se trata de varios dibujos
superpuestos que forman una imagen completa.
4.La Línea de tiempo Permite organizar y controlar el contenido de un documento mediante

capas y fotogramas a través del tiempo, es decir es donde se le indica a Flash en que momento
desea que se muestren los gráficos y otros elementos del proyecto
“La Línea de Tiempo representa una forma de ver los fotogramas de modo simplificado. Consta
de 2 partes.
65
1) Los Fotogramas (frames) que vienen delimitados por líneas verticales (formando rectángulos)
2) Los Números de Fotograma que permiten saber qué número tiene asignado cada fotograma,
cuánto dura o cuándo aparecerá en la película.” (Aula clic, s.f.)
5.Los Fotogramas son cada imagen que se agrega a la línea del tiempo con las cuales formas la
animación.
6.El Escenario Es el área rectangular donde se muestran los gráficos, videos, botones y objetos
durante la reproducción.
7.Los Paneles Estos contienen utilidades que permiten modificar la película o su contenido y cada
panel se encuentra especializado en un tema.
Actividad de aprendizaje 1. Elaborar un reporte de lectura en Microsoft Word o en tu libreta

sobre la Lectura 1. Conociendo Macromedia Flash donde agregues los conceptos principales
tratados en esta lectura.
Herramientas básicas de Macromedia Flash
Herramienta Nombre Descripción

Te permite seleccionar objetos en la imagen solo con dar clic
Selección
encima del mismo. Entre los objetos de puede mencionar
rectángulos, círculos, líneas, etc.
Permite dibujar líneas rectas. Una vez que se ha activado el
Línea
botón, se accede al escenario y se hace clic ahí.
Manteniendo pulsado el botón del ratón, arrastre, y suelte.
Se utiliza para incorporar mensajes de texto a la película. Una
Texto
vez activado el botón, acceda al escenario y haga clic en
la zona que deberá comenzar el escrito.
Permite trazar círculos y elipses. Una vez activado el botón,

Ovalo
acceda al escenario y haga clic ahí. Manteniendo pulsado
el botón del ratón, arrastre, y suelte cuando el círculo o elipse
tenga la forma deseada.
66
Este botón permite dibujar todo tipo de recuadros:
cuadrados y rectángulos. Una vez pulsado el botón, haga
Rectángulo clic sobre el escenario y, sin soltar el botón del ratón, arrastre
hasta completar el recuadro que desee; entonces, libere el
botón del ratón y el cuadro queda listo. El cuadrado si lo
deseas puede quedar con las esquinas redondas.
Permite dibujar como lo haríamos con un lápiz en un papel.
Este sistema de dibujo consiste en hacer clic en el escenario
Lápiz y, sin soltar el botón, arrastrar por donde deseemos, ya que
el ratón ira dejando una estela como lo haría un lápiz al
deslizar su punta por el papel. Automáticamente se activa la
sección opciones que nos permite: Enderezar, suavizar, tinta.
Es una herramienta similar a un pincel, pero permite pintar
más grueso a modo de brocha. Para usar esta herramienta
se selecciona la herramienta, se hace clic en el escenario y
sin soltar el botón derecho del ratón se arrastra.
Pincel Automáticamente se activa la sección opciones que nos
permite: Pintar normal, relleno de pintura, pintar detrás y
pintar selección.
Se emplea para aplicar un relleno de color a las figuras ya
dibujadas (o las que vallamos a dibujar posteriormente).
Cubo de
pintura Bastara con hacer clic sobre una figura para que su interior
adquiera el aspecto que apliquemos con el cubo.
Como se puede suponer, el borrador permite borrar zona de
dibujo. Para ello, hacemos clic en una zona del escenario y,
sin soltar el botón del ratón, arrastramos en la dirección
deseada. Por donde pasemos el dibujo ira borrándose.
Cuando activamos esta herramienta, la selección Opciones
Borrador
ofrece vario botones con los que podremos elegir varias
formas. Automáticamente se activa la sección opciones
que nos permite:
Borrar normal, rellenos, líneas, bordes, rellenos seleccionados
y borrar dentro.
67
Actividad de aprendizaje 2. Crear los siguientes dibujos utilizando las diferentes herramientas
de Macromedia Flash tales como ovalo, rectángulo y cubo de pintura.
Ovalo
Cubo de Pintura Ovalo y Rectángulo
Ovalo
Pincel Borrador
Texto
Aplicar animación al objeto
En Macromedia flash puedes crear tantas animaciones como tu imaginación te lo permita

combinando las diferentes herramientas como son el lápiz, el pincel, formas y texto, entre otras
herramientas con las que cuenta Macromedia Flash con capas, los símbolos, los efectos y las
transiciones.
Interpolación de movimiento
“Es la acción básica de las animaciones en Flash. Permite desplazar un símbolo Flash de un lugar
a otro del escenario, siendo necesarios únicamente dos fotogramas, lo que optimiza mucho el
rendimiento de la película. Es importante destacar que para que una Interpolación de
movimiento se ejecute correctamente aquellos objetos que intervengan deberán haber sido
previamente convertidos a símbolo.” (Aula clic, s.f.)
Una animación con interpolación de movimiento se establece mediante la definición de las

posiciones del inicio y el fin de un objeto que se desee animar para que Macromedia Flash 8
calcule todas las posiciones de interpolación de este objeto. De esta manera, puede crear
68
animaciones de movimiento lentas o rápidas con sólo establecer las posiciones de inicio y fin del
objeto que se está animando.
De acuerdo con (Gonzales, 2005, pág. 121)”Para crear una animación con interpolación de
movimiento sencilla debemos disponer de un símbolo con el que crearemos una interpolación
de movimiento en un fotograma clave, una instancia(copia) de este símbolo deberá estar
colocada en una capa exclusivamente para él, si añade otras instancias o figuras a la capa
también se moverán.”
Interpolación de forma
Con la interpolación de forma se pueden cambiar la forma de un objeto, esta consiste en tener
un objeto inicial y que este objeto, conforme pasan los fotogramas cambia su forma a un objeto
final diferente, por ejemplo, el objeto inicial puede ser un círculo y lo podemos convertir en un
pentágono y este pentágono convertirlo en un corazón, como se realizará en la actividad de
aprendizaje siguiente.
Actividad de aprendizaje 3. Realizar una animación con interpolación de movimiento en la

cual una elipse cambia de tamaño y se mueve a otro lugar puedes utilizar los siguientes pasos
para realizar la actividad.
1. En el FT 1, crear un fotograma clave, dibujar una elipse.
2. En el FT 20 crear un fotograma clave, mover la elipse y hacerla más grande
3. Clic derecho en la línea del tiempo sobre los fotogramas/Crear interpolación de
movimiento
1 2
3
69
Actividad de aprendizaje 4. Crear una animación con interpolación de forma.
1. Abrir un archivo nuevo
2. Clic en el FT 1/Clic derecho en el FT 1/insertar fotograma clave
3. Dibujar en el escenario una elipse
4. Clic derecho en el FT 10/Insertar/fotograma clave
5. Dibujar en el escenario un hexágono
6. Clic derecho en el FT 20/Insertar fotograma clave
7. Dibujar con el pincel un corazón
8. Dar clic en el FT 10, y en los parámetros elegir FORMA en animar
9. Dar clic en el FT 20, y en los parámetros elegir FORMA en animar
Los dibujos en los

fotogramas 1,10 y 20
Ft 10
Ft1
Ft 20
Interpolación de forma
A continuación, se muestran imágenes de cómo va cambiando la forma de las figuras

según en el fotograma que se encuentran.
70
Símbolos y bibliotecas.
“Un símbolo es un objeto grafico al que le tiene que dar un nombre para poder ser utilizado
posteriormente en la misma película o en otra. Los símbolos se utilizan como objetos gráficos fijos,
como animaciones en la película y como botones que forman la parte interactiva de la misma.”
(Gonzales, 2005, pág. 121)
Los símbolos que se crean a partir de un objeto dibujado son muy útiles ya que pueden ser
utilizados varias veces en una misma película e incluso en otras películas.
Para crear un símbolo partiendo de un objeto que ya existe, basta con hacer lo siguiente:
1. Activar la herramienta selección
y haz clic sobre el objeto.
2. Ir al menú Modificar→ Convertir en símbolo o presionar F8.
71
Nombre: Escribir el nombre que tendrá el símbolo.
Tipo o comportamiento:
a. Clip de película: una animación dentro de la película.

b. Botón: Interactividad de la película.
c. Gráfico: una imagen más o menos fija.
d. Registro: Indica la posición donde se registra el símbolo.
3.Pulsar el botón Aceptar.
Biblioteca de símbolos
La biblioteca de símbolo te permite administrar y almacenar los símbolos que se van creando en
cada película. La biblioteca nos ofrece la posibilidad de crear nuevos símbolos, cambiar el
nombre de los que ya formen parte de la película y borrarlos.
Para mostrar la biblioteca en el marco de paneles se debe elegir el menú Ventana → Biblioteca
o la tecla F11.
1
1) Visor que nos muestra al símbolo seleccionado.
2) Nuevo símbolo.
3) Nueva carpeta.
4) Propiedades.
5) Eliminar.
2 3 4 5
Instancia: “Una instancia representa la existencia de un símbolo en el escenario.” (Adobe

Animate Guía de Usuario, 2020). La instancia puede ser diferente a su símbolo en cuanto a su
color, función y tamaño. Cuando se edita el símbolo, sus instancias se actualizan, cabe mencionar
72
que, al aplicar efectos a una instancia de un símbolo, estos sólo se aplicas a la instancia en
cuestión.
Nota: Si se va a definir un símbolo que aún no ha dibujado puede ir directamente al menú insertar
y elegir nuevo símbolo.
Los símbolos también se pueden eliminar, pero una vez eliminados ya no se pueden recuperar,
por esta razón Macromedia Flash te envía un cuadro de dialogo cuando deseas eliminar un
símbolo donde te pide conformación para eliminarlo.
Animaciones Interpoladas con trayecto
Existe la posibilidad de conseguir que una instancia recorra un trayecto que puede ser en línea
recta o curva la cual se anima mediante una interpolación de movimiento, esto se realiza
mediante una guía de movimiento.
Se le llama guía de movimiento a la trayectoria que se marca para que los símbolos de la capan
la sigan mientras se lleva a cabo el movimiento.
Actividad de aprendizaje 5. Realiza la siguiente actividad donde debes de crear un símbolo y

aplicar interpolación de movimiento, a continuación, se te muestran los pasos a seguir.
1. Abrir Macromedia Macromedia Flash

2. Posicionarme en el fotograma1 y dibujar un tren
3. Insertar/Nuevo símbolo/Clip de película/Aceptar
73
4. Posicionarme en el fotograma 15/Clic derecho/Insertar fotograma clave
5. Mover el tren al fotograma clave
6. Crear interpolación de movimiento
Capas
Las capas en flash son similares a las capas en Photoshop, funcionan de la misma manera como
si tuvieras apiladas varias hojas de acetato, es decir, varios dibujos superpuestos que forman una
imagen completa. Es decir ”Se trata de varios dibujos superpuestos que forman una imagen
completa. La ventaja que ofrecen es que se puede modificar el dibujo contenido en una capa
sin afectar a las demás.” (Gonzales, 2005, pág. 84).
Tipos de capas: Normal, guía y mascara.
“Normal, es el tipo de capa estándar en la que podremos incorporar objetos y animarlos.
Guía. Es un tipo de capa especial en la que podemos añadir, además de objetos y animaciones
cuadriculas con las que alinear mejor esos objetos.
Máscara. Es una capa opaca en la que podemos generar huecos para ver los objetos situados
en las capas inferiores. Los huecos se trazan mediante figuras rellenas, esas zonas rellenas serán
transparentes mientras el resto serán zonas opacas” (Gonzales, 2005, pág. 89)
Para crear una capa es necesario:
1. Seleccionar el menú Insertar→Línea del tiempo→Capa
74
Las capas cuentan con las siguientes propiedades:
Nombre: Nombre de la capa.
Mostrar o bloquear: Mostrar u ocultar capa.
Tipos: Normal, Guía, con guía, Máscara, con Máscara, carpeta.
Color de contorno: Define el color del contorno.
Altura de la capa: Establece lo alto de la capa.
Las cuales las puedes configurar en la ventana de propiedades de las siguientes maneras:
1.Clic derecho sobre la capa/Propiedades
2.Ir al menú modificar/Línea de tiempo/Propiedades de la capa
La línea de tiempo te permite organizar y controlar el contenido de un documento a través del

tiempo por medio de capas y fotogramas. Cada una de las capas contiene una imagen
diferente y estas se muestran en el escenario. La línea de tiempo está formada por los siguientes
componentes: capas, fotogramas y la cabeza lectora.
Fotograma clave
Fotograma clave vacío Cabeza lectora Encabezado de línea del tiempo
75
Animación por fotogramas
Centrar fotograma
Insertar capa
Carpeta de capas Tiempo transcurrido
Insertar guía de movimiento Velocidad de fotograma
Insertar capa Fotograma actual
Un fotograma clave es aquel que define un cambio en las propiedades de un objeto de una
animación o se incluye código ActionScript para controlar determinado aspecto del documento.
(Adobe Animate Guía de Usuario, 2020).
Los fotogramas clave tienen contenido específico, son creados especialmente para insertar un
nuevo contenido en ellos. En un fotograma se pueden cambiar las características de un objeto o
de un símbolo con el fin de variar su actuación durante la película, además de cambiar las
características del objeto o del símbolo podemos eliminar o añadir objetos o símbolos.
Existen dos formas de crear un fotograma clave
1. Hacer clic en el fotograma, posteriormente seleccionar el menú insertar → Línea del tiempo →
Fotograma clave.
2. Hacer clic derecho sobre el fotograma y seleccionar Fotograma clave.
Actividad de aprendizaje 6. Elaborar una animación con guía de movimiento

1. Abrir un archivo nuevo Macromedia Flash
2. Insertar 4 capas (Capa1 paisaje (Dibujar un paisaje), capa2 cielo (Dibujar un cielo),
capa 3 flores (Dibujar las flores), capa 4 mariposa (Dibujar mariposa), cada objeto
dibujarlo en el FT1 de su capa).
3. En el FT 30 de cada capa (césped, cielo y flores) insertar un fotograma.
4. En el FT 1 de la capa mariposa, seleccionar la mariposa y convertirla en símbolo (clip de
película).
76
5. Posicionarse en FT 30 de esta capa que deseamos a donde llegue la animación e
insertar un fotograma clave. 4.
6. Posicionarse en un fotograma intermedio, dar clic derecho y seleccionar interpolación
de movimiento.
7. Seleccionar la capa mariposa y posteriormente hacer clic en guía de movimiento

8. Inmediatamente después seleccionar la herramienta lápiz y trazar la línea por donde se
desea que el objeto se mueva, la línea no se debe cruzar.
9. Posicionarse en la capa1 y posicionarse en el fotograma 1.
10. Mover el objeto hasta que el centro de él (un circulito blanco) se encuentre sobre la
línea trazada.
11. Posicionarse sobre el último fotograma de la capa1 y mover el objeto hasta que el
centro de él coincida con el final de la línea.
12. Probemos cómo quedó. Ctrl + Enter
13. Insertar una guía de movimiento.
14. La práctica lucirá como muestra a continuación.
77
Botones manipulación
Botones
Flash ofrece la posibilidad de que el usuario interactúe con la película, Es decir que el usuario
podrá indicarle que acciones desea que la película realice, aunque, por supuesto, la película
solo podrá ejecutar las acciones que hayan sido programadas por su diseñador.
Para ello es necesario que la película contenga los elementos necesarios para poder recibir
órdenes del usuario: botones, cuadros de texto y acciones.
1. Los botones se muestran para ofrecer posibles acciones al usuario dentro de la película:
cada botón que presentemos permitirá al usuario realizar una acción diferente.
2. Los cuadros de texto permiten ofrecer información al usuario, ya sea esta información
textual inicial o bien resultado de la película.
3. Las acciones son de gran importancia para la interactividad. El programador debe de
crear los trabajos que realizara la película.
Pasos para crear un botón:
1. Dibujar un botón.
2. Una vez dibujado el botón con la
herramienta selección lo
seleccionamos.
3. Accederemos al menú modificar
convertir en símbolo.
4. Asignamos el nombre del botón, seleccionamos el tipo botón y Aceptar.
5. El botón ya está terminado. Resulta recomendable generar cambios en el botón para
alterar su aspecto.
6. Hacer clic derecho sobre el botón y seleccionar Edición o doble clic sobre el botón).
7. Al realizar esta acción te aparecerá lo siguiente en la línea del tiempo del botón.
8. Los fotogramas reposo, sobre, presionado y zona activa realizan lo siguiente:
a. Reposo: Contiene el dibujo cuyo aspecto mostrara el botón cuando este sin usarse.
b. Sobre: Contiene el dibujo cuyo aspecto mostrará el botón cuando el ratón pase
sobre él.
c. Presionado: Contiene el dibujo cuyo aspecto mostrará el botón cuando este
pulsado (al hacer clic sobre él).
78
d. Zona activa: debe contener el dibujo cuya forma y tamaño indica exactamente la
zona que abarca el ratón, así cuando el ratón pase sobre esa zona se activará el
dibujo sobre, presionado en caso de presionar.
9. Una vez terminada la edición debemos regresar al modo normal y esto se realiza al
presionar la solapa escena 1, ubicada en la parte superior.
Insertar un botón prediseñado.
1. Ir al menú VentanaBiblioteca comunesBotones

2. Seleccionar el botón deseado en el panel.
3. Arrastrar al escenario.
Actividad de aprendizaje 7. Elaborar una actividad con botones donde debes crear un archivo
con el nombre de Practica Botón. Lograr que un Botón cambie sus aspectos tal como se muestra
a continuación.
Reposo Sobre Presionada
Aplicar sonidos y video
En Macromedia Flash 8, se puede editar todo lo referente a los sonidos desde el Panel
Propiedades por ejemplo como insertar el sonido previamente importado, modificarlo y editarlo.
Para trabajar con sonidos se debe hacer clic en algún fotograma de la película, posteriormente
se pueden modificar las propiedades del sonido.
Sonido: En la pestaña sonido muestra los archivos de sonido que se han importado, solo debes
seleccionar el sonido que deseas agregar a la película.
Efecto: Se puede disminuir o aumentar el sonido de manera progresiva.
79
Sinc: La opción de sincronizar sonido, nos permite determinar en qué momento comenzará a
actuar nuestro sonido, estas son las opciones que tenemos:
Actividad de aprendizaje 8. Elaborar una animación utilizando sonidos utilizando los siguientes
pasos.
1. Abrir Macromedia flash
2. En la capa1 FT 1, dibujar un camión de carga, cambiar el nombre de la capa como
“camión” Insertar un fotograma clave en el FT 15 de esta capa, mover el camión al FT 15
y crear interpolación de movimiento en la capa camión.
3. Insertar una capa, cambiar el nombre a “carro”, dibujar un carro en el FT 1 de esta capa,
Insertar un fotograma clave en el FT 15 de esta capa, mover el carro al FT 15, y crear
interpolación de movimiento en esta misma capa.
4. Insertar una capa, llamarla “Sonido”.
5. En el FT 1 de la capa sonido insertar un sonido de vehículo (Este debe estar previamente
guardado)
Para insertar el sonido debemos importarlo a la biblioteca
a) Archivo/Importar/Importar a la biblioteca/Seleccionar el archivo/Abrir
6. En el FT 1 de la capa sonido crear un Fotograma clave
7. Dar clic en el FT 1 de la capa sonido, y en la ventana de propiedades selecciona el sonido
que importaste a la biblioteca e inserta un Fotograma clave en el FT 15 de la capa sonido.
Así se mostrará el trabajo en Macromedia Flash en el FT 1
Así se mostrará en el FT 15, además de escucharse el sonido durante los movimientos del
carro y el camión.
80
Videos
Con Macromedia Flash es muy sencillo añadir vídeos a nuestras presentaciones. Macromedia
Flash 8 incorpora una serie de características que permiten el uso de vídeos como si se tratara de
cualquier objeto en pantalla.
Dentro de las acciones que se realizan para el uso de videos son: para importar, exportar, aplicar,
manejar, comprimir videos.
Importar: Primeramente, se debe asegurar que el vídeo esté guardado en la misma carpeta que
el archivo en el que estás trabajando:
1. Ir al menú Archivo/ Importar/ Importar a la biblioteca.
2. Se abrirá una ventana emergente con todos los archivos de vídeo, elije el video que necesites
y da clic en "Abrir".
3. Se abren un asistente como el siguiente:
a) Seleccionar la opción siguiente.

b) En la siguiente pantalla seleccionar el archivo de video y dar clic en el botón
SIGUIENTE.
81
Seleccionar video
Clic en siguiente
En la siguiente ventana seleccionar flujo de flas video Streaning Service
Posteriormente Dar clic en el botón SIGUIENTE
82
Dar clic en finalizar.
83
MOMENTO III.
Conocimientos:
Software de diseño editorial:
 Entorno.
 Herramientas básicas.
 Ajuste de lienzo, marcos y páginas.
 Bocetaje con guías y cuadricula.
 Capas.
Lectura 2: Software de diseño editorial
Adobe Ilustrator “es un software creado por Adobe Systems especializado en el tratamiento de
dibujos vectoriales tanto para trabajos en el nivel doméstico como el profesional” (Gasset, 2013).
El programa Illustrator según Gasset (2013) es posible crear y trabajar con imágenes vectoriales al
igual que CorelDraw solo que este programa no es tan pesado como CorelDraw y cuenta con
más herramientas, las imágenes no pierden calidad al ser escaladas, pueden ser modificados en
el futuro e incluso permite animaciones.
Entorno
El entorno de trabajo de illustrator cuenta con los siguientes elementos:
A. Barra de título: Esta barra contiene nombre del programa y del documento actual.
B. Barra de menú: Se encuentra en la parte superior y permite desplegar una serie de
menús (archivo, edición, objetos, texto, seleccionar, efectos, ventana. Etc)
C. Panel de control: Situada debajo de la barra de menú, muestra las opciones del objeto
que se tiene seleccionada.
D. Barra de herramientas: aparece del lado izquierdo de la pantalla y permite crear,
seleccionar y crear objetos.
E. Mesa de trabajo: son elementos independientes que forman parte del documento
final.
F. Paneles del programa: Muestra paneles adicionales.
84
En la siguiente imagen se muestra de forma gráfica el ambiente de trabaja cada uno de sus
elementos:
A
B
C
F
D
A) Barra de título, B) Barra de menú, C) Panel de control, D) Barra de herramientas,
E) Mesa de trabajo, F) Paneles del programa.
85
En la siguiente imagen se muestran los diferentes grupos por los que está formada la barra de
herramientas y del lado derecho el nombre de cada elemento que lo integra.
A. Herramientas de Selección B. Herramientas de dibujo

 Selección  Pluma
 Selección directa  Segmento de línea.
A
 Varita mágica  Pincel.
 Lazo Mesa de trabajo  Rectángulo.
C  Lápiz
B
C. Texto D. Herramientas para reformar
 Rotar, reflejo, escala.
D  Cristalizar, lazo, distorsión

 Reformar, deformar,
E molinete.
 Arrugar, engordar,
F E. Herramientas de símbolo y F. Herramientas de pintura

gráficas.  Pincel de manchas
 Rociar símbolo  Malla Degradado
G
 Girar Símbolo  Cuentagotas Medición
H  Gráfica de columnas  Bote de pintura
 Selección de pintura
G. Herramientas de sector y corte H. Herramientas de movimiento o
 Seleccionar sector zoom
 Borrador  Mano
 Tijeras Cuchilla  Zoom
86
Ajustes de lienzo, marcos y páginas
En este apartado podrás encontrar una descripción general de cómo crear un nuevo lienzo y
como este puede ser ajustado de acuerdo con las necesidades que cada uno d ellos usuarios
requiere.
Para crear un nuevo lienzo debes realizar lo siguiente:
1. Seleccionar el menú archivo y elegir nuevo documento donde debes especificar lo

siguiente:
Nombre: Nombre del lienzo.

Nuevo perfil del documento: Tipo de
perfil.
Número de mesas de trabajo:
Cantidad de meses que se requieren.
Área de recorte: Se especifica el
tamaño del reporte.
Ancho y alto: Ancho y alto del lienzo.
2. Especificar los datos solicitados.

3. Dar clic en ok una vez especificado los datos.
Bocetajes con guías y cuadrículas
Cuadriculas: estas aparecen al fondo del lienzo simulando un papel a

cuadros, el cual se utiliza como una herramienta que permite colocar los
objetos u elementos de una forma más sencilla, cabe señalar que estas
líneas no se imprimen, solo sirve como guía. (Gasset, 2013)
La forma de visualizar la cuadricula es necesario ir al menú vermostrar cuadricula.
87
Guías: es muy parecido a las cuadricular, sirve para alinear textos y
objetos.
Cabe señalar que estas no son imprimibles. Para acceder a ellas es

necesario ir al menú Ver  Guías Crear guías. (Gasset, 2013)
Capas
Usualmente cuando es necesario crear una ilustración muy compleja es necesario la utilización
de capas, lo cual facilita controlar todos los elementos de la ventana del documento.
Las capas son como carpetas transparentes que conforman la ilustración. Si se modifica el orden
de dichas carpetas también cambia el orden de apilamiento de las mismas.
Capa seleccionada
Capa visible
Crear subcapa Borrar Capa

Crear Capa
1. Forma equipos de tres integrantes

2. Retomen el tema de salud y elaboren una animación utilizando capas, texto,
interpolación de movimiento y/o forma, imagen diseñada en illustrate y sonido.
3. Guarda la animación elaborada con el siguiente nombre: Practica3_ Animaciones_
nombre y apellido tuyo y de tu compañero ejemplo: Practica3_Animaciones_Jesús
López_y_Juan Pérez
5. muéstrala a tus compañeros de clase por medio de una exposición.
88
Ligas de interés
Interpolación de movimiento y forma
https://www.youtube.com/watch?v=t2EyRNMvmFA
crear símbolo
https://www.youtube.com/watch?v=gxxFh8ztUek
Guía de movimiento
https://www.youtube.com/watch?v=KBXVoGc7zwk
Insertar sonido
https://www.youtube.com/watch?v=91K1WlUGL5A
insertar video
https://www.youtube.com/watch?v=y_PIxgiW_rA
89
Referencias bibliográficas
Adobe Animate Guía de Usuario. (2020). Obtenido de

https://helpx.adobe.com/la/animate/using/symbols.html
aula clic. (s.f.). Obtenido de https://www.aulaclic.es/flash8/t_3_2.htm
Gonzales, F. P. (2005). macromedia Flash MX 2004. México DF: Alfaomega.
Gasset, A. y. (2013). ADOBE ILLUSTRATOR CS6. Malaga, España: ICB, S.L.
aula clic. (s.f.). Obtenido de https://www.aulaclic.es/flash8/t_3_2.htm
aula clic. (s.f.). Obtenido de https://www.aulaclic.es/photoshop-cs6
Guia de usuario de photoshop (2020). Obtenido de

https://helpx.adobe.com/mx/photoshop/user-guide.html
90

6934 Diseño Digital

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

6934 Diseño Digital

Cargado por

Copyright:

Formatos disponibles

Guía didáctica

María de los Ángeles Uriarte Félix

Edición con fines educativos no lucrativos.

Número de registro de obra:

Software de Edición de mapa de bits

Competencias Genéricas, Profesionales básicas y Aprendizajes esperados

Estimados alumnos y alumnas,

Para fortalecer el desempeño académico que desarrollas en cada submódulo de tu

Con un lenguaje propio de la cultura juvenil, los contenidos abordados presentan

Encontrarás en el contenido: las competencias genéricas con sus atributos, y

Un apartado destacable es el de evaluación de los aprendizajes, donde de manera

MC. Sergio Mario Arredondo Salas

COMPETENCIAS GENÉRICAS Y ATRIBUTOS

COMPETENCIAS PROFESIONALES BÁSICAS

a) Varita mágica b) Lazo c) Selección d) Cuentagotas

Submódulo II. Diseño digital

 Tipos de gráficos: Mapa de bits y

Lectura 1: Introducción al diseño digital

Tipos de gráficos: Mapa de bits y vectorial.

Al hablar de gráficos se hace referencia a la representación visual de información, mensajes.

Gráficos Vectoriales: Son imágenes se conforman a través de trazos geométricos determinados

JPG / JPEG (Joint Photographic Expert Group)

PNG (Gráficos de Red Portátiles)

Tipos de software de diseño y que ofrecen

El software de Diseño gráfico son programas que se especializan en la creación de imágenes, de

Modo de color Definición

Lectura 2. Software para edición de gráficos vectoriales

Entorno de trabajo de CorelDraw

En CorelDraw se pueden crear fácilmente ilustraciones profesionales, este es un programa de

B. Barra de menús: Contienen comandos que ayudan a la modificación, transformación,

D. Barra de propiedades: Aparece debajo de la barra de herramientas, el contenido de esta

E. Caja de herramientas: Aparece en la parte izquierda de Corel Draw Contiene

F. Paleta de colores: Aparece en forma vertical en el lado derecho de la pantalla, en ella

G. Contador de página: Se encuentra en la parte inferior izquierda de la ventana, justo arriba

Herramientas básicas de CorelDraw

Selección esta opción permite modificar el tamaño de un objeto, inclinar,

Selección de mano alzada permite seleccionar como si lo hicieras con un

Forma permite modificar la forma de los objetos.

Recortar permite recortar la parte seleccionada de un objeto

Cuchillo permite cortar los objetos.

Pincel Deformador como su nombre lo dice, esta opción permite

Pincel Agreste distorsiona el contorno arrastrando el cursor a lo largo del

Zoom esta opción permite cambiar el tamaño de la ventana de dibujo.

Mano permite mover la parte del dibujo que es seleccionada en la

Pluma Permite dibujar curvas segmento a segmento.

Polilínea permite dibujar líneas y curvas en modo pre visualización.

Mano alzada permite dibujar segmentos de líneas y curvas.

Medios artísticos da acceso a Pincel, Diseminador, Pluma caligráfica y

Rectángulo permite dibujar rectángulos y cuadrados.

Elipse permite dibujar elipses y círculos.

Polígono permite dibujar polígonos y estrellas simétricos.

Texto permite escribir palabras en la pantalla como texto artístico o de

Herramientas Cota paralela dibuja líneas de cotas inclinadas.

Silueta interactiva permite agregar una silueta al objeto seleccionado.

Distorsión interactiva permite aplicar una distorsión Empujar y tirar,

Envoltura interactiva permite arrastrar los nodos y distorsionar el objeto.

Extrusión interactiva permite aplicar la ilusión de profundidad a los objetos.

Sombra interactiva permite aplicar una sombra a un objeto.

Transparencia interactiva permite aplicar transparencias a los objetos.

Cuentagotas permite seleccionar un relleno a partir de un objeto de la

Bote de pintura permite rellenar un objeto de la ventana de dibujo después

Relleno interactivo permite aplicar distintos rellenos.

Dibujo con objetos CorelDraw