Buscar
 
 

Resultados por:
 


Rechercher Búsqueda avanzada

Conectarse

Recuperar mi contraseña


Botones para webs y foros, parte1: Botones rectangulares

2 participantes

Ir abajo

Botones para webs y foros, parte1: Botones rectangulares Empty Botones para webs y foros, parte1: Botones rectangulares

Mensaje por Suiken Dom Ene 06, 2008 8:26 am

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: Botones para webs y foros, parte1: Botones rectangulares 6wxi2wl

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.

Botones para webs y foros, parte1: Botones rectangulares 81jwmsp

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.

Botones para webs y foros, parte1: Botones rectangulares 6nqyucj

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:

Botones para webs y foros, parte1: Botones rectangulares 6yam41u

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:

Botones para webs y foros, parte1: Botones rectangulares 8auslrr

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:

Botones para webs y foros, parte1: Botones rectangulares 89jqy52

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".

Botones para webs y foros, parte1: Botones rectangulares 8ehb7ra

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:

Botones para webs y foros, parte1: Botones rectangulares 6x7c0ba

Estos son ejemplos que se consiguen con distintas formas de degradado:

Linear: Botones para webs y foros, parte1: Botones rectangulares 6z9rko9
Radial: Botones para webs y foros, parte1: Botones rectangulares 6qa6u5v

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:

Botones para webs y foros, parte1: Botones rectangulares 6p54zzs

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:

Botones para webs y foros, parte1: Botones rectangulares 6xajyj8

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): Botones para webs y foros, parte1: Botones rectangulares 853d9ag Botones para webs y foros, parte1: Botones rectangulares 6sqqakw

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:

Botones para webs y foros, parte1: Botones rectangulares 6tq029l

Desenfocamos el fondo con este filtro, con mas o menos los valores que veis ahí (cada cual puede ajustarlos a su gusto):

Botones para webs y foros, parte1: Botones rectangulares 7ynsw9i

Ahora, hacemos otra selección en la parte de arriba

Botones para webs y foros, parte1: Botones rectangulares 87nyv08

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:

Botones para webs y foros, parte1: Botones rectangulares 6tnuxis

Ahora sólo queda añadir el marco, y listos.
Este es el resultado final: Botones para webs y foros, parte1: Botones rectangulares 6xk8c1z

Y con esto se termina la primera parte del tuto.
Suiken
Suiken
Nivel 3
Nivel 3

Cantidad de envíos : 41
Fecha de inscripción : 13/12/2007

http://suiken.foroactivo.com/portal.htm

Volver arriba Ir abajo

Botones para webs y foros, parte1: Botones rectangulares Empty Re: Botones para webs y foros, parte1: Botones rectangulares

Mensaje por kickass; Miér Ene 09, 2008 1:15 pm

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;
kickass;
Administrador
Administrador

Cantidad de envíos : 290
Edad : 31
Fecha de inscripción : 25/11/2007

Volver arriba Ir abajo

Volver arriba

- Temas similares

 
Permisos de este foro:
No puedes responder a temas en este foro.