Página 1 de 6 1 2 3 ... ÚltimoÚltimo
Resultados 1 al 10 de 60

Tema: Crear un Botón animado en Photoshop + Image Ready

      
  1. #1
    Avatar de Nacho-Lopez
    Nacho-Lopez está desconectado

    Miembro VIP + 3000 mensajes en el foro!!!
    Fecha de ingreso
    02 Feb, 05
    Ubicación
    Logroño
    Mensajes
    9,755

    Predeterminado Crear un Botón animado en Photoshop + Image Ready

    Os he hecho un pequeño tutorial para todos aquellos que estáis interesados en aprender a hacer botones, banners ó gifs animados. Espero que os sirva para empezar a conocer el Image Ready que es una potente herramienta de animación. Esto es solo una introducción a las miles de cosas que con Photoshop e Image Ready juntos, podemos llegar a hacer...
    Lo primero que hice, fué diseñar en Photoshop los graficos que van a componer este pequeño botón animado. Para este sencillo ejemplo, yo hice un botón y luego le cambié su color de azul a rojo. Fijaros como tengo cada botón en una capa y pulso sobre ese icono de la ventana de herramientas que directamente me abre Image ready y me traspasa todos los datos a él, incluidas las capas...



    Una vez tengo el Image abierto, (ahora ya estamos en el Image Ready), debiérais ver algo parecido a lo que véis en la siguiente imagen. Si no véis alguna de las ventanas que se ven en mi imagen, arriba pulsad en Ventana y seleccionar al menos animación, capas, herramientas y optimizar. Depués pulsad sobre el icono que véis en la siguiente imagen en la ventana de animación y os duplicará el cuadro actual:



    Id a la ventana de capas y pulsad sobre el ojo de la capa de arriba, con lo cual ahora en el nuevo cuadro que habéis duplicado se verá azul, como en la capa de fondo:



    Ahora vamos a utlizar una función del Image Ready muy interesante y que se llama INTERCALAR. Lo que hace es crear una transición automáticamente desde el primer cuadro al segundo. Es decir, en nuestro caso irá pasando de rojo a azul poquito a poco. Podéis intercalar el número de cuadros que queráis, pero tened en cuenta que a mayor número de cuadros, más pesará en bytes la imagen y esto a veces no interesa demasiado. Por ejemplo, yo he usado 5 cuadros:



    Por último, podéis modificar el tiempo que estará presente en la animación debajo de cada uno de los cuadros, hasta dejarlo a vuestra manera. En la ventana de animación, podéis también dar al botón de play en todo momento para ver la animación también.
    En la ventana de optimizar tenéis que seleccionar el formato Gif ya que las animaciones deben ir todas en él. El número de colores podéis pornerlo a 256 o menos. A menor número de colores, menos peso en bytes del botón, pero los gráficos pierden calidad..



    Ya sólo os queda ir al menú de archivo y en guardar optimizada como..., le ponéis un nombre y ya es todo vuestro...



    Sé que al principio, este tipo de programas resultan muy complicados. He tratado de poneros un ejemplo muy sencillito para que os sirva de introducción. Espero que vosotros ahora practiquéis en casa y probéis con nuevas cosas, que así es como realmente se aprende...
    Un abrazo para todos
    Nacho

  2.  
  3. #2
    Guille está desconectado
    Ya no soy novato!
    Fecha de ingreso
    19 Feb, 05
    Ubicación
    Murcia
    Mensajes
    135

    Predeterminado

    Muchísimas gracias por colgar el tutorial. Tiene muy buena pinta. Ahora es muy tarde y tengo sueño, pero mañana en cuanto conecte me pongo en marcha y te enseño lo que haya logrado. Saludos!


  4. #3
    Avatar de artefakto
    artefakto está desconectado
    Realmente sabe de esto!
    Fecha de ingreso
    11 Feb, 05
    Ubicación
    Santiago de Chile
    Mensajes
    923

    Predeterminado Muy bueno el Tutorial

    Yo que era nulo en el tema, ahora ya sé un poco más.
    Empecé haciendo el tuto de los botones, me fuí entusiasmando y ahora.... MIREN MI AVATAR!!!! \/

    Gracias Nacho, seré tu pequeño saltamontes...


  5. #4
    Avatar de Nacho-Lopez
    Nacho-Lopez está desconectado

    Miembro VIP + 3000 mensajes en el foro!!!
    Fecha de ingreso
    02 Feb, 05
    Ubicación
    Logroño
    Mensajes
    9,755

    Predeterminado Muy bueno el avatar :D

    Pues te quedó de maravilla el avatar artefakto...
    Me gusta mucho.
    Es solo un pequeño ejemplo de las miles de cosas que se pueden hacer con ese programa, pero para introduciros un poquito en él, espero que os haya servido...
    Un abrazo para todos.


  6. #5
    Avatar de pericosB
    pericosB está desconectado
    Algo sabe de esto...
    Fecha de ingreso
    23 Feb, 05
    Ubicación
    Cartagena
    Mensajes
    215

    Predeterminado BUEN TUTORIAL

    Muy bueno el tutorial y los que he visitado, estoy aprendiendo poco poco, he relizado un peqeño boton mivil y no se como ponerlo para que se vea como el de nacho o el de artefakto, me gustaria me indicarais como hacer, gracias


  7. #6
    Avatar de Nacho-Lopez
    Nacho-Lopez está desconectado

    Miembro VIP + 3000 mensajes en el foro!!!
    Fecha de ingreso
    02 Feb, 05
    Ubicación
    Logroño
    Mensajes
    9,755

    Predeterminado

    Hola pericosB:
    Eso lo puedes hacer desde tu Perfil, en el apartado de Panel de control de Avatar. Desde ahí lo puedes subir al server, pero lee atentamente los requerimientos de peso y tamaño máximos permitidos...
    Un abrazo
    Nacho


  8. #7
    Avatar de nouty
    nouty está desconectado
    Realmente sabe de esto!
    Fecha de ingreso
    01 Apr, 05
    Ubicación
    Spain
    Mensajes
    833

    Predeterminado Me ha encantado el tutorial

    Holas, al final ia me decidi a registrarme que estado muy liada con mil cosillas, me encanta el foro nacho y veo mucha actividad, espero sacar tiempo para ver todas las cosillas que comentais por aqui

    Un saludo

    pd: Espero mas tutoriales sobre el image ready!!!


  9. #8
    ALICANTI está desconectado
    No soy nadie aún en el foro...
    Fecha de ingreso
    17 Apr, 05
    Mensajes
    2

    Predeterminado Magnifico manual

    Mas o menos lo he entendido, pero me surje un problema el cual no encuentro a ver si se explicarme ya que no entiendo mucho de esto, mi intencion era crear un boton el cual esta compuesto de 4 imagenes, lo que queria hacer era digamos la 1º fuera fija y las otras 3 saliesen dentro de la primera eso es posible vasandonos en este manual


  10. #9
    Avatar de artefakto
    artefakto está desconectado
    Realmente sabe de esto!
    Fecha de ingreso
    11 Feb, 05
    Ubicación
    Santiago de Chile
    Mensajes
    923

    Predeterminado

    Claro que se puede Alicanti, siempre y cuando las capas 2, 3 y 4 sean de fondo transparente.


  11. #10
    Avatar de BEN-HUR
    BEN-HUR está desconectado
    No soy nadie aún en el foro...
    Fecha de ingreso
    14 Mar, 05
    Ubicación
    Montcada I Reixac ( BCN )
    Mensajes
    7

    Predeterminado

    Osea que lo primero seria crear por ejemplo un banner en Photoshop y luego ir a Image ready ¿ no ?

    Y otra cosa las capas si se necesitan ¿ donde se hacen en Image Ready o en photoshop?


Página 1 de 6 1 2 3 ... ÚltimoÚltimo

Temas similares

  1. Tutoriales crear webs photoshop y image ready
    Por ktedenpolculo en el foro Consultas sobre Photoshop Creative Cloud, Photoshop CS6 - otras versiones Photoshop
    Respuestas: 3
    Último mensaje: 09/03/2007, 17:07

Etiquetas para este tema

Permisos de publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •  
Photoshop Designs v2.0
Photoshop designs es una comunidad dedicada a Photoshop, el retoque fotográfico, la fotografía digital, el arte digital, 3d, el diseño Web y otros programas de edición de imágenes como Corel photopaint, corel draw ó GIMP. Entre sus páginas encontraréis cientos de tutoriales photoshop y de retoque fotográfico, cursos de fotografía, concursos, información sobre cámaras digitales, soporte photoshop, miles de recursos photoshop, una increíble galería photoshop y un blog que recopila los mejores tutoriales y recursos que se publican a lo largo de toda la red
Compartir
Photoshop Designs v1.0
Visita Photoshop Designs v1.0
Búsqueda personalizada

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52