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”.
Más artículos de interés
¡Déjanos tu comentario!
Hola, después de mucho tiempo que vuelvo a hacer un tutorial Photoshop. En esta ocasión vamos a aprender a blanquear los dientes de una fotografía con Photoshop. Yo estoy usando… Seguir leyendo
Si ahora estás buscando como loco iconos de los programas de Microsoft, ahora los podrás descargar todos en un solo paquete. Dentro de este paquete viene 60 imágenes en formato PNG, también… Seguir leyendo
Descarga este set completo con los elementos de oficina entre los cuales hay lapiceros, lápices, diferentes tipos de hojas y alfileres. El peso del archivo es de 997 KB. Dentro… Seguir leyendo
Tal vez necesites algunas de estas banderas para trabajos de colegio, por ejemplo, tal vez usarlas para tu sitio web o quizás para algún diseño que estés realizando. Este conjunto… Seguir leyendo
En un artículo anterior ya había publicado unos enlaces para acceder a 111 plantillas HTML 5 y CSS3, así que hoy les traigo 14 más del sitio HTML5Up. Si vas… Seguir leyendo