 |
Sectores de Photoshop |
Es probable que en alguna ocasión nos hayamos encontrado con la
necesidad de partir una imagen en varios trozos por diversos motivos.
Por ejemplo, para realizar un diseño de página avanzado o para dividir
una imagen muy grande en varios pedazos, con objeto de que se cargue
más rápidamente. Este último es el cometido de este artículo, que
describimos con más detalle a continuación.
A veces tenemos una imagen muy grande, con el logotipo de la
empresa y una composición de fotografías u otros elementos gráficos.
Esa imagen muy grande puede tardar mucho en cargar y si está, por
ejemplo, en la portada, podría ocurrir que el visitante se impaciente y
no llegue a ver cargar la imagen, abandonando el sitio web por culpa de
una carga muy lenta. Una de las posibilidades para mejorar la carga y
hacer que el visitante pueda ver alguna cosa antes de que la imagen
termine de cargar por completo, consiste en partir la imagen en varios
trozos. De este modo, es muy probable que unos trozos se carguen antes
que otros y que el visitante pueda ver partes de la imagen que van
apareciendo, aunque la imagen completa todavía no pueda visualizarse.
Esta es una técnica bastante habitual que seguro que muchos
habremos visto en diversas páginas web. Cuando yo veo una de estas
imágenes partidas, muchas veces, espero a que se cargue entera, para
ver el resultado completo, Otras veces, gracias a una imagen que se
descarga partida en varios pedazos, también entiendo que la página está
cargando correctamente y puede que no sea necesario visualizarla entera
antes de pulsar cualquier enlace de mi interés.
Cómo partir una imagen en varios trozos fácilmente con Photoshop
Adobe Photoshop, uno de los mejores programas de retoque fotográfico,
contiene una herramienta para hacer sectores que nos puede servir para
partir una imagen fácilmente. En la imagen siguiente podemos ver cuál
es esta herramienta.
Con la herramienta de sector podemos definir diversos pedazos o
sectores en una imagen. Para ello haremos uno o varios cuadrados con la
herramienta, de manera similar a como hacemos una selección. Los
sectores se configurarán automáticamente para que la imagen quede
dividida como deseemos. Por ejemplo, si hacemos un sector con la mitad
de una imagen, automáticamente se creará otro sector para la otra mitad
de la imagen.
Merece la pena que experimentemos un poco con la herramienta para crear
sectores de distintas formas. Cuanto más sencilla sea la configuración
de los sectores, más sencillo será el código fuente de la página
resultante. Por ejemplo, en la imagen siguiente podemos ver como se han
definido 8 sectores, dispuestos en 4 filas y 2 columnas.
Continuamos con el paso "guardar la imagen optimizada como", que se
encuentra en el menú de archivo. Entonces nos aparecen 4 copias de la
imagen, una la original y las otras 3 con distintas configuraciones de
la imagen, optimizadas más o menos en tamaño, colores, calidad, etc. En
esa ventana podemos seleccionar una de las 3 posibles optimizaciones,
configurada como nosotros deseemos, y seleccionar la opción que pone
"guardar HTML e imágenes *.html". Con ello se guardará un código HTML y
un directorio con las imágenes generadas para cada uno de los sectores,
optimizadas tal como nosotros hayamos escogido. Este paso lo podemos
ver en la siguiente imagen.
Con ello vamos a conseguir, tal como habíamos adelantado, un código
HTML que tendrá una tabla y en cada casilla de la tabla una imagen con
cada sector, tal como se ha configurado con la herramienta de sectores.
La tabla tendrá esta forma. Este código ha sido generado con Photoshop, lo escribimos tal cual aparece.
<TABLE WIDTH=580 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD>
<IMG SRC="Images/ejemplosectores_01.jpg" WIDTH=294 HEIGHT=123 ALT=""></TD>
<TD>
<IMG SRC="Images/ejemplosectores_02.jpg" WIDTH=286 HEIGHT=123 ALT=""></TD>
</TR>
<TR>
<TD>
<IMG SRC="Images/ejemplosectores_03.jpg" WIDTH=294 HEIGHT=127 ALT=""></TD>
<TD>
<IMG SRC="Images/ejemplosectores_04.jpg" WIDTH=286 HEIGHT=127 ALT=""></TD>
</TR>
<TR>
<TD>
<IMG SRC="Images/ejemplosectores_05.jpg" WIDTH=294 HEIGHT=139 ALT=""></TD>
<TD>
<IMG SRC="Images/ejemplosectores_06.jpg" WIDTH=286 HEIGHT=139 ALT=""></TD>
</TR>
<TR>
<TD>
<IMG SRC="Images/ejemplosectores_07.jpg" WIDTH=294 HEIGHT=111 ALT=""></TD>
<TD>
<IMG SRC="Images/ejemplosectores_08.gif" WIDTH=286 HEIGHT=111 ALT=""></TD>
</TR>
<
/TABLE>
Cómo optimizar los distintos sectores
Como decíamos, Photoshop ofrece la posibilidad de optimizar la
imagen a mostrar en base a varios factores, por ejemplo podremos
decidir entre utilizar el formato GIF o JPG, así como definir los
colores a utilizar en el GIF o la calidad del JPG.
Para ello, una vez dentro de la opción "guardar optimizada como"
debemos seleccionar qué sector queremos optimizar (esto se hace con la
herramienta de seleccionar sector, que se encuentra arriba a la
izquierda) y definir las opciones de optimización en la parte de arriba
a la derecha.
Es muy habitual que deseemos aplicar la misma optimización a toda
la imagen, es decir, guardarla toda, por ejemplo, como JPG y con
calidad 20. Para ello deberíamos seleccionar sector a sector y
aplicarle los mismos valores de formato, o bien seleccionar todos los
sectores de una vez para aplicar una sola vez los valores de
optimización de la imagen. Esto último se puede ver paso por paso en la
imagen siguiente.
Paso 1: seleccionamos la herramienta de zoom para hacer la imagen
más pequeña. Con el botón derecho podemos marcar que deseamos que la
imagen sea un 25% del tamaño original, o lo que sea necesario para ver
la imagen entera en la previsualización
Paso 2: Con la imagen a tamaño reducido, para que se puedan
seleccionar todos los sectores a la vez, marcamos la herramienta de
sector, que se encuentra en la parte izquierda de la ventana.
Paso 3: con la herramienta de seleccionar sectores hacemos una
selección de todos los sectores de la imagen. Con ello podremos aplicar
de una sola vez las propiedades de todos los sectores de la imagen.
Paso 4: Marcamos los valores de optimización deseados para todos los sectores.
Una vez hemos definido las características de optimización para
todos los sectores le damos al botón de "guardar" y seleccionamos la
opción "guardar HTML e imágenes *.html".
Con ello hemos terminado el trabajo. Obtendremos un código e
imágenes que luego podremos incorporar fácilmente dentro de nuestra
página web. Se puede ver el ejemplo en una página aparte.
Nosotros hemos optimizado esta imagen a JPG, por ahorrar espacio,
aunque esta imagen -dadas sus cracterísticas- habría quedado con mayor
calidad optimizada como GIF, aunque en la práctica nos ocupe más
espacio si utilizamos un rango de colores alto.
Informe de Miguel Angel Alvarez
Director de DesarrolloWeb.com
Mail: miguel@desarrolloweb.com
