Cómo mejorar la imagen de tu web

Cómo mejorar la imagen de tu web.

La imagen que ofrece un website es muy importante a la hora de mantener el interés de nuestros visitantes.

Si no puedes gastar dinero en pagar un buen diseñador, no tires la toalla, no te rindas, dedica un tiempo para conseguir una imagen más que decente para tu web.

Hay programas para "tratar imágenes" disponibles hoy en día que hace relativamente fácil, incluso para un "novato", la creación de gráficos decentes para internet.

Veremos algunos trucos para mejorar tus gráficos. El programa que usaré para mis ejemplos es el PAINT SHOP PRO v5 de Jasc. La razón de que eligiera este programa en particular es porque es relativamente barato (menos de 100 $US), además tiene un interfaz amigable y de fácil uso, y además puedes bajarte una copia de evaluación gratuita desde http://www,jasc.com.

También puedes bajártelo de la zona de download de Masterdisseny (http://www.masterdisseny.com) No es la intención de este artículo dar las instrucciones paso a paso de como crear gráficos. Hay multitud de tutoriales disponibles para ello (tienes una lista al final de este artículo) Lo que quiero es darte unos cuantos consejos y trucos para mejorar tus imágenes.

GIF vs. JPEG - ¿CUÁL DEBERÍAS UTILIZAR?

Estos son, básicamente, los formatos gráficos que puedes elegir cuando diseñes imágenes para la web.

El GIF es normalmente la mejor elección para logos, líneas, iconos, cliparts e imágenes de texto que tengan grandes y sólidas áreas de color alrededor. Sólo soporta un máximo de 256 colores, pero tiene la ventaja de que soporta transparencias y es el formato utilizado por muchas animaciones, como los banners animados. El tamaño del archivo de la imagen es normalmente muy pequeño, por esta razón la mayor parte de todas mis imágenes están guardadas en formato GIF.

¿Por qué deberías tener necesidad de utilizar el formato JPEG? Si tienes una imagen muy detallada, altamente compleja, con cantidad de colores diferentes, utilizar el formato JPEG es probablemente la mejor elección. Las fotografías guardadas en formato GIF tienden a perder mucha calidad.

Fondos y borders

Fondos -

Si usas una imagen de fondo en forma de cuadro (el cual no recomiendo para webs comerciales como norma general). Debes asegurarte de que el tamaño y la forma del cuadro no permitan que se diferencie donde empieza uno y acaba el otro. En otras palabras, no querrás que el fondo de tu página parezca el suelo de tu lavabo. El fondo debe verse liso y sólido.

Para conseguir esto, empieza con una imagen relativamente grande, (yo uso aproximadamente 500 x 500 píxels) y selecciona un pequeño cuadro -en el centro de la imagen si es posible- usando la herramienta de selección con el "anti-alias" desactivado. Entonces elige: "selections">> "convert to seamless pattern"
Tu imagen debería, entonces, poder ser utilizada sin problemas como fondo.

Borders -

Los Borders son fondos en forma de línea que empiezan con un color a la izquierda de la pantalla y se degrada hacia la derecha hasta llegar al blanco (que ocupa 3/4 partes del ancho de la pantalla). El texto se coloca en este lugar de la página. Pienso que es una excelente opción para sitios comerciales. Tú tienes color sin comprometer la facilidad de lectura.

Cuando hagas tus borders, asegúrate de que la imagen tiene un ancho de al menos 1600 píxels, impidiendo de esta manera que la imagen se repita a lo ancho, en resoluciones más grandes de pantalla.

Por ejemplo, si diseñas un border de 700 píxels de ancho, este se adaptará perfectamente sobre una resolución de 640x480, pero sobre 800x600 o más, el border se irá repitiendo al lado derecho de la página todas las veces necesarias hasta llenar el ancho de la pantalla.

Así como debes hacer el border tan largo como puedas, al contrario, necesitas hacerlo tan pequeño como sea posible para la altura. De esa manera, el tamaño del archivo no es grande y el tiempo de descarga es relativamente rápido.

CONSEJOS EN SOMBREADOS

Habrás visto páginas que tienen el fondo de color y títulos de imagen sombreados pero con un halo blanco alrededor, bordeando la sombra. Esto no es muy recomendable para el "look" de tu página; las buenas noticias son que es fácil solucionarlo.

El color por defecto para tu nueva imagen, probablemente sea el blanco. Lo que necesitas hacer, es cambiar ese color por el predominante del fondo de tu página. Puedes hacer eso, usando la opción "flood fill". Después sitúas tu texto sobre esa nueva imagen y añades el sombreado "drop shadow", y haces que el color de fondo sea transparente, y lo guardas. Ya no verás ese horrible halo alrededor.

TAMAÑO DE LOS ARCHIVOS

El tamaño de tus imágenes debe ser tan pequeño como sea posible, pero con prudencia para que no pierdan calidad. Puedes reducir algo el tamaño disminuyendo el número de colores utilizados, pero si tu archivo es todavía demasiado grande, intenta usar una herramienta de compresión como GIFBOT de Netmechanic, es gratuita.

MISCELÁNEA DE CONSEJOS

- Cuando coloques texto sobre una imagen, asegúrate de tener activado "antialias". Esto alisará el texto, evitando que se vea dentado.

- Edita siempre las imágenes en 16 millones de colores, esto permitirá conseguir una imagen bien lisa.

- Crea imágenes tan pequeñas como sea posible (tanto de ancho y largo como de peso en Kb), sin comprometer la calidad de la imagen.

- Salva tu trabajo frecuentemente. En el caso de equivocarte, podrás empezar desde la última vez que guardaste la imagen y no tendrás que volver a empezar desde el principio.

Recuerda que muchas imágenes en internet están protegidas por copyright, respétalo. Porque aunque tu puedas copiar una imagen, no significa que debas hacerlo. Asegúrate de tener el permiso del diseñador para usar su trabajo, o utiliza imágenes de dominio público (que hay muchas). Yo se de lo que estoy hablando, ya que he sido víctima de gente que ha usado mi trabajo sin permiso. Los diseñadores trabajan duro en sus gráficos, no los cojas sin su permiso, por favor.

Para más información, consejos y tutoriales visita:

GraphoManiac - http://hem1.passagen.se/grafoman/index.aspl
Paint Shop Pro Web Graphics - http://www.pspro.ml.org
Web Graphics on a Budget - http://mardiweb.com/web/index.aspl