metal.ize

El efecto de las líneas diagonales es cada vez más popular entre las web 2.0. Todos sabémos cómo hacer un efecto de línea diagonal de 1px de ancho. Es fácil: creamos una nueva imagen de 3x3 en nuestro editor gráfico favorito (el mío es el Macromedia Fireworks) y trazamos una diagonal a la mitad del cuadro en la dirección que queremos la diagonal:

Y con este patrón podemos crear cajas como esta:

¿Pero qué pasa cuándo queremos crear lineas diagonales más anchas? En este tutorial les explicaré cómo crear patrones para lineas más gruesas, que creanme, es más sencillo de lo que creen.

Determinar el tamaño

El primer paso es determinar el tamaño de nuestro patrón, lo cuál es más difícil de lo que creen. Primero que nada deben saber que para crear un patrón de líneas diagonales el ancho de la misma debe ser un número impar. ¿Queda claro? Esto quiere decir que no podrás crear un patrón de lineas diagonales de 2px cada una, deberán ser de 3px.

Una vez aclarado eso debemos elegir el ancho de nuestro canvas (el tamaño de la imagen, pues). Existen dos factores que determinan el tamaño de nuestro canvas. El primero es el ancho de la línea y el segundo es el espacio que quieres que exista entre cada línea. Para este ejemplo usaremos una línea de 11px de ancho con un espacio entre lineas de 9px. Para hacer esto, crearemos un canvas de 20x20px. ¿Cómo supe esto? Bueno, como buen ingeniero he creado una fórmula para hacerles la vida más sencilla:

Donde 'a' es el ancho de la línea, mientras que 'e' es el espacio que quieres entre las líneas.

Aplicando esta formulita a nuestro ejemplo, tenemos que a = 11px y e = 9px. Por lo tanto:

Por lo tanto, necesitaremos crear un canvas de 20x20px.

Actualización: 24 de Marzo del 2007

Y es que a veces nos gusta complicarnos TANTO la vida que dejamos pasar lo obvio por alto. El buen Cleverson nos comenta que con solo sumar el ancho de la columna y el espacio entre las lineas podemos obtener el tamaño de nuestro canvas. Tan obvio y sencillo que se me escapó de la vista. En fin, me disculpo.

Creando la diagonal

Ya que tienes tu canvas de 20x20px es hora de empezar creando la diagonal. Empezaremos creando la diagonal que todo mundo sabe crear: la diagonal de 1px (que llamaremos 'diagonal principal') que no es más que una línea que va desde una esquina de nuestro canvas a la esquina contraria en forma diagonal:

Una vez que tenemos esta línea en el centro de nuestro canvas, debemos poner los pixeles necesarios alrededor de nuestra diagonal principal para hacerla del ancho que queremos. Como en este caso buscamos crear una diagonal de 11px de ancho y, como ya tenemos uno de esos 11px (el pixel de nuestra diagonal principal), debemos agregar 10px más. Por motivos de simetría, serán 5px a la izquierda y 5 a su derecha:

¡Ya tenemos nuestra diagonal de 11px! La mayoría de las personas pensarían que han terminado y pueden usarlo a placer, pero si lo intentan obtendrán algo como esto:

'Completando' la diagonal

Para evitar que nuestra diagonal salga incompleta es necesario llenar las esquinas que quedaron vacías de nuestro canvas. ¿Con cuántos pixeles, te preguntas? Bueno, el mismo número de pixeles que colocaste alrededor de la diagonal principal. En este ejemplo, colocamos 5px a la izquierda y 5px a la derecha en el paso anterior ¿recuerdas? Pues lo mismo haremos ahora, solo que en las esquinas que quedaron vacías:

¡Y listo! Ya hemos terminado nuestro patrón. Ahora guardalo y aplicalo donde quieras, se verá como esto:

Nota: Algunos editores gráficos (como el Macromedia Fireworks) requieren que el fondo del patrón sea de color blanco, así que pon el fondo de este color antes de guardar y usarlo.