Академический Документы
Профессиональный Документы
Культура Документы
Propuesta
CONTENIDO
1. ESPACIO DE TRABAJO DE PROHOTSHOP PREDETERMINADO 1.1. EL AREA DE TRABAJO 1.2. TODAS LAS HERRAMIENTAS 1.3. PARA USAR UNA HERRAMIENTA 2. INTRODUCCION AL CUADRO DE HERRAMIENTAS 3. HERRAMIENTAS DE SELECCIN 3.1. MARCO RECTANGULAR 3.2 MOVER 3.3. LAZO 3.4 VARITA MAGICA 3.5 USO DE LA BARRA DE OPCIONES 3.6 LA BARRA DE ESTADO 3.7 LA PALETA NAVEGADOR 4. EJERCICIOS BASICOS 4.1 MANEJO DE UNA IMAGEN EN PANTALLA 4.2 DAR TAMAO A UNA IMAGEN 4.3 MARCO A UNA IMAGEN 4.4 CALAR UNA IMAGEN SOBRE EL FONDO 4.5 CALAR SUAVE CON MASCARA 5. CALAR UN OVALO 5.1 TEXTURA E ILUMINACIN EN EL FONDO 5.2 RECORTAR UN SECTOR DE UNA IMAGEN 6. EJERCICIO TEXTO CON FUEGO 7. EJERCICIOS PROPUESTOS 3 3 4 5 6 10 10 11 11 12 12 13 14 15 15 16 18 21 23 24 26 28 29 36
Propuesta
A. Ventana de documento B. Conjunto acoplado de paneles contrado a iconos C. Barra de ttulo de panel D. Barra de mens E. Barra de opciones F. Panel Herramientas G. Botn Contraer como iconos H. Tres grupos de paletas (paneles) acoplados verticalmente.
Propuesta
Propuesta
Propuesta
Propuesta
Propuesta
Propuesta
Propuesta
3. Herramientas de Seleccin
3.1 Marco Rectangular Es una herramienta de uso frecuente en Photoshop, permitindonos seleccionar aquellas partes del documento que nos interesan. El marco rectangular permitir hacer selecciones rectangulares. Pulsando <Mayus> se hacen figuras geomtricas Pulsando <Mayus> despus de una seleccin se pueden sumar selecciones.
10
MATERIAL PRCTICO DE HERRAMIENTAS WEB Pulsando <Control> despus de una seleccin se pueden restar selecciones. Elptico: permite hacer selecciones circulares y elpticas. Fila nica: permite hacer la seleccin de una fila de 1 pixel de grosor.
Propuesta
Columna nica: permite hacer la seleccin de una columna de 1 pixel de grosor. Recorte: permite hacer una seleccin rectangular para poder editarla; girar, cambiar su tamao o su centro de giro. 3.2 MOVER Permite mover una imagen o una seleccin de un lado para otro, o de un documento para otro. Con solo dar clic y arrastrar recortars la imagen dejando en su lugar un espacio. Pulsando <Alt> duplicaremos el objeto a mover. 3.3. LAZO Esta opcin de Photoshop nos permite hacer diferentes tipos de selecciones.
LAZO.- Nos permite hacer selecciones a mano alzada. LAZO POLIGONAL.- Permite hacer selecciones marcando los puntos por donde pasar la seleccin, es decir, anclaje de puntos. LAZO MAGNETICO.- Hace la seleccin a mano alzada en funcin de la configuracin que se haya ajustado. La lnea de seleccin ser la interseccin de dos colores dependiendo del contraste de sus bordes. Las opciones de Lazo y Lazo poligonal son:
Desvanecer: suaviza los bordes de la seleccin en nmero de pixeles. Suavizar: suaviza los bordes a la hora de cortar, copiar o mover.
11
Propuesta
Desvanecer y Suavizar. Anchura: anchura con la que Photoshop buscar bordes. Contraste: se le indicar el porcentaje de cambio del contraste para que se establezca la lnea de seleccin. Lineatura: distancia a la que Photoshop ir poniendo los puntos de anclaje.
3.4 Varita Mgica Permite seleccionar reas del documento que tengan cierta similitud en el color, como la piel en una persona. Es rpida pero se debe utilizar con cuidado. Opciones:
Tolerancia: Se le indicar la similitud que debern tener los colores que se van a seleccionar con respecto al color que indiquemos con la varita mgica. Un valor muy bajo har selecciones precisas, en cambio, un valor alto har selecciones menos precisas. Suavizar: Suaviza los bordes de la seleccin. Todas las capas: Tomar el valor de la similitud en todas las capas. 3.5 Uso de la barra de opciones La barra de opciones se muestra por debajo de la barra de mens situada en la parte superior del espacio de trabajo. La barra de opciones es sensible al contexto: cambia segn la herramienta que se seleccione. Algunos ajustes de la barra de opciones (como los modos de pintura y la opacidad) se aplican a varias herramientas, mientras que otros son especficos de una herramienta. Puedes mover la barra de opciones en el espacio de trabajo utilizando la barra de sujecin para acoplarla en la parte superior o inferior de la pantalla. La informacin de herramientas aparece al colocar el puntero sobre una herramienta. Para mostrar u ocultar la barra de opciones, selecciona Ventana > Opciones.
12
Propuesta
Ejemplo: Barra de opciones de la herramienta Lazo A. Barra de sujecin B. Informacin de herramientas Para restaurar los ajustes por defecto, haz clic con el botn derecho del ratn en el icono de la herramienta en la barra de opciones y, a continuacin, selecciona Restaurar herramienta o Restaurar todas en el men contextual. Para ms informacin sobre la definicin de opciones de una herramienta especfica, busca el nombre de la herramienta en la Ayuda de Photoshop. 3.6 La Barra de Estado La barra que se encuentra al pie del espacio de trabajo se llama Barra de Estado. Como podrs observar en la figura de abajo, a la izquierda encontraremos un porcentaje, este nmero es el zoom aplicado a la imagen abierta.
Por defecto Photoshop intenta ajustar la imagen al tamao del rea de trabajo, si sta es muy pequea o la imagen es demasiado grande, Photoshop reducir el zoom para poder mostrar la imagen completa en pantalla. Recuerda que el zoom no afecta al tamao de la imagen, sino a la vista. Aunque reduzcamos o ampliemos el zoom para ver con mayor claridad la imagen, las dimensiones de sta siguen siendo las mismas. Ya que el porcentaje que se muestra en la barra de estado indica el nivel de zoom que estamos aplicando, podemos hacer clic sobre este porcentaje y modificarlo, introduciendo un nmero diferente y pulsando la tecla Enter. Vers como cambia el zoom de la imagen. La informacin que se muestra a continuacin se refiere al documento sobre el que estamos trabajando. Haciendo clic en la flecha negra podemos seleccionar qu informacin mostrar:
13
Propuesta
3.7 La Paleta Navegador Utiliza la paleta Navegador para cambiar con rapidez la vista de la ilustracin utilizando una visualizacin en miniatura. El cuadro en color rojo del navegador (denominado rea de previsualizacin) corresponde al rea visible actualmente en la ventana.
A. Botn del men de la paleta B. Visualizacin en miniatura de una ilustracin C. rea de previsualizacin D. Cuadro de texto de Zoom E. Botn Reducir F. Barra deslizante. G. Aumentar imagen. Si no se encuentra visible puedes activarla desde el men Ventana Navegador en la barra de men.
14
Propuesta
4. Ejercicios Bsicos
4.1 Manejo de una imagen en pantalla Al abrir una imagen, es conveniente tener la ventana del programa maximizada, pero la ventana del archivo de la imagen en tamao restaurado, es decir mediano, para que puedas manejarla.
Puedes ver aqu la ventana de Historia, a travs de la cual puedes ver el historial de los comandos aplicados hasta el momento a la imagen y que ubicndote en un punto en particular puedes deshacer y regresar a un estado anterior. La ventana de Capas deber estar habilitada para que puedas superponer y/o manipular efectos a tu imagen. Las ventanas las activas desde el men Ventana. Barra de navegador, en esta ventana podrs mover el selector a la izquierda o derecha para cambiar el tamao de la imagen. Adicionalmente, el navegador nos permite aproximarnos y ver una zona en detalle, el sector visible lo regulamos moviendo el rectngulo rojo.
15
Propuesta
Moviendo el selector a la izquierda nos alejamos y el rectngulo aumenta. 4.2 Dar tamao a una imagen Debemos previamente saber el tamao en que se realizar la publicidad folleto o proyecto grfico que vamos a realizar, debemos conocer el ancho y el alto que deber tener nuestra imagen y deberemos elegir una imagen con las proporciones adecuadas, es decir si queremos un trabajo ms ancho que alto, as deber tambin ser nuestra imagen. Veamos la siguiente imagen:
16
Propuesta
Si suponemos que nuestro trabajo es de 10 cm de altura por 20 de ancho, debemos ir al men Imagen>Tamao de imagen o bien presionar las teclas Alt+Ctrl+Q. Primero vamos a la resolucin y ponemos el valor deseado nunca menor a 200. Si bien a esta imagen no se la puede estirar, para que ocupe los 20 de ancho, vamos a darle el alto adecuado primero. Ponemos 10 cm de altura, y vemos que cambia proporcionalmente el ancho, pero no llega a 20. Podemos jugar con los valores incluyendo quitar las marcas de las opciones: para ver como es que stas afectan el resultado de la imagen. De manera particular notamos que existe un encadenamiento entre la Anchura y la Altura, sta se puede eliminar mediante la opcin Restringir proporciones.
17
MATERIAL PRCTICO DE HERRAMIENTAS WEB 4.3 Marco a una imagen Para hacer este ejercicio debemos hacer lo siguiente: 1.- Abrimos la imagen a la que queremos aplicar el marco.
Propuesta
2.- Nos aseguramos de que la imagen est en RGB y si no lo est lo cambiamos en Imagen/Modo/Color RGB. 3.- Ponemos el color blanco como color frontal tal y como se ve la imagen.
4.- Hacemos clic en la herramienta marco rectangular y hacemos un rectngulo en la imagen dejando un espacio para el borde o marco. Puedes apoyarte con la regla o con las lneas guao bien hacerlo a mano alzada.
5.- Creamos una mscara rpida haciendo clic en el botn que se seala en la imagen o presionando Q
18
Propuesta
6.- En este momento puedes dar rienda suelta a tu imaginacin aplicando todo tipo de Filtro hasta que el resultado sea el que buscas. Aqu te muestro solo dos ejemplos:
a) Aplicar en Filtro/Trazos de Pincel/Salpicaduras (el valor a poner depender del marco a realizar), en este caso los valores que se han utilizado son:
Salimos de la mscara rpida pulsando el botn que hay justo al lado del que le dimos para crear la capa o bien dando clic nuevamente en el mismo botn. - Ahora, Invertimos la seleccin (Seleccin/Invertir)
19
Propuesta
20
MATERIAL PRCTICO DE HERRAMIENTAS WEB 4.4 Calar una imagen sobre el fondo Para hacer un calado sobre una imagen podemos utilizar dos mtodos: a) Calado simple con borrador
Propuesta
Para este ejercicio debemos elegir dos imgenes, recortando una de ellas y sobreponindola encima de la otra.
Imagen 1
Imagen 2 Sobre la imagen 2 hacemos un recorte con la herramienta de Lazo magntico de tal forma que quede marcada solo la silueta de la modelo. Una vez marcada la silueta seleccionamos en el men la opcin Edicin/Copiar o bien Ctrl+C. Nos vamos a la imagen 1 y pegamos con Edicin/Pegar o bien Ctrl+V.
Podemos notar que la imagen copiada puede quedar desproporcionada al momento de pegarla, para ello en Edicin/Transformar/Escala le daremos el tamao que se ajuste a nuestro gusto. Una vez que ambas imgenes han quedado unidas haremos lo siguiente:
21
Propuesta
Elegimos la herramienta Borrador de la barra de herramientas adecuando tamao de pincel y la dureza, se recomienda un tamao a 65 y una dureza de 0.
el
Debemos asegurarnos que el Color frontal este establecido como se muestra, es decir, Negro sobre Blanco, en caso de no estar as lo establecemos dando clic en el pequeo icono ubicado en la parte inferior izquierda del mismo. Finalmente empezamos a aplicar sobre la imagen el borrador y notamos que la imagen se empieza a integrar o difuminar con la otra. Podemos mover, seguir transformando la imagen hasta quedar satisfechos con el resultado.
22
Propuesta
Si queremos un calado muy suave deberemos utilizar una mscara de capa, para ello nos situamos sobre la capa del paisaje y presionamos la tecla Q, para entrar al modo mscara. Vemos que se pone automticamente el color negro como frontal y blanco como fondo. Si quisieras salir del modo mscara slo debes presionar otra vez Q, o ir a la historia y volver al paso anterior. Vamos a la herramienta Degradado
Y elegimos la opcin que va de color frontal a transparente y el tipo de degradado lineal desde las opciones.
Tiramos de izquierda a derecha y cubrimos de mascara roja lo que queremos conservar de la imagen. Salimos del modo de mascara presionando Q y vemos que queda seleccionado lo que vamos a suprimir.
Presionamos la tecla suprimir (Supr) y cada vez que lo hagamos se ir diluyendo un poco ms de la imagen, esto lo haremos hasta lograr el efecto deseado. Soltamos la seleccin con Ctrl+D.
23
Propuesta
5. Calar un Ovalo
Abrimos una imagen y con la herramienta de seleccin Marco Elptico o bien con M hacemos la seleccin del rea que vamos a trabajar.
Luego vamos al men Seleccin e invertimos sta para que quede seleccionado lo de afuera o bien Mays+Ctrl+I. Enseguida poner un fondo. podemos color de
Podemos crear ahora un relieve en el borde. Para ello con la imagen seleccionada en el men Capa/Nueva/Capa va copiar o bien Ctrl+J. El relieve solo funciona en una capa superior no en el fondo, por eso debemos copiar la imagen a una nueva capa. Al hacer esto solo se copia el ovalo a una nueva capa (Capa 1). En este momento podramos hacer algunos cambios, por ejemplo, yendo a la capa de Fondo y seleccionando todo suprimir su contenido y cambiar el color del mismo. Ahora bien, dando un clic en la Capa 1 y en Capa/Estilo de capa/Bisel y relieve
24
Propuesta
Ejemplos de resultados.
25
Propuesta
Seleccionamos la capa Fondo y en el men Seleccin/Todo o bien con Ctrl+A seleccionamos y suprimimos, esto har que se pinte del color que tenemos de fondo. Sobre la capa Fondo vamos al men Filtro/Textura/Grietas y ajustamos valores.
Y el resultado
Para darle un efecto de iluminacin en Filtros/Interpretar/Efectos de iluminacin haremos los siguientes ajustes.
Propuesta
obtenemos el siguiente resultado. Finalmente para darle un toque ms fino podemos agregar un destello, para ello con la misma imagen seleccionada en la capa Fondo, nos vamos al men Filtro/Interpretar/Destello y ubicamos la posicin del cursor en el lugar donde queremos el destello, esto lo podemos repetir tantas veces como destellos deseemos. Con cada destello adicional la imagen ir tomando tonalidades ms claras.
27
Propuesta
Habr ocasiones que por alguna razn solo desearemos conservar una parte de una imagen, si ese fuera nuestro caso en este ejercicio aprenderemos a hacer esos recortes. Para ello en una imagen mediante la herramienta de seleccin de Marco rectangular marcaremos una seleccin y utilizando el men Imagen/Recortar hacemos el corte buscado.
Antes Tambin se puede utilizar la herramienta Recortar letra C marcando el rea a conservar y dar Enter.
28
Propuesta
Paso 1. En Photoshop creamos un nuevo documento (Ctrl+N) de 800 x 800 pixeles con modo de color RGB y fondo de color Blanco.
Paso 2. Elegimos color en configurar color frontal y nos aparezca la paleta de colores elegimos el bote de pintura coloreamos el fondo.
Paso 3. Ahora seleccionamos la Herramienta Texto (T) y en configurar color frontal invertimos la seleccin y tomamos el color Blanco, en la paleta de colores damos OK en el color Blanco. Seleccionamos un tipo de letra con un tamao aproximado de 50 a 60 puntos y ms o menos en medio escribimos nuestro texto. En caso de ser necesario con la Herramienta Mover (V) podemos ubicarlo en el lugar mas conveniente pero dejando suficiente espacio para el efecto de reflecto que haremos ms adelante.
29
Propuesta
En la capa del texto damos clic con el botn derecho del mouse y seleccionamos la opcin Rasterizar texto Paso 4. La capa de Texto la copiamos simplemente arrastrndola hacia abajo hasta donde esta el icono Crear una capa nueva en la regin de capas y deseleccionamos la capa que acabamos de copiar, quedando de esta forma.
Ahora combinamos ambas capas oprimiendo Ctrl+E o bien en la capa Ejemplo damos clic con el botn derecho del mouse y seleccionamos Combinar hacia abajo. Paso 5. Ahora elegimos del men Imagen/Rotar lienzo/90 AC, esto har que nuestro texto se gire. Paso 6. Elegimos del men Filtro/Estilizar/Viento el mtodo Viento y la direccin Desde la derecha o Desde la izquierda segn sea el caso (el efecto se debe ver hacia arriba del texto y no hacia abajo). Esto lo debemos repetir de 4 a 5 veces (Ctrl+F) de acuerdo al gusto y al efecto buscado.
Paso 7. Seleccionamos nuevamente Filtro/Desenfocar/Desenfoque gaussiano y le damos 2 puntos de Radio y le damos OK. Paso 8. Seleccionamos Imagen/Rotar lienzo/90 ACD para regresar nuestra imagen a su posicin original. Paso 9. Ahora haremos el efecto de Fuego y para ello en el men Filtro elegimos Licuar (Mayus+Ctrl+X), de los iconos que se muestran a la izquierda seleccionamos la Herramienta de Turbulencia (T) y en las opciones de la herramienta modificamos el Pincel a 60, la Densidad a 30 y la Presin del pincel a 80.
30
Propuesta
Una vez establecidas estas opciones vamos a empezar a deformar la imagen dndole los efectos que mas se acomoden a lo que estamos buscando.
Cuando terminemos damos clic en OK y debemos ver algo como esto: Paso 10. Ahora empezaremos a darle los efectos de color a la imagen, para ello en el men Imagen/Ajustes/Tono/saturacin o bien Ctrl+U damos los siguientes ajustes;
Con esto obtenemos un tono Amarillo y finalizamos dando clic en el botn OK.
Paso 11. Duplicaremos la capa en la que estamos trabajando simplemente arrastrndola a la opcin (Crear una nueva capa) tal como lo hicimos en el Paso 4. Nos ubicamos en esta nueva capa creada y otra vez en Imagen/Ajustes/Tono/saturacin damos estos valores; a) No activamos Colorear b) El Tono lo ponemos en - 40 c) Damos OK para aceptar el color creado que es un Rojo intenso.
31
Propuesta
Paso 12. Ubicados en esta capa damos clic en la flecha del cuadro Configurar modo de fusin para capa y elegimos la opcin Superponer, esto har que ambas capas se fusionen dando el efecto de Fuego.
Ahora combinamos ambas capas dando clic con el botn derecho en la capa Fondo Copia y seleccionamos Combinar hacia abajo quedando ambas capas fusionadas. Paso 13. Ahora vamos a hacer visible la capa de arriba y que habamos dejado pendiente dando clic en el recuadro de tal forma que se muestre el ojo de activacin de la misma.
Nos ubicamos en esta capa y en el icono de Aadir un estilo de capa identificado en la parte inferior como fx seleccionamos Superposicin de degradado
En la ventana que aparece damos doble clic en el recuadro de Degradado y seleccionamos el que nos parezca mas adecuado.
Adicionalmente se pueden corregir los tonos moviendo las marcas hacia la izquierda o derecha hasta encontrar el tono que ms se ajuste a lo que estamos buscando. Una vez encontrado los tonos solo da clic en el botn OK.
32
Propuesta
Se debe fijar que el efecto de degradado este ubicado en el lugar que deseamos y si es necesario podemos activar el cuadro Invertir para que el efecto se d de forma inversa. a) Antes de Invertir efecto b) Despus de Invertir efecto
Paso 14. Una vez concluida esta parte volvemos a duplicar la capa arrastrando lo hicimos en el Paso 4.
volvemos a fusionar capas dando Ctrl+E y sta al icono (Crear una nueva capa) tal como
Paso 15. Para crear el efecto de Reflejo nos ubicamos en la nueva capa y con la Herramienta Marca rectangular (M) seleccionamos nuestras letras marcando hasta el ras.
Ahora en el men Seleccin, elegimos Invertir (Mayus+Ctrl+I) y borramos con el botn suprimir.
33
Propuesta
En el men Edicin elegimos Transformacin libre (Ctrl+T) y de las marcas que aparecen en la imagen tomamos la de en medio de la parte superior y la arrastramos hasta abajo de tal forma que quede paralela a la imagen de arriba y al ras de la otra. El Ejemplo se vera as: Una vez que hemos decidido que esta correcto aplicamos el efecto dando clic en el icono ubicado en la parte superior derecha.
Paso 16. Ya casi para finalizar elegimos un Pincel de 300 puntos de preferencia Difuminado en modo Borrar.
Aplicamos este Pincel dndole efectos difuminados de tal forma que se vea como efecto de Reflejo.
34
Propuesta
35
Propuesta
7. Ejercicio Propuestos
SEMANA 2
Realizar los siguientes ejercicios con Photoshop utilizando y aplicando las herramientas necesarias que muestren los resultados que se ven en la imagen terminada. Para efecto de aceptacin de los ejercicios, estos debern estar ya terminados para ese da, no se aceptan ejercicios incompletos o casi terminados. Para obtener la Competencia los ejercicios deben estar de acuerdo a lo que se pide y completos.
Imagen Muestra
Imagen terminada
Imagen Muestra
Imagen terminada en los siguientes colores: 2.1 Morado 2.2 Verde y 2.3 Rojo
36
Propuesta
En este ejercicio debers corregir la imagen de tal forma que las imperfecciones quedan eliminadas, es decir debers eliminar las manchas blancas de tal forma que la imagen se vea limpia.
Imagen Muestra 1
Imagen Muestra 2
Imagen Terminada
37
Propuesta
En este ejercicio debers descomponer la imagen de tal forma que utilizando tu creatividad le des una nueva presentacin, p.e. agregando un fondo, suprimir partes de la imagen, reacomodando la imagen, agregando otros elementos, etc.
38
Propuesta
Para esta semana realizars los ejercicios listados abajo utilizando y aplicando las herramientas necesarias que te permitan obtener los resultados solicitados. Recuerda que para efecto de aceptacin de los ejercicios, estos debern estar terminados para el da que se solicitan, no se aceptan ejercicios incompletos o casi terminados. Para obtener la Competencia los ejercicios deben estar de acuerdo a lo que se pide y completos. Lista de Ejercicios con sus caractersticas: 1.- Elaborar un ejercicio que contenga una imagen enmarcada en un ovalo (como el ejemplo mostrado en el Punto 5 y 5.1) que tenga buenos efectos y que se vea profesional. 2.- Elaborar una portada tipo revista (Vanidades, Automundo Deportivo, Hola, etc), puedes ver ejemplos en www.calameo.com, issuu.com, www.yudu.com 3.- Elaborar un collage de imgenes donde usars mascaras de capa, efectos, etc., el aspecto final deber verse muy profesional y de buen gusto. 4.- Crear un texto donde se involucren efectos. 5.- Ejercicio libre donde incluyas todo lo visto.
39
Propuesta
CONTENIDO
40
Propuesta
1. ESPACIO DE TRABAJO DE PROHOTSHOP PREDETERMINADO 1.1. EL AREA DE TRABAJO 1.2. TODAS LAS HERRAMIENTAS 1.3. PARA USAR UNA HERRAMIENTA 2. INTRODUCCION AL CUADRO DE HERRAMIENTAS 3. HERRAMIENTAS DE SELECCIN 3.1. MARCO RECTANGULAR 3.2 MOVER 3.3. LAZO 3.4 VARITA MAGICA 3.5 USO DE LA BARRA DE OPCIONES 3.6 LA BARRA DE ESTADO 3.7 LA PALETA NAVEGADOR 4. EJERCICIOS BASICOS 4.1 MANEJO DE UNA IMAGEN EN PANTALLA 4.2 DAR TAMAO A UNA IMAGEN 4.3 MARCO A UNA IMAGEN 4.4 CALAR UNA IMAGEN SOBRE EL FONDO 4.5 CALAR SUAVE CON MASCARA 5. CALAR UN OVALO 5.1 TEXTURA E ILUMINACIN EN EL FONDO 5.2 RECORTAR UN SECTOR DE UNA IMAGEN 6. EJERCICIO TEXTO CON FUEGO 7. EJERCICIOS PROPUESTOS
3 3 4 5 6 10 10 11 11 12 12 13 14 15 15 16 18 21 23 24 26 28 29 36
41
Propuesta
El Primer Contacto
La interface de FLASH consta de varios paneles, estos se pueden mover, abrir, cerrar, quitar, e incluso se pueden poner "flotantes". Por eso si la distribucin que ves en tu pantalla difiere de las imgenes aqu mostradas no hay problema, el resultado ser el mismo ya que eso va en funcin de la versin de FLASH que ests utilizando.
Lnea de tiempo
Seccin de capas
Velocidad de fotogramas
42
Propuesta
Como otros entornos de desarrollo FLASH consta de un "editor" y un "compilador", el editor es todo lo que ves en FLASH, con l escribes el programa (en cdigo Action Script) y haces los dibujos/imgenes que desees. El compilador (la parte que no se ve) lo que hace es asegurarse de que todo est bien escrito (detecta los errores de forma, no de contenido) y lo "compila", es decir crea un archivo con la extensin .SWF que es capaz de ser interpretado por el player o reproductor de este tipo de archivos.
Un poco de historia
FLASH se cre en un principio para la animacin vectorial (y no vectorial), por eso comparte muchas herramientas con programas de dibujo y animacin. Fue a partir de FLASH5 (FL5) cuando surgi la explosin de Action Script (AS) y se aadieron muchas funciones nuevas. Actualmente hay dos corrientes en FLASH, la Designer (Diseador) y la Developer (Programador), as mismo los exmenes de certificacin son diferentes para cada una de estas ramas.
Frame o Fotograma: Un frame es un fotograma como el de las pelculas, una imagen esttica, y cuando se pasan muchas de forma rpida dan la sensacin de movimiento. Animacin Frame by Frame: Es la animacin cuadro a cuadro, o de fotograma a fotograma, se usa sobre todo en dibujos animados cuando las cosas no se pueden hacer ni por MotionTween ni por ShapeTween.
Motion Tween: Interpolacin de movimiento, lo que hace es "rellenar" los fotogramas vacos de una animacin, es decir, se estable en una posicin inicial a un objeto y en una posicin final. La interpolacin de movimiento calcula donde debera estar el objeto en los frames intermedios.
Shape Tween: Similar al MotionTween, pero esta vez juega con las formas (solo trabaja con vectores, no imgenes ni objetos). El resultado suele ser no muy bueno al principio, por lo que se tiene que trabajar bastante la animacin. Lnea del tiempo o time line: Esta formada por los frames, no es ms que "el rollo de pelcula" que contiene a los fotogramas. Cada Movie Clip (clip de pelcula) tiene su
43
Propuesta
propio time line, aunque todos van a la velocidad del principal (fps frames per second)]. FPS: Frames Per Second, (frames por segundo), esto es la velocidad en la que pasaran los frames en una pelcula. 12 FPS significa que se ejecutarn 12 frames en un segundo. La velocidad por defecto es 12 fps, aunque 24 y 30 fps tambin son usados, para cuando se quieren animaciones mas "fluidas". Capas o Layer: Como en otros programas de dibujo las capas sirven para organizar el contenido. Puedes reorganizar las capas arrastrndolas a tu gusto, las que estn por encima "taparn" a las otras. Profundidad: No hay que confundir con el concepto de capa, aunque son similares. Tomando un espacio tridimensional, formado por 3 ejes perpendiculares entre s XYZ. Tomamos la X como la anchura del monitor, la Y como la altura y la Z como la "profundidad" que va desde la pantalla hasta la parte de atrs del monitor. Mientras que en una capa puede haber varios objetos, en una misma profundidad no, si se carga un objeto a una profundidad donde ya exista algo, ste ser reemplazado por el nuevo objeto.
En los campos estticos FLASH transforma el texto en formas a la hora de crear el SWF, con lo que quizs pueda perder algo de calidad y se vea "borroso" para eso estn los pxel fonts.
44
Propuesta
Es importante saber que a partir de la versin MX 2004 (versin 7) de FLASH y las posteriores tienes una opcin que hace un poco mas fcil las cosas con las tipografas. Existen tipografas que como las pixel fonts fueron diseadas para pantalla, una de las ms populares es Verdana, esta tipografa fue diseada para caer justo en los pixels en varios tamaos de punto del 9 al 12 y an ms.
Usando la opcin de texto de alias que est en las propiedades de texto, reconoce la fuente de pxel y la acomoda automticamente, por lo que no hace falta ubicarlas en coordenadas absolutas.
Ejemplo
45
Propuesta
FLASH usa un lenguaje de POO (Programacin Orientada a Objetos), hay que diferenciar entre un Objeto y una Instancia; imaginmonos por un momento en el mundo de los automviles, para nosotros los objetos (solo conceptos) sern los "coches en general" y las instancias "coches especficos", por ejemplo si hablamos de un "Camaro 2SS AT" estamos hablando de un coche en general (objeto), en cambio si hablamos de un "Camaro 2SS AT con la matricula XXXX" eso es una instancia (la matricula seria el instance name) ya que estamos hablando de un coche en especifico.
Los objetos se guardan como "Smbolos" en la Biblioteca, le puedes cambiar el nombre a los smbolos, pero ese NO ES su instance name. Los instance name servirn al igual que las matriculas, para diferenciar e identificar ciertos objetos, a fin de poder controlarlos mejor. Quizs hayas odo hablar de las "clases", no son mas que objetos conceptuales, as que tomaremos clase = objeto, pero recordemos que una clase es diferente de la instancia. Para mayor referencia busca en Internet los conceptos relacionados con programacin Orientada a Objetos. Componentes Qu son? Los componentes, originalmente se llamaban Smart Clips, es decir, "Clip inteligentes", son clips (Movie Clips / MC / movies - como quieras llamarlos) que vienen programados, listos para ponerlos en el escenario y usar.
Cul es su funcin? Eso depende para lo que estn programados, pero para poner un ejemplo, imagina que quieres poner un calendario en varias paginas webs, podras ir y programarlo en cada una de las paginas o por el contrario lo programas una vez, lo conviertes a smbolo y en el resto de paginas solo tendrs que ponerlo en el escenario y listo, ya funcionar. La creacin de componentes es un tema "avanzado" y no es el objetivo de esta gua, ya que hacer un buen componente y personalizable al 90% es una tarea muy ardua. Hay sitios webs con miles de componentes para diversas funciones, te podran ahorrar trabajo (o tal vez no, ya que normalmente suele ser difcil o complicado cambiar su aspecto grfico), sin embargo ah estn las oportunidades.
46
Propuesta
FLASH facilita la programacin aadiendo soporte a los archivos externos, estos son usados como las libreras de otros lenguajes o incluso como clases. FLASH a la hora de compilar tomar el contenido de ese archivo externo y lo aadir al SWF. Esto es til si programas alguna funcin o mtodo que rehusars en varios proyectos, si lo tienes en un archivo externo, solo tendrs que modificar UN archivo, mientras que de otra forma tendras que modificar todos y cada uno de los SWF (aunque ms bien seran los FLA) que contengan esa funcin.
Cosas que nunca debes hacer Si eres nuevo en este ambiente de trabajo considera lo siguiente al empezar a trabajar con FLASH:
No tengas prisa en aprender, se aprende ms intentndolo uno mismo que tomando el cdigo de los dems, as que : NO PIDAS CDIGO AJENO No intentes hacer algo que te supera, actualmente NO SE PUEDE HACER DOOM 5 CON FLASH. SE REALISTA, a veces no salen las cosas a la primera, sin embargo, eso te debe dar pauta para que con nimo y entusiasmo sigas adelante.
47
Propuesta
EJERCICIOS
Ejercicios para la semana uno 1) Crear una animacin con una forma que se transforme en otras usando la Interpolacin de formas. 2) Crear una animacin que use Gua de movimiento. 3) Crear la animacin de un tomo con 3 orbitas y su electrn en cada una de ellas, todo debe tener movimiento. 4) Crear la animacin del sistema solar con sus planetas. 5) Crear un texto animado. Ejercicios para la semana dos 1) Crear la animacin de un bosque con aves y mariposas o 2) Crear la animacin de un acuario 3) Crear un proyecto de pgina web con diseo libre donde se involucren imgenes trabajadas con Photoshop y efectos de animacin con Flash (botones, mens, sonido y video).
48
Propuesta
EJERCICIOS PRACTICOS1
1. PRIMERA ANIMACIN
Crear el movimiento de un objeto.
Despus con la herramienta Rectngulo (R,O,R,O) dibujamos una imagen circular o elptica.
Quedar algo como se muestra en la imagen dentro del rea de trabajo, nota que el color del crculo viene dado por los colores que vengan por default.
1. Cambiar de color la imagen, para ello damos un clic en la herramienta Seleccin (V) y luego le damos clic a la imagen, a continuacin en la seccin de Color de relleno damos clic en la flecha para que nos aparezca la paleta de colores y elegimos el que sea de nuestro agrado, adicionalmente podemos elegir en esa misma
1
49
Propuesta
seccin un degradado en donde dice Tipo, ah se muestran los diferentes tipos de degradado (Slido, Lineal, Radial, etc) sintete con la libertad de explorar y experimentar con estas opciones hasta que encuentres lo que ms te guste. 2. Enseguida debes convertir la imagen (que es un objeto) en Smbolo, ya que es un requisito para que ste pueda ser animado. Para ello selecciona la imagen y en el men Modificar elige la opcin Convertir en smbolo o bien solo presiona F8. En la ventana que aparece ponle un nombre significativo al objeto que lo identifique fcilmente y en Tipo elige Clip de pelcula y da Enter.
3. Ahora debemos empezar a trabajar en la lnea de tiempo con los frames, para ello da un clic en el fotograma 25 y con el botn derecho da un clic en la opcin Insertar fotograma clave o bien tambin lo puedes crear oprimiendo F6, mueve el objeto a la posicin que quieras. Inserta un nuevo fotograma clave en la posicin 40, mueve el objeto nuevamente a la posicin que quieras, repite esto dos veces ms. Prueba el resultado dando un Enter. 4. Como te habrs dado cuenta el resultado es muy bsico y se ve al crculo movindose de una forma muy burda de un lado a otro. 5. Esto lo corregiremos utilizando lo que se conoce como Interpolacin de movimiento, para ello haremos esto; posicinate en el frame 13 dndole un clic, vers que se crea un fotograma da clic derecho en este fotograma y elige la opcin del men Crear interpolacin de movimiento, notars que se cambia a un tono azul y aparece una lnea continua con una flecha entre el primer frame y el 15, repite esto mismo para los otros frames tratando de ubicarte en el medio entre dos fotogramas clave. Recuerda que este es solo un ejemplo y no siempre las interpolaciones van a ir al centro de los frames, eso lo decidirs t dependiendo el proyecto que ests realizando. Algo importante a considerar es que si en vez de una lnea continua te aparece una puntuada es que haz cometido algn error, uno de ellos es que solo se puede tener un smbolo en una sola capa, hay un fotograma clave vaco, o bien que el objeto no es un smbolo, o que haya mas de un objeto dentro del fotograma clave. Prueba ahora nuevamente dando Enter. 6. Ahora probemos lo siguiente; ubcate en el frame 25 (donde hay un fotograma clave) selecciona la herramienta Transformacin libre (Q), nota que al circulo le aparecen una marcas, toma alguna de ellas y hazle un cambio (modifica su tamao, su posicin, cmbiale el color, etc). 7. Si quieres cambiar el color sigue estos pasos; en la pestaa Propiedades ubicada en la parte inferior de la pantalla, te aparecer algo como esto:
50
Propuesta
Selecciona aqu el tipo de color que aplicars: Brillo, Tinta, Alfa, Avanzado.
8. Ve seleccionando los dems frames donde estn los fotogramas clave y aplcale algn cambio, incluso puedes borrar ese objeto y dibujar uno nuevo (pe, un cuadrado) si haces esto notars que la interpolacin se vuelve a una lnea punteada, esto es porque se ha perdido el link con los otros frames, dibuja un nuevo objeto y no se te olvide convertirlo a smbolo (con F8) y vuelve a crearle la interpolacin, ahora prueba dando Enter.
51
Propuesta
En este Ejercicio vamos a crear un efecto en el que aprovechando las propiedades de las capas de mascara obtendremos un efectos de color variable en un texto. El truco consiste en crear un texto que luego ser transparente por el hecho de convertirlo en mascara y a travs del cual se vern una serie de colores que se van moviendo a lo largo del texto. Pasos 1. Creamos un documento nuevo y en el men Modificar/Documento le asignamos un fondo de color negro. 2. Con la herramienta Texto y en panel de Propiedades ajustamos un tipo de letra, en este caso elegimos un tipo Arial Black con un tamao aproximado de 60 y un color diferente del fondo y que sobresalga, en este caso elegimos un color gris. 3. En el centro del escenario escribimos un texto, en nuestro caso EJEMPLO. 4. Mediante la herramienta Transformacin tamao vertical del texto arrastrando su libre aumenta un poco el punto central superior.
5. Selecciona el fotograma 20 de esta capa y pulsa F5 para crear un fotograma y forzar la visualizacin del texto hasta este fotograma. Creando los colores en movimiento
6. Renombra la capa del texto como Texto y crea cuatro nuevas capas haciendo clic cuatro veces en el icono de Insertar capa.
7. Arrastra la capa Texto hacia arriba para que quede por encima de las otras cuatro. 8. Renombra las cuatro nuevas capas como Rojo, Amarillo, Verde y Rosa.
52
Propuesta
9. Sitate en el primer fotograma de la capa Rojo y mediante la herramienta Rectngulo dibuja un rectngulo vertical rojo y sin contorno situado hacia la zona izquierda tal y como se muestra en la figura. 10. Mediante la herramienta Transformacin libre inclina el rectngulo a la derecha tal como se ve en la figura. 11. Haz clic con el botn derecho sobre el primer fotograma de esta capa y selecciona la opcin Interpolacin de movimiento. 12. Selecciona ahora el fotograma 20 de la misma capa y pulsa F6 para crear un fotograma clave y concluir la interpolacin. 13. Lleva el rectngulo hacia el lado derecho del texto y mediante la herramienta Transformacin libre inclina el rectngulo ahora hacia la izquierda. Puedes probar el movimiento desplazando el cabezal de la lnea de tiempo y veras el movimiento de izquierda a derecha y el cambio de la inclinacin en los objetos. 14. Sitate en el primer fotograma de la capa Amarillo y mediante la herramienta rectngulo dibuja un rectngulo vertical amarillo y sin contorno situado sobre la zona derecha del texto tal como lo muestra la figura. 15. Mediante la herramienta Transformacin libre inclina el rectngulo hacia la izquierda.
16. Haz clic con el botn derecho sobre el primer fotograma de esta capa y selecciona la opcin Interpolacin de movimiento.
53
Propuesta
17. Selecciona el fotograma 20 de esta misma capa y pulsa F6 para crear un fotograma clave y concluir la interpolacin. 18. Lleva el rectngulo hacia el lado izquierdo del texto y mediante la herramienta Transformacin libre inclina el rectngulo ahora hacia la derecha. Puedes probar el movimiento desplazando el cabezal de la lnea de tiempo y veras el movimiento de izquierda a derecha y el cambio de la inclinacin en los objetos. 19. Sigue el mismo procedimiento explicado en los pasos anteriores para crear en la capa Verde una Interpolacin de movimiento en la que un rectngulo inclinado de color verde se desplaza desde la parte superior izquierda hasta la parte inferior derecha. 20. Finalmente, utilizando otra vez el mismo procedimiento, crea en la capa Rosa una Interpolacin de movimiento en la que un rectngulo inclinado con un degradado de colores (o puede ser del color que gustes) se desplaza desde la parte inferior derecha del texto hasta la parte superior izquierda.
21. Se desplazas el cabezal de la lnea de tiempo vers cmo se mueven las cuatro figuras creadas.
54
Propuesta
22. Ahora crearemos un fondo para evitar que durante el desplazamiento de las figuras de colores se vea el color de fondo negro. Puedes usar el color que gustes, para este ejercicio utilizaremos un fondo de color azul. Para ello crea una nueva capa y nmbrala Fondo situndola debajo de todas las dems. 23. Dibuja en esa capa un rectngulo de color azul (recuerda que puedes usar el color de tu preferencia) sin contorno que abarque la totalidad del texto.
Creacin de la mascara Ahora vamos a transparentar el texto utilizando para ello una mascara.
24. Haz clic con el botn derecho sobre la capa Texto y selecciona la opcin Mascara, la capa inmediata inferior, es decir, Rojo habr quedado tambin enmascarada, aunque tambin debemos con el resto de las capas. 25. Para ello haz clic con el botn derecho sobre cada una de las capas de colores y selecciona la opcin Propiedades, en la ventana que se abra selecciona la opcin Con mascara. 26. Finalmente reproduce la animacin con Ctrl+Enter para ver el efecto conseguido.
55
Propuesta
1. Abre un nuevo documento y en el men Modificar/Documento o bien Ctrl+J establece el tamao de escenario que creas conveniente as como establece un color (incluso puedes usar una imagen de fondo para que este ejercicio se vea ms atractivo, tambin establece la velocidad de los frames (fps) a 42. 2. Toma la herramienta Ovalo (O), en la pestaa de Propiedades ajusta los valores como se ve en la figura que se muestra ms abajo, para bloquear el color de relleno da clic en la flecha y en la parte superior derecha de la paleta de colores selecciona el cuadro con la diagonal en color rojo, elige un color de trazo en nuestro caso se eligi el color gris.
3. Una vez hechos los ajustes dibuja un crculo. Mientras an esta seleccionado el crculo presiona F8 para convertirlo a smbolo y eligiendo Clip de pelcula. 4. Da un clic en el fotograma 15 y presiona F6. Mientras an estas en el fotograma 15 elige en el men Modificar/Transformar/Voltear horizontal. 5. Crea una Interpolacin de movimiento posicionndote en cualquier parte de la zona gris de la lnea de tiempo dando clic con el botn derecho del mouse y seleccionando la opcin respectiva. 6. Da un doble clic en la capa 1 y renmbralo como Crculo1, despus de esto toma la herramienta de Seleccin (V) y selecciona todos los fotogramas de la capa Circulo1, para hacer esto posicionndote en el fotograma 1 y sin soltar con el botn izquierdo del mouse arrastra hasta el fotograma 15, ahora con el botn derecho selecciona Copiar fotogramas. 7. Ahora crea una nueva capa y renmbrala como Circulo2, posicinate en el fotograma 1 y con el botn derecho del mouse elige de la lista Pegar fotogramas. 8. En la pantalla debers tener algo como esto,
56
Propuesta
9. Toma otra vez la herramienta de Seleccin (V) y en esta misma capa (Circulo2) selecciona del fotograma 16 al 30, da clic con el botn derecho del mouse y elige Quitar fotogramas. 10. Finalmente toma una vez ms la herramienta de Seleccin (V) y da un clic sobre la capa Circulo2 para seleccionarla, ahora usando el mouse o las flechas del teclado mueve el circulo de tal forma que quede desacoplado con respecto al primero un poco a la izquierda, prueba hasta quedar satisfecho(a) con el resultado dando Ctrl +Enter.
57