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, parte1: Botones rectangulares
2 participantes
:: Tutoriales :: Tutoriales Gimp
Página 1 de 1.
Botones para webs y foros, parte1: Botones rectangulares
Creación de botones para webs y foros en GIMP (I)
Pues sí, GIMP también vale para hacer cosas así. Este tutorial se va a dividir en varias partes, yendo de los modelos mas básicos a otros mas atrevidos como los estilos Vista o Mac.
Experiencia con GIMP previa: ninguna, esto lo explicaré prácticamente desde cero.
Supongo que los aspirantes a webmaster encontrarán aquí un material muy,muy útil para darle algo de "vidilla" a sus foros, blogs y webs.
Tu primer botón: el cuadradito de toda la vida.
Por algo se empieza, ¿No?
Esto es lo que vamos a hacer:
Es simple, simple. Lo primero es ir a Archivo||Nuevo y crear una imagen vacía del tamaño que deseemos para nuestro botón.
En este caso, he seleccionado un tamaño de 100x30.
Y a continuación, seleccionáis un color y pintáis con la herramienta bote de pintura todo el botón.
El siguiente paso es elegir un tipo de letra apropiada que os guste, elegir un color que quede bien con el del fondo y escribir el contenido del botón.
Esto ya va cogiendo forma, ¿Eh? Pero a las letras les falta algo de "vidilla", una sombrita les vendría bien.
Podríamos hacerlo a mano, pero hay un filtro para eso.
Pinchad la capa del texto con el botón derecho del ratón. Os saldrán varias opciones. Elegid "Alfa a selección"; eso seleccionará sólo el texto, y aplicad este filtro con mas o menos estos valores:
Y por último, para rematar la faena podemos añadir un marco así:
* Seleccionad la capa del fondo
* Usad la opción Seleccionar||Todo
* Elegid como color de frente el que deseéis para vuestro marco (Yo elegí blanco, pero cada cual es libre de elegir)
Y por último, usad esta útil herramienta:
Si no queda tan definida como queréis, dadle a Ctrl-Z para deshacer y pulsad "Estilo de la línea". Eso hará que aparezcan varias opciones adicionales. Desactivad la casilla "Anti-alias" y ya saldrá bien. Esta casilla es útil tenerla activada cuando trabajamos con selecciones que tengan curvas, su misión es suavizarlas y entonces no parecen dibujadas a mordiscos.
Aqui podeis verla:
Y ya tenemos un precioso y sencillo botoncito rectangular. Sólo queda darle a Archivo||Guardar como... y guardarlo como mejor nos convenga. (JPG,GIF,PNG...).
Mejorando el botón cuadrado con degradados.
El sistema es igual al anterior, pero al rellenar el fondo en vez de usar el bote de pintura usaremos un degradado.
Parece una tontería, pero los resultados son mucho mas vistosos y de aspecto algo mas "profesional".
Si nunca has usado esta herramienta, es sencillo: una vez elegido lo anterior, pulsas en un punto de la imagen que va a ser donde empiece el degradado; sin soltar el botón del ratón, verás que una línea te sigue. Es para indicar la dirección en la que van a ir los colores. Y cuando decidas el punto donde debe acabar, lo sueltas y ya se hace solo.
No importa si te sales de la superficie del botón, a veces hacerlo puede dar resultados interesantes.
El resto, es igual que en el botón que hicimos antes: ponemos unas letras y hacemos un marco.
Con estos colores ni siquiera es necesario ponerle una sombra, ya queda bien así.
Este es el resultado:
Estos son ejemplos que se consiguen con distintas formas de degradado:
Linear:
Radial:
Mejorando el botón cuadrado con bisel y bump map
Suena complicado, pero es una técnica muy sencilla y el resultado son botones con cierto relieve y rápidos de hacer.
Lo primero es tener un botón cuadrado normal (pero no hagáis el marco todavía). Seleccionad la capa del fondo y aplicad este filtro:
Si os vale el volumen que sale, listo: ponéis el marco y fin del trabajo. Pero si deseáis mas, se puede ajustar siempre y cuando hayáis activado la casilla "Mantener la capa de relieve".
La idea es seleccionar la capa del fondo y aplicar este filtro, jugando con los valores hasta tener algo que te convenza:
Nota: es importante que donde pone "Mapa de relieve [Bumb map]" seleccionéis la capa "bumpmap" que se generó automáticamente. Es la que dará relieve al botón.
Se añade un marco, y mas o menos este es el resultado (según los distintos valores que usemos para el bump map, los resultados pueden variar):
Mejorando los botones cuadrados con selecciones
Este truquito es una chorrada, pero pueden conseguirse resultados bastante interesantes.
Volvemos a partir de la misma base: nuestro botoncito cuadrado, pero antes de ponerle el marco hacemos lo siguiente:
Desenfocamos el fondo con este filtro, con mas o menos los valores que veis ahí (cada cual puede ajustarlos a su gusto):
Ahora, hacemos otra selección en la parte de arriba
A continuación elegimos como color de frente el blanco y aplicamos a esa selección un degradado "De frente a transparente", aquí veis donde se selecciona:
Ahora sólo queda añadir el marco, y listos.
Este es el resultado final:
Y con esto se termina la primera parte del tuto.
Re: Botones para webs y foros, parte1: Botones rectangulares
O_O que pena no me habia dado cuenta de la primera parte como ya lo dije en la segunda gracias por tus aportasos.
kickass;- Administrador
- Cantidad de envíos : 290
Edad : 31
Fecha de inscripción : 25/11/2007
Temas similares
» Botones para webs y foros, parte 3: Estilo Vista y animados
» Botones para webs y foros, parte2: Botones redondeados
» Tuto para conseguir dinero facil para comprarte un dominio .
» 56 Estilos para Photoshop !!
» Botones para webs y foros, parte2: Botones redondeados
» 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.