Sectores de Photoshop

  • Por
Veremos cómo partir una imagen en varios trozos para por ejemplo, realizar un diseño de página avanzado o para dividir una imagen muy grande en varios pedazos para que se cargue más rápidamente.
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.

Autor

Miguel Angel Álvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Edgar

22/10/2004
Como puedo guardar un solo sector, para una sola img ??
Osea, tengo una img dividida en 4 sectores, pero 1 de esos sectores quiero que cambie de color cuando pase el mouse, entonces debo tener dos imgs para ese sector, si gusrdo todo como HTML se guardan las 4 imgs, y despues como puedo hacer para que se guarde solo 1 y poderla guardar como img5.jpg.. por ejemplo .... fuí claro ???
hay alguna forma de hacer esto ???
Saludos !!!

Edgar

22/10/2004
Como puedo guardar un solo sector, para una sola img ??
Osea, tengo una img dividida en 4 sectores, pero 1 de esos sectores quiero que cambie de color cuando pase el mouse, entonces debo tener dos imgs para ese sector, si gusrdo todo como HTML se guardan las 4 imgs, y despues como puedo hacer para que se guarde solo 1 y poderla guardar como img5.jpg.. por ejemplo .... fuí claro ???
hay alguna forma de hacer esto ???
Saludos !!!

silvis

02/6/2005
Bakan el dato del photoshop, no sabia como cortar imagenes para que calsaran perfectamente, gracias

Peter

19/12/2009
herramienta de corte
Por lo visto ahora la herramienta esta en deshuso porque en el photoshop cs4 ya no esta dicha herramienta...

David

17/1/2010
sectores en cs4
Peter, la herramienta "Sector" SÍ ESTÁ en Photoshop CS4, al lado del cuentagotas, en el mismo menú que "Recortar"

Kerb

15/7/2011
Me salio una imagen gif
Lo que sucede es que al sectorizar una imagen y al guardar en html e imágenes me sale en la carpeta imágenes un archivo llamado espacio gif sin haberlo creado. En otras sale bien, su html con sus respectivas imagenes sectorizadas claro esta, me podian ayudar en resolver este problema, se lo agradeceria en grande.

Th3DarKZi0N

17/8/2011
imagen gif
Eso q te sale es una imagen q se usa para posicionar partes de la pagina.
Es un truco q se usa aveces. Se trata de una imagen gif de 1x1 pixeles y además trasparente.
Con ella uno se puede ayudar para q las cosas queden donde deben.

Un saludo

Álex

03/9/2012
dónde encuentro la herramienta sector
Tengo muchas ganas de poner en práctica todo esto. Pero mi problema es que no encuetro por ningún lado la hta. Sector. Uso photoshop cs 6, y en mi columna de htas. no está. Cuando sí la he visto es cuando me voy a 'guardar para web' pero allí sólo me selecciona la imagen entera (no puedo elegir qué parte quiero seccionar).
Muchas gracias.

josecruzchavez

12/3/2013
optimización de las imagenes +10
Gracias a este articulo pude optimizar mis imágenes que tengo anunciadas en ML.