Tutorial "Radar"

En esta ocasión haremos un gif que pueda ser un poco complicado a la hora de dar detalles, como de su estructura, pero, nada es dificil si se hace con las ganas de aprender, asi que manos a la obra.
Nos vamos a photoshop, abrimos, new, y abrira la siguiente imagen.
<img src="http://usuarios.lycos.es/faraonegipto/radar/images/imag1.gif" border="0" alt="Imagen IPB" />

Haga todo como esta en la imagen anterior, una vez hecho, le damos ok, lo que veremos es un cuadro pequeño, lo aumentamos a 500 %, despues nos vamos a seleccionar en la herramienta, electical marque tool, ahora nos vamos a ver la siguiente imagen.
<img src="http://usuarios.lycos.es/faraonegipto/radar/images/imag3.gif" border="0" alt="Imagen IPB" />

Esto lo vera en la parte superior del programa, claro si esta seleccionada la herramienta electical marquee tool, ponga los anteriore valores, y luego haga click en el centro, donde esta el cuadro blanco, vera el circulo hecho, muevalo al centro, no se olvide de tener activado el panel de info, una vez localizado dicho panel, situe el circulo como lo indica la imagen.
<img src="http://usuarios.lycos.es/faraonegipto/radar/images/imag6.gif" border="0" alt="Imagen IPB" />

En el primer semicirculo que maracado con rojo, vera la distancia que hay entre las orillas.
En el segundo vera de nuevo la numeración de los 5, que es donde esta ubicado el mouse, y el otro el tamaño de nuestro primer circulo.

Una vez alineado, lo pintamos de negro, ahora lo que sigue es ir a Layer - New - Layer. el circulo quedo en el background, continuemos con los otros circulos que siguen. Siempre con el rectangle marque tool,
<img src="http://usuarios.lycos.es/faraonegipto/radar/images/imag5.gif" border="0" alt="Imagen IPB" />

<!--coloro:white--><span style="color:white"><!--/coloro-->Nota<!--colorc--></span><!--/colorc-->Recuerde que para mantener un orden se debe de abrir primero, por carpetas y despues el layer, como puede usted observar en esta imagen, donde el layer que creamos esta aparte del background, esto evitara, equivocarnos, a la hora de dar efectos o borrar 'X' layer .

habiendolo pintado de color negro, le damos deselect, seguidamente, cambiaremos el tamaño del rectangle marque tool, ya sabe donde, le pone los valores de 70 x 70, cuando se vaya a colocar, en la parte de info, donde le indica el ancho de las orillas, debe de estar en 16 x 14. Después pintelo con el color verde, #295A28. una vez pintado, click en , Layer - Layer style - Blending options,
<img src="http://usuarios.lycos.es/faraonegipto/radar/images/imag10.gif" border="0" alt="Imagen IPB" />

En fill Opacity lo deja en 0 % y el cuadro que usted ve a su derecha se quitara, seguidamente, en este mismo panel, busque a su izquierda Stroke, se pondra de color rojo, recuerde seleccionarlo en la letra, no en el cuadrito, en el cuadro de color, busque el color verde, el mismo que escogimos al relleno. En la parte donde dice size, ahi mismo en stroke, lo pone en 1px, le damos Ok al igual que el panel layer style. Haga este paso 3 veces mas, reduciendo el tamaño de 20 en 20, pero el ultimo, le quita 10, trate de que cada circulo este en layer diferentes. Una vez terminado este paso, le pondremos el mas, o , el asterisco. Para este paso puede utilizar el Rectangle marquee tool, o, Rectangle tool, es opcional... Haga click en herramienta Polygonal lasso tool, y dibuje la figura siguiente.
<img src="http://usuarios.lycos.es/faraonegipto/radar/images/imag14.gif" border="0" alt="Imagen IPB" />

No es necesario que le quede exactamente, pero que se le parezca, ahora lo pintamos, con verde pero mas claro #42EE3E, otra cosa mas, estos colores, el verde oscuro y este otro color, uno debe de estar en background y el otro en foreground, lo recomendable seria, el claro de primero y el oscuro de segundo, porque iremos a escoger el gradient, para pintar dicho dibujo, ahora lo pinta de abajo hacia lo que seria la parte recta, como lo indica la flecha. Esta parte del dibujo cree una nueva carpeta, y comienze un nuevo layer, para separarlo de los circulos.
Ok, ya lo tenemos pintado, haga click en Filter - blur - gaussian blur, coloque el valor en radius 2.0 pixeles, abra, layer style, en blending options, en advance blending, Fill opacity 60 %, y marque blend interior effects as group, marca ok y listo. vera la siguiente imagen.
<img src="http://usuarios.lycos.es/faraonegipto/radar/images/imag16.gif" border="0" alt="Imagen IPB" />

Duplique esta imagen, en 11 mas, hasta quedar asi
<img src="http://usuarios.lycos.es/faraonegipto/radar/images/imag17.gif" border="0" alt="Imagen IPB" />

El punto rojo lo pueden hacer con rectangle tool, y si lo desean lo ubican en otro lado. fije que va se ve como si fuera una rueda de dardos, habiendo terminado este parte, vamos desactivando todos los ojos del rastreador, exceptuando el primero que sera de guía y comienzo en la creación del gif. ya estando desactivados nos vamos a image ready.

En ready buscamos el panel de animación, en ella veremos solo una imagen. presionamos donde esta la flecha roja para agregar mas frames.
<img src="http://usuarios.lycos.es/faraonegipto/radar/images/imag19.gif" border="0" alt="Imagen IPB" />

Haga 11 frames, cuando los duplico, debe de fijarse en el panel de layers y en el de animación, marque el segundo cuadro de la animación, mire que el cuadro de layer esta marcado en el primer rastreador, ( así le llamare al que dara la vuelta ) desactive el ojo, y active el layer siguiente, que debe de ser un duplicado del anterior, observe que la posición de la segunda animación vario, haga lo mismo con los otros. Ahora para el botoncito rojo, que es el indicador de un intruso en el radar, debe de ser activado antes del siguiente frame, ejemplo , si el boton esta entre los frames 5 y 6, el 5 activa el rastreador, el 6 rastreador y el 7 el boton rojo, el 8 rastreador. Asi dara la impresión que se localizo al intruso. Recuerde que no debe de estar encima del rastreador. La velocidad es cero, o, 0.1. Cuando termine con este proceso, puede dar un vistazo en el explorador, y lo guarda despues como gif en save as optimize.
Este es el resultado del trabajo terminado.
<img src="http://usuarios.lycos.es/faraonegipto/radar/images/radar.gif" border="0" alt="Imagen IPB" />

espero que les guste.
abrazos

 

Pues el resultado se ve muy bien! espero darme un tiempito y ponerme manos a la obra!

Felicidades por tu trabajo Faraon. :wink:

 

Excelente tutorial Faraon
Un saludo

 

Que bueno que nos ofreces este tutorial Faraon, no recuerdo si ya hay otro tutorial de animación, pero es obvio que faltan más tutoriales de ese tipo.

gracias y saludos

 

exelente
espero ponerlo en practica muy pronto
gracias mano
saludos

 

Estupendo tutorial, saludos.

 

Que bueno el tutorial, la verdad es de esos que uno no espera, la verdad lo voy a poner en prácitca en cualquier momento a ver que sale, saludos

 

Gracias amigos, :wink: por sus comentarios. Eso me motiva a seguir adelante.

 

Excelente Tuto viejo felicidades

 

que lindo

yo hice uno hace un tiempo de un tutorial pero no me pidan la pagina

si la encuentro la cuelgo por aqui pero no me gusto mucho el que esta aqui para mi gusto se ve muy bien
bueno de todas formas le dejo el mio

<img src="http://www.iespana.es/mipreferido/radar_dany.gif" border="0" alt="Imagen IPB" />

chaucito

 

Gracias daniel por el comentario, pero seria mucho pedirte que pongas las comas, :wink: y ojala te acuerdes, donde viste ese que dices.

 

holaaaaaaaaaaaaaaaa

bueno faraoon no es mucho pedir, el que ponga las comas , solo que no me llevo muy bien con ellas.....
aqui te dejo la direccion, por si te interesa un radar diferente.
Bueno en realidad para todos, es una muy linda pagina con algunos tutoriales que son realmente lindos y dificiles
mas que estan en ingles.... y eso incomoda un poco para los que del lenguaje de nuestra madre patria , nada de nada....

<a href="http://www.spyroteknik.com/" target="_blank">http://www.spyroteknik.com/</a>

buscar en tutoriales (radar)

 

Gracias por esa direccion daniel, es de muchissimo interes gracias.

 

Gracias daniel, tambien te puedo decir, que aqui encontraras los comandos de ingles a español, no me acuerdo donde estan.

Abrazos.

PD: Ya la encontre, esta es, <a href="http://www.forocreativo.net/foro/viewtopic.php?t=520" target="_blank">http://www.forocreativo.net/foro/viewtopic.php?t=520</a> lo que hago es cuando veo una pagina con los comandos al español, me fijo en la traduccion que tengo.
Bueno asi me la he jugado, y me ha salido bien. Suerte.

 

Muy bonito el resultado Faraon. . A mi me falla mucho todavia el Image Ready pero me llamo la atención de lo llamativo de tu avatar.
Se ve que eres bueno animando.
Felicidades.

 

Gracias, pero tambien hay personas en el foro mejores que este servidor, en cuanto a la animacion.

Abrazos.


Pd: De verdad te agradezco el cumplido :wink: