manual de practicas herramientas web photoshop y flash

Upload: diego-ricardo-jimenez-perez

Post on 07-Apr-2018

239 views

Category:

Documents


0 download

TRANSCRIPT

  • 8/4/2019 Manual de Practicas Herramientas Web Photoshop y Flash

    1/57

    PHOTOSHOP2011

    Luis Manuel Cruz Gmez

  • 8/4/2019 Manual de Practicas Herramientas Web Photoshop y Flash

    2/57

    MATERIAL PRCTICO DE HERRAMIENTAS WEB Propuesta

    2

    CONTENIDO

    1. ESPACIO DE TRABAJO DE PROHOTSHOP PREDETERMINADO 31.1. EL AREA DE TRABAJO 31.2. TODAS LAS HERRAMIENTAS 41.3. PARA USAR UNA HERRAMIENTA 5

    2. INTRODUCCION AL CUADRO DE HERRAMIENTAS 63. HERRAMIENTAS DE SELECCIN 10

    3.1. MARCO RECTANGULAR 103.2 MOVER 113.3. LAZO 113.4 VARITA MAGICA 123.5 USO DE LA BARRA DE OPCIONES 123.6 LA BARRA DE ESTADO 133.7 LA PALETA NAVEGADOR 14

    4. EJERCICIOS BASICOS 154.1 MANEJO DE UNA IMAGEN EN PANTALLA 154.2 DAR TAMAO A UNA IMAGEN 164.3 MARCO A UNA IMAGEN 184.4 CALAR UNA IMAGEN SOBRE EL FONDO 214.5 CALAR SUAVE CON MASCARA 23

    5. CALAR UN OVALO 245.1 TEXTURA E ILUMINACIN EN EL FONDO 265.2 RECORTAR UN SECTOR DE UNA IMAGEN 28

    6. EJERCICIO TEXTO CON FUEGO 297. EJERCICIOS PROPUESTOS 36

  • 8/4/2019 Manual de Practicas Herramientas Web Photoshop y Flash

    3/57

    MATERIAL PRCTICO DE HERRAMIENTAS WEB Propuesta

    3

    1.Espacio de trabajo de Photoshop predeterminado1.1.El rea de TrabajoUna vez abierto el programa observaremos diferentes barras y paneles distribuidos en el

    entorno de trabajo. Como ejemplo demostrativo abramos una imagen de prueba paraque todas las opciones se encuentren disponibles. Recuerda que podemos abrir nuestrosarchivos a travs del men Archivo - Abrir.Una vez abierta la imagen, todas las barras y paneles se encuentran activos y el reade trabajo se ver de esta forma:

    A. Ventana de documento B. Conjunto acoplado de paneles contrado a iconos C. Barrade 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.

  • 8/4/2019 Manual de Practicas Herramientas Web Photoshop y Flash

    4/57

    MATERIAL PRCTICO DE HERRAMIENTAS WEB Propuesta

    4

    1.2.Todas las herramientas

  • 8/4/2019 Manual de Practicas Herramientas Web Photoshop y Flash

    5/57

    MATERIAL PRCTICO DE HERRAMIENTAS WEB Propuesta

    5

    1.3.Para usar una herramientaRealiza una de las siguientes acciones:

    Haz clic en una herramienta en la paletaHerramientas. Si hay un pequeo tringulo enla esquina inferior derecha de la herramienta,mantn pulsado el botn del ratn para ver lasherramientas ocultas. A continuacin, haz clicen la herramienta que deseas seleccionar.

    Puedes pulsar el mtodo abreviado de teclado

    de la herramienta. El mtodo abreviado

    aparece en la informacin de la herramienta.

    Por ejemplo, puedes seleccionar la herramienta

    Mover pulsando la tecla V.

  • 8/4/2019 Manual de Practicas Herramientas Web Photoshop y Flash

    6/57

    MATERIAL PRCTICO DE HERRAMIENTAS WEB Propuesta

    6

    2.Introduccin al cuadro de herramientasA continuacin veremos algunas de las herramientas de ms uso en Photoshop as comouna breve explicacin de su funcin.

  • 8/4/2019 Manual de Practicas Herramientas Web Photoshop y Flash

    7/57

    MATERIAL PRCTICO DE HERRAMIENTAS WEB Propuesta

    7

  • 8/4/2019 Manual de Practicas Herramientas Web Photoshop y Flash

    8/57

    MATERIAL PRCTICO DE HERRAMIENTAS WEB Propuesta

    8

  • 8/4/2019 Manual de Practicas Herramientas Web Photoshop y Flash

    9/57

    MATERIAL PRCTICO DE HERRAMIENTAS WEB Propuesta

    9

  • 8/4/2019 Manual de Practicas Herramientas Web Photoshop y Flash

    10/57

    MATERIAL PRCTICO DE HERRAMIENTAS WEB Propuesta

    10

    3.Herramientas de Seleccin

    3.1 Marco Rectangular

    Es una herramienta de uso frecuente en Photoshop, permitindonos seleccionar aquellaspartes del documento que nos interesan. El marco rectangular permitir hacerselecciones rectangulares.Pulsando se hacen figuras geomtricasPulsando despus de una seleccin se pueden sumar selecciones.

  • 8/4/2019 Manual de Practicas Herramientas Web Photoshop y Flash

    11/57

    MATERIAL PRCTICO DE HERRAMIENTAS WEB Propuesta

    11

    Pulsando 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.

    Columna nica: permite hacer la seleccin de una columna de 1 pixel de

    grosor.Recorte: permite hacer una seleccin rectangular para podereditarla;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 documentopara otro. Con solo dar clic y arrastrar recortars la imagen dejando en su lugar unespacio.Pulsando 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 dondepasar 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 dedos 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.

  • 8/4/2019 Manual de Practicas Herramientas Web Photoshop y Flash

    12/57

    MATERIAL PRCTICO DE HERRAMIENTAS WEB Propuesta

    12

    Las opciones de Lazo magntico son:

    Desvanecer y Suavizar.

    Anchura: anchura con la que Photoshop buscar bordes.

    Contraste:se le indicar el porcentaje de cambio del contraste paraque

    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, comola 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 aseleccionar con respecto al color que indiquemos con la varita mgica. Un valor muybajo har selecciones precisas, en cambio, un valor alto har selecciones menosprecisas.

    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 opcionesLa barra de opciones se muestra por debajo de la barra de mens situada en la partesuperior 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 (comolos modos de pintura y la opacidad) se aplican a varias herramientas, mientras que otrosson especficos de una herramienta.Puedes mover la barra de opciones en el espacio de trabajo utilizando la barra desujecin para acoplarla en la parte superior o inferior de la pantalla. La informacin deherramientas aparece al colocar el puntero sobre una herramienta. Para mostrar uocultar la barra de opciones, selecciona Ventana > Opciones.

  • 8/4/2019 Manual de Practicas Herramientas Web Photoshop y Flash

    13/57

    MATERIAL PRCTICO DE HERRAMIENTAS WEB Propuesta

    13

    Ejemplo: Barra de opciones de la herramienta LazoA. Barra de sujecin B. Informacin de herramientas

    Para restaurar los ajustes por defecto, haz clic con el botn derecho del ratn en elicono de la herramienta en la barra de opciones y, a continuacin, selecciona Restaurarherramienta 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 unporcentaje, este nmero es el zoom aplicado a la imagen abierta.

    Por defecto Photoshop intenta ajustar la imagen al tamao del rea de trabajo, si staes muy pequea o la imagen es demasiado grande, Photoshop reducir el zoom parapoder mostrar la imagen completa en pantalla.Recuerda que el zoom no afecta al tamao de la imagen, sino a la vista. Aunquereduzcamos o ampliemos el zoom para ver con mayor claridad la imagen, lasdimensiones de sta siguen siendo las mismas.Ya que el porcentaje que se muestra en la barra de estado indica el nivel de zoom queestamos aplicando, podemos hacer clic sobre este porcentaje y modificarlo,introduciendo un nmero diferente y pulsando la tecla Enter. Vers como cambia elzoom 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:

  • 8/4/2019 Manual de Practicas Herramientas Web Photoshop y Flash

    14/57

    MATERIAL PRCTICO DE HERRAMIENTAS WEB Propuesta

    14

    Selecciona una de estas opciones para visualizarlas mientras trabajas en el documento.

    3.7 La Paleta NavegadorUtiliza la paleta Navegador para cambiarcon rapidez la vista de la ilustracinutilizando una visualizacin enminiatura.

    El cuadro en color rojo del navegador(denominado rea de previsualizacin)corresponde al rea visible actualmenteen 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. Barradeslizante. G. Aumentar imagen.Si no se encuentra visible puedes activarla desde el men Ventana Navegador en labarra de men.

  • 8/4/2019 Manual de Practicas Herramientas Web Photoshop y Flash

    15/57

    MATERIAL PRCTICO DE HERRAMIENTAS WEB Propuesta

    15

    4.Ejercicios Bsicos4.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 loscomandos aplicados hasta el momento a la imagen y que ubicndote en un punto enparticular puedes deshacer y regresar a un estado anterior.La ventana de Capas deber estar habilitada para que puedas superponer y/o manipularefectos 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 derechapara cambiar el tamao de la imagen. Adicionalmente, el navegador nos permiteaproximarnos y ver una zona en detalle, el sector visible lo regulamos moviendo elrectngulo rojo.

    Ventana Historia

    para deshacer.

    Ventana de

    capas.

    Barra del

    Navegador.

  • 8/4/2019 Manual de Practicas Herramientas Web Photoshop y Flash

    16/57

    MATERIAL PRCTICO DE HERRAMIENTAS WEB Propuesta

    16

    4.2 Dar tamao a una imagen

    Debemos previamente saber el tamao en que se realizar la publicidad folleto oproyecto grfico que vamos a realizar, debemos conocer el ancho y el alto que debertener 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 nuestraimagen.

    Veamos la siguiente imagen:

    Moviendo el selector a laizquierda nos alejamos yel rectn ulo aumenta.

  • 8/4/2019 Manual de Practicas Herramientas Web Photoshop y Flash

    17/57

    MATERIAL PRCTICO DE HERRAMIENTAS WEB Propuesta

    17

    Si suponemos que nuestrotrabajo es de 10 cm de alturapor 20 de ancho, debemos iral men Imagen>Tamao deimagen o bien presionar lasteclas Alt+Ctrl+Q. Primerovamos a la resolucin yponemos el valor deseadonunca menor a 200.Si bien a esta imagen no sela puede estirar, para queocupe los 20 de ancho,vamos a darle el altoadecuado primero.

    Ponemos 10 cm de altura, y vemos que cambia proporcionalmente el ancho, pero nollega a 20.

    Podemos jugar con los valores incluyendo quitar las marcas de las opciones:para ver como es que stas afectan el resultado de laimagen. De manera particular notamos que existe unencadenamiento entre la Anchura y la Altura, sta sepuede eliminar mediante la opcin Restringir

    proporciones.

  • 8/4/2019 Manual de Practicas Herramientas Web Photoshop y Flash

    18/57

    MATERIAL PRCTICO DE HERRAMIENTAS WEB Propuesta

    18

    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.

    2.- Nos aseguramos de que la imagen est en RGB y si no lo est lo cambiamos enImagen/Modo/ColorRGB.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 laimagen dejando un espacio para el borde o marco. Puedes apoyarte con la regla o conlas lneas guao bien hacerlo a mano alzada.

    5.- Creamos una mscara rpida haciendo clic en el botn que se seala en la imageno presionando Q

  • 8/4/2019 Manual de Practicas Herramientas Web Photoshop y Flash

    19/57

    MATERIAL PRCTICO DE HERRAMIENTAS WEB Propuesta

    19

    Al crear una mscararpida nuestra imagen hade verse as.

    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 delmarco 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 delque le dimos para crear la capa o bien dando clic nuevamente en el mismobotn.

    -Ahora, Invertimos la seleccin (Seleccin/Invertir)-Rellenamos de blanco (Edicin/Rellenar/Color frontal)-Finalmente en Seleccin/Deseleccionar o bien con Ctrl+D deseleccionamos lo

    marcado y este es el resultado final.

    Dar clic en este icono

  • 8/4/2019 Manual de Practicas Herramientas Web Photoshop y Flash

    20/57

    MATERIAL PRCTICO DE HERRAMIENTAS WEB Propuesta

    20

    b) Para el segundo ejemplo aplicamos en Filtro/Distorsionar/Rizo (el valor a ponerdepender del marco a realizar), en este caso los valores que se han utilizado son:

    Seguimos los mismos pasos del ejercicio anterior:

    1.- Salir de la mascara de capa rpida dando clic enel icono o bien oprimiendo la letra Q

    2.- Seleccin/Invertir3.- Edicin/Rellenar/Color frontal4.- Seleccin/Deseleccionar o

    Ctrl+D5.- Finalmente ver el resultado

  • 8/4/2019 Manual de Practicas Herramientas Web Photoshop y Flash

    21/57

    MATERIAL PRCTICO DE HERRAMIENTAS WEB Propuesta

    21

    4.4 Calar una imagen sobre el fondo

    Para hacer un calado sobre una imagen podemos utilizar dos mtodos:

    a) Calado simple con borrador

    Para este ejercicio debemos elegir dos imgenes, recortando una de ellas ysobreponindola encima de la otra.

    Imagen 1 Imagen 2

    Sobre la imagen 2 hacemosun recorte con laherramienta de Lazomagntico de tal forma quequede marcada solo lasilueta de la modelo.

    Una vez marcada la siluetaseleccionamos en el men laopcin Edicin/Copiar o bienCtrl+C.

    Nos vamos a la imagen 1 ypegamos con Edicin/Pegar

    o bien Ctrl+V.

    Podemos notar que la imagen copiada puede quedar desproporcionada al momento depegarla, para ello en Edicin/Transformar/Escala le daremos el tamao que se ajuste anuestro gusto.

    Una vez que ambas imgenes han quedado unidas haremos lo siguiente:

  • 8/4/2019 Manual de Practicas Herramientas Web Photoshop y Flash

    22/57

    MATERIAL PRCTICO DE HERRAMIENTAS WEB Propuesta

    22

    Elegimos la herramienta Borrador de la barra de herramientas adecuando eltamao de pincel y la dureza, se recomienda un tamao a 65 y una dureza de 0.

    Debemos asegurarnos que el Color frontal este establecido como se muestra,es decir, Negro sobre Blanco, en caso de no estar as lo establecemos dandoclic 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 imagense empieza a integrar o difuminar con la otra.

    Podemos mover, seguir transformando laimagen hasta quedar satisfechos con elresultado.

  • 8/4/2019 Manual de Practicas Herramientas Web Photoshop y Flash

    23/57

    MATERIAL PRCTICO DE HERRAMIENTAS WEB Propuesta

    23

    4.5 Calar suave con mascara

    Si queremos un calado muy suave deberemos utilizar una mscara de capa, para ello nossituamos sobre la capa del paisaje y presionamos la tecla Q, para entrar al modomscara.

    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 yvolver al paso anterior.

    Vamos a la herramienta Degradado

    Y elegimos la opcin que va de colorfrontal a transparente y el tipo de

    degradado lineal desde las opciones.

    Tiramos de izquierda a derecha y cubrimos demascara roja lo que queremos conservarde laimagen.

    Salimos del modo de mascara presionando Q y

    vemos que queda seleccionado lo que vamos asuprimir.

    Presionamos la tecla suprimir (Supr)y cada vez que lo hagamos se irdiluyendo un poco ms de la imagen,esto lo haremos hasta lograr elefecto deseado. Soltamos laseleccin con Ctrl+D.

  • 8/4/2019 Manual de Practicas Herramientas Web Photoshop y Flash

    24/57

    MATERIAL PRCTICO DE HERRAMIENTAS WEB Propuesta

    24

    5. Calar un Ovalo

    Abrimos una imagen y con la herramienta de seleccin Marco Elptico o bien conM hacemos la seleccin del rea que vamos a trabajar.

    Luego vamos al menSeleccin e invertimossta para que quede

    seleccionado lo deafuera o bienMays+Ctrl+I.

    Enseguida podemosponer un color defondo.

    Podemos crear ahora un relieve en

    el borde. Para ello con la imagenseleccionada en el menCapa/Nueva/Capa va copiar obien Ctrl+J.

    El relieve solo funciona en unacapa superior no en el fondo, poreso debemos copiar la imagen auna nueva capa.

    Al hacer esto solo se copia el ovaloa una nueva capa (Capa 1).

    En este momento podramos hacer algunos cambios, por ejemplo, yendo a lacapa de Fondo y seleccionando todo suprimir su contenido y cambiar el color delmismo.

    Ahora bien, dando un clic en la Capa 1 y en Capa/Estilo de capa/Bisel y relieve

  • 8/4/2019 Manual de Practicas Herramientas Web Photoshop y Flash

    25/57

    MATERIAL PRCTICO DE HERRAMIENTAS WEB Propuesta

    25

    damos los siguientes ajustes.

    Estilo. Relieveacolchado.Tamao. 100En Modo resaltadoOpacidad. 100

    Ejemplos de resultados.

  • 8/4/2019 Manual de Practicas Herramientas Web Photoshop y Flash

    26/57

    MATERIAL PRCTICO DE HERRAMIENTAS WEB Propuesta

    26

    5.1 Textura e Iluminacin en el fondo

    Seleccionamos la capa Fondo y en el men Seleccin/Todo o bien con Ctrl+Aseleccionamos y suprimimos, esto har que se pinte del color que tenemos defondo.

    Sobre la capa Fondo vamos al menFiltro/Textura/Grietas y ajustamosvalores.

    Y el resultado

    Para darle un efecto de iluminacinen Filtros/Interpretar/Efectos deiluminacin haremos los siguientesajustes.

    Con los cambios realizados

  • 8/4/2019 Manual de Practicas Herramientas Web Photoshop y Flash

    27/57

    MATERIAL PRCTICO DE HERRAMIENTAS WEB Propuesta

    27

    obtenemos el siguiente resultado.

    Finalmente para darle un toquems fino podemos agregar undestello, para ello con la misma

    imagen seleccionada en la capaFondo, nos vamos al menFiltro/Interpretar/Destello yubicamos la posicin del cursor enel lugar donde queremos eldestello, esto lo podemos repetirtantas veces como destellosdeseemos.

    Con cada destello adicional laimagen ir tomando tonalidadesms claras.

    Nuestro ejercicio final quedar as.

  • 8/4/2019 Manual de Practicas Herramientas Web Photoshop y Flash

    28/57

    MATERIAL PRCTICO DE HERRAMIENTAS WEB Propuesta

    28

    5.2 Recortar un sector de una imagen

    Habr ocasiones que por alguna razn solo desearemos conservar una parte deuna imagen, si ese fuera nuestro caso en este ejercicio aprenderemos a haceresos recortes. Para ello en una imagen mediante la herramienta de seleccin de

    Marco rectangular marcaremos una seleccin y utilizando el menImagen/Recortar hacemos el corte buscado.

    Antes Despus

    Tambin se puede utilizar la herramienta Recortar o bien teclear laletra C marcando el rea a conservar y dar Enter.

  • 8/4/2019 Manual de Practicas Herramientas Web Photoshop y Flash

    29/57

    MATERIAL PRCTICO DE HERRAMIENTAS WEB Propuesta

    29

    Creacin de un textocon efecto Fuego y

    Reflejo

    6. Ejercicio Texto con Fuego

    Paso 1. En Photoshop creamos un nuevo documento (Ctrl+N) de 800 x 800 pixeles con modo decolor RGB y fondo de color Blanco.

    Paso 2. Elegimos color en configurar color frontal y elegimos el color Negro, cuando

    nos aparezca la paleta de colores elegimos el color Negro y le damos OK, con

    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 enel 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.

  • 8/4/2019 Manual de Practicas Herramientas Web Photoshop y Flash

    30/57

    MATERIAL PRCTICO DE HERRAMIENTAS WEB Propuesta

    30

    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 derechao 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.

    Al final debe verse como esto:

    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.

  • 8/4/2019 Manual de Practicas Herramientas Web Photoshop y Flash

    31/57

    MATERIAL PRCTICO DE HERRAMIENTAS WEB Propuesta

    31

    Una vez establecidas estas opciones

    vamos a empezar a deformar la

    imagen dndole los efectos que mas

    se acomoden a lo que estamosbuscando.

    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;

    a) Activar la opcin Colorear

    b) Tono a 40

    c) Saturacin a 100

    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 Colorearb)El Tono lo ponemos en - 40c) Damos OK para aceptar el color

    creado que es un Rojo intenso.

  • 8/4/2019 Manual de Practicas Herramientas Web Photoshop y Flash

    32/57

    MATERIAL PRCTICO DE HERRAMIENTAS WEB Propuesta

    32

    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 comofxseleccionamos 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 encontrarel tono que ms se ajuste a lo que estamos buscando.

    Una vez encontrado los tonos solo da clic en el botn OK.

  • 8/4/2019 Manual de Practicas Herramientas Web Photoshop y Flash

    33/57

    MATERIAL PRCTICO DE HERRAMIENTAS WEB Propuesta

    33

    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 fusionar capas dando Ctrl+E yvolvemos a duplicar la capa arrastrando sta al icono (Crear una nueva capa) tal como

    lo hicimos en el Paso 4.

    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.

    En el men Seleccin elegimos

    Deseleccionar (Ctrl+D).

  • 8/4/2019 Manual de Practicas Herramientas Web Photoshop y Flash

    34/57

    MATERIAL PRCTICO DE HERRAMIENTAS WEB Propuesta

    34

    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.

  • 8/4/2019 Manual de Practicas Herramientas Web Photoshop y Flash

    35/57

    MATERIAL PRCTICO DE HERRAMIENTAS WEB Propuesta

    35

    Para completar cambiamos la Opacidad de la Capa a un 60% tal y como se ve en la muestra.

    Y finalmente acoplamos todo dando Ctrl+E quedando el Ejercicio concluido.

  • 8/4/2019 Manual de Practicas Herramientas Web Photoshop y Flash

    36/57

    MATERIAL PRCTICO DE HERRAMIENTAS WEB Propuesta

    36

    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 eseda, 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.

    Ejercicio 1. Ajustes de Color

    Imagen Muestra Imagen terminada

    Ejercicio 2. Path y Colorizado

    Imagen Muestra Imagen terminada en los siguientescolores: 2.1 Morado

    2.2 Verde y2.3 Rojo

  • 8/4/2019 Manual de Practicas Herramientas Web Photoshop y Flash

    37/57

    MATERIAL PRCTICO DE HERRAMIENTAS WEB Propuesta

    37

    Ejercicio 3. Clonar

    Ejercicio 4. Mezcla de imgenes

    Imagen Muestra 1 Imagen Muestra 2

    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 Terminada

  • 8/4/2019 Manual de Practicas Herramientas Web Photoshop y Flash

    38/57

    MATERIAL PRCTICO DE HERRAMIENTAS WEB Propuesta

    38

    Ejercicio 5. Composicin

    Ejercicio 6. Pintar (Colorear un Comic segn muestra)

    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.

  • 8/4/2019 Manual de Practicas Herramientas Web Photoshop y Flash

    39/57

    MATERIAL PRCTICO DE HERRAMIENTAS WEB Propuesta

    39

    SEMANA 3

    Para esta semana realizars los ejercicios listados abajo utilizando y aplicando lasherramientas necesarias que te permitan obtener los resultados solicitados.

    Recuerda que para efecto de aceptacin de los ejercicios, estos debern estarterminados para el da que se solicitan, no se aceptan ejercicios incompletos o casiterminados. Para obtener la Competencia los ejercicios deben estar de acuerdo a loque se pide y completos.

    Lista de Ejercicios con sus caractersticas:

    1.- Elaborar un ejercicio que contenga una imagen enmarcada en un ovalo (como elejemplo mostrado en el Punto 5 y 5.1) que tenga buenos efectos y que se veaprofesional.

    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., elaspecto 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.

    NOTA: las imgenes que uses son a tu gusto.

  • 8/4/2019 Manual de Practicas Herramientas Web Photoshop y Flash

    40/57

    MATERIAL PRCTICO DE HERRAMIENTAS WEB Propuesta

    40

    PORTADA PARA FLASH

    CONTENIDO

  • 8/4/2019 Manual de Practicas Herramientas Web Photoshop y Flash

    41/57

    MATERIAL PRCTICO DE HERRAMIENTAS WEB Propuesta

    41

    1. ESPACIO DE TRABAJO DE PROHOTSHOP PREDETERMINADO 31.1. EL AREA DE TRABAJO 31.2. TODAS LAS HERRAMIENTAS 41.3. PARA USAR UNA HERRAMIENTA 5

    2. INTRODUCCION AL CUADRO DE HERRAMIENTAS 63. HERRAMIENTAS DE SELECCIN 10

    3.1. MARCO RECTANGULAR 103.2 MOVER 113.3. LAZO 113.4 VARITA MAGICA 123.5 USO DE LA BARRA DE OPCIONES 123.6 LA BARRA DE ESTADO 133.7 LA PALETA NAVEGADOR 14

    4. EJERCICIOS BASICOS 154.1 MANEJO DE UNA IMAGEN EN PANTALLA 154.2 DAR TAMAO A UNA IMAGEN 164.3 MARCO A UNA IMAGEN 184.4 CALAR UNA IMAGEN SOBRE EL FONDO 214.5 CALAR SUAVE CON MASCARA 23

    5. CALAR UN OVALO 245.1 TEXTURA E ILUMINACIN EN EL FONDO 265.2 RECORTAR UN SECTOR DE UNA IMAGEN 28

    6. EJERCICIO TEXTO CON FUEGO 297. EJERCICIOS PROPUESTOS 36

  • 8/4/2019 Manual de Practicas Herramientas Web Photoshop y Flash

    42/57

    MATERIAL PRCTICO DE HERRAMIENTAS WEB Propuesta

    42

    Gua fcil para el uso de FLASH

    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.

    Qu es y cmo funciona FLASH?

    FLASH es un entorno de desarrollo, es un programa para hacer otros programas/animaciones / paginas webs / RIA's (Rich Internet Application) y ms.

    Lnea de tiempo

    Seccin de capas Velocidad de

    foto ramas

    rea de trabajo

    rea de ajustes

    Herramientas de

    acceso rpido

    rea de

    seguimiento

  • 8/4/2019 Manual de Practicas Herramientas Web Photoshop y Flash

    43/57

    MATERIAL PRCTICO DE HERRAMIENTAS WEB Propuesta

    43

    Como otros entornos de desarrollo FLASH consta de un "editor" y un "compilador", eleditor es todo lo que ves en FLASH, con l escribes el programa (en cdigo ActionScript) 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 esocomparte muchas herramientas con programas de dibujo y animacin. Fue a partir deFLASH5 (FL5) cuando surgi la explosin de Action Script (AS) y se aadieron muchasfunciones nuevas. Actualmente hay dos corrientes en FLASH, la Designer (Diseador) yla Developer (Programador), as mismo los exmenes de certificacin son diferentespara cada una de estas ramas.

    Conceptos que debes conocer

    FLASH tiene mucho de animacin por lo que es conveniente conocer alguna de laterminologa empleada en este entorno.

    Frame o Fotograma: Un frame es un fotograma como el de las pelculas, una imagenesttica, 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 afotograma, se usa sobre todo en dibujos animados cuando las cosas no se pueden hacerni por MotionTween ni por ShapeTween.

    Motion Tween: Interpolacin de movimiento, lo que hace es "rellenar" los fotogramasvacos de una animacin, es decir, se estable en una posicin inicial a un objeto y enuna posicin final. La interpolacin de movimiento calcula donde debera estar elobjeto en los frames intermedios.

    Shape Tween: Similar al MotionTween, pero esta vez juega con las formas (solotrabaja con vectores, no imgenes ni objetos). El resultado suele ser no muy bueno alprincipio, por lo que se tiene que trabajar bastante la animacin.

    Lnea del tiempoo time line: Esta formada por los frames, no es ms que "el rollo depelcula" que contiene a los fotogramas. Cada Movie Clip (clip de pelcula) tiene su

  • 8/4/2019 Manual de Practicas Herramientas Web Photoshop y Flash

    44/57

    MATERIAL PRCTICO DE HERRAMIENTAS WEB Propuesta

    44

    propio time line, aunque todos van a la velocidad del principal (fps frames persecond)].

    FPS: Frames Per Second, (frames por segundo), esto es la velocidad en la que pasaranlos 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 elcontenido. Puedes reorganizar las capas arrastrndolas a tu gusto, las que estn porencima "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. Mientrasque en una capa puede haber varios objetos, en una misma profundidad no, si se cargaun objeto a una profundidad donde ya exista algo, ste ser reemplazado por el nuevoobjeto.

    La problemtica con las fuentes

    Una fuente(Font) es una tipografa, un tipo de letra, como por ejemplo "Arial","Verdana", "comic Sans",...etc.

    FLASH tiene 3 tipos de campo de texto, los estticos, los dinmicos y los deintroduccin de texto. Muchas veces usamos letras que no estn en todas lascomputadoras, por eso FLASH puede aadirlas a los SWF con el fin de que el resultadose vea igual en todos los equipos, en caso de que no estuvieran y no se "exportarn" (ose embeben) en el SWF FLASH usara la ms "parecida", volviendo en impredecible elresultado final.

    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 lospxel fonts.

  • 8/4/2019 Manual de Practicas Herramientas Web Photoshop y Flash

    45/57

    MATERIAL PRCTICO DE HERRAMIENTAS WEB Propuesta

    45

    Es importante saber que a partir de la versin MX 2004 (versin 7) de FLASH y lasposteriores 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 envarios 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 encoordenadas absolutas.

    Ejemplo

    Pxel Fonts... pero que son?

    Estas son fuentes de pequeo tamao, que estn hechas a base de pixels para que sevean bien. Su tamao en general suele ser 8 o mltiplos de 8 (16, 24,32,....etc.).

    Adems de eso los campos de texto que las contengan tienen que estar en coordenadasexactas (por ejemplo 32.0 51.0 etc.) y alineados a la izquierda. Esto es, porque alestar hechas a base de pxeles, los rellenan por completo y no crean esa sensacin deestar "borrosas".

    (Explicacin: Cuando un pxel es invadido por dos colores, por ejemplo el fondo blanco

    y la letra negra, este hace una mezcla de ambos -gris- y lo muestra como resultado,creando esa sensacin de borroso).

  • 8/4/2019 Manual de Practicas Herramientas Web Photoshop y Flash

    46/57

    MATERIAL PRCTICO DE HERRAMIENTAS WEB Propuesta

    46

    Conozcamos el interior de FLASH

    Muchos podran confundirse con trminos como "instance names" o "nombres deinstancia", de exportar las fuentes (embedFonts) y otros ms, as que explicaremos unpoco.

    FLASH usa un lenguaje de POO (Programacin Orientada a Objetos), hay quediferenciar entre un Objeto y una Instancia; imaginmonos por un momento en elmundo de los automviles, para nosotros los objetos (solo conceptos) sern los "cochesen 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 sihablamos de un "Camaro 2SS AT con la matricula XXXX" eso es una instancia (lamatricula 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 nombrea los smbolos, pero ese NO ES su instance name. Los instance name servirn al igualque las matriculas, para diferenciar e identificar ciertos objetos, a fin de podercontrolarlos mejor. Quizs hayas odo hablar de las "clases", no son mas que objetosconceptuales, as que tomaremos clase = objeto, pero recordemos que una clase esdiferente de la instancia. Para mayor referencia busca en Internet los conceptosrelacionados con programacin Orientada a Objetos.

    Componentes

    Qu son? Los componentes, originalmente se llamaban Smart Clips, es decir, "Clipinteligentes", son clips (Movie Clips / MC / movies - como quieras llamarlos) que vienenprogramados, listos para ponerlos en el escenario y usar.

    Cul es su funcin? Eso depende para lo que estn programados, pero para poner unejemplo, imagina que quieres poner un calendario en varias paginas webs, podras ir yprogramarlo en cada una de las paginas o por el contrario lo programas una vez, loconviertes 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. Haysitios webs con miles de componentes para diversas funciones, te podranahorrar trabajo (o tal vez no, ya que normalmente suele ser difcil o complicadocambiar su aspecto grfico), sin embargo ah estn las oportunidades.

  • 8/4/2019 Manual de Practicas Herramientas Web Photoshop y Flash

    47/57

    MATERIAL PRCTICO DE HERRAMIENTAS WEB Propuesta

    47

    Programacin en archivos externos

    FLASH facilita la programacin aadiendo soporte a los archivos externos, estos sonusados 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 siprogramas alguna funcin o mtodo que rehusars en varios proyectos, si lo tienes enun archivo externo, solo tendrs que modificar UN archivo, mientras que de otra formatendras 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 quetomando el cdigo de los dems, as que : NO PIDAS CDIGO AJENO

    No intentes hacer algo que te supera, actualmente NO SE PUEDE HACER DOOM 5CON FLASH.

    SE REALISTA, a veces no salen las cosas a la primera, sin embargo, eso te debedar pauta para que con nimo y entusiasmo sigas adelante.

  • 8/4/2019 Manual de Practicas Herramientas Web Photoshop y Flash

    48/57

    MATERIAL PRCTICO DE HERRAMIENTAS WEB Propuesta

    48

    EJERCICIOS

    Ejercicios para la semana uno

    1) Crear una animacin con una forma que se transforme en otras usando laInterpolacin 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 o2) Crear la animacin de un acuario3) 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).

  • 8/4/2019 Manual de Practicas Herramientas Web Photoshop y Flash

    49/57

    MATERIAL PRCTICO DE HERRAMIENTAS WEB Propuesta

    49

    EJERCICIOS PRACTICOS1

    1.PRIMERA ANIMACINCrear el movimiento de un objeto.

    Abrimos FLASH yseleccionamos un documentonuevo.

    Despus con la herramientaRectngulo (R,O,R,O) dibujamos unaimagen circular o elptica.

    Quedar algo como se muestra en la imagen dentro del rea de trabajo, nota que elcolor del crculo viene dado por los colores que vengan por default.

    A continuacin podemos hacer varias cosas:

    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 enla seccin de Color de relleno damos clicen la flecha para que nos aparezca lapaleta de colores y elegimos el que sea de nuestroagrado, adicionalmente podemos elegir en esa misma

    1Estos ejercicios fueron elaborados para FLASH 9 (CS3)

  • 8/4/2019 Manual de Practicas Herramientas Web Photoshop y Flash

    50/57

    MATERIAL PRCTICO DE HERRAMIENTAS WEB Propuesta

    50

    seccin un degradado en donde dice Tipo, ah se muestran los diferentes tipos dedegradado (Slido, Lineal, Radial, etc) sintete con la libertad de explorar yexperimentar 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 unrequisito para que ste pueda ser animado.

    Para ello selecciona la imagen y en el men Modificar elige la opcin Convertiren smbolo o bien solo presiona F8.En la ventana que aparece ponle un nombre significativo al objeto que loidentifique 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, paraello da un clic en el fotograma 25 y con el botn derecho da un clic en la opcinInsertar fotograma clave o bien tambin lo puedes crear oprimiendo F6, mueveel objeto a la posicin que quieras. Inserta un nuevo fotograma clave en laposicin 40, mueve el objeto nuevamente a la posicin que quieras, repite estodos veces ms.

    Prueba el resultado dando un Enter.

    4. Como te habrs dado cuenta el resultado es muy bsico y se ve al crculomovindose de una forma muy burda de un lado a otro.

    5. Esto lo corregiremos utilizando lo que se conoce como Interpolacin demovimiento, 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 laopcin del men Crear interpolacin de movimiento, notars que se cambia a untono azul y aparece una lnea continua con una flecha entre el primer frame y el15, repite esto mismo para los otros frames tratando de ubicarte en el medioentre 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 apareceuna puntuada es que haz cometido algn error, uno de ellos es que solo sepuede tener un smbolo en una sola capa, hay un fotograma clave vaco, o bienque el objeto no es un smbolo, o que haya mas de un objeto dentro delfotograma clave.

    Prueba ahora nuevamente dando Enter.

    6. Ahora probemos lo siguiente; ubcate en el frame 25 (donde hay un fotogramaclave) selecciona la herramienta Transformacin libre (Q), nota que al circulo leaparecen una marcas, toma alguna de ellas y hazle un cambio (modifica sutamao, su posicin, cmbiale el color, etc).

    7. Si quieres cambiar el color sigue estos pasos; en la pestaa Propiedades ubicadaen la parte inferior de la pantalla, te aparecer algo como esto:

  • 8/4/2019 Manual de Practicas Herramientas Web Photoshop y Flash

    51/57

    MATERIAL PRCTICO DE HERRAMIENTAS WEB Propuesta

    51

    8. Ve seleccionando los dems frames donde estn los fotogramas clave y aplcalealgn cambio, incluso puedes borrar ese objeto y dibujar uno nuevo (pe, uncuadrado) si haces esto notars que la interpolacin se vuelve a una lneapunteada, esto es porque se ha perdido el link con los otros frames, dibuja unnuevo objeto y no se te olvide convertirlo a smbolo (con F8) y vuelve a crearle lainterpolacin, ahora prueba dando Enter.

    Selecciona aqu el tipo de color

    que aplicars: Brillo, Tinta,

    Alfa, Avanzado.

    Selecciona el %

    que aplicars,

    entre mayor el %

    ser ms notorio

    el cambio.

    En el caso del color Alfa, cuando lo seleccionas y le

    bajas el % la imagen se va diluyendo.

  • 8/4/2019 Manual de Practicas Herramientas Web Photoshop y Flash

    52/57

    MATERIAL PRCTICO DE HERRAMIENTAS WEB Propuesta

    52

    2. EJERCICIO CON MASCARA Y TEXTO

    En este Ejercicio vamos a crear un efecto en el que aprovechando las propiedades de lascapas 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 vanmoviendo a lo largo del texto.

    Pasos

    1. Creamos un documento nuevo y en el men Modificar/Documento le asignamosun fondo de color negro.

    2. Con la herramienta Texto y en panel de Propiedades ajustamos un tipo de letra,en este casoelegimos un tipoArial Black con untamao aproximadode 60 y un colordiferente del fondo yque sobresalga, eneste caso elegimosun color gris.

    3. En el centro delescenario escribimos un texto, en nuestro caso EJEMPLO.

    4.

    Mediante la herramienta Transformacin libre aumenta un poco eltamao vertical del texto arrastrando su punto central superior.

    5. Selecciona el fotograma 20 de esta capa y pulsa F5 para crear un fotograma yforzar la visualizacin del texto hasta este fotograma.

    Creando los colores en movimiento

    6. Renombra la capa del texto como Texto y crea cuatronuevas 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 otrascuatro.

    8. Renombra las cuatro nuevas capas como Rojo, Amarillo, Verde y Rosa.

  • 8/4/2019 Manual de Practicas Herramientas Web Photoshop y Flash

    53/57

    MATERIAL PRCTICO DE HERRAMIENTAS WEB Propuesta

    53

    9. Sitate en el primerfotograma de la capa Rojo ymediante la herramientaRectngulo dibuja unrectngulo vertical rojo y sincontorno situado hacia lazona izquierda tal y como semuestra en la figura.

    10.Mediante la herramientaTransformacin libreinclina el rectnguloa la derecha tal como se veen la figura.

    11.Haz clic con el botn derechosobre el primer fotograma de esta capa y selecciona la opcin Interpolacin demovimiento.

    12.Selecciona ahora el fotograma 20 de la misma capa y pulsa F6 para crear unfotograma clave y concluir la interpolacin.

    13.Lleva el rectngulo hacia el lado derecho del texto y mediante la herramientaTransformacin libre inclina el rectngulo ahora hacia la izquierda.Puedes probar el movimiento desplazando el cabezal de la lnea detiempo y veras el movimiento de izquierda a derecha y el cambio de lainclinacin en los objetos.

    14.Sitate en el primer fotogramade la capa Amarillo y mediantela herramienta rectngulodibuja un rectngulo verticalamarillo y sin contorno situadosobre la zona derecha del textotal como lo muestra la figura.

    15.Mediante la herramientaTransformacinlibre inclina el

    rectngulo hacia la izquierda.

    16.Haz clic con el botn derecho sobre el primer fotograma de esta capa yselecciona la opcin Interpolacin de movimiento.

  • 8/4/2019 Manual de Practicas Herramientas Web Photoshop y Flash

    54/57

    MATERIAL PRCTICO DE HERRAMIENTAS WEB Propuesta

    54

    17. Selecciona el fotograma 20 de esta misma capa y pulsa F6 para crear unfotograma clave y concluir la interpolacin.

    18.Lleva el rectngulo hacia el lado izquierdo del texto y mediante la herramientaTransformacin libre inclina el rectngulo ahora hacia la derecha.Puedes probar el movimiento desplazando el cabezal de la lnea detiempo y veras el movimiento de izquierda a derecha y el cambio de lainclinacin en los objetos.

    19.Sigue el mismo procedimiento explicado en los pasos anteriores para crear en lacapa Verde una Interpolacin de movimiento en la que un rectngulo inclinadode color verde se desplaza desde la parte superior izquierda hasta la parteinferior derecha.

    20.Finalmente, utilizando otra vez el mismo procedimiento, crea en la capa Rosauna Interpolacin de movimiento en la que un rectngulo inclinado con undegradado 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 cuatrofiguras creadas.

  • 8/4/2019 Manual de Practicas Herramientas Web Photoshop y Flash

    55/57

    MATERIAL PRCTICO DE HERRAMIENTAS WEB Propuesta

    55

    Creacin del fondo

    22.Ahora crearemos un fondo para evitar que durante el desplazamiento de lasfiguras de colores se vea el color de fondo negro. Puedes usar el color quegustes, para este ejercicio utilizaremos un fondo de color azul.

    Para ello crea una nueva capa y nmbrala Fondo situndola debajo de todas lasdems.

    23.Dibuja en esa capa unrectngulo de color azul(recuerda que puedesusar el color de tupreferencia) sincontorno que abarque latotalidad 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 opcinMascara, la capa inmediata inferior, es decir, Rojo habr quedado tambinenmascarada, 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 yselecciona la opcin Propiedades, en la ventana que se abra selecciona la opcinCon mascara.

    26.Finalmente reproduce la animacin con Ctrl+Enter para ver el efecto conseguido.

  • 8/4/2019 Manual de Practicas Herramientas Web Photoshop y Flash

    56/57

    MATERIAL PRCTICO DE HERRAMIENTAS WEB Propuesta

    56

    3. EJERCICIO ANILLO GIRANDO

    Pasos

    1. Abre un nuevo documento y en el men Modificar/Documento o bien Ctrl+Jestablece el tamao de escenario que creas conveniente as como establece un

    color (incluso puedes usar una imagen de fondo para que este ejercicio se veams atractivo, tambin establece la velocidad de los frames (fps) a 42.

    2. Toma la herramienta Ovalo (O), en la pestaa de Propiedades ajusta los valorescomo 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 paletade 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 elcrculo 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 fotograma15 elige en el men Modificar/Transformar/Voltear horizontal.

    5. Crea una Interpolacin de movimiento posicionndote en cualquier parte de lazona gris de la lnea de tiempo dando clic con el botn derecho del mouse yseleccionando la opcin respectiva.

    6. Da un doble clic en la capa 1 y renmbralo como Crculo1, despus de esto tomala herramienta de Seleccin (V) y selecciona todos los fotogramas de la capaCirculo1, para hacer esto posicionndote en el fotograma 1 y sin soltar con elbotn izquierdo del mouse arrastra hasta el fotograma 15, ahora con el botnderecho selecciona Copiar fotogramas.

    7. Ahora crea una nueva capa y renmbrala como Circulo2, posicinate en elfotograma 1 y con el botn derecho del mouse elige de la lista Pegar fotogramas.

    8. En la pantalladebers tener algocomo esto,

    Ajustar estos

    valores como se

    muestra en esta

    imagen.

  • 8/4/2019 Manual de Practicas Herramientas Web Photoshop y Flash

    57/57

    MATERIAL PRCTICO DE HERRAMIENTAS WEB 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 eligeQuitar fotogramas.

    10.Finalmente toma una vez ms la herramienta de Seleccin (V) y da un clic sobrela capa Circulo2 para seleccionarla, ahora usando el mouse o las flechas delteclado mueve el circulo de tal forma que quede desacoplado con respecto alprimero un poco a la izquierda, prueba hasta quedar satisfecho(a) con elresultado dando Ctrl +Enter.