Las herramientas web de Photoshop facilitan la creación de componentes para las páginas web o de páginas web completas en formatos preestablecidos o personalizados.

  • Utilice capas y sectores para diseñar páginas web y elementos para la interfaz de la página web. (Consulte las páginas web de Capas y Sectores.)

  • Utilice composiciones de capas para experimentar con distintas composiciones de página o para exportar las variaciones de una página. (Consulte Composiciones de capas).

  • Cree texto de rollover o gráficos de botones para importarlos en Dreamweaver o Flash.

  • Cree animaciones web con el panel Animación y expórtelas como imágenes GIF animadas o archivos de QuickTime. Consulte Creación de animaciones de cuadros.

  • Utilice Adobe Bridge para crear una galería de fotografías y convertir rápidamente un conjunto de fotografías en un sitio web interactivo con una amplia gama de plantillas de sitios con aspecto profesional.

Para ver un vídeo sobre el diseño de sitios web con Photoshop y Dreamweaver, visite Acceso a Photoshop desde Dreamweaver para mejorar una imagen web.

Creación de imágenes de rollover

Un rollover es un botón o imagen de una página web que se modifica al colocar el ratón encima. Para crear un rollover, necesita como mínimo dos imágenes: una primaria para el estado normal y otra secundaria para el estado cambiado.

Photoshop incluye una variedad de prácticas herramientas para la creación de imágenes de rollover:

  • Utilice capas para crear las imágenes primaria y secundaria. Cree contenido en una capa, duplíquela y edítela para crear un contenido parecido al tiempo que mantiene la alineación entre las capas. Al crear un efecto de rollover, puede modificar el estilo, la posición o la visibilidad de la capa, realizar ajustes de tonos o colores o aplicar efectos de filtro. Consulte Duplicación de capas.

  • También puede utilizar estilos de capa para aplicar efectos, como superposiciones de colores, sombras paralelas, resplandores o relieves en la capa primaria. Para crear un par de rollover, active y desactive el estilo de capa y guarde la imagen en cada estado. Consulte Estilos y efectos de capa.

  • Utilice el botón de estilos preestablecidos del panel Estilos para crear rápidamente botones de rollover con tres estados: normal, al colocar el ratón encima y al dejar el ratón inactivo. Dibuje una forma básica con la herramienta de rectángulo y aplique un estilo, como Normal biselado, para convertir automáticamente el rectángulo en un botón. Copie la capa y aplique otros estilos preestablecidos, como Ratón encima con bisel, para crear estados de botones adicionales. Guarde cada capa como una imagen independiente para crear un conjunto de botones de rollover finalizado.

  • Utilice el cuadro de diálogo Guardar para Web y dispositivos para guardar imágenes de rollover en un formato compatible con Web y con un tamaño de archivo optimizado. Consulte Optimización de imágenes.

Nota:

Al guardar imágenes de rollover, utilice una convención de nombre para distinguir la imagen primaria (estado sin rollover) de la secundaria (estado de rollover).

Después de crear un conjunto de imágenes de rollover en Photoshop, utilice Dreamweaver para colocar las imágenes en una página web y agregar automáticamente el código de Javascript para la acción de rollover.

Exportación con Zoomify

Es posible publicar imágenes de alta resolución en la Web para que los usuarios puedan desplazarlas y ampliarlas y así verlas con más detalle. La imagen de tamaño básico tarda en descargarse lo mismo que un archivo JPEG de tamaño equivalente. Photoshop exporta los archivos JPEG y el archivo HTML que puede cargar en el servidor web.

  1. Seleccione Archivo > Exportar > Zoomify y defina las opciones de exportación.

    Plantilla

    Permite definir el color de fondo y la navegación de la imagen que se visualiza en el navegador.

    Ubicación de salida

    Especifica la ubicación y el nombre del archivo.

    Opciones de azulejo de la imagen

    Especifica la calidad de la imagen.

    Opciones del navegador

    Define la anchura y altura en píxeles de la imagen base del navegador de los usuarios.

  2. Cargue los archivos de imágenes y HTML en el servidor web.

Trabajo con valores de color hexadecimales

Photoshop puede mostrar los valores hexadecimales de los colores de imagen o copiar el valor hexadecimal de un color para su uso en un archivo HTML.

Visualización de valores de colores hexadecimales en el panel Información

  1. Seleccione Ventana > Información o haga clic en la ficha del panel Información para verla.
  2. Seleccione Opciones de panel en el menú del panel. En Primer informe de color o Segundo informe de color, seleccione Color web en el menú Modo y haga clic en OK.
  3. Coloque el puntero sobre el color para el que desea ver los valores hexadecimales.

Copiado de un color como valor hexadecimal

Photoshop copia colores como atributo HTML COLOR que contiene el valor hexadecimal (color=#xxyyzz) o solo como el valor hexadecimal.

  1. Realice una de las siguientes acciones:
    • Con la herramienta Cuentagotas, mueva el puntero sobre el color que desea copiar. Haga clic con el botón derecho (Windows) o clic + Control (Mac OS) y seleccione Copiar color como HTML o Copiar código hexadecimal de color.

    • Defina el color frontal mediante los paneles Color o Muestras o en el Selector color de Adobe. En el menú del panel Color, seleccione Copiar color como HTML o Copiar código hexadecimal de color.

    • En el cuadro de diálogo Guardar para Web, haga clic en la muestra de color o elija Mate > Otros. En el selector de color de Adobe, haga clic con el botón derecho del ratón en el valor hexadecimal y elija Copiar.

  2. Abra el archivo que desee en una aplicación de edición HTML y elija Edición > Pegar.

Esta obra está autorizada con arreglo a la licencia de Reconocimiento-NoComercial-CompartirIgual 3.0 Unported de Creative Commons.  Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales   |   Política de privacidad en línea