Buscar
Conectarse
Mejores posteadores
kickass; | ||||
.F u z 1 o n | ||||
dorot | ||||
TkS | ||||
antonio_nervion | ||||
Yurika Uchiha | ||||
Redfire. | ||||
Suiken | ||||
WhiteFire | ||||
R4t4DP |
Botones para webs y foros, parte 3: Estilo Vista y animados
2 participantes
:: Tutoriales :: Tutoriales Gimp
Página 1 de 1.
Botones para webs y foros, parte 3: Estilo Vista y animados
Creación de botones para webs y foros en GIMP (III)
Tras los dos anteriores ya tenéis el nivel y los conocimientos necesarios para esto. Empezaremos con el "Estilo Vista" y luego os daré una pequeña clase práctica de animación para conseguir un sencillo efecto de "parpadeo", útil para botones especiales que se desean resaltar especialmente (el de "registro", o el de "nuevo PM" por ejemplo)
Dos formas de crear botones Vista
¿Y por qué dos? Pues porque yo tengo XP y no sé cuál de estos dos estilos es el correcto; aunque parecidos, uno tiene borde rectangular, y el otro no. Es que encontré dos imágenes distintas y ... bueno, pongo las dos versiones y cada cual se quede su favorita.
Versión 1
Resultados:
- Spoiler:
Lo primero es crear una nueva imagen del tamaño que prefieras (Yo elegí 150x30, pero cada cual es libre). Y, al igual que se hizo en el tuto anterior, hacemos una selección rectangular redondeada:
Como puede verse en la captura, con un radio de 5 es suficiente.
Ahora, pintamos de un color claro que pegue con lo que será nuestro botón (yo lo haré verde, y por lo tanto aquí meto verde claro)
Ahora encogemos 1px la selección (Selección||Encoger[shrink]) y pintamos con nuestro color de fondo.
Volvemos a hacer crecer nuestra selección pinchando con el botón derecho del ratón sobre la capa de fondo y eligiendo "Alfa a selección"
Ahora, creamos una nueva capa para el brillo y cortamos la selección mas o menos por la mitad. (Eso viene explicado en el tuto anterior).
Elegimos el blanco como color de frente y pintamos con un degradado "de frente a transparente":
Volvemos a pinchar con el botón derecho del ratón sobre la capa del fondo, y nuevamente seleccionamos "Alfa a selección". Ahora cortamos la selección al revés: nos quedamos con el trozo de abajo porque vamos a trabajar la sombra. Crea una nueva capa para ella vuelve a pintar con un degradado de frente a transparente, pero seleccionando el negro como color de frente.
Usamos la herramienta de perspectiva para modificar su forma y tamaño de este modo:
Al terminar veréis una nueva selección flotante entre la lista de capas. Dadle al "Ancla" para que pase a formar parte de la capa de sombra.
A continuación bajamos la opacidad de la capa de la sombra hasta tener algo que nos convenza (Yo puse un 70%). También podemos ajustar la opacidad de la capa del brillo (Yo puse un 60%, pero depende de los colores o de cómo salga el degradado).
También añadimos por encima de todo las letras, color blanco y fuente... creo que la normal es "Lucida sans unicode" (Suele venir con el Windows).
¡Halaaa! Me he equivocado y he puesto "PM" en lugar de "MP"... esto me pasa por jugar al Final Fantasy :-P
Versión2
Resultado:
- Spoiler:
Esta otra forma de hacerlo es una traducción al GIMP de un tuto hecho con Corel Xara. Conste que no he manejado el Corel en mi vida, pero mas o menos viendo el proceso... aquí teneis el original, donde pueden verse los botones en funcionamiento en la parte de abajo:
Tuto original
En él lo explicaban haciendo los dos botones juntos, pero yo los haré en ficheros separados; es mas cómodo.
El primer paso es igual al anterior tuto: Creamos una nueva imagen vacía.
El segundo, es hacer un degradado en TODA ella que quede mas o menos así:
Ahora, hacemos una selección rectangular redondeada con un radio de 5, aproximadamente. Cread una nueva capa y pintad la selección de color negro con el bote de pintura.
A continuación hacemos una selección elíptica mas o menos así, cuidando de tener activado el "modo intersección". (Lo he marcado en rojo).
Creamos nueva capa y pintamos esa selección con un degradado de un color gris clarito a negro.
(Debí dejar mas oscura la parte de abajo, pero en fin.. lo importante es pillar la idea)
Ahora, seleccionamos con el botón derecho la capa donde teníamos pintado el rectángulo redondeado con el botón derecho y seleccionamos "Alfa a selección" para recuperar el rectángulo que teníamos. Pero no lo queremos tan grande: Id a Seleccionar||Encoger [shrink] y ponedle 2.
Creamos una nueva capa y pintamos esa selección con un degradado como el primero que usamos:
Es el momento de clonar nuestro botón: dadle a Archivo||Guardar una copia y luego abrís esa copia. Ya tenemos 2.
En la siguiente imagen podéis observar la herramienta de Volteo. En la copia, seleccionad la capa gris clarito y hacéis dos volteos: uno vertical y otro horizontal. El resultado también podéis verlo en la imagen: el botón ya no resalta "hacia arriba" sino que parece pulsado.
Añadimos el texto (Ahora que lo pienso hubiese sido mejor hacerlo antes de clonar, pero en fin... en esta ocasión he usado Arial black para la "G" y en otra capa distinta Arial.
Seleccionamos la capa de la G en la versión "pulsada" con el botón derecho del ratón, elegimos "Alfa a selección" y hacemos en ella un degradado radial de azul clarito a azul.
En la otra versión con uno lineal de arriba a abajo ya llega.
Ahora, vamos a trabajar con la versión "pulsada": elegimos la capa donde está el color del centro, "Alfa a selección" con ella, borramos su contenido (Tecla Supr o Editar||Limpiar) y pintamos de azul oscuro.
Creamos encima de esa capa otra nueva, hacemos una selección elíptica y la pintamos de azul claro con el bote de pintura
A continuación, a esa capa le metemos un filtros||Desenfoque[Blur]||Desenfoque gaussiano de unos 10 puntos.
Pero nos sobra un trozo del reflejo este... volvemos a hacer un "alfa a selección" de la capa de debajo, invertimos la selección y borramos el sobrante.
Esto es lo que tenemos en este momento:
ánimo que falta sólo el brillito y en los dos es igual:
Otra vez hacemos el "Alfa a selección" en la misma capa, la del centro. Y cortamos esa selección mas o menos por la mitad. Elegimos el color blanco como color de frente, creamos una nueva capa para el brillo y pintamos con un degradado "de frente a transparente" (Estos pasos no los explico mas porque ya los he repetido unas cuantas veces lo largo del tutorial)
Y por último bajamos la opacidad de esa capa de brillo hasta que quede bien.
Botones con parpadeo
Este es el resultado final:
- Spoiler:
Lo primero, es hacer un botón con dos aspectos: versión apagada y versión encendida. Lo mas cómodo es hacer uno de ellos, sacarle una copia y luego modificarla.
Métodos para hacer botones ya hemos visto de sobra, así que partimos de estos dos hechos:
Sé que no son una maravilla, pero es sólo un ejemplo y lo importante es la idea. Cada cual puede iluminar a su manera.
Pero al grano: elegid la versión apagada y activad esto:
Sí, no ha pasado nada. Ahora se le da a Editar||Pegar como||Imagen nueva.
Eso hará aparecer una imagen con el botón... y con todas sus capas unidas en una sola.
Ahora, id a la versión iluminada y de nuevo activad Editar||Copia visible.
PERO esta vez no lo vamos a pegar como imagen nueva: ve a la imagen nueva que apareció antes y dale a Ctrl-v (O si se prefiere Editar||Pegar)
Veis que ha aparecido la versión iluminada sobre la otra, en forma de selección flotante. Es el momento de darle al botón de "Nueva capa" para convertirlo en una.
Vamos a ver cómo está quedando la animación: Filtros||Animación||Reproducción ... diooox, esto marea!!!
Mejor hacemos esto: vamos a cambiarle el nombre a la capa de abajo (Sí, suena raro pero es por algo): a continuación del nombre escribimos (3000ms) y a la capa del brillo le hacemos lo mismo, pero ponemos (800ms)
Y volvemos a reproducir. ¿Qué tal ahora? ^_^
Voy a explicar esto para que se entienda. GIMP no tiene herramientas a la vista para determinar el tiempo que un determinado fotograma permanece visible. Por defecto, ese "retardo" suele ser de unos 150ms. La razón por la que no hay herramienta para eso es simple: no hace falta, basta con escribirlo tras el nombre, entre paréntesis.
Ahora sólo queda esto:
Filtros||Animación||Optimizar (Para GIF). Crea una versión de la animación mejorada teniendo en cuenta su destino.
Esa versión es la que vamos a guardar de esta manera: Archivo||Guardar como
Le ponemos el nombre que deseemos, acabado en .GIF
Nos pregutará si combina las capas visibles o lo guarda como animación. Le decimos que como animación. Y ya está.
Método simple, resultado interesante.
Re: Botones para webs y foros, parte 3: Estilo Vista y animados
increibles lod segundos me encantan aver si hago alguna prueba en el gimp.
kickass;- Administrador
- Cantidad de envíos : 290
Edad : 31
Fecha de inscripción : 25/11/2007
Re: Botones para webs y foros, parte 3: Estilo Vista y animados
Bueno... ese lo expliqué un poco de pasada porque eran cosas que ya había repetido en los anteriores. Olvidé poner que hay un momento (en el botón pulsado) que se debe hacer un desenfoque de una elipse dibujada en la parte de abajo del botón.
Bien, pues si quieres que salga bien (Esto ya se vió en otro de la primera parte, por eso no lo repetí) deshaz antes la selección o no se difuminará bien.
De todas formas creo que puedes reproducir el método sin problemas en Photoshop, todo se basa en jugar con degradados y selecciones.
Bien, pues si quieres que salga bien (Esto ya se vió en otro de la primera parte, por eso no lo repetí) deshaz antes la selección o no se difuminará bien.
De todas formas creo que puedes reproducir el método sin problemas en Photoshop, todo se basa en jugar con degradados y selecciones.
Temas similares
» Botones para webs y foros, parte1: Botones rectangulares
» Botones para webs y foros, parte2: Botones redondeados
» Tuto para conseguir dinero facil para comprarte un dominio .
» Generador de logos estilo web 2.0
» Nuevo estilo de firmas =P - Ecchi girl
» Botones para webs y foros, parte2: Botones redondeados
» Tuto para conseguir dinero facil para comprarte un dominio .
» Generador de logos estilo web 2.0
» Nuevo estilo de firmas =P - Ecchi girl
:: Tutoriales :: Tutoriales Gimp
Página 1 de 1.
Permisos de este foro:
No puedes responder a temas en este foro.