Herramienta Sector

La herramienta sector nos permite recortar una imagen en varios trozos, según lo que queramos.

¿En qué ocasiones nos puede servir?
El recortar una imagen en varios trozos nos puede servir, por ejemplo, si tenemos una página web y queremos mostrar la imagen. Si la imagen es muy grande y/o de buena calidad, entonces la carga de esta será mucho y tardará en mostrarse en el navegador. Sin embargo, si recortamos esta imagen en pequeñas imágenes, la carga será la misma, pero en esta ocasión se irán mostrando los trozos en el navegador.

Empezando

Bien, vamos a comenzar abriendo una imagen cualquiera (de preferencia de tamaño grande). Para esto vamos al menú “Archivo → Abrir”.

Ahora, con la herramienta sector vamos a seleccionar la parte del medio (hacemos un recuadro mediano). Vemos la siguiente imagen.

Así mismo, podemos modificar el tamaño del sector, añadir otros, dividir, entre otras funciones.

Ahora veamos la opción “Estilo” ubicado en la parte superior. Allí tenemos tres opciones:

• Normal: Permite crear sectores de manera libre.
• Porciones fijas: Aquí se activa las otras dos opciones de anchura y altura. Por ejemplo: si queremos crear un sector perfecto, entonces colocaremos dos números iguales; si queremos que la anchura de la selección sea dos veces más grande que la altura, entonces colocamos en anchura 2 y en altura 1.
• Tamaño fijo: Esta opción nos permite crear sectores de tamaño fijo en píxeles. Si colocamos “200px” en anchura y “200px” en altura, entonces sólo basta hacer clic izquierdo en la imagen y automáticamente se creará un sector de 200px x 200px.

Vamos a guardar la imagen del ejemplo anterior. Para esto vamos al menú “Archivo → Guardar para Web y dispositivos”. En esa ventana podemos seleccionar los sectores realizados y cambiar la calidad, el desenfoque y más. Presionamos en “Guardar” y en esa ventana colocamos lo siguiente:

• Nombre: Colocamos el nombre que queramos.
• Tipo: Aquí escogemos “HTML e imágenes”, que es el formato para las páginas web. Si colocamos “sólo HTML”, entonces se creará tan sólo la página web y no las imágenes. Así mismo, si colocamos “sólo imágenes”, se creará las imágenes más no la página web.

Las imágenes se guardarán en una carpeta llamada, justamente, “imágenes”.

El resultado

Vamos a la carpeta donde guardamos el archivo y allí veremos el archivo de la página web y una carpeta con las imágenes recortadas. Abrimos la página web y vamos a ver la imagen completa dentro de ella. Si presionamos “Clic derecho → Ver código fuente”. Todo ese código es lo que el navegador interpreta para mostrar el contenido en la página web (en este caso son las imágenes).

Creando un enlace

Entrar en este campo es ingresar al mundo de la programación web, aunque no vamos a tocar tooooodo ese tema, simplemente vamos a hablar sobre el enlace que es una opción que nos da Photoshop.
El 99.9% de las páginas web en internet tienen un enlace (también llamado hipervínculo) que sirve para dirigirnos a otra parte de la página web. Ejemplo: Mi enlace

Para colocar un enlace a un trozo de la imagen, vamos a presionar “Clic derecho (sobre cualquier sector) → Modificar opciones de sector”. Se nos abrirá una ventana.

• Tipo de sector: Indicamos el tipo de sector:
  “Imagen” → El sector de imagen contienen una imagen (valga la redundancia). Este tipo es por defecto.
  “Sin imagen” → Aquí el sector de imagen se muestra vacío y en ese espacio podemos colocar un texto y algunas opciones más que se muestran abajo.
• Nombre: Indica el nombre del sector (también para la imagen).
• URL: Este campo indica la página web hacia nos dirigirá la imagen.
• Destino: Aquí colocamos el destino que indica la manera de cómo se va acceder al enlace.
  “_blank” → Abre el enlace en una ventana nueva.
  “_self” → Abre el enlace en la misma ventana.
• Texto de mensaje: Cambia el nombre de la URL que se visualiza en el estado del navegador por el texto del mensaje.
• Etiqueta Alt: Indica el texto que se mostrará si el cursor se estaciona sobre el enlace o si por algún motivo no se muestra la imagen sobre el navegador.
• Dimensiones: Aquí se muestra el tamaño del sector.
• Tipo de fondo del sector: Escogemos el color que deseemos mostrar en el navegador cuando, por ejemplo, ciertas partes de la imagen es transparente o cuando no carga la imagen.

Sectores a partir de guías

Cuando en nuestro trabajo tenemos colocadas algunas guías podemos crear sectores a partir de ellas haciendo clic en el botón “Selectores a partir de guías”.