Adobe
Tutoriales
Cortes de imágenes para una creación Web más rápida
Si se parece a la mayoría de los diseñadores Web, entonces seguro que desarrolla páginas en Adobe® Photoshop®. Ahora puede ahorrar tiempo y llevar fácilmente su diseño Photoshop cortado a Adobe GoLive® usando un objeto smart. GoLive organiza los cortes en una tabla y le permite optimizar cada corte individualmente. Puede usar los cortes como vínculos de navegación, desencadenantes de efectos rollover o guardasitios para mostrar otras imágenes. Siga estas instrucciones para obtener información sobre cómo cortar una imagen y usarla en una página Web.
main
1. Abra su imagen en Photoshop.
Decida en Photoshop cómo desea dividir la imagen para crear una página Web. La división típica que se puede encontrar en una página Web incluye barras de navegación, áreas para letreros, botones y una imagen principal o un área de información. Comience con las divisiones principales y, a continuación, cree cortes más pequeños alrededor de elementos individuales tales como botones. Puede que encuentre útil el uso de guías para dividir las imágenes en cortes.
   
 
step01
2. Divida la imagen en cortes.
Seleccione la herramienta de selección de sector. Arrastre el ratón por la parte deseada de la imagen y suéltelo para crear un corte. Compruebe que la imagen se ha dividido ahora en varios cortes (el corte que acaba de crear y otros cortes automáticos que completan el resto de la imagen). Continúe haciendo cortes en la imagen para crear cortes adicionales. Los comandos Vista > Ajustar a > Guías y Vista > Ajustar a > Sectores pueden serle de utilidad para dividir la imagen en cortes. Tenga en cuenta que los cortes se pueden seleccionar y redimensionar con la herramienta de selección de sector. Para redimensionar un corte, seleccione el corte con la herramienta de selección de sector y arrastre uno de los controles.
   
 
step02_int
3. De un nombre a los cortes.
Utilice la herramienta de selección de sector para seleccionar el corte al que desee dar un nombre y, a continuación, pulse el botón de opciones de sector de la barra de opciones. En el cuadro de texto Nombre del cuadro de diálogo Opciones de sector, escriba un nombre descriptivo para el corte. GoLive utilizará el nombre del corte como nombre de archivo de la imagen Web optimizada.
   
 
step03_int
4. Cree un corte Sin Imagen.
Además de los cortes de imágenes, también puede crear cortes "vacíos" (llamados cortes Sin imagen) que pueden contener texto o HTML, o pueden funcionar como guardasitios. Para crear un corte Sin imagen, seleccione Sin imagen en el menú Tipo de sector del cuadro de diálogo Opciones de sector y añada texto en el cuadro de texto HTML.
   
 
step04_int
5. Añada la imagen cortada al sitio.
Después de preparar la imagen cortada en Photoshop, guarde el archivo con la extensión .psd y colóquelo en la carpeta del sitio. A continuación, abra el sitio en GoLive y cree una página nueva y vacía. Arrastre el archivo de imagen Photoshop desde la ventana del sitio a la nueva página. Si se abre el cuadro de diálogo Configuración variable, haga clic en Aceptar para cerrarlo. (GoLive abre este cuadro de diálogo cuando un archivo Photoshop contiene una capa de texto como capa superior.) GoLive automáticamente coloca un objeto Smart Photoshop en la página y abre el cuadro de diálogo Guardar para Web para la imagen cortada.
   
6. Defina la configuración de optimización para cada corte.
Utilice la herramienta de selección de sector para elegir cada corte y definir la configuración de optimización deseada en el cuadro de diálogo Guardar para Web. Puede utilizar la compresión JPEG para los cortes con fotografías y la compresión GIF para los otros cortes de la imagen. Haga clic en OK para cerrar el cuadro de diálogo Guardar para Web y seleccione una ubicación donde guardar los datos de la imagen cortada. GoLive crea una carpeta de datos y una tabla HTML especial en la página para alojar las imágenes Web optimizadas; cada imagen Web y corte Sin imagen se colocan en una celda individual de la tabla.
   
 
step05_int
7. Añada vínculos y reemplace texto en el corte Sin imagen.
Haga clic sobre un corte en la página para seleccionarlo. Puede seleccionar texto y escribir directamente en el corte Sin imagen o hacer clic en el borde del corte para seleccionarlo. Para los cortes Sin imagen, puede cambiar el color de fondo y la alineación del texto en el Inspector de cortes de texto. Puede pulsar el botón Nuevo vínculo en el Inspector de texto o de cortes de usuario para vincular un corte a un URL concreto. Realice una vista previa en el explorador y compruebe que la página y sus elementos se muestran y funcionan tal como se esperaba. Si lleva a cabo cambios en el archivo Photoshop, los cortes de imagen se actualizarán directamente en GoLive y los cortes Sin imagen no cambiarán. La creación de una página Web completa a partir de una imagen cortada puede ser un forma sencilla de diseñar una página discretamente.
   
 
step06
 
2002 Adobe Systems Incorporated. Todos los derechos reservados.