Tutoriales Photoshop - Efectos Photoshop
Nuestro Facebook Nuestro Twitter Canal de YouTube Google Plus Suscríbete al Feed RSS
abril 29, 2012 Autor: Tony Lázaro EfectosPs » Herramientas Photoshop 0

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

Los enlaces no sólo son textos, también pueden ser imágenes.

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”.

¡Déjanos tu comentario!

Suscríbete y recibe los artículos actuales en tu email:

 

0 Comentarios para 'Herramienta Sector'

No hay ningún comentario. ¡Sé el primero!
Nombre:   E-mail:
Sitio web: (Opcional)
Felíz Alegre :P XD Cool Guiño LOL Molesto Inseguro Con duda Normal Triste No Llorando Sorprendido 8| Maligno Endemoniado Sonrojado ^^ Me gusta No me gusta
Límite de caracteres: 500/500
Me reservo el derecho de eliminar los comentarios considerados como spam, que no esté relacionado al artículo o que estos incluyan ofensas, racismo, obscenidades y groserías que puedan agraviar tanto a un usuario como al sitio web.

Síguenos en las redes sociales
¡ Recibe las actualizaciones !

Suscríbete con tu correo electrónico y recibe cada artículo actual de EfectosPs en tu bandeja.

Videotutoriales
Últimos tutoriales y artículos
Blanquear dientes con Photoshop
Dientes blancos con Photoshop

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

Paquete de iconos de Microsoft
Paquete de iconos de Microsoft

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

Set de vectores de elementos de oficina
Vectores de elementos de oficina

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

Conjunto de banderas vectoriales
Conjunto de banderas vectoriales

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

14 Plantillas Responsive HTML5 y CSS3
14 Plantillas Responsive HTML5 y CSS3

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