« Tutoriales « BlogArtículosDownloads

Uso Fireworks siempre para hacer maquetas Web, diagramas, esquemas, incluso los logos los diseño ahí. Suele ser muy frecuente usar rectángulos con esquinas redondeadas, sobre todo para hacer botones, pero a tamaños pequeños, los bordes de color quedan con ciertos artefactos y se ven poco nítidos.

Acá va (ahora que terminé mi informe de título) un tutorial muy sencillo con un truco que descubrí para lograr bordes redondeados más finos usando Fireworks.

Primero, el problema

En Fireworks, como sabrán, hay dos maneras de hacer rectángulos redondeados: una es por medio de la herramienta Rectángulo Redondeado, que permite flexibilidad y control sobre las esquinas, y la otra es dibujar con la herramienta Rectángulo tradicional, y luego en Propiedades, ajustar la propiedad Redondez del rectángulo, que uno suele no mirar (ver figura):

El problema es que, por razones que no alcanzo a entender, ambos métodos dibujan los bordes de modos distintos. Mientras la herramienta Rectángulo Redondeado dibuja bordes suavizados correctamente, pero demasiado gruesos y difusos (en especial los rectos), la herramienta Rectángulo dibuja bordes rectos definidos, pero presenta artefactos bien feos en las esquinas redondeadas.

El pantallazo siguiente les aclarará la diferencia. Ambos rectángulos tienen el mismo estilo de borde: 1px Soft (se muestra a tamaño original y un detalle de las esquinas ampliado dos veces):

¿Notan la diferencia? Muchas veces bastará con quedarse con el método de Rectángulo Redondeado (arriba), que no tiene artefactos y suaviza correctamente; pero para ciertas situaciones ese borde es muy grueso, como tiene 1px de grosor no se puede dejar más delgado, y necesitamos bordes definidos como con el método de Rectángulo tradicional.

La solución

Para la solución, necesitaremos usar el método de la herramienta Rectángulo Redondeado (de todas formas, da más flexibilidad y la forma es de mejor calidad que usar el otro método). Tenemos, entonces, un rectángulo redondeado ya creado con esta herramienta:

En primer lugar, necesitamos desagrupar el rectángulo redondeado (menú Modificar > Desagrupar), con lo cual queda convertido en un trazado simple. Lamentablemente se pierde la capacidad de ajustar las esquinas, así que recomiendo probar bien con el tamaño de las esquinas antes de realizar este paso.

Al pasar el mouse por la forma desagrupada, debería resaltarse así:

Luego, seleccionando el trazado, nos vamos al sector de borde del inspector Propiedades. Al abrir el selector de color veremos lo siguiente:

Veamos la zona destacada, que es la zona inferior del selector de color, con el select que dice “Centrado en el tra(zado)” y el checkbox que dice “Relleno sobre trazo”. Dichas opciones sólo aparecen en los trazados desagrupados (ésta es la razón por la cual desagrupamos primero el rectángulo).

Debemos asegurarnos de que la opción “Centrado en el trazado” esté seleccionada, y dejar marcado el checkbox “Relleno sobre trazo”. Este último es el clave, pues hace que el relleno se superponga al trazado, y como el trazado está centrado, queda cortado por la mitad de su ancho.

Y éste es el resultado (compáralo con los dos ejemplos anteriores):

La diferencia salta a la vista: el borde hecho con el truco tiene las esquinas suavizadas correctamente y sin artefactos, como el método 1, pero además tiene la nitidez y delgadez del método 2.

El único “pero” es que el color del borde es un poco menos intenso en el método 1 y en el truco que en el método 2. De todos modos, en la mayoría de los casos la diferencia no se notará.

Espero que este tutorial te haya servido. ¿Lo probaste ya? ¿Conoces más trucos? Hazte parte en los comentarios.