Recortar imagenes BOTONES

[juampick]

Hola, desde ya muchas gracias por preocuparse por mi problema.
Quiero hacer un boton en css + xhtml y los tengo casi listos pero el problema es que las imagenes que tengo de los 3 estados del boton son muy grandes y quiero "Recortarlas" pero que queden las 3 en la misma posición. Les dejo los links de las imagenes así pueden ver lo que digo:

www.cincomasdos.com.ar/DEMO2/home.png
www.cincomasdos.com.ar/DEMO2/home hover.png
www.cincomasdos.com.ar/DEMO2/home visited.png

Las imagenes son de 62x53. Lo que quiero hacer es poder recortarlas (si es posible por el contorno de las letras) xq sino el area de la imagen es muy grande para realizar el link. Me explico? espero que me puedan ayudar ya que tengo un conocimiento muy básico de manejo de imágenes.

Saludos y muchisimas gracias

[Anya82]

muy grande? entonces has la tipografia mas chica.
Mira, en flash, puedes hacer que tus botones funcionen solo donde hay letras, pero personalmente no te lo recomiendo, porque es latoso estar colocando el cursor exactamente donde esta trazada la letra, y lo que busca un usuario en los botones, es que sean faciles de manejar.

Yo te diria que cortaras de forma cuadrada/rectangular lo mas justo posible a la palabra -si eso es lo que quieres-
Para eso, lo puedes hacer con Photoshop, con la herramienta Crop tool, o si no, especificar cuantos pixeles le quieres recortar y de que lado utilizando el menu: Image>Canvas Size.


espero sea de tu ayuda mi respuesta.

[juampick]

Iniciado por Anya82

muy grande? entonces has la tipografia mas chica.
Mira, en flash, puedes hacer que tus botones funcionen solo donde hay letras, pero personalmente no te lo recomiendo, porque es latoso estar colocando el cursor exactamente donde esta trazada la letra, y lo que busca un usuario en los botones, es que sean faciles de manejar.

Yo te diria que cortaras de forma cuadrada/rectangular lo mas justo posible a la palabra -si eso es lo que quieres-
Para eso, lo puedes hacer con Photoshop, con la herramienta Crop tool, o si no, especificar cuantos pixeles le quieres recortar y de que lado utilizando el menu: Image>Canvas Size.


espero sea de tu ayuda mi respuesta.

Muchas gracias, lo he podido medianamente solucionar con el GIMP (LInux) usando tmb la función CANVAS SIZE. Ahora el problemita que tengo es que mis png pesan mucho, algo de entre 2-23kb y para ser en botones es bastante porque en IE 6 por ejemplo tarda en cargar. Como se puede achicar pero sin perder la calidad? Un abrazo

[Anya82]

pues yo solo puedo decir que intentes con diferentes formatos: jpg -en diferentes calidades-, o gif -con diferentes cantidades de color (2, 4, 8, 16, 32, 64...)-

no exijas algo perfecto, en web hay que buscar equilibrio entre calidad de imagen y velocidad de carga. Asi que podrias usar un formato que, si lo observas muuuuy detalladamente, pensaras que no es perfecto, pero si simplemente lo observas como cualquier usuario observa los botones (no les presta demasiada atencion a que si la calidad es excelente o si perdio un poco de info) encontraras un formato con calidad decente. Ademas piensa que esa falta de informacion que se pudo haber perdido al comprimir tu imagen, no se notara tanto, puesto que en tu sitio el boton estara rodeado de muchos otros elementos como banners, fotos, texto, fondos, etc.

[juampick]

Iniciado por Anya82

pues yo solo puedo decir que intentes con diferentes formatos: jpg -en diferentes calidades-, o gif -con diferentes cantidades de color (2, 4, 8, 16, 32, 64...)-

no exijas algo perfecto, en web hay que buscar equilibrio entre calidad de imagen y velocidad de carga. Asi que podrias usar un formato que, si lo observas muuuuy detalladamente, pensaras que no es perfecto, pero si simplemente lo observas como cualquier usuario observa los botones (no les presta demasiada atencion a que si la calidad es excelente o si perdio un poco de info) encontraras un formato con calidad decente. Ademas piensa que esa falta de informacion que se pudo haber perdido al comprimir tu imagen, no se notara tanto, puesto que en tu sitio el boton estara rodeado de muchos otros elementos como banners, fotos, texto, fondos, etc.

Muchas gracias. Mikmoro en el subforo de CSS me dió un dato muy interesante de como hacer una imagen con los 3 estados juntos, y después ir cambiando con selectores, y ahi bajo mucho el tiempo de carga. Tmb con tu consejo cambié las png a jpg y mejoró bastante aún perdiendo un poco de calidad, pero que tampoco es tan importante. Saludos y muchas gracias

[Anya82]

oh, si! el uso de CSS y selectores es muuuuuy util y practico. Ahorra muchisimo tiempo y espacio.