Foros ZackYFileS

Foros ZackYFileS (http://foros.zackyfiles.com/index.php)
-   ARTES GRÁFICAS - Diseño, Firmas, WEBS. (http://foros.zackyfiles.com/forumdisplay.php?f=238)
-   -   COMO HACER UNA ANIMACIÓN SENCILLA (http://foros.zackyfiles.com/showthread.php?t=422959)

MDolores 29/03/2006 16:36

COMO HACER UNA ANIMACIÓN SENCILLA
 
Empece un pequeño manual con Photoshop CS2 y como ya van por la 5, voy a intentar actualizar lo que pueda llevar a equivocaciones, dejando lo básico, para que sirva a las personas que buscan manuales en el Youtub (que hay muchísimos) y que por desconocimiendo de las herramientas o de como abrir el programa, no llegan a entenderlos.
Algunas veces he enseñado a traves del mesenger sin que tengan noción alguna, pero me encuentro que digo, coge el pincel y me contestan que donde está? :eek: quieren aprender rápido como se hace una animación pero desconocen donde se encuentran las herramientas y para que sirven, es muy dificil explicarlo de esta forma porque son muchas operaciones para cualquier cosa.

ABRIR ELPROGRAMA CS-5

Con las otras versiones de Photoshop se trabajaba con los dos programas que venian juntos, el imageready y el photoshop pero ahora lo han hecho mas cómodo y con nuevas opciones muy interesantes.

Primero abriremos el programa, colocaremos el espacio de trabajo por defecto y tendremos que activar manualmente varias pestañas.

Como la captura es grande, pongo una miniatura y para verla teneis que pinchar en el enlace que lleva la imagen.
[URL="http://img835.imageshack.us/img835/8964/1abrirprograma.jpg"]http://img835.imageshack.us/img835/8...rograma.th.jpg[/URL]

MDolores 29/03/2006 16:37

Paleta de herramientas

El CS5 es algo distinto de las otras versiones, el imageready ya esta integrado al photoshop, tiene opciones bastante curiosas y la paleta de herramientas también cambia.

http://img146.imageshack.us/img146/4941/2paletacs5.jpg

MDolores 29/03/2006 16:39

Abrir archivo nuevo.
 
Para abrir archivo nuevo se hace así.

[URL="http://img806.imageshack.us/img806/557/3archivonuevo.jpg"]http://img806.imageshack.us/img806/5...vonuevo.th.jpg[/URL]

Luego en los manuales nos lian llamándolo de varias formas:)
Por ser la primera capa la llamamos fondo pero si nos parece muy grande y queremos modificar su tamaño, tenemos que seleccionar TAMAÑO DE LIENZO, cambiar las medidas y aceptar.

Para abrir una imagen que tenemos en el pc...

[URL="http://img808.imageshack.us/img808/8872/4abrirarchivo.jpg"]http://img808.imageshack.us/img808/8...archivo.th.jpg[/URL]

MDolores 29/03/2006 16:40

En proceso de actualizarlo.

MDolores 29/03/2006 16:44

MANERAS DE RECORTAR UNA IMAGEN.

Hay muchas maneras de recortar una imagen, borrando, señalando con el lazo, con la varita mágica o el lazo poligonal, borrando fondo o con el borrador mágico…. unas y otras son distintas y unas se encuentran en el imageready y otras en el photoshop.

DISTINTAS FORMAS DE RECORTAR UNA IMAGEN

La herramienta borrador ya sabemos lo que es, por donde pasemos borra todo, hay que usar una punta pequeña o grande, depende de lo que queramos borrar y tener un poco de habilidad para no pasarnos del trazo.

Borrador mágico borra las zonas que le marquemos y que sean del mismo color (no nos sirve cuando la imagen tiene muchas tonalidades porque quiza borraria cosas que queremos conservar).

Lazo aqui hay que tener mano firme, por eso prefiero el lazo poligonal, que vas trazando por puntos un recorrido que quieras cortar.

La varita magica sirve para marcar una zona del mismo color, una vez marcada la zona seleccionamos suprimir o cortar, es casi lo mismo que el borrador mágico, lo distinto es que el borrador mágico ya lo borra al momento y la varita te deja ver la zona seleccionada antes de eliminarla.

El borrador de fondo solo se encuentra en el Photoshop y es la mejor herramienta para borrar, pero eso lo dejo pendiente para otro dia.

Recortar con calado (queda un pequeño difuminado en los bordes).

http://img105.imageshack.us/img105/5...ecortarwb5.jpg

Para los que le resulte dificil recortar partes de una imagen, hay otro modo muy sencillo….primero seleccionamos el lazo poligonal y mirar en la barra de herramientas superior, hay una ventanita que pone calado, podeis poner un 3 por ejemplo, seleccionamos con el lazo poligonal, una vez seleccionado imagen 1ª, en la barra de herramientas (en selección) pinchamos en invertir, imagen 2ª y cortamos, podeis hacer pruebas con mayor o menor númeroen calado, esto hace un efecto difuso en los bordes, imagen 3ª.

MDolores 29/03/2006 16:48

Empezaremos desde 0 con la cesta de frutas, es la manera mas sencilla de enseñar lo mas básico de una animación.
Copiarla a vuestro pc de la siguiente forma... nos situamos encima de la fruta y boton derecho "guardar como" y la guardamos con el mismo nobre que tiene o el que queramos.

http://img140.imageshack.us/img140/1579/mg07wi.jpg

MDolores 29/03/2006 16:51

RECORTAR Y SEPARAR TODAS LAS FRUTAS
Imagen 1ª
Ahora recortaremos todas las frutas, pensad que estando todas en la misma lámina no podriamos trabajar ni cambiarlas de posición si no las separamos.
Con la herramienta de selección trazamos un cuadrado alrededor de la fruta.
En el menu de arriba seleccionamos "edición", del desplegable "cortar".
Imagen 2ª
Ahora seleccionamos "archivo" y del desplegable "archivo nuevo" aceptamos.
Imagen 3ª
Nos vamos a "edición" y del desplegable "pegar".
Una vez hecho esto le quitaremos el fondo blanco.
Imagen 4ª
Seleccionamos con la varita la zona blanca.
Imagen 5ª
Y otra vez nos vamos al menu .."edición" y "cortar", ahora ya la vemos con el fondo transparente (estos cuadritos nunca se ven).

Tambien se podria darle a la tecla "Supr" la diferencia de una y otra manera es la de que permanece selecionada la zona que hemos cortado y nos iria bien en el caso de querer pintarla.

http://i40.tinypic.com/j63pmv.jpg

MDolores 29/03/2006 16:53

Una vez tenemos todas las frutas recortadas, pasaremos a la cesta y hacer lo siguiente, se trata de recortar la parte exterior de la cesta y trabajar con el interiór como aquí muestro.

http://i43.tinypic.com/9saty0.jpg

MDolores 29/03/2006 16:56

Esta captura consiste en trasladar todas las frutas a un cesto y asumir que con el ojito las podemos activar o desactivar y que si modificamos el orden en el historial, en el cesto cambian de posición.
http://i44.tinypic.com/of0zyw.jpg

MDolores 29/03/2006 16:58

http://i41.tinypic.com/u3ggm.jpg

MDolores 29/03/2006 16:59

http://i42.tinypic.com/i2r09t.jpg

MDolores 29/03/2006 17:00

http://i40.tinypic.com/fjnbjc.jpg

MDolores 29/03/2006 17:02

http://i42.tinypic.com/x1ncc3.jpg

MDolores 29/03/2006 17:03

http://i41.tinypic.com/r903lc.jpg

MDolores 29/03/2006 17:07

Como hacer una animación sencilla
 
http://i42.tinypic.com/vxkl6u.jpg

Colocaremos la parte de la cesta que guardamos, sin tocar nada, fijaros en la ventana 1, 2, y 3, veis como la cesta esta desplazada? pues ahora la vais a fijar con el icono (igual que hicisteis con las frutas.
Cuando lo hayais hecho, vereis como la cesta esta en la misma posición que la 4.

MDolores 29/03/2006 17:09

Vamos a darle un tiempo de desplazamiento, esta animación la pondremos a un segundo por ventana.

http://i39.tinypic.com/27xm90z.jpg

MDolores 29/03/2006 17:10

Guardar la firma.

http://i42.tinypic.com/28hfzmr.jpg

MDolores 29/03/2006 17:12

El gif ya terminado.

http://i41.tinypic.com/9topcn.jpg

MDolores 29/03/2006 17:13

Animación de un pequeño dragón.
 
Ahora se trata de trabajar con este pequeño dragón para en solo tres frames, darle movimiento.

http://img527.imageshack.us/img527/5346/dragonir6.jpg

MDolores 29/03/2006 17:15

http://i43.tinypic.com/ae1jqv.jpg

MDolores 29/03/2006 17:16

http://i42.tinypic.com/21kdsf9.jpg

MDolores 29/03/2006 17:19

http://i39.tinypic.com/5wdppi.jpg

MDolores 29/03/2006 17:21

http://i43.tinypic.com/zrc5i.jpg

MDolores 29/03/2006 17:22

Con solo tres ventanas de animación, el movimiento de las alas es poco realista, lo ideal seria con mas capas de alas y mas movimientos en cada una de ellas, pero no he querido liaros mas.
Le ponemos el tiempo de desplazamiento 0,1 y nos vamos al imageready para guardarla en gif y a 128 de calidad.

http://i40.tinypic.com/1z6e2qb.jpg

MDolores 29/03/2006 17:24

Que son los pinceles
 
Los pinceles son imagenes que tenemos (solo en el Photoshop, es como si fueran copiadas) y que podemos echar mano para hacer nuestros fondos.

http://i43.tinypic.com/15zifte.jpg

MDolores 29/03/2006 17:26

Pinceles
 
A los pinceles se les pude sacar mucho partido si jugamos con la paleta de las opciones que tienen los pinceles ( se encuentran arriba en la barra de herramientas.
Estas opciones pueden ser... cambios de color, de tamaño, dispersión, etc.

[URL=http://imageshack.us]http://img128.imageshack.us/img128/3...nceles2dy1.jpg[/URL]

MDolores 29/03/2006 17:27

Las opciones de fusión se encuentran en un desplegable cuando pinchamos en "capa" aquí podemos jugar con unas herramientas que nos da tanto el imageready como el photoshop.
El trazo nos pone un hilo negro de cualquier tamaño o de cualquier color alrededor de letras o imagenes.
Sombra, relieve, etc y mas opciones que os invito a ir descubriendo.

IMPORTANTE: Si aplicais un efecto a una capa, acordaros de fijarla igual que hacemos con unificar posición de la capa, en este caso será la de unificar el estilo de la capa porque si no lo hacemos y aplicamos una sombra solo la veríamos en la ventana que la habíamos aplicado.

[URL=http://imageshack.us]http://img128.imageshack.us/img128/5...titulo3nq0.jpg[/URL]

MDolores 29/03/2006 18:42

http://i44.tinypic.com/210bvp4.jpg

MDolores 29/03/2006 18:48

http://i42.tinypic.com/ehhtw.jpg

MDolores 29/03/2006 18:57

http://i42.tinypic.com/sb4zkk.jpg

MDolores 29/03/2006 18:58

http://i43.tinypic.com/55fbqt.jpg

MDolores 29/03/2006 19:07

http://i43.tinypic.com/55fbqt.jpg

MDolores 29/03/2006 19:10

Truquitos
 
http://i43.tinypic.com/55fbqt.jpg

MDolores 31/03/2006 20:18

En que consiste seleccionar con el ojo.
 
http://img223.imageshack.us/img223/1179/ng14aw.jpg

Podría aprovechar que al poner la flor azul queda copiada en todas las ventanas y solo tendría que desplazarla hacia abajo en cada ventana o imagen para conseguir en animación un efecto como lluvia de flores, pero no es eso lo que vamos hacer.

MDolores 31/03/2006 20:19

Deseleccionar

http://img228.imageshack.us/img228/2...ccionar5zq.jpg

MDolores 31/03/2006 20:19

http://img234.imageshack.us/img234/9099/ng31lh.jpg

MDolores 31/03/2006 20:21

Repetimos el proceso

http://img83.imageshack.us/img83/9222/ng43vd.jpg

Repetimos el proceso en las ventanas 4 y 5

MDolores 31/03/2006 20:24

http://img401.imageshack.us/img401/1451/ng5ax3.jpg

Las tres opciones de calidad en que guardamos la imagen, también afecta en el peso de la misma, a mas calidad….mas peso
Para guardarla pinchamos en…/ archivo/ guardar optimizada como….la nombramos con el titulo que queramos y ya está.

MDolores 31/03/2006 20:45

http://img84.imageshack.us/img84/374/perrogato8dl.gif

Básicamente en esto consiste la animación, el resto es cuestión de práctica.

MDolores 31/03/2006 20:47

Dejo el material por si alquien se anima, solo tiene que recortarla.
http://img84.imageshack.us/img84/1025/material3fp.jpg


La franja horaria es GMT +2. Ahora son las 00:07.

Powered por vBulletin™ Version 3.8.10
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.
Traducido por vBsoporte - vBulletin en español
ZackYFileS - Foros de Debate