Bueno amigos,en el programa de hoy vamos a ver como hacer animaciones gitanas como las del Xanto ^^.

1º Lo primero que hay que entender es que la animación no la vamos a hacer toda seguida, sino imagen a imagen, y luego juntaremos todas las imagenes(ver mas adelante) y las pondremos a la velocidad que queramos para dar sensación de que es una imagen que se mueve.

Ejemplo Práctico a velocidad 30:

+++=

2ºDespues de entender esto(espero que no haya costao mucho^^),vamos a lo siguiente,dibujar cada una de las imagenes que luego juntaremos(ver más adelante todaví­a).Para esto se puede usar cualquier programa,yo antes las hacia con el Paint,pero es mucho más práctico hacerlo con el Photochó o con el Photoimpact ya que en el Paint cada vez que mueves una cosa en cuanto la deselecciones ahi se queda,mientras que en los otros puedes mover el objeto las veces que quieras en la misma imagen.

Para esto tienes que imaginarte como quedaria en movimiento la imagen que estas dibujando con la anterior y todo irá bien.

Muy importante que todas las imágenes las guardes con extensión .GIF

3ºAhora viene cuando abres cualquier programa capaz de unir esas imagenes anteriores(llegamos al punto prometido por los paréntesis^^),como por ejemplo el Banner Maker Pro o el Microsoft Gif Animator.Por poner un ejemplo en el Banner Maker Pro abres la pestaña "Animation",pinchas en "frame by Frame",vas añadiendo las imágenes en "Add Frame" y cambias el numerito de la velocidad de cada una,10 o 20 de velocidad suele ir muy bien,pero algunas partes necesitarás ponerle mas tiempo para que la persona que lo vea se de cuenta de esa acción o de lo que pone en ese texto.

4ºLo más gratificante,darle al "Save" y ver como ha quedao esa peasso animación gitanar tuya,jarl!

Unos ejemplos:


    

Si se me ha olvidao algo o algun paso no ha quedao claro decidmelo plis y lo editare.

EDITADO:Gracias a Fulgurator por el link para Microsoft Gif Animator:http://www.softonic.com/ie/22448/Microsoft_GIF_Animator y gracias a taraldarion por recordarme las norm....digo...por este otro link para gimp:http://gimp-win.sourceforge.net/stable.html

Ale,despidiendome de tos aquellos frikis que leen esta guia no muy util pa hacer animacion gitanas,un saludo  :wink:

P.D:Xantomen no se hace cargo de los daños psiquicos que puedan causar a las personas la paciencia de hacer animaciones,asi como no se hace cargo de los daños fí­sicos del ordenador cuando se ponga usted de los nervios y lo destroze a puñetazos.

////////////////////////////////////////////////////////////////////
///////////////////  Aí‘ADIDO DE BARAUG ////////////////////
////////////////////////////////////////////////////////////////////

llevo utilizando el Photo desde hace muxo tiempo ya, y la clave son las capas, cosa q se diferencia de muxos programas de diseño grafico, yo ahora estoy estudiando un curso de diseño, pero de video como after effect y max estudio, y el photoshop es la clave para poder tener la base a todo el diseño, para q os hagais una idea los q  todavia no han podido comprobar lo q pueda hacer un Photoshop, y en detalle el Cs, aki os dejo uno de los tutos q vienen con el programa para q vayais exandole un vistazo :wink:

Crear una imagen utilizando capas

--------------------------------------------------------------------------------

Al construir una imagen con diferentes elementos (color de fondo, texto, formas y fotografí­as), las capas de Adobe Photoshop le proporcionan un control creativo absoluto. En este tutorial, aprenderá a crear una imagen con varias capas, aplicar una máscara de capa y añadir una capa de texto.


1. Abra una imagen en Photoshop.

Seleccione Archivo > Abrir o haga doble clic en una miniatura del Explorador de archivos.

Por defecto, debe aparecer la paleta Capas. Si no es así­, seleccione Ventana > Capas. En la paleta Capas se muestran todas las capas del documento con el nombre de cada una y una miniatura de la imagen que contiene.


2. Convierta la capa de fondo.

En la paleta Capas, haga doble clic en la capa de fondo. Haga clic en OK en el cuadro de diálogo Nueva capa. Convertir la capa de fondo en una capa normal le permite utilizar transparencias en esta capa. Ahora puede ver u ocultar la capa utilizando el icono de ojo. Haga clic en el icono de ojo en una capa. Observe que el icono desaparece y la capa se oculta. Haga clic en el cuadro del icono vací­o. Vuelven a aparecer el icono de ojo y el contenido de la capa.


3. Aplique una máscara de capa.

La máscara de capa le permite seleccionar y mostrar sólo la parte de la imagen que desea utilizar sin alterar la imagen. En este caso, aplicaremos la máscara a toda la imagen a excepción de un área circular de la flor. Haga clic y mantenga pulsada la herramienta Marco rectangular y, a continuación, seleccione la herramienta Marco elí­ptico del menú emergente. Mantenga pulsada la tecla Mayús para restringir la selección a un cí­rculo y, a continuación, arrastre el puntero por un área de la imagen. En la paleta Capas, haga clic en el icono Añadir máscara de capa.

Ahora sólo es visible el área seleccionada. Puede cambiar el área visible moviendo la máscara por la imagen. Primero haga clic en el icono de enlace para desenlazar la máscara de la capa. Seleccione la herramienta Mover y, a continuación, haga clic dentro de la máscara y arrástrela para volver a colocarla. Una vez que tenga la posición final, haga clic en el icono de enlace para volver a enlazar la máscara con la capa. Ahora puede mover la capa junto con la máscara.


4. Añada un efecto de trazo.

Haga clic en el botón Añadir estilo de capa situado en la parte inferior de la paleta Capas y, a continuación, seleccione Trazo en el menú. Seleccione los ajustes de trazo en el cuadro de diálogo Estilo de capa, incluidos el color, el tamaño y la posición del trazo.


5. Cree una nueva capa.

Haga clic en el botón Crear una capa nueva para añadir una nueva capa a la imagen. La nueva capa de añade encima de las capas existentes y pasa a ser la capa seleccionada. Haga clic en la muestra de color de fondo y seleccione un color con el selector de color. Seleccione la herramienta Bote de pintura (situada junto con la herramienta Degradado del cuadro de herramientas) y haga clic en cualquier lugar de la imagen para crear el relleno.

6. Reorganice las capas.

Haga clic en la nueva capa y arrástrela debajo de una capa inferior. Si se cambia el orden en el que están apiladas las capas, determinadas partes de la imagen aparecen delante o detrás de otras capas.


7. Añada una capa de texto.

En la paleta Capas, haga clic en la capa superior. Seleccione la herramienta Texto y haga clic en la imagen. Aparece el cursor de texto. En la barra de opciones, cambie el tamaño, la fuente, el estilo o el color del texto a su gusto. Al añadir el texto, Photoshop lo coloca automáticamente en su propia capa, donde puede editarlo por separado sin alterar el resto de la imagen.

Para editar el texto, selecciónelo con la herramienta Texto y, a continuación, cambie cualquiera de los ajustes en la barra de opciones. Para mover el texto, seleccione la herramienta Mover y, a continuación, arrastre el texto.


8. Añada un efecto al texto.

Haga clic en el botón Añadir estilo de capa y seleccione Sombra paralela en el menú. Puede cambiar el color o el ángulo de la sombra, o realizar otros ajustes en el cuadro de diálogo Estilo de capa.

En la paleta Capas, el efecto de capa se muestra con el nombre de la capa. Puede activar o desactivar la visualización del efecto de capa haciendo clic en el icono de ojo junto al efecto.



--------------------------------------------------------------------------------
Utilizar las herramientas de selección de Photoshop

--------------------------------------------------------------------------------

¿Le cuesta decidir cómo seleccionar parte de una imagen? Adobe Photoshop le proporciona varias herramientas para ayudarle a seleccionar sólo las áreas que necesite. En este tutorial, aprenderá la mejor manera de utilizar cada una de las herramientas de selección. Puede practicar con la imagen del águila, que se encuentra en la carpeta Photoshop CS/Muestras.


1. Utilice la herramienta Varita mágica para seleccionar el fondo de la imagen.

Dado que el águila de esta imagen tiene una forma bien definida y los colores del águila son distintos al verde de fondo, podemos seleccionarlo con la herramienta Varita mágica. Seleccione la herramienta Varita mágica y, a continuación, haga clic en cualquier lugar del fondo verde. El área verde queda rodeada por un marco y pasa a ser editable. Para comprobar que el águila queda protegida, arrastre un pincel sobre la imagen


2. Invierta la selección.

Puesto que ha sido tan sencillo seleccionar este fondo, invertiremos la selección para que sólo quede seleccionada el águila. Elija Selección > Invertir. Verá que el borde de selección cambia y el águila queda rodeada. í‰ste es un método fácil para realizar una selección cuando se tiene una imagen como la del águila. Ahora podrí­a trabajar con el águila sin alterar el fondo de la imagen. Pero, en este punto, elija Selección > Deseleccionar para poder probar otra herramienta.


3. Utilice la herramienta Marco elí­ptico para seleccionar el ojo del águila.

Seleccione la herramienta Marco elí­ptico y arrastre el puntero para dibujar un borde de selección alrededor del ojo del águila. Para cambiar la posición del borde de selección mientras dibuja, mantenga presionada la barra espaciadora y arrastre el borde de selección a una nueva posición. Para mover el borde de selección después de crearlo, haga clic en cualquier lugar dentro del borde y arrástrelo.


4. Utilice la herramienta Lazo magnético para seleccionar el pico del águila.

Seleccione la herramienta Lazo magnético (situada junto a la herramienta Lazo del cuadro de herramientas) y, a continuación, haga clic y arrastre por el pico. La herramienta Lazo magnético realiza selecciones de forma libre más fácilmente porque crea trazos alrededor de un objeto. Funciona mejor cuando se tiene un borde claramente definido, como el pico del águila. La herramienta coloca anclas a medida que arrastra (puede eliminar anclas mientras arrastra pulsando la tecla Supr). Para finalizar el borde de selección, haga clic en el punto de ancla inicial (o doble clic). Puede mover el pico utilizando la herramienta Mover. Seleccione Edición > Deshacer para devolver el pico a la posición correcta. A continuación, elija Selección > Deseleccionar para deseleccionar el pico.


5. Añada a una selección.

Seleccione la herramienta Marco para realizar una selección rápida del cuerpo del águila. Una vez realizada la selección, puede añadir al borde de selección sin tener que empezar de nuevo. Seleccione la herramienta Lazo magnético y haga clic en el icono Añadir a la selección de la barra de opciones. Precise la selección arrastrando por la parte exterior del águila (verá un pequeño signo más bajo el puntero de la herramienta). Suelte el ratón. El borde de selección incluye ahora el área seleccionada con la herramienta Lazo magnético.


-------------------------------------------------------------------------------- :wink:

////////////////////////////////////////////////////
////////// Aí‘ADIDO 2º DE BARAUG ///////////
////////////////////////////////////////////////////

Y esto acerca de las animaciones gitanas      en photoshop cs con image ready   tb de disco

Acerca del trabajo con capas en rollovers y animaciones

--------------------------------------------------------------------------------

En ImageReady se trabaja con capas para crear botones de rollover y animaciones. Al situar el contenido de imagen de un rollover en una capa propia, puede realizar cambios en el estilo, la visibilidad y la posición de la capa para crear efectos de rollover. Del mismo modo, al situar cada elemento de una animación en una capa propia, se establecen como objetos independientes y le permite cambiar la posición y apariencia del objeto a lo largo de una serie de cuadros.

También puede trabajar con efectos de rollover en sectores de capas distintos a los seleccionados. Puede utilizar estos rollovers remotos para crear efectos como el inicio de una aplicación o la ejecución de una animación en el estado Sobre. Consulte Crear rollovers remotos.


Ilustración de un rollover. El botón está en su propia capa; los efectos se añaden a la capa para crear un nuevo aspecto del botón para el estado Sobre. El texto de la palabra "EVENTS" también aparece en una capa independiente.

Ilustración de una animación. La imagen de la bicicleta está en su propia capa; la posición de la capa cambia en cada cuadro de la animación.


Editar capas en estados de rollover y cuadros de animación

--------------------------------------------------------------------------------

Algunos de los cambios que realiza en las capas afectan sólo al estado de rollover o cuadro de animación activo, mientras que otros afectan a todos los estados y cuadros en los que se incluyen las capas.

Cambios especí­ficos de estados y cuadros

Afectan sólo al cuadro de animación o estado de rollover activo. Por defecto, los cambios que realice en una capa con los comandos y opciones de la paleta Capas, incluidos la opacidad de una capa, el modo de fusión, la visibilidad, la posición y el estilo, son especí­ficos de estados y cuadros. Sin embargo, es posible aplicar cambios de capas a todos los estados de un rollover y a todos los cuadros de una animación mediante los botones para unificar de la paleta Capas. (Consulte Unificar y aplicar rollovers y animaciones de capa.)

Importante: Los cambios que realice en las capas en el estado Normal o Cuadro 1, incluida la opacidad de una capa, el modo de fusión, la visibilidad, la posición y el estilo, afectan a todos los estados o cuadros en los que las capas son idénticas. Por ejemplo, piense en una selección que tenga un estado Normal, un estado Sobre y un estado Abajo. Si las capas de los estados Normal y Sobre son idénticas y aplica un estilo de capa en el estado Normal, el estilo de capa también se aplicará en el estado Sobre.

Cambios generales

Afectan a cada estado y cuadro en el que estén incluidas las capas. Los cambios que realice a los valores de pí­xel de la capa mediante herramientas de pintura y edición, comandos de ajuste de color y tono, filtros, texto y otros comandos de edición de imágenes, son cambios generales.


Unificar y aplicar rollovers y animaciones de capa

--------------------------------------------------------------------------------

Por defecto, los cambios que realice en una capa con los comandos y opciones de la paleta Capas, incluidos la visibilidad de la capa, la posición y el estilo, sólo se aplican al cuadro o estado (a no ser que esté trabajando en el estado Normal o el Cuadro 1). Sin embargo, puede utilizar los botones para unificar de la paleta Capas y el comando Coincidir para aplicar los cambios a todos los estados de un rollover y a todos los cuadros de una animación:

Los botones para unificar determinan cómo los cambios que se realizan en una capa en el cuadro o estado activo se aplican a los otros estados de un rollover o cuadros de una animación. Cuando se selecciona un botón para unificar, los cambios se aplican a todos los estados y cuadros; cuando está deseleccionado, los cambios se aplican sólo al estado o cuadro activo.
El comando Capa > Coincidir le permite aplicar los atributos de la capa para un cuadro o estado existente a otros estados de un rollover y cuadros de una animación.
Para unificar capas en estados de rollover y cuadros de animación:

Seleccione uno o más botones para unificar en la paleta Capas:

Botón Unificar posición de la capa , para aplicar los cambios que realiza en la posición de una capa a todos los estados de un rollover y a todos los cuadros de una animación.
Nota: El botón Unificar posición de la capa sitúa el contenido de la capa seleccionada en el mismo lugar en todos los cuadros de la animación. Si intenta mostrar el contenido de la capa en movimiento en la animación, no utilice este botón.

Botón Unificar visibilidad de la capa , para aplicar los cambios que realiza en la visibilidad de una capa a todos los estados de un rollover y a todos los cuadros de una animación.
Botón Unificar estilo de la capa , para aplicar los cambios que realiza en el estilo de una capa a todos los estados de un rollover y a todos los cuadros de una animación.
Para hacer coincidir una capa existente con todos los estados de rollover y cuadros de animación:

En la paleta Contenido de Web, seleccione el estado o cuadro que tenga los atributos de capa que desea utilizar.
Seleccione la capa que desea hacer coincidir en la paleta Capas.
Seleccione Capa > Coincidir, o elija Coincidir en el menú de la paleta Capas.
Seleccione una de estas opciones del cuadro de diálogo Aplicar capa:
Animación actual, para aplicar los atributos de capa del cuadro seleccionado a todos los cuadros de la animación.
Estados del sector o mapa de imágenes actual, para aplicar los atributos de capa del estado seleccionado a todos los estados del rollover.
Todos los rollovers, para aplicar los atributos de capa del estado seleccionado a todos los estados en todos los rollovers (en la imagen) que contengan la capa.
Seleccione los atributos de capa que desea hacer coincidir y, a continuación, haga clic en OK.
Nota: El ajuste por defecto Propagar cambios de cuadro 1 actualiza de forma dinámica los estados de rollover y los cuadros de animación, en función de un cambio en la posición, visibilidad o estilo de capa del primer cuadro. Si desea que los cambios del cuadro 1 permanezcan en el cuadro 1, desactive esta opción. Para ello, conmútela en el menú emergente de la paleta Capas.

 :wink:  a ver q os parece