Fondos para Web con tablas 1

19 de abril de 2004 |

por SantosVZ

Este tutorial es la continuación del llamado “Fondos para Web” y consiste en crear fondos para tablas que posteriormente puedes usar en tus páginas Web.
El criterio es muy similar al de Fondos para Web pero con una utilización diferente debido a que se aplica a las celdas de una tabla y no a toda la página o parte de ella.
Para realizar los fondos para celdas, podemos partir de cualquier imagen o bien la creamos totalmente. Pero primero para ver como se crea el fondo analizaremos varias imágenes para que veas “el porque del como”.

La imagen que analizaremos es muy conocida de todos ya que aparece en muchas ventanas de Windows. El sistema que voy a utilizar, es el píxel como herramienta de trabajo.

Bien lo primero que hacemos es abrir Photoshop y nos vamos al menú Archivo>Abrir y localizamos la imagen que pensamos utilizar para crear el fondo. Una vez localizada la marcamos y le damos “Abrir”, apareciendo en el área de trabajo de Photoshop.

Ahora ampliaremos la imagen hasta el 1600% con la herramienta zoom y nos situaremos en la esquina superior izquierda de la imagen. Si te resulta un poco incomodo trabajar en 1600%, puedes utilizar una menor.

Como podrás comprobar la regla te indica px por px. Bien ahora repetiremos los últimos 5 px de la parte superior en el lateral izquierdo y derecho. Para ello trabajaremos con una ampliación del 800% y con la herramienta de Cuentagotas seleccionas el color del ultimo px. y luego seleccionas la herramienta de Lápiz y realizas la primera línea en el lateral. Esta misma operación la realizas con cada una de las cinco líneas de cada píxel, hasta completa el lateral. Debes fijarte en la terminación (esquina inferior izquierda) que en este caso la he realizado hasta el fondo en función de como quiero que se vea.

Bien.. ya tenemos el lateral igual que los últimos cinco px de la parte superior, ahora lo que haremos es copiar esta parte lateral, la seleccionamos con la herramienta de Selección y la pegamos mediante el menú Edición>Copiar (Ctrl+C), Edición>Pegar (Ctrl+ V), desplazándola hasta el extremo derecho para que nos queden los dos extremos iguales. Y una vez la tengamos situada le damos al menú Capa>Combinar capas, para que se conviertan en una sola capa.

Ahora lo que haremos es crear una esquina curva, para ello debemos asegurarnos que nuestra imagen se encuentra en un fondo transparente. Trabajaremos con una ampliación de 800%.

Con la herramienta de Borrador y las opciones indicadas en la imagen, realizamos el borrado de los píxeles que nos interese.

Bueno… ahora nos toca darle color a la curva y lo vamos hacer tal como se muestra en la imagen. Por supuesto que tu puedes buscar otra forma, hay muchas si te pones a analizar curvas con una ampliación de 1600%.
Mas adelante te mostraré diversas curvas, para que puedas ver lo que comentaba y compararlas.

Con la herramienta de Cuentagotas seleccionamos cada uno de los colores que vamos a utilizar y luego lo aplicamos con la herramienta de Lápiz tal como se indica en las imágenes.

Esquina superior izquierda Esquina superior derecha

El resultado final de lo que podría ser la pestaña de arriba en una tabla sería:

Posteriormente podemos ampliar un poco mas el diseño de los fondos para tabla, de forma que tenga una mejor presentación, incorporando mas elementos como podrían ser esquinas inferiores y laterales. Quedando la imagen tal como sigue:

Aunque también podría ser en color oscuro si así lo prefieres.

Ahora viene lo mas importante y consiste en seccionar cada una de las imágenes que luego utilizaremos de fondo en cada una de las celdas de la tabla en nuestra Página Web. Para ello vamos a trabajar con una escala de 800% o mayor para visualizar mejor lo que hacemos con la herramienta de Selección . Ampliamos la imagen al 800% y seleccionamos la esquina superior izquierda con una medida de 10 x 30 px, luego nos vamos al menú Edición>Copiar, después a Archivo>Nuevo, abriéndose uno de las mismas medidas que la imagen y seleccionamos transparente. Después nos vamos a Edición>Pegar y a continuación Archivo>Guardar para Web Utiliza el formato gif y selecciona la opción de colores según te convenga y guardas la imagen en tu carpeta.
Debes tener en cuenta que debes conseguir que las imágenes sean lo mas livianas posible a fin de que la página se cargue rápidamente.