1. ¡OFERTA! con cupón "DIRVPS": hosting por $0,01 y también VPS Linux y Windows por $0,01 el primer mes por Interserver ← publi
    Descartar aviso
Descartar aviso
Al usar este sitio web, aceptas que nosotros y nuestros socios podamos establecer cookies para fines tales como personalizar el contenido y la publicidad. Más información.

Gif animado, cartel neon tipo puticlub... :P

Tema en 'Tutoriales Desarrollo Web' iniciado por krustyfer, 20 Nov 2004.

  1. krustyfer

    krustyfer Nuevo usuario

    Bueno, espero q les guste, este es mi primer tutorial, y en realidad es la combinacion de uno que viene en la web principal de este foro, www.solophotoshop.com y otro para hacer gifs animados...

    Es una combinacion de photoshop e imageready... Aviso mi versión de photoshop es la 7...

    PARTE DE PHOTOSHOP:

    1.- Creamos un archivo gif nuevo. CTRL + N de un tamaño por ejemplo de 250 x 100 pixels en blanco... Escribimos nuestro texto en color negro en el centro del lienzo con el tamaño y fuente deseado...

    2.- Unimos las capas: Capa > Acoplar Imagen. A continuación invertimos los colores... Imagen > ajustar > invertir... Nos debera kedar el fondo negro y las letras blancas...

    3.- Desenfocamos un poco: Filtro > Desenfocar > Desenfoque gaussiano con un tamaño de desenfoque de 2 pixels...

    4.- A continuación aplicamos: Filtro > Estilizar > Solarizar y acto seguido aplicamos Imagen > Ajustar > Autocontraste

    5.- Guardamos el archivo con el nombre q keramos, pero siempre con extensión GIF, puesto q sino no funcionara la animacion...

    Hasta aki la parte photoshop, pasamos a la parte IMAGEREADY:

    1.- Abrimos nuestro gif guardado anteriormente. Y hacemos tantas copias de capa como colores keremos q iluminen nuestras letras de neon... El fondo siempre kedara para las fases de "apagado" del parpadeo...

    2.- Ahora en la parte de animacion hay un icono igual q el de capa nueva, q sirve para dublicar el cuadro actual... En este caso deberemos el doble de cuadros que colores keramos pintar...

    3.- Comenzamos a colorear... Elegimos el segundo cuadro, el primero lo dejamos en blanco... Para ello elegimos la capa 1 copia y eliminamos los iconos de los ojos de todas las demas capas... Nos vamos a imagen > ajustes > tono / saturación. Marcamos la casilla de colorear y ponemos la saturación a 100 y dejamos la luminosidad en 0. A partir de aki es jugar con el tono para elegir el color q keremos...

    4.- Elegimos el tercer cuadro y en la parte de capas elegimos la capa 1 y eliminamos los ojos de todos las demas capas... Ahora en este caso se nos vera la imagen solo blanco y negro... Como decia antes es la fase "apagada" del parpadeo del neon...

    5.- repetimos los pasos 3 y 4 avanzando con los cuadros tantas veces como colores deseemos meterle...

    6.- En la parte de animacion cambiamos el tiempo de cada cuadro al valor q mas os guste, en mi caso le he puesto 0'5 segundos...

    7.- Ahora guardamos el gif animado escogiendo guardar optimizada...

    Y ya lo teneis, ahora podeis jugar con vuestra imaginacion, y en lugar de poner varios colores, hacerlo con uno solo y jugar con la velocidad de parpadeo, haciendo como ritmos con las luces, o podeis tb hacer q parpadeen primero unas letras y luego otras...

    En fin yo os dejo mi muestra de lo q he explicado en el tuto y ya haremos alguna mas... Espero q os guste y no os parezca una tonteria, es mi primer tutorial... :?

    <img src="http://img61.exs.cx/img61/682/neon-krustyfer-copia3.gif" border="0" alt="Imagen IPB" />
     
  2.  
  3. Meta

    Meta Nuevo usuario

    Está curioso.
     
  4. seek

    seek Nuevo usuario

    Gracias por el aporte. Cuando tenga tiempo me pongo. ^^

    Saludos. :D
     
  5. photo-erik-shop

    photo-erik-shop Nuevo usuario

    buen aporte lo pondre en practica

    saludos
     
  6. krustyfer

    krustyfer Nuevo usuario

    bueno pues ahora mientras cenaba os he hecho otra muestra de lo q se puede conseguir con este efecto... espero q os guste, tiene bastante mas curro q el otro gif... pero no pq sea dificil, sino pq hay q ir poco a poco, cortando del fondo y pegando en una capa nueva, cada vez con una letra mas hasta tener el letrero entero...

    <img src="http://img87.exs.cx/img87/7392/rotulos2.gif" border="0" alt="Imagen IPB" />
     
  7. Super Aarón

    Super Aarón Nuevo usuario

    Excelente.
    Saludos
     
  8. seek

    seek Nuevo usuario

    Queda muy bien, me gusta. ^^

    Saludos. :D
     
  9. hyguiea

    hyguiea Nuevo usuario

    :wink:
     
  10. seek

    seek Nuevo usuario

    Buena hyguiea. ^^

    Saludos. :D
     
  11. hyguiea

    hyguiea Nuevo usuario

    Gracias, seek.
    Aunque no entiendo por qué me sale aquí con ese escalón :roll:
     
  12. shanna

    shanna Nuevo usuario

    Hola!! Tengo una duda con este tutorial... Me sale todo bien en el IMAGEREADY pero al guardar me sale en blanco y negro. Sabeis porqué es???? Gracias

    <img src="http://img24.exs.cx/img24/3244/shanna.gif" border="0" alt="Imagen IPB" />
     
  13. AMIwan

    AMIwan Nuevo usuario

    mmmmm........a mi me ocurre lo mismo ke a SHANNA, y aún no he podido dar con el error....a ke se puede deber ???

    Espero su ayuda
     
  14. krustyfer

    krustyfer Nuevo usuario

    arriba a la derecha hay una ventanita con dos pestañas, en una de ellas pone optimizar... dentro de ella, a la izqda de colores hay una lista desplegable donde debeis elegir windows... puede q ahora, una vez guardado el archivo en blanco y negro os toke repertirlo para darle el color... o bueno colorear sobre ese mismo q teneis guardado...

    Lo siento, se me olvido decirlo... :cry:
     
  15. kitsch

    kitsch Nuevo usuario

    Hea muy bueno :D :D
     
  16. Neo

    Neo Nuevo usuario

    gracias por el aporte krustyfer, esta bueno el tuto

    Saludos 8)
     
  17. kahlito

    kahlito Nuevo usuario

    Gracias krustyfer por el tuto, me ha salido enseguida :wink:
     
  18. krustyfer

    krustyfer Nuevo usuario

    Bueno, pues como hay gente q me ha comentado por privado q no saben como hacer el segundo de los luminosos, os explico un poco por encima... La base es similar a la del primer luminoso...

    Una vez tenemos el cartel base de neon, el q nos servira de fase "apagada" del cartel, nos vamos a imageready como en el caso anterior...

    En este caso, empezamos con la fase apagada en el primer cuadro... Luego creamos un nuevo cuadro y creamos una nueva capa tb via copiar... Esto es pinchando en nuestra capa base y arrastrandolo hacia el icono de crear una nueva... A partir de aki seleccionamos con la herramienta de lazo libre la primera letra, nos vamos a ajustar, imagen y color / saturacion... Le damos el color q keremos y nos apuntamos los valores de color y saturacion para hacer en todos el mismo tono...

    El siguiente paso es crear un nuevo cuadro y una nueva capa via copiar como antes, pero en esta ocasion en vez de copiar la capa de fondo copiamos la ultima usada...

    Hay q dejar en cada cuadro marcado el ojo de la capa q corresponde a ese cuadro y ninguna capa mas...

    Para seleccionar la siguiente letra, con la anterior seleccionada, pulsamos el boton mayus y seleccionamos la siguiente solo... al soltar veremos q estan seleccionadas las dos primeras...

    repetimos los pasos para darle color y crear la siguiente capa... y asi hasta el final...

    cuando tenemos todas las letras ya entra en juego vuestra imaginacion...

    yo he puesto despues de todas las letras encendidas un cuadro apagado, otro con la primera palabra encendida, otro apagado, otro con la ultima palabra encendida (este tuve q crear una capa nueva para colorear solo esa palabra), luego otro en blanco y luego 3 parpadeos completo, o sea, todo encendido, todo apagado... Luego ajustas los tiempos y arreglado...

    yo he puesto para el rellenado letra a letra 0,2segundos, para el parpadeo largo 1 segundo... y para los destellos finales no se si puse 0,1 o 0,2 segundos...

    Lo he explicao un poco mas "cordial" y desestructurado q el principio del tutorial, pero creo q asi keda claro suficientemente... si no es asi, preguntar y ya os respondere cuando pueda...
     
  19. AMIwan

    AMIwan Nuevo usuario

    Gracias Bro......se te agradece
     
  20. Sh4nK

    Sh4nK Nuevo usuario

    mola 8)
     
  21. Neo

    Neo Nuevo usuario

    bienvenido al foro Sh4nK

    saludos 8)
     


Alojamiento web, Hosting Reseller, Servidores Dedicados - All in Hosting


    
    
    
    
Blog · Sitios amigos: GuiaHosting · Unidominios · Interalta ·