Algunos recursos para personalizar tu blog o sitio web.

Gabriel Esteffan de MOUSE DIGITAL, ha preparado un artículo muy bueno, ideal para ayudarnos a personaliza pequeños detalles o sellos distintivos en tu página, logo, etc, pero incluso algún «trabajo» para la universidad o del colegio. El recurso lo tenemos cerca, en diversos sitios que te permiten crear logos e imágenes personalizadas y gratuitas, para darle un toque personal a tu obra.

¿Cuál imagen te gustaría ver en un sitio?

Esta:

Está realizada con papel y un rotulador. Escribe tu nombre, busca la cámara digital, encuadra, que salga bien enfocado. Cuando la tengas, conecta el aparato al puerto USB y selecciona la imagen que más te guste. Cámbiale el tamaño y súbela a tu sitio, insértala en el lugar adonde quieras colocarla. Tiempo aproximado: 3 a 5 minutos.

O esta otra:

Se ha realizado mediante entrar en ImageTool.net, anota tu nombre, configura opciones como el formato del texto, reflejo y color. Luego presiona «Create logo«. Finalmente, cuando cargue, guarda la imagen y listo. Tiempo: 30 a 80 segundos.

Aquí tienes otra buena opción Cool Text, en la misma línea que el anterior, para crear textos y logos.

Logo para el correo

Si te gusta recibir correos electrónicos y quieres llamar la atención de tus lectores, tener una imagen atractiva te puede ayudar. Es el típico botón que usan algunos blogs para mostrar la dirección de la casilla de su creador.

Si tienes tu correo en Yahoo! o Hotmail, obtener imágenes como esta es muy sencillo: sólo debes E-Mail Icon Generator y escoger la versión que corresponde.

Otras webs que ofrecen este tipo de servicio son : Mailonpix ; Hidetext ; Mask Email Image Generato; Gmail Signature Generator y E-mail Sigs (los ejemplos siguientes han sido realizados con ellos).

Para lograr que estos íconos lleven directamente al cibernauta a comunicarse contigo, debes insertar el código HTML correspondiente:

<A href="mailto:tumail@casilla.com">
<img src="http://gsig.brightdev.com/3/mimail.jpg">
</A></br>

Los textos en rojo debes cambiarlos por tu casilla de email y la dirección que te entregará el sitio generador del logo, respectivamente. No es tan complicado. Si hasta yo lo logré en dos minutos.

Los otros caracteres en negro deben mantenerse intactos. De lo contrario, es muy probable que te acuerdes de mi santa madre, que no podrá ayudarte porque, con suerte, sabe navegar. Probé con éxito esta fórmula en las barras laterales de WordPress y Blogger.com. Ojo, que también puedes usar la imagen sin el enlace, como una herramienta para evitar el molesto spam.

Si te gusta compartir tus gustos, Needasig.com está diseñado para ti. Este sitio te ayudará a crear barritas donde te declaras fanático de un equipo, juego o programa. Hay muchos motivos para elegir. Un ejemplo es este:

…perfecto para tu firma (signature) cuando participas en foros online.

Los botones pequeños

La fiebre de los blogs y la web 2.0 han puesto de moda dos de los diseños más pequeños de la red. Uno es el «Brilliant button«, una imagen rectangular de apenas 80×15 pixeles. También conocido como «Antipixel» o «Website button«. Luca Zappa es un italiano, que se le ocurren cosas creativas. Este ingeniero en computación del Politécnico di Milano creó el «Brilliant button maker», una sencilla herramienta que permite crear estos botones.

En ésta podrán escoger qué colores tendrá el «Antipixel«, cómo estarán divididos los dos rectángulos interiores, qué imagen quieres insertar a la izquierda o a la derecha y qué palabras quieren detallar.

Una vez que tengan lista la pequeña maravilla, presionen el botón «Host to ImageShack.us«. En unos segundos tendrán una dirección directa para linkear.Un consejo: no pongan palabras muy largas ni fotos demasiado pretenciosas. Esos botones tienen que juntarse varios para poder apreciarlos.

Para cuando necesites hacer un botón, aquí tienes a Buttonator (menudo nombrecito), así no tienes que abrir otros programas (Photoshop o Fireworks), es un sitio interesante con pocas opciones, pero quizás te sirva.

Otros sitios que realizan la misma y loable labor son eKstreme y Button Maker, que no destaqué tanto porque no admiten incrustar imágenes y tampoco permiten subirlos con facilidad a un servidor.

Si te da lata crear tu propio botón brillante, puedes visitar gtmcknight y copiar diseños hechos. El creador del servicio invita a «robar» botones descaradamente.

Para pegar estos botones en un blog, el procedimiento es similar al que señalamos en la hoja anterior. Debes pegar el siguiente código HTML:

<a href="Escribe_aquí_el_link_que_desees">
<img src="Aquí_pega_la_URL_de_Imageshack.us"/></a>

Los íconos favoritos (favicons)

Si eres un blogger o tienes una página y te gusta marcar la diferencia, los «favicon» son una excelente opción. Los favicon son los diseños que aparecen en páginas, justo antes de la dirección del sitio. El segundo de los «micro íconos» que ha puesto de moda la Web 2.0. Favicon es una voz inglesa que mezcla dos conceptos 100% web: favoritos e íconos. Cuando te gusta un sitio y lo quieres dejar entre tus páginas de cabecera, sólo debes presionar el viejo Ctrl+D. Para distinguir un sitio de otro, entre tus muchos marcadores (favoritos en Firefox), estas diminutas fotos son muy prácticas.

Si pensabas que 80×15 pixeles eran casi imperceptibles, debes tener una lupa para apreciar los 15 pixeles cuadrados de los favicons. Para crear una de estas piezas de «joyería», dos sitios nos ayudan.

El primero es Dynamic Drive, que cuenta con dos grandes ventajas: es muy simple de utilizar y permite, además, crear íconos para Windows. Es cosa de escoger una imagen y presionar «Create icon». El sitio te preguntará adónde quieres guardar la imagen (favicon.ico) que te servirá para el Escritorio y tu página web.

La otra alternativa es «FavIcons from Pics» que permite insertar un texto que se desplazará «ad infinitum» y te muestra cómo quedará la imagen una vez instalada en alguna página. El problema es que siempre hay que bajar un archivo zip, dentro del cual vienen los documentos con extensión .ico.

Aquí una pequeña colección de herramientas para realizar fácilmente favicons:

• Favicon Generator
• Favicon Generator 2
• Even More Favicon Generators
• Favourite Favicons
• Mysteries Of The Favicon.ico — How To Create A Favicon In Photoshop

¿Qué hacemos con el documento favicon.ico? Lo primero es subirlo a tu sitio. Es muy liviano, así que no hay problemas con la capacidad de almacenamiento. Eso sí, cerciórate que la dirección funcione.

Paso 2: Abre la plantilla HTML de tu sitio. En WordPress.com hay que pagar 10 dólares para editar la hoja CSS. En Blogger, el trámite es gratuito. Como no me sobra la plata, hice la prueba en Blogger: fui a «Plantilla» -> «Edición de HTML».

Paso3: Blogger no me dejó subirlo porque sólo reconoce jpg y gif. Tuve que subirlo a Mediamax, un buen sitio que permite alojar 25 GB gratis.

Cuando veas el comando <Head>, inserta justo después las siguientes líneas:

<link rel="shortcut icon" href="/favicon.ico"/>

Lo único que debes hacer es pegar la dirección del archivo en lugar de /favicon.ico. Lo siguiente es guardar la plantilla y ver el resultado final.