Manual de Practicas Herramientas Web Photoshop y Flash

PHOTOSHOP 2011 Luis Manuel Cruz Gómez

MATERIAL PRÁCTICO DE HERRAMIENTAS WEB

Propuesta

CONTENIDO 1.

2. 3.

4.

5.

6. 7.

ESPACIO DE TRABAJO DE PROHOTSHOP PREDETERMINADO 1.1. EL AREA DE TRABAJO 1.2. TODAS LAS HERRAMIENTAS 1.3. PARA USAR UNA HERRAMIENTA INTRODUCCION AL CUADRO DE HERRAMIENTAS HERRAMIENTAS DE SELECCIÓN 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 EJERCICIOS BASICOS 4.1 MANEJO DE UNA IMAGEN EN PANTALLA 4.2 DAR TAMAÑO A UNA IMAGEN 4.3 MARCO A UNA IMAGEN 4.4 CALAR UNA IMAGEN SOBRE EL FONDO 4.5 CALAR SUAVE CON MASCARA CALAR UN OVALO 5.1 TEXTURA E ILUMINACIÓN EN EL FONDO 5.2 RECORTAR UN SECTOR DE UNA IMAGEN EJERCICIO TEXTO CON FUEGO EJERCICIOS PROPUESTOS

2

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

CONTENIDO 1.

2. 3.

4.

5.

6. 7.


2

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

1. Espacio de trabajo de Photoshop predeterminado 1.1. El Área de Trabajo

Una vez abierto el programa observaremos diferentes barras y paneles distribuidos en el entorno de trabajo. Como ejemplo demostrativo abramos una imagen de prueba para que todas las opciones se encuentren disponibles. Recuerda que podemos abrir nuestros archivos a través del menú Archivo - Abrir. Una vez abierta la imagen, todas las barras y paneles se encuentran encuentran activos y el área de trabajo se verá de esta forma:

A. Ventana de documento B. Conjunto acoplado de paneles contraído a iconos C. Barra de título de panel D. Barra de menús E. Barra de opciones F. Panel Herramientas G. Botón Contraer como iconos H. Tres grupos de paletas (paneles) acoplados verticalmente.

3


1.2. Todas las herramientas

4

Propuesta


Propuesta

1.3. Para usar una herramienta Realiza una de las siguientes acciones: Haz clic en una herramienta en la paleta Herramientas. Herramientas. Si hay un pequeño triángulo en la esquina inferior derecha de la herramienta, mantén pulsado el botón del ratón para ver las herramientas ocultas. A continuación, haz clic en la herramienta que deseas seleccionar. Puedes pulsar el método abreviado de teclado de la herramienta. El método abreviado aparece en la información de la herramienta. Por ejemplo, puedes seleccionar la herramienta Mover pulsando la tecla V.

5


Propuesta

2. Introducción al cuadro de herramientas A continuación veremos algunas de las herramientas de más uso en Photoshop así como una breve explicación de su función.

6


7

Propuesta


8

Propuesta


9

Propuesta


Propuesta

3. Herramientas de Selección

3.1 Marco Rectangular Es una herramienta de uso frecuente en Photoshop, permitiéndonos seleccionar aquellas partes del documento que nos interesan. El marco rectangular permitirá hacer selecciones rectangulares. Pulsando se hacen figuras geométricas

Pulsando después de una selección se pueden sumar selecciones. 10


Propuesta

Pulsando después de una selección se pueden restar selecciones. Elíptico: permite hacer selecciones circulares y elípticas. Fila Única: permite hacer la selección de una fila de 1 pixel de grosor. Columna Única: permite hacer la selección de una columna de 1 pixel de grosor. Recorte: permite hacer una selección rectangular para poder editarla; girar, cambiar su tamaño o su centro de giro.

3.2 MOVER Permite mover una imagen o una selección de un lado para otro, o de un documento para otro. Con solo dar clic y arrastrar recortarás la imagen dejando en su lugar un espacio.

Pulsando duplicaremos el objeto a mover. 3.3. LAZO

Esta opción 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 selección, es decir, anclaje de puntos. LAZO MAGNETICO.- Hace la selección a mano alzada en función de la configuración que se haya ajustado. La línea de selección será la intersección de dos colores dependiendo del contraste de sus bordes.

Las opciones de Lazo y Lazo poligonal son:

Desvanecer: suaviza los bordes de la selección en número de pixeles. Suavizar: suaviza los bordes a la hora de cortar, copiar o mover.

11


Propuesta

Las opciones de Lazo magnético son:

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 línea de selección.

Lineatura: distancia a la que Photoshop irá poniendo los puntos de anclaje.

3.4 Varita Mágica

Permite seleccionar áreas del documento que tengan cierta similitud en el color, como la piel en una persona. Es rápida pero se debe utilizar con cuidado. Opciones:

Tolerancia: Se le indicará la similitud que deberán tener los colores que se van a seleccionar con respecto al color que indiquemos con la varita mágica. Un valor muy bajo hará selecciones precisas, en cambio, un valor alto hará selecciones menos precisas. Suavizar: Suaviza los bordes de la selección. 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 menús situada en la parte superior del espacio de trabajo. La barra de opciones es sensible al contexto: cambia según 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 específicos de una herramienta. Puedes mover la barra de opciones en el espacio de trabajo utilizando la barra de sujeción para acoplarla en la parte superior o inferior de la pantalla. La información 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 sujeción B. Información de herramientas

Para restaurar los ajustes por defecto, haz clic con el botón derecho del ratón en el icono de la herramienta en la barra de opciones y, a continuación, selecciona Restaurar herramienta o Restaurar todas en el menú contextual. Para más información sobre la definición de opciones de una herramienta específica, 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 podrás observar en la figura de abajo, a la izquierda encontraremos un porcentaje, este número es el zoom aplicado a la imagen abierta.

Por defecto Photoshop intenta ajustar la imagen al tamaño del área de trabajo, si ésta es muy pequeña 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 tamaño 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 número diferente y pulsando la tecla Enter. Verás como cambia el zoom de la imagen. La información que se muestra a continuación se refiere al documento sobre el que estamos trabajando. Haciendo clic en la flecha negra podemos seleccionar qué información mostrar:

13


Propuesta

Selecciona una de estas opciones para visualizarlas mientras trabajas en el documento. 3.7 La Paleta Navegador

Utiliza la paleta Navegador para cambiar con rapidez la vista de la ilustración utilizando una visualización en miniatura. El cuadro en color rojo del navegador (denominado área de previsualización) corresponde al área visible actualmente en la ventana. A. Botón del menú de la paleta B. Visualización en miniatura de una ilustración C. Área de previsualización D. Cuadro de texto de Zoom E. Botón 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 Básicos 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 tamaño restaurado, es decir mediano, para que puedas manejarla.

Ventana Historia para deshacer.

Ventana de capas. Barra del Navegador.

Puedes ver aquí la ventana de Historia, a través de la cual puedes ver el historial de los comandos aplicados hasta el momento a la imagen y que ubicándote 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 podrás mover el selector a la izquierda o derecha para cambiar el tamaño de la imagen. Adicionalmente, el navegador nos permite aproximarnos y ver una zona en detalle, el sector visible lo regulamos moviendo el rectángulo rojo.

15


Propuesta

Moviendo el selector a la izquierda nos alejamos y el rectán ulo aumenta. 4.2 Dar tamaño a una imagen

Debemos previamente saber el tamaño en que se realizará la publicidad folleto o proyecto gráfico 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 más ancho que alto, así deberá también 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>Tamaño de imagen… o bien presionar las teclas Alt+Ctrl+Q. Primero vamos a la resolución 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 opción Restringir proporciones.

17


Propuesta

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 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 rectángulo en la imagen dejando un espacio para el borde o marco. Puedes apoyarte con la regla o con las líneas guía…o bien hacerlo a mano alzada.

5.- Creamos una máscara rápida haciendo clic en el botón que se señala en la imagen o presionando Q

18


Propuesta

Dar clic en este icono

Al crear una máscara rápida nuestra imagen ha de verse así.

6.- En este momento puedes dar rienda suelta a tu imaginación 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 máscara rápida pulsando el botón que hay justo al lado del que le dimos para crear la capa o bien dando clic nuevamente en el mismo botón. - Ahora, Invertimos la selección ( Selección/Invertir)

- Rellenamos de blanco ( Edición/Rellenar/Color frontal) - Finalmente en Selección/Deseleccionar o bien con Ctrl+D marcado y este es el resultado final.

19

deseleccionamos lo


Propuesta

b) Para el segundo ejemplo aplicamos en Filtro/Distorsionar/Rizo (el valor a poner dependerá 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 rápida dando clic en el icono o bien oprimiendo la letra Q

2.- Selección/Invertir 3.- Edición/Rellenar/Color frontal 4.- Selección/Deseleccionar o Ctrl+D 5.- Finalmente ver el resultado

20


Propuesta

4.4 Calar una imagen sobre el fondo

Para hacer un calado sobre una imagen podemos utilizar dos métodos: a) Calado simple con borrador Para este ejercicio debemos elegir dos imágenes, recortando una de ellas y sobreponiéndola encima de la otra.

Imagen 1

Imagen 2 Sobre la imagen 2 hacemos un recorte con la herramienta de Lazo magnético de tal forma que quede marcada solo la silueta de la modelo. Una vez marcada la silueta seleccionamos en el menú la opción Edición/Copiar o bien Ctrl+C. Nos vamos a la imagen 1 y pegamos con Edición/Pegar o bien Ctrl+V.

Podemos notar que la imagen copiada puede quedar desproporcionada al momento de pegarla, para ello en Edición/Transformar/Escala le daremos el tamaño que se ajuste a nuestro gusto. Una vez que ambas imágenes han quedado unidas haremos lo siguiente:

21


Propuesta

Elegimos la herramienta Borrador de la barra de herramientas adecuando tamaño de pincel y la dureza, se recomienda un tamaño 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 pequeño 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

4.5 Calar suave con mascara

Si queremos un calado muy suave deberemos utilizar una máscara de capa, para ello nos situamos sobre la capa del paisaje y presionamos la tecla Q , para entrar al modo máscara. Vemos que se pone automáticamente el color negro como frontal y blanco como fondo. Si quisieras salir del modo máscara sólo debes presionar otra vez Q , o ir a la historia y volver al paso anterior. Vamos a la herramienta Degradado

Y elegimos la opción 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 más de la imagen, esto lo haremos hasta lograr el efecto deseado. Soltamos la selección con Ctrl+D.

23


Propuesta

5. Calar un Ovalo Abrimos una imagen y con la herramienta de selección Marco Elíptico o bien con M hacemos la selección del área que vamos a trabajar.

Luego vamos al menú Selección e invertimos ésta para que quede seleccionado lo de afuera o bien Mayús+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 vía 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 podríamos 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

damos los siguientes ajustes.

Estilo.

Relieve

acolchado. Tamaño. 100

En Modo resaltado Opacidad. 100

Ejemplos de resultados.

25


Propuesta

5.1 Textura e Iluminación en el fondo

Seleccionamos la capa Fondo y en el menú Selección/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 iluminación en Filtros/Interpretar/Efectos de iluminación haremos los siguientes ajustes.

Con los cambios realizados 26


Propuesta

obtenemos el siguiente resultado. Finalmente para darle un toque más fino podemos agregar un destello, para ello con la misma imagen seleccionada en la capa Fondo, nos vamos al menú y Filtro/Interpretar/Destello ubicamos la posición 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 más claras.

Nuestro ejercicio final quedará así.

27


Propuesta

5.2 Recortar un sector de una imagen

Habrá ocasiones que por alguna razón 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 selección de Marco rectangular marcaremos una selección y utilizando el menú Imagen/Recortar hacemos el corte buscado.

Antes

Después

También se puede utilizar la herramienta Recortar letra C marcando el área a conservar y dar Enter.

28

o bien teclear la


Propuesta

6. Ejercicio Texto con Fuego

Creación de un texto con efecto Fuego y Reflejo

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.

elegimos el color Negro, cuando el color Negro y le damos OK, con

Paso 3. Ahora seleccionamos la Herramienta Texto (T) y en configurar color frontal invertimos la selección y tomamos el color Blanco, en la paleta de colores damos OK en el color Blanco. Seleccionamos un tipo de letra con un tamaño aproximado de 50 a 60 puntos y más 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 más adelante.

29


Propuesta

En la capa del texto damos clic con el botón derecho del mouse y seleccionamos la opción Rasterizar texto Paso 4. La capa de Texto la copiamos simplemente arrastrándola hacia abajo hasta donde esta el icono “Crear una capa nueva” en la región 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 botón 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 método Viento y la dirección Desde la derecha o Desde la izquierda según 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 posición 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 Presión del pincel a 80.

30


Propuesta

Una vez establecidas estas opciones vamos a empezar a deformar la imagen dándole 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/saturación o bien Ctrl+U damos los siguientes ajustes;

a) Activar la opción Colorear b) Tono a 40 c) Saturación a 100

Con esto obtenemos un tono Amarillo y finalizamos dando clic en el botón OK.

Paso 11. Duplicaremos la capa en la que estamos trabajando simplemente arrastrándola a la opción (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/saturación 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 fusión para capa y elegimos la opción Superponer, esto hará que ambas capas se fusionen dando el efecto de Fuego.

Ahora combinamos ambas capas dando clic con el botón 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 habíamos dejado pendiente dando clic en el recuadro de tal forma que se muestre el “ojo” de activación de la misma.

Nos ubicamos en esta capa y en el icono de “Añadir un estilo de capa” identificado en la parte

inferior como fx seleccionamos “Superposición 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 más se ajuste a lo que estamos buscando. Una vez encontrado los tonos solo da clic en el botón 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

Paso 14. Una vez concluida esta parte volvemos a duplicar la capa arrastrando lo hicimos en el Paso 4.

b) Después de Invertir efecto

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ú Selección, elegimos Invertir (Mayus+Ctrl+I) y borramos con el botón suprimir.

En el menú Selección elegimos Deseleccionar (Ctrl+D).

33


Propuesta

En el menú Edición elegimos Transformación 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 vería 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 dándole efectos difuminados de tal forma que se vea como efecto de Reflejo.

34


Propuesta

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.

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 aceptación de los ejercicios, estos deberán estar ya terminados para ese día, 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 siguientes colores: 2.1 Morado 2.2 Verde y 2.3 Rojo

36


Propuesta

Ejercicio 3. Clonar

En este ejercicio deberás corregir la imagen de tal forma que las imperfecciones quedan eliminadas, es decir deberás eliminar las manchas blancas de tal forma que la imagen se vea limpia.

Ejercicio 4. Mezcla de imágenes

Imagen Muestra 1

Imagen Muestra 2

Imagen Terminada

37


Propuesta

Ejercicio 5. Composición

En este ejercicio deberás descomponer la imagen de tal forma que utilizando tu creatividad le des una nueva presentación, p.e. agregando un fondo, suprimir partes de la imagen, reacomodando la imagen, agregando otros elementos, etc.

Ejercicio 6. Pintar (Colorear un Comic según muestra)

38


Propuesta

SEMANA 3

Para esta semana realizarás los ejercicios listados abajo utilizando y aplicando las herramientas necesarias que te permitan obtener los resultados solicitados. Recuerda que para efecto de aceptación de los ejercicios, estos deberán estar terminados para el día 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 características: 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 imágenes donde usarás 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.

NOTA: las imágenes que uses son a tu gusto.

39


PORTADA PARA FLASH

CONTENIDO

40

Propuesta

MATERIAL PRÁCTICO DE HERRAMIENTAS WEB 1.

2. 3.

4.

5.

6. 7.


41

Propuesta

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

Guía fácil 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 distribución que ves en tu pantalla difiere de las imágenes aquí mostradas no hay problema, el resultado será el mismo ya que eso va en función de la versión de FLASH que estés utilizando.

Línea de tiempo

Velocidad de foto ramas

Sección de capas

Herramientas de acceso rápido Área de trabajo

Área de ajustes Área de seguimiento

¿Qué es y cómo funciona FLASH? FLASH es un entorno de desarrollo, es un programa para hacer otros programas/ animaciones / paginas webs / RIA's (Rich Internet Application) y más.

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 código Action Script) y haces los dibujos/imágenes 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 extensión .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 animación vectorial (y no vectorial), por eso comparte muchas herramientas con programas de dibujo y animación. Fue a partir de FLASH5 (FL5) cuando surgió la explosión de Action Script (AS) y se añadieron muchas funciones nuevas. Actualmente hay dos corrientes en FLASH, la Designer (Diseñador) y la Developer (Programador), así mismo los exámenes de certificación son diferentes para cada una de estas ramas.

Conceptos que debes conocer FLASH tiene mucho de animación por lo que es conveniente conocer alguna de la terminología empleada en este entorno.

Frame o Fotograma : Un frame es un fotograma como el de las películas, una imagen

estática, y cuando se pasan muchas de forma rápida dan la sensación de movimiento. Animación Frame by Frame: Es la animación 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: Interpolación de movimiento, lo que hace es "rellenar" los fotogramas

vacíos de una animación, es decir, se estable en una posición inicial a un objeto y en una posición final. La interpolación de movimiento calcula donde debería estar el objeto en los frames intermedios.

Shape Tween: Similar al MotionTween, pero esta vez juega con las formas (solo

trabaja con vectores, no imágenes ni objetos). El resultado suele ser no muy bueno al principio, por lo que se tiene que trabajar bastante la animación. Línea del tiempo o time line : Esta formada por los frames, no es más que "el rollo de

película" que contiene a los fotogramas. Cada Movie Clip (clip de película) 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 película. 12 FPS significa que se ejecutarán 12 frames en un segundo. La velocidad por defecto es 12 fps, aunque 24 y 30 fps también 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 arrastrándolas a tu gusto, las que estén por encima "taparán" 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 atrás 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 existía algo, éste será reemplazado por el nuevo objeto.

La problemática con las fuentes Una fuente(Font) es una tipografía, un tipo de letra, como por ejemplo "Arial", "Verdana", "comic Sans",...etc. FLASH tiene 3 tipos de campo de texto, los estáticos, los dinámicos y los de introducción de texto. Muchas veces usamos letras que no están en todas las computadoras, por eso FLASH puede añadirlas a los SWF con el fin de que el resultado se vea igual en todos los equipos, en caso de que no estuvieran y no se "exportarán" (o se embeben) en el SWF FLASH usaría la más "parecida", volviendo en impredecible el resultado final.

En los campos estáticos FLASH transforma el texto en formas a la hora de crear el SWF, con lo que quizás pueda perder algo de calidad y se vea "borroso" para eso están los píxel fonts.

44


Propuesta

Es importante saber que a partir de la versión MX 2004 (versión 7) de FLASH y las posteriores tienes una opción que hace un poco mas fácil las cosas con las tipografías. Existen tipografías que como las pixel fonts fueron diseñadas para pantalla, una de las más populares es Verdana, esta tipografía fue diseñada para caer justo en los pixels en varios tamaños de punto del 9 al 12 y aún más.

Usando la opción de “texto de alias” que está en las propiedades de texto, reconoce la

fuente de píxel y la acomoda automáticamente, por lo que no hace falta ubicarlas en coordenadas absolutas.

Ejemplo

Píxel Fonts... pero que son? Estas son fuentes de pequeño tamaño, que están hechas a base de pixels para que se vean bien. Su tamaño en general suele ser 8 o múltiplos de 8 (16, 24,32,....etc.). Además de eso los campos de texto que las contengan tienen que estar en coordenadas exactas (por ejemplo 32.0 51.0 etc.) y alineados a la izquierda. Esto es, porque al estar hechas a base de píxeles, los rellenan por completo y no crean esa sensación de estar "borrosas". (Explicación: Cuando un píxel 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 sensación de borroso).

45


Propuesta

Conozcamos el interior de FLASH…

Muchos podrían confundirse con términos como "instance names" o "nombres de instancia", de exportar las fuentes (embedFonts) y otros más, así que explicaremos un poco.

FLASH usa un lenguaje de POO (Programación Orientada a Objetos), hay que diferenciar entre un Objeto y una Instancia; imaginémonos por un momento en el mundo de los automóviles, para nosotros los objetos (solo conceptos) serán los "coches en general" y las instancias "coches específicos", 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 "Símbolos" en la Biblioteca, le puedes cambiar el nombre a los símbolos, pero ese NO ES su instance name. Los instance name servirán al igual que las matriculas, para diferenciar e identificar ciertos objetos, a fin de poder controlarlos mejor. Quizás hayas oído 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 programación 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.

¿Cuál es su función? Eso depende para lo que estén programados, pero para poner un ejemplo, imagina que quieres poner un calendario en varias paginas webs, podrías ir y programarlo en cada una de las paginas o por el contrario lo programas una vez, lo conviertes a símbolo y en el resto de paginas solo tendrás que ponerlo en el escenario y listo, ya funcionará. La creación de componentes es un tema "avanzado" y no es el objetivo de esta guía, 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 podrían ahorrar trabajo (o tal vez no, ya que normalmente suele ser difícil o complicado cambiar su aspecto gráfico), sin embargo ahí están las oportunidades.

46


Propuesta

Programación en archivos externos

FLASH facilita la programación añadiendo soporte a los archivos externos, estos son usados como las librerías de otros lenguajes o incluso como clases. FLASH a la hora de compilar tomará el contenido de ese archivo externo y lo añadirá al SWF. Esto es útil si programas alguna función o método que rehusarás en varios proyectos, si lo tienes en un archivo externo, solo tendrás que modificar UN archivo, mientras que de otra forma tendrías que modificar todos y cada uno de los SWF (aunque más bien serían los FLA) que contengan esa función.

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 más intentándolo uno mismo que tomando el código de los demás, así que : NO PIDAS CÓDIGO 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 animación con una forma que se transforme en otras usando la Interpolación de formas . 2) Crear una animación que use Guía de movimiento . 3) Crear la animación de un átomo con 3 orbitas y su electrón en cada una de ellas, todo debe tener movimiento. 4) Crear la animación del sistema solar con sus planetas. 5) Crear un texto animado. Ejercicios para la semana dos 1) Crear la animación de un bosque con aves y mariposas o 2) Crear la animación de un acuario 3) Crear un proyecto de página web con diseño libre donde se involucren imágenes trabajadas con Photoshop y efectos de animación con Flash (botones, menús, sonido y video).

48


Propuesta

EJERCICIOS PRACTICOS1

1. PRIMERA ANIMACIÓN Crear el movimiento de un objeto.



Abrimos FLASH y seleccionamos un documento nuevo.

Después con la herramienta Rectángulo (R,O,R,O) dibujamos una imagen circular o elíptica.

Quedará algo como se muestra en la imagen dentro del Área de trabajo, nota que el color del círculo viene dado por los colores que vengan por default.

A continuación podemos hacer varias cosas:

1. Cambiar de color la imagen, para ello damos un clic en la herramienta Selección (V) y luego le damos clic a la imagen, a continuación en la sección 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

Estos ejercicios fueron elaborados para FLASH 9 (CS3)

49


Propuesta

sección un degradado en donde dice Tipo, ahí se muestran los diferentes tipos de degradado (Sólido, Lineal, Radial , etc) siéntete con la libertad de explorar y experimentar con estas opciones hasta que encuentres lo que más te guste. 2. Enseguida debes convertir la imagen (que es un objeto) en Símbolo, ya que es un requisito para que éste pueda ser animado. Para ello selecciona la imagen y en el menú Modificar elige la opción Convertir en símbolo o bien solo presiona F8. En la ventana que aparece ponle un nombre significativo al objeto que lo identifique fácilmente y en Tipo elige Clip de película y da Enter. 3. Ahora debemos empezar a trabajar en la línea de tiempo con los frames, para ello da un clic en el fotograma 25 y con el botón derecho da un clic en la opción Insertar fotograma clave o bien también lo puedes crear oprimiendo F6 , mueve el objeto a la posición que quieras. Inserta un nuevo fotograma clave en la posición 40, mueve el objeto nuevamente a la posición que quieras, repite esto dos veces más. Prueba el resultado dando un Enter. 4. Como te habrás dado cuenta el resultado es muy básico y se ve al círculo moviéndose de una forma muy “burda” de un lado a otro.

5. Esto lo corregiremos utilizando lo que se conoce como Interpolación de movimiento, para ello haremos esto; posiciónate en el frame 13 dándole un clic, verás que se crea un fotograma da clic derecho en este fotograma y elige la opción del menú Crear interpolación de movimiento, notarás que se cambia a un tono azul y aparece una línea 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 decidirás tú dependiendo el proyecto que estés realizando.

Algo importante a considerar es que si en vez de una línea continua te aparece una puntuada es que haz cometido algún error, uno de ellos es que solo se puede tener un símbolo en una sola capa, hay un fotograma clave vacío, o bien que el objeto no es un símbolo, o que haya mas de un objeto dentro del fotograma clave. Prueba ahora nuevamente dando Enter. 6. Ahora probemos lo siguiente; ubícate en el frame 25 (donde hay un fotograma clave) selecciona la herramienta Transformación libre (Q) , nota que al circulo le aparecen una marcas, toma alguna de ellas y hazle un cambio (modifica su tamaño, su posición, cámbiale el color, etc). 7. Si quieres cambiar el color sigue estos pasos; en la pestaña Propiedades ubicada en la parte inferior de la pantalla, te aparecerá algo como esto:

50


Selecciona aquí el tipo de color que aplicarás: Brillo, Tinta, Alfa, Avanzado.

Propuesta

Selecciona el % que aplicarás, entre mayor el % será más notorio el cambio.

En el caso del color Alfa, cuando lo seleccionas y le bajas el % la imagen se va diluyendo.

8. Ve seleccionando los demás frames donde están los fotogramas clave y aplícale algún cambio, incluso puedes borrar ese objeto y dibujar uno nuevo (pe, un cuadrado) si haces esto notarás que la interpolación se vuelve a una línea punteada, esto es porque se ha perdido el link con los otros frames, dibuja un nuevo objeto y no se te olvide convertirlo a símbolo (con F8) y vuelve a crearle la interpolación, ahora prueba dando Enter.

51


Propuesta

2. EJERCICIO CON MASCARA Y TEXTO

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 través del cual se verán 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 tamaño 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 Transformación tamaño 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 visualización 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. Sitúate en el primer fotograma de la capa Rojo y mediante la herramienta Rectángulo dibuja un rectángulo vertical rojo y sin contorno situado hacia la zona izquierda tal y como se muestra en la figura. 10. Mediante la herramienta Transformación libre inclina el rectángulo a la derecha tal como se ve en la figura. 11. Haz clic con el botón derecho sobre el primer fotograma de esta capa y selecciona la opción Interpolación de movimiento. 12. Selecciona ahora el fotograma 20 de la misma capa y pulsa F6 para crear un fotograma clave y concluir la interpolación. 13. Lleva el rectángulo hacia el lado derecho del texto y mediante la herramienta Transformación libre inclina el rectángulo ahora hacia la izquierda. Puedes probar el movimiento desplazando el cabezal de la línea de tiempo y veras el movimiento de izquierda a derecha y el cambio de la inclinación en los objetos. 14. Sitúate en el primer fotograma de la capa Amarillo y mediante la herramienta rectángulo dibuja un rectángulo vertical amarillo y sin contorno situado sobre la zona derecha del texto tal como lo muestra la figura. 15. Mediante la herramienta Transformación libre inclina el rectángulo hacia la izquierda.

16. Haz clic con el botón derecho sobre el primer fotograma de esta capa y selecciona la opción Interpolación de movimiento .

53


Propuesta

17. Selecciona el fotograma 20 de esta misma capa y pulsa F6 para crear un fotograma clave y concluir la interpolación. 18. Lleva el rectángulo hacia el lado izquierdo del texto y mediante la herramienta Transformación libre inclina el rectángulo ahora hacia la derecha. Puedes probar el movimiento desplazando el cabezal de la línea de tiempo y veras el movimiento de izquierda a derecha y el cambio de la inclinación en los objetos. 19. Sigue el mismo procedimiento explicado en los pasos anteriores para crear en la capa Verde una Interpolación de movimiento en la que un rectángulo 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 Interpolación de movimiento en la que un rectángulo 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 línea de tiempo verás cómo se mueven las cuatro figuras creadas.

54


Propuesta

Creación del fondo

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 nómbrala Fondo situándola debajo de todas las demás. 23. Dibuja en esa capa un rectángulo de color azul (recuerda que puedes usar el color de tu preferencia) sin contorno que abarque la totalidad del texto.

Creación de la mascara Ahora vamos a “transparentar” el texto utilizando para ello una mascara.

24. Haz clic con el botón derecho sobre la capa Texto y selecciona la opción Mascara, la capa inmediata inferior, es decir, Rojo habrá quedado también enmascarada, aunque también debemos con el resto de las capas. 25. Para ello haz clic con el botón derecho sobre cada una de las capas de colores y selecciona la opción Propiedades, en la ventana que se abra selecciona la opción Con mascara. 26. Finalmente reproduce la animación con Ctrl+Enter para ver el efecto conseguido.

55


Propuesta

3. EJERCICIO ANILLO GIRANDO

Pasos 1. Abre un nuevo documento y en el menú Modificar/Documento o bien Ctrl+J establece el tamaño de escenario que creas conveniente así como establece un color (incluso puedes usar una imagen de fondo para que este ejercicio se vea más atractivo, también establece la velocidad de los frames (fps) a 42. 2. Toma la herramienta Ovalo (O), en la pestaña de Propiedades ajusta los valores como se ve en la figura que se muestra más 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.

Ajustar estos valores como se muestra en esta imagen.

3. Una vez hechos los ajustes dibuja un círculo. Mientras aún esta seleccionado el círculo presiona F8 para convertirlo a símbolo y eligiendo C lip de película. 4. Da un clic en el fotograma 15 y presiona F6. Mientras aún estas en el fotograma 15 elige en el menú Modificar/Transformar/Voltear horizontal. 5. Crea una Interpolación de movimiento posicionándote en cualquier parte de la zona gris de la línea de tiempo dando clic con el botón derecho del mouse y seleccionando la opción respectiva. 6. Da un doble clic en la capa 1 y renómbralo como Círculo1, después de esto toma la herramienta de Selección (V) y selecciona todos los fotogramas de la capa Circulo1, para hacer esto posicionándote en el fotograma 1 y sin soltar con el botón izquierdo del mouse arrastra hasta el fotograma 15, ahora con el botón derecho selecciona Copiar fotogramas . 7. Ahora crea una nueva capa y renómbrala como Circulo2, posiciónate en el fotograma 1 y con el botón derecho del mouse elige de la lista Pegar fotogramas. 8. En la pantalla deberás tener algo como esto,

56

Manual de Practicas Herramientas Web Photoshop y Flash

Recommend Documents