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, parte2: Botones redondeados
3 participantes
:: Tutoriales :: Tutoriales Gimp
Página 1 de 1.
Botones para webs y foros, parte2: Botones redondeados
Creación de botones para webs y foros en GIMP (II)
En esta segunda parte del tuto (la primera la encontraréis AQUI ), usaremos como base lo aprendido en el anterior para hacer botones redondeados y un poquito mas complejos.
Os voy a explicar varias técnicas que dan resultados bastante distintos, pero si lo que os apetece es algo automático, sencillito y sin problemas probad a jugar un poco con este plugin especial para hacer botones redondeados que trae GIMP.
Botones redondeados hechos con script
Sale algo así:
- Spoiler:
Es tan sencillo como abrir este script, elegir los colores, letra y tamaño, y darle a aceptar.
Evidentemente, se obtiene un mayor control de los resultados si en vez de usarlo creas personalmente los botones.
Botón básico de esquinas redondeadas.
Esto es mas o menos lo que sale:
- Spoiler:
Creamos una nueva imagen con el fondo transparente. (Para quienes empiezan: archivo||Nuevo. Pinchad donde pone "opciones avanzadas" y aseguraos que el fondo es el que marco.
A continuación creamos la forma de nuestro botón con la herramienta de selección rectangular, con unos valores mas o menos como estos (podeis redondear mas o menos, según vuestras preferencias)
Y con el bote de pintura rellenas el fondo del color que prefieras.
El siguiente paso es crear una nueva capa para el brillo. Pulsa el botón indicado en la imagen y verás algo así. Acepta.
Ahora vamos a hacer una selección dentro de esa. Podríamos hacerla diréctamente, pero al menos a mi me cuesta "apuntar", de modo que si eres igual de malo que yo calculando distancias prueba a hacer esto:
Lo primero es encoger la selección.
Veis que queda ¡Perfectamente colocado! ^_^ Pero no lo queremos tan grande, así que vamos a restarle un trozo así:
Activad la herramienta de selección rectangular de nuevo (Ya no hace falta que redondeeis) y marcad esta opción.
Ahora seleccionamos lo que deseamos quitar de la selección que teníamos, y listos para añadir el brillo.
Procurad que esté seleccionada la capa del brillo antes de hacer esto: poned como color de frente el blanco y metedle un degradado "de frente a transparente". Si surge alguna duda, ya lo expliqué mas o menos al final del tuto anterior.
Seleccionad la capa de abajo (la del fondo, la herramienta de texto y escribid)
La idea es que la capa del texto quede bajo el brillo. Con estos colores no se nota mucho, pero con otros el brillo quedaría encima de las letras, dando una sensación 3-D al conjunto.
Así ya está bien, pero si os apetece que el texto tenga sombra, podeis añadírsela como en el anterior tuto Filtros||Luces y sombras||Sombra arrojada... con unos valores mas o menos como estos:
Puede ocurrir que la capa de la sombra se sitúe encima de todas las demás: movedla hacia abajo, justo encima de la capa del texto, con estas flechas:
Y ya está. Da mas trabajo que el script, pero merece la pena ¿Verdad? ^_^
Botones estilo Mac
Después de haber hecho el botón anterior, hacer uno estilo mac es sencillo. Si lo explico es por la sombra y el trazo alrededor de las letras, porque todo lo demás es casi igual al anterior.
Este es el resultado final (Hay sombra, pero no se ve bien porque nuestro fondo es oscurito):
Aquí con fondo blanco para apreciarlo mejor:
- Spoiler:
El comienzo es el mismo que el anterior:
-Creáis una nueva imagen, pero un poquito mas grande de lo que será el botón porque va a tener una sombra. Yo me he decantado por un tamaño de 150x35, pero cada cual es libre de adaptar el tamaño a lo que necesite.
-Hacéis un rectángulo redondeado y la primera diferencia empieza a la hora de llenarlo; en vez de usar un color sólido usaremos un degradado de frente a fondo, de modo que tengamos algo así:
A continuación creáis una nueva capa transparente, la seleccionáis y con el bote de pintura dais a la selección un color negro (o del color que prefiráis para la sombra)
Ahora, quitáis la selección (Seleccionar||Nada) y aplicáis este filtro a la capa de la sombra:
A continuación vamos a desplazarla un poco: seleccionad la herramienta Mover y aseguraos de activar "Mover la capa activa" o lo moveréis todo, y lo único que deseamos mover es la sombra, mas o menos 1px. ¿Y eso cómo se hace? Pinchando en la imagen y dándole un toque a la tecla de dirección derecha del teclado, y otro toque a la tecla de dirección "abajo" del teclado.
Ahora que ya tenemos la sombra,nos vamos a encargar del brillito. Pero ¡Ups! Ya no tenemos la selección. Tranquilos, ahora la veremos volver: ve a la capa del degradado y pinchala con el botón derecho del ratón. Elige "Alfa a selección"
Lo siguiente es cortar la selección igual que os expliqué en el "botón redondeado básico", crear una capa para el brillito, y hacer el degradado igual. Os quedará algo así:
El siguiente paso es modificar el brillo con la herramienta de perspectiva y estas opciones puestas; haced algo así y pulsad el botón "Transformar"
Tras eso aparecerá algo nuevo llamado "selección flotante" entre la lista de las capas. Podéis darle a Nueva capa para convertirla en una verdadera capa, o al "ancla" para pegarla sobre la anterior. Os he marcado las dos en la siguiente captura, pero yo le dí a "Nueva capa".
Una vez tenemos esa nueva capa, recomiendo moverla 1 px para abajo, de la misma forma que hicimos antes con la sombra.
Y añadimos el texto. ¿Qué fuente elegír aquí? Una modernita y redondeada. Yo he usado la "Automática(BRK)", pero la "Neuropol" o la "Quantum" también son muy buenas opciones. De hecho creo que la Neuropol es la mas parecida al estilo Mac. Ve probando y quédate la que prefieras. Recuerda que si las instalas, debes salir de GIMP y volver a entrar para tenerlas disponibles. ¿Cómo se instalan? Como todas las del Windows.
Links a las fuentes:
Neuropol: http://www.dafont.com/neuropol.font
Automatica (BRK):http://www.abstractfonts.com/font/4885
Quantum:http://www.dafont.com/search.php?psize=m&q=quantum
Pues eso, que seleccionamos la capa del degradado y escribimos el texto:
Lo siguiente es pinchar sobre la capa del texto con el botón derecho del ratón y elegir "Alfa a selección", como si fuésemos a aplicarle una sombra arrojada, pero en esta ocasión vamos a hacer otra cosa: vamos a hacer crecer 1 o 2 px nuestra selección. Como este botón es pequeñito, creo que 1 queda mejor, todo depende de los gustos de cada cual.
Lo siguiente es crear una nueva capa transparente bajo la del texto y pintar esa selección de color blanco (o al menos ese elegí yo) con el bote de pintura.
Por último, se baja la opacidad de la capa blanca hasta tener un 50-60% y ya tenemos el botón estilo mac.
Botones redondeados con borde metálico
Hecho lo anterior, esto va a ser un juego de niños (menudo rollo os estoy metiendo ^_^' )
El resultado es este:
- Spoiler:
El primer paso es hacer la forma y rellenarla con lo que deseemos, en este caso un degradado radial (pero puede hacerse uno lineal como en el estilo mac, poner algún patrón, o lo que apetezca)
El segundo paso es hacer otra selección dentro de esa, pero con la opción que marco en la imagen activada. Eso "Corta" el trozo de la selección que deseamos.
El tercero, es crear una nueva capa para el marco metálico y hacer un degradado como este en ella:
Y ahora hacemos una nueva selección como esta:
Y creamos una capa nueva, donde aplicaremos este degradado:
Pero nos sobran unos trozos... eso lo arreglamos rápido. Pulsad la capa del marco con el botón derecho del ratón y aplicad "Alfa a selección".
Y luego, Seleccionar||Invertir, seleccionar la capa del brillo y borrar lo que hay dentro de esa selección. En versiones antiguas de GIMP se borraba en Editar||Limpiar. Ahora basta con darle a la tecla Supr.
Queda esto:
Ahora daremos algo de volumen al marco,así que elegid Seleccionar||Encoger Selección y quitadle un par de px.
Volvéis a darle a Seleccionar||invertir.
A continuación se crea una nueva capa y se pinta con otro degradado así:
Borrad las partes que sobresalgan y poned la capa de volumen bajo la del marco. Esto ya va tomando forma!
Ahora vamos a dar volumen al fondo; cread una nueva capa para esto bajo las capas del marco (Aqui Brillo2) y haced una selección como esta:
Ahora, ponéis como color de frente el blanco, y aplicais un degradado radial "de frente a transparente".
Bajáis un poco la opacidad de esa nueva capa(50-60% estaría bien), metéis debajo el texto y ¡Listos!
Una opción interesante sería poner una sombra bajo el botón como la del "Estilo mac", pero cada cual debe experimentar con lo aprendido a su manera.
Si habéis aguantado todo este rollo la conclusión es la siguiente: aprendiendo a manejar bien los degradados y las selecciones, con un poco de imaginación puedes hacer botones increíbles.
Última edición por el Sáb Ene 12, 2008 5:58 am, editado 1 vez
Re: Botones para webs y foros, parte2: Botones redondeados
opa estan geniales para los que necesiten botones para sus foros de nuevo gracias estos tutos son muy utiles.
kickass;- Administrador
- Cantidad de envíos : 290
Edad : 31
Fecha de inscripción : 25/11/2007
Re: Botones para webs y foros, parte2: Botones redondeados
¡De nada! Después de visitar Foroactivo ví que mucha gente quería nuevos botones, y realmente son algo muy sencillo de hacer.
Lo bueno de aprender a hacerlos un@ mism@ es que siempre se ajustarán mas a lo que deseas.
Si me salieron tan largos fue por una sola razón: son de nivel 0.
Cualquiera que no haya tocado GIMP en su vida puede empezar por el primero, y si va siguiendo termina pudiendo llegar a hacer los mas complejos sin problemas.
Habrá una tercera parte. ^_^
Lo bueno de aprender a hacerlos un@ mism@ es que siempre se ajustarán mas a lo que deseas.
Si me salieron tan largos fue por una sola razón: son de nivel 0.
Cualquiera que no haya tocado GIMP en su vida puede empezar por el primero, y si va siguiendo termina pudiendo llegar a hacer los mas complejos sin problemas.
Habrá una tercera parte. ^_^
Re: Botones para webs y foros, parte2: Botones redondeados
buen aporte gracias x compartilo
dorot- Vip
- Cantidad de envíos : 108
Edad : 34
Fecha de inscripción : 13/12/2007
Temas similares
» Botones para webs y foros, parte 3: Estilo Vista y animados
» Botones para webs y foros, parte1: Botones rectangulares
» Tuto para conseguir dinero facil para comprarte un dominio .
» 56 Estilos para Photoshop !!
» Botones para webs y foros, parte1: Botones rectangulares
» Tuto para conseguir dinero facil para comprarte un dominio .
» 56 Estilos para Photoshop !!
:: Tutoriales :: Tutoriales Gimp
Página 1 de 1.
Permisos de este foro:
No puedes responder a temas en este foro.