A falta de un nombre mejor en castellano, que seguramente existirá y me avergüenzo de no saberlo, utilizaré la expresión tilear, o convertir en tiles, baldosas. Es decir, conseguir que la imagen termine en sus extremos de forma que encaje consigo misma, y así pueda repetirse siguiendo un patrón (horizontal, vertical, o ambos) pareciendo una única imagen continua.

Como ejemplo voy a utilizar la antigua imagen de cabecera de www.ciudadcapital.net, perteneciente al theme frozenage de WordPress (que es Creative Commons Attributions 2.5). Es una imagen de una cordillera, de 960 píxeles de ancho, que yo quería ampliar para que pudiera utilizarse en todo el ancho de la página. La foto original es de pdphoto.org, por lo que es de dominio público.

Guardamos la imagen y la abrimos con Photoshop (en mi caso CS5, aunque la funcionalidad que vamos a utilizar existe desde hace muchas versiones). Si vamos a Image / Canvas Size (Imagen / Tamaño de lienzo), podremos ver el tamaño que tiene en horizontal. En mi caso es de 960 píxeles. Apuntamos el tamaño para no olvidarnos y cerramos el menú.

Nos vamos ahora a Filter / Other / Offset… (Filtros / Otro / Desplazamiento…), seleccionamos Wrap Around (Dar la vuelta) y especificamos la mitad de los píxeles que habíamos apuntado (480 en este caso), en sentido horizontal. Si estuviéramos utilizando una imagen que quisiéramos repetir según un patrón en todas direcciones (una textura, un fondo para una página web o fondo de escritorio, etc), tendríamos que hacer lo mismo en sentido vertical, especificando la mitad del número de píxeles que tuviera la imagen como tamaño vertical.

Con esto obtendremos una imagen que encajaría si la repitiéramos varias veces en horizontal, aunque con el “pequeño” detalle de que ahora no encaja en su mitad.

Sólo nos queda utilizar las herramientas que nos proporciona Photoshop para editar esta zona central y retocar la imagen para que parezca que es continua. En mi caso recomiendo el Tampón de clonar: Pinchamos en una zona montañosa mientras pulsamos la tecla alt y así centramos el tampón en ese lugar. Después volvemos a pinchar en la zona central de la imagen y así copiamos poco a poco pequeños “trozos” de imagen hasta que parezca que no hay una discontinuidad:

Y ahora ya podemos utilizar la imagen encajándola en sentido horizontal, haciendo que sea perfectamente válida para repetirla mediante hojas de estilo css, por ejemplo, y poder llenar todo el ancho de la página independientemente de la resolución del monitor de quien la esté viendo.

En el último post lo había dejado todo a medio hacer, y la verdad es que el aspecto de la web en general dejaba mucho que desear. Sólo necesitaba buscar un rato libre para terminar lo que había empezado.

De todos modos los tonos claros no me estaban gustando nada, y no me daba la sensación de que lo que estaba construyendo tuviera relación alguna con la temática de la web (supuestamente informática y temas afines). Por casualidad visité The Cosmonauts, el blog del estudio Vostok, y me encantó el esquema de colores, con grises claros y oscuros, y un naranja chillón para los enlaces como contraste, y me propuse hacer algo parecido (desde la admiración por un trabajo bien hecho, espero que esto no se considere un plagio demandable).

He mantenido parcialmente la cabecera (aunque ligeramente subida para que el borde de la página corte la imagen del sello), y he conservado el diseño a dos columnas. He añadido un fondo con textura, que creo que enriquece más que un color plano. También he utilizado un naranja distinto al suyo, que creo que llamaba demasiado la atención (aunque considero cambiarlo por un tono arenisca para que sea similar a la cabecera), y he cambiado algunas fuentes a Verdana (una de mis favoritas de siempre). Para los colores grises de los textos sí que he utilizado los mismos tonos que ellos, ya que es donde creo que han dado en el clavo para una lectura cómoda. También he añadido un redondeado en los posts (aunque Internet Explorer sigue en su línea de utilizar únicamente lo que quiere).

He eliminado el subtítulo que tenía anteriormente, he editado los colores del AdSense (que antes eran rosas, en las capturas ya se ve en ambos casos con el nuevo color) y he pasado a blanco y negro con algo menos de contraste los iconos de las redes sociales, y con eso y un bizcocho, el tema está cambiado de nuevo.

¿Opiniones? ¿Se me ha colado algún fallo?

Hace ya unos meses que había comenzado a rediseñar esta página, pero me había quedado parado tras terminar la cabecera y un par de detalles más. He hecho un par de cosas nuevas y lo he traducido todo a un theme de WordPress, para poder ponerlo en pruebas en la página y así poder ir trabajando sobre algo visible.

Está en permanente construcción, como todo en Internet…  

Aprovechando un par de tardes desocupadas, se me ocurrió actualizar el curriculum que suelo utilizar, típico a más no poder, por algo distinto. Hacía tiempo que quería incluir elementos gráficos en el documento, de forma que lo personalizaran y pudiera distinguirse fácilmente entre otros, pero manteniendo el máximo posible de legibilidad mostrando toda la información realmente importante.

Navegando por el ancho internet encontré hace poco un ejemplo de lo que yo quería hacer, hecho a modo de ejemplo por un diseñador, Michael Anderson (aunque no es su verdadero CV que, extrañamente, puede encontrarse en su propia página y es tremendamente clásico). Su ejemplo es el siguiente:

En el diagrama utiliza además varias gráficas que, sin duda, escapan a mi capacidad como diseñador (que apenas pasan del corta-pega más sencillo), pero el primer diagrama a modo de línea cronológica, como una mezcla entre un histograma y un diagrama de Gantt, me pareció justo lo que quería hacer.

Mis ideas iniciales eran:

• Mantener varias líneas horizontales para poder establecer paralelismos gráficos entre la carrera profesional y la académica, máxime teniendo en cuenta que se solaparon durante varios años.
• Mostrar distintas secciones para, al menos, trabajos, estudios y conocimientos.
• Utilizar una única gama de colores, por si necesito imprimirlo en blanco y negro (de modo que los distintos colores no representen información).
• Jugar con la idea de la nube de etiquetas para mostrar distintos conocimientos.
• Y, en general, hacer una prueba de concepto a ver qué tal podía quedar.

Y, después de intentarlo, me quedo con varias conclusiones (muestro una captura donde sólo he sombreado el correo personal y el número de teléfono, ya que el resto de la información está en mi perfil público de LinkedIn, una red de contactos profesionales):

• No termino de estar del todo contento con varias cosas, pero siendo una prueba de concepto inicial me parece algo sobre lo que empezar a trabajar. Especialmente la sección con la nube de etiquetas que, al tener únicamente texto, parece demasiado “blanca”, lo que hace resaltar aún más la siguiente sección, haciéndola parecer demasiado recargada.
• Los diseños deberían haber sido vectoriales, pero finalmente tuve que optar por PhotoShop, por ser una herramienta con la que al menos sé por dónde empezar.
• La tipografía utilizada: Tw Cen MT, disponible con OS-X, creo que da muy buen resultado para este tipo de cosas.
• Olvidarse de un programa de edición de textos y utilizar software de maquetación: En mi caso he utilizado Scribus, que ya conocía de la plataforma Windows y también está disponible para Mac y Linux (en Mac sólo he necesitado instalar GhostScript para poder tener acceso a algunas funcionalidades de Scribus que, de otro modo, aparecían desactivadas. Disponible, por ejemplo, aquí).
• He podido reducir varias páginas a un único papel, mostrando la información suficiente. Por supuesto, he dejado de lado las explicaciones pormenorizadas de qué he hecho en cada trabajo en el que he estado. Creo que el nombre del puesto y las tecnologías que aparecen en la nube de etiquetas inmediatamente inferior deberían dar una idea aproximada. Y, además, he incluido un buen “Más información en <enlace a LinkedIn>“, donde puede encontrarse toda la información que ahora “falta”.
• No indico qué representa exactamente la altura en cada uno de los diagramas… lo que en parte es un efecto buscado, haciendo que quien tenga que “interpretar” el documento pueda pensar lo que quiera: puede representar la necesidad de esfuerzo en un trabajo concreto, la cantidad o calidad de trabajo desarrollado, etc. Por mi parte lo he diseñado pensado en esa relación entre cantidad de trabajo y dificultad del mismo, pero asumo que podrá ser interpretada de alguna otra manera. Me arriesgaré a cambio de no tener que incluir una frase como “la altura significa <x>“.

Los comentarios serán bienvenidos.

Probablemente esta página tenga mucha más actividad en fechas próximas, por lo que no está de más que la adecentemos un poco. Como parte del rediseño gráfico, lo primero que vamos a hacer es diseñar un fondo/cabecera para la página, y para ello vamos a seguir el tutorial de Chris Spooner para crear tu propio Portfolio online (aunque, en este caso, explicado para torpes).

En Photoshop, al crear un nuevo archivo, se nos ofrecen una serie de opciones predefinidas, entre las que están las de Web, donde escogeremos un tamaño de 1600 x 1200 para trabajar.

Trabajando con este tipo de resoluciones debemos recordar que hay quienes se conectarán desde equipos con una resolución menor. Dado que voy a mantener el diseño de página centrado, la solución más lógica es “restringir” el diseño a un máximo de 1024 pixeles, y así permitiremos a cualquier usuario resoluciones menores ver la página completa en su navegador. No nos preocuparemos de resoluciones menores de 1024.

Para realizar esta tarea colocaremos unas guías. En Preferences/Units & Rulers comprobaremos que tenemos seleccionados Pixels como unidad de medida. Yendo al menú View/New Guide, colocaremos nuevas guías verticales en las posiciones que nos interesan (sabiendo que tenemos 1600 pixeles de ancho y queremos delimitar 1024 de ellos centrados, marcaremos las posiciones 288, 800 y 1312).

Como fondo para la cabecera, vamos a utilizar el mismo ejemplo de Chris Spooner, color beige más una textura de cemento, que irá bastante bien con el resto del diseño que tengo pensado para la página. En este post de Bittbox hay unas cuantas texturas de suelos y paredes; nosotros vamos a utilizar la sexta.

Como color beige utilizamos B9ADA5 (es importante que lo recordemos para poder utilizarlo más adelante en las hojas de estilo de la página). Añadimos el ruido mediante el filtro Filter/Noise/Add Noise, del 3% y marcando la opción de que sea monocromático. En una nueva capa añadimos una sección de la imagen de cemento que nos interesa.

Con la herramienta Borrador, seleccionando un pincel lo más difuso posible, borramos los bordes de la nueva capa. Para dejar el límite lo más progresivo que podamos, lo mejor será hacer un primer borrado con un pincel más denso y un segundo más suave. Por último, modificamos el tipo de superposición de capas. Aquí yo discrepo del tutorial original, que recomienda una superposición Overlay del 40%, mientras que yo he utilizado una Luminosity al 100%.

Quedando un resultado similar al siguiente:

A partir de aquí abandonamos el tutorial original y seguimos por nuestra cuenta. Para la cabecera utilizaremos la fuente FFF Tusj, de libre distribución, creada por Magnus Cederholm y disponible en dafont.com, con un color oscuro de tonos marrones (como 271F19). Para añadir más detalles incluimos también un subtítulo para la web e incluimos una imagen.

El sello lo he creado siguiendo este otro excelente tutorial de Visual Blast, que se hace en apenas media docena de pasos. Incluir una foto de uno mismo en tu propia página web siempre indica un ego tremendamente desmesurado, y yo no iba a ser menos.

Y con esto seguimos avanzando en el rediseño de la web. Paso a paso.