ComoCrearTuWeb (CCTW)

Yaneth · Publicado: Sab Nov 03, 2007 7:31 pm **Asunto**: tutorial logo cctw

Hola chicos, intenté hacer un tutorial del logo de cctw
es el primero que hago asi que veamos que sale

Primero necesitamos la imagen, yo busque una y me encontré esta

de hecho ya es un gif, pero la modificaré un poco
la cara la pueden bajar de aqui
http://perso.gratisweb.com/reparacion_de_rines/tuto/cara.psd
para abrir, la imagen la selecciono con el boton derecho
y selecciono abrir-con: image-ready (este programa viene junto al photoshop)

teniendola con image-ready, veo que tiene muchos fotogramas, pero no los necesito todos, ya que una de las reglas del concurso era que pesara muy poco

ahora copiare los fotogramas en un documento nuevo,
los seleccionamos primero en la ventana de abajo (animacion, luego con la herramienta que está arriba (al lado der rectangulo) la arrastro hasta el nuevo documento que he llamado fotogramas

aqui vemos ya todos los fotogramas en un documento nuevo

guardo este documento Archivo-Guardar como: fotogramas.psd

Ahora abro ese archivo con el photoshop

Solo utilizaré 3 fotogramas 2,3,5 abro un nuevo documento de 100x100pixeles, selecciono el fotograma 2, y lo arrastro hacia el nuevo documento

selecciono el fotograma 3 y lo arrastro, poniendolo encima del 2 que ya tenia, hago lo mismo con el fotograma 5, dando doble clik le puedo cambiar el nombre, y los he llamado 1,2,3 respectivamente

abro la ventana de animacion Ventana-animacion, y le agrego fotogramas nuevos (a la ventana de animacion, la que está abajo, para agregarle dumentos seleccionamos el dibujito que parece una hoja, con que tengamos 4 fotogramas abajo serán suficientes
ahora oculto, todas las imagenes, presionando sobre el ojo de la ventana de capas, lo hacemos con todas, primero selecciono el numero 1 de la ventana de animacion, y le quito todos los ojos de la ventana de capas,
selecciono la 2 de animación y quito todos los ojos
asi no miraremos nada en la ventana de animacion, ahora, volvemos a la ventana 1 de animacion, y abrimos el ojo de la capa 1 de la ventana de capas Confused

seleccionamos el fotograma 2 de la ventana de animacion y abro el ojo de la capa 2 de la ventana de capas

selecciono el fotograma 3 de la ventana de animacion y ahora le abrire el ojo a la capa 1 de la ventana de capas

selecciono el fotograma 4 de la ventana de animacion y le abro el ojo de la capa 3 de la ventana de capas
hasta ahora ya debemos tenerlas acomadadas en orden si damos clic en reproducir de la venta de animacion veremos el movimiento, si hay alguna que no está bien acomodada solo la seleccionamos y la movemos, para que todas queden en el mismo lugar, y no se vean brincos en la animacion.

ahora les borraré la cara a los 3 fotogramas que tenemos pueden usar la herramienta que deseen yo prefiero el borrador en forma de cuadro,

deben tener cuidado en borrar lo mismo de todos los fotogramas

para facilitar la tarea hago un zoom presionando ctrl-+ las veces que sea necesario
y nos quedará asi:

ahora abro la imagen que ya tengo lista de la cara

la selecciono y la arrastro hasta el documento en el que estamos trabajando

Ahora debe estar encima de todas las demas, nosotros la necesitamos abajo, asi que seleccionamos la capa cara, y la arrastramos para que quede debajo de la capa 1 (estamos en la ventana de capas)
y la movemos para que quede en su lugar

ahora tenemos que pintar las manos del mono, para que sean amarillas tambien, para eso seleccionamos el gotero, y lo ponemos sobre un area de la cara, necesitamos dos tonos uno claro y uno obscuro para darle la sombra a las manos

para facilitar esta tarea yo uso el rectangulo, selecciono areas pequeñas para pintar, teniendo cuidado, en pintar de claro y obscuro respectivamente, pintaremos las manos de los 3 fotogramas

Listo ya tenemos el gif, modificado, ahora lo guardaremos
Archivo-Guardar como: listo.psd
Y lo abriremos con el image-ready
ya aqui no moveremos nada, porque ya quedo listo con el photoshop, solo lo guardaremos con extencion .gif Archivo-Guardar optimizado como:

y le he pusto listo.gif

me sale la siguiente ventana
me dice algo como que si quiero que se repita todo el tiempo o solo una vez, como ya esta seleccionado todo el tiempo solo le doy aceptar

y listo ya tenemos nuestro gif

si queremos agregarle texto, o algo mas lo hacemos en photoshop, podemos hacer mas grande el lienzo,
en Imagen-tamaño de lienzo,

asi nos quedó

Solo he mostrado la forma en que modifique el mono del logo,
espero haberme explicado bien
cualquier cosa aqui mismo responderé
saludos

yaneth

_________________
______________________________________

reparacion de rines

_____________________________________

*Blaizer* · Publicado: Sab Nov 03, 2007 9:27 pm **Asunto**:

Genial! Yaneth, un estupendo Tutorial. Wink

Ahora no tengo tiempo para hacerlo pero en cuanto me desocupe, lo haré.
Si me sale alguna duda postearé aquí.

Excelente trabajo Yaneth, lo veo muy explícito.

Saludos Wink

_________________
Anatomía Humana

Sasuke · Publicado: Dom Nov 04, 2007 3:38 am **Asunto**:

Ya me quede estupefacto, sin duda tenes muxo talento con photoshop
_________________

http://mxnaruto.webcindairo.com
http://mxnaruto.mforos.com

jorgens · Publicado: Dom Nov 04, 2007 7:15 am **Asunto**:

Esta es mi Yaneth! Wink

Gracias!
_________________

RAPIDO · Publicado: Mie Nov 07, 2007 10:07 pm **Asunto**: dUDA

Todo eso con el adove photo shop, ..no?...pero esta seccion de de Paint Shop Pro, q es de Corel. Es decir, animaciones se hacer con el adove Photoshop o se pueden Hacer con el Paint so pro de corel?.

Vaya jaleo, si a uno le pusieran pepe y a otro juan no habria tanto lio jajaj.
_________________
------------------------------------------------------
http://www.proyectostipo.com

Yaneth · Publicado: Mie Nov 07, 2007 10:16 pm **Asunto**:

Asi es, todo está con photoshop

y por eso lo puse en esta seccion que es de photoshop

Saludos
_________________
______________________________________

reparacion de rines

_____________________________________

psi · Merodeador Registrado: 09 Nov 2007 Mensajes: 3

Lindo tutorial, la verdad no se manejar el image ready del photoshop. yo mas bien me especializo en los diseños con el photoshop, por cierto les voy a hacer tutos para ke hagan cosas para sus web y tmb tutos para ke aprendan a hacer firmas, eso es como un agradecimiento por el maravilloso tuto para hacer web ^^
_________________

Yaneth · Publicado: Vie Nov 09, 2007 6:48 pm **Asunto**:

Gracias

eso estaría muy bien

yo tampoco uso el image ready, solo lo utilzo para guardar como gif

jejej

saludos
_________________
______________________________________

reparacion de rines

_____________________________________

kam1kaz3 · Publicado: Mie Nov 28, 2007 6:11 pm **Asunto**:

una pregunta..

como arrastro los fotogramas al otro documento con que herramienta porque no puedo de ninguna de las formas..

Gracias
_________________
Vamos aprender un rato..

Yaneth · Publicado: Mie Nov 28, 2007 7:02 pm **Asunto**:

Hola

si te fijas en esta imagen

en la paleta de la izquierda a un lado del rectangulo punteado
esa es la herramienta que utilizar para arrastrar los fotogramas

saludos
_________________
______________________________________

reparacion de rines

_____________________________________

kam1kaz3 · Publicado: Jue Nov 29, 2007 5:24 am **Asunto**:

ok pérfecto
ahora una pregunta mas
cual es el borrador de cuadro (Herramienta)
k nu la encuentro
:S

salu2 y gracias por tu tiempo y ayuda
_________________
Vamos aprender un rato..

Yaneth · Publicado: Jue Nov 29, 2007 5:07 pm **Asunto**:

Hola

mira esta imagen

está seleccionado el borrador
y en la parte de arriba dice:
modo: cuadrado

saludos
_________________
______________________________________

reparacion de rines

_____________________________________