Cómo diseñar una página web en Photoshop para Dreamweaver

Escrito por paul kemp | Traducido por daniela laura arjones
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo diseñar una página web en Photoshop para Dreamweaver
Cómo diseñar una página web en Photoshop para Dreamweaver. (Ciaran Griffin/Lifesize/Getty Images)

Photoshop es una gran herramienta para aquellos que quieren darle una aproximación visual al diseño Web o se sienten intimidados por la idea de utilizar código HTML. Tiene todas las herramientas que necesitas para integrar imágenes, texto y gráficos en un diseño de página Web, y todo lo necesario para optimizar estos elementos para Internet y Adobe Dreamweaver en particular.

Nivel de dificultad:
Moderadamente difícil

Otras personas están leyendo

Necesitarás

  • Una computadora
  • Software Adobe Photoshop (preferentemente CS3 o superior)
  • Imágenes y contenido para una página web (o contenido de prueba)

Lista completaMinimizar

Instrucciones

    Configuración inicial

  1. 1

    Inicia Photoshop y selecciona Archivo > Nuevo desde el menú de aplicaciones. Haz clic en el menú desplegable predeterminado y selecciona web. Ajusta el tamaño desplegable a un tamaño estándar de web que te gustaría que tenga tu página.

  2. 2

    Selecciona Archivo > Abrir en el menú de la aplicación y abre la imagen que deseas utilizar como cabecera. Esto creará una nueva pestaña o ventana de la imagen, dependiendo de la configuración de Photoshop.

  3. 3

    Selecciona la herramienta Marco rectangular en el panel Herramientas a la izquierda de tu lienzo. Ajusta el estilo del menú desplegable a Tamaño Fijo en el panel de opciones de herramienta por encima de tu lienzo y configura el ancho para que sea igual al de la página que creaste en el Paso 1. La altura puede ser tan alta o baja como te gustaría que la imagen de cabecera aparezca en tu página web.

  4. 4

    Selecciona la herramienta Mover en el panel Herramientas y mueve el marco sobre el área de la imagen que deseas usar como imagen de encabezado. Selecciona Imagen > Recortar en el menú de aplicaciones.

  5. 5

    Selecciona Edición > Copiar para copiar la imagen recortada de encabezado. Vuelve a la pestaña o ventana que contiene el lienzo de tu página Web. Selecciona Editar > Pegar para pegar el encabezado en la página web. Usando la herramienta Mover, mueve la imagen de cabecera para que las esquinas superiores coincidan con las esquinas superiores de tu página web.

    Diseña tu página y crea segmentos

  1. 1

    Abre y añade cualquier otro elemento que quieras a tu página web. Puedes pegar otras imágenes usando el mismo proceso que usaste para pegar el encabezado. Incluye un menú con texto utilizando las herramientas de escritura en el Panel Herramientas. La mayoría de las páginas web incluyen un encabezado, un cuerpo que incluye su contenido principal, los gráficos y las imágenes relacionadas con el contenido o los elementos del menú, y un pie de página, que a menudo incluye información de contacto o notas de copyright.

  2. 2

    Ten en mente la idea fundamental de las tablas en diseño de sitios web cuando crees la disposición de tu página en Photoshop.

  3. 3

    Selecciona Vista > Ajustar en el menú de la aplicación y selecciona la herramienta Segmentar, que se encuentra bajo la herramienta Recortar en el panel Herramientas. Haz clic y arrastra un cuadro con la herramienta alrededor de la totalidad de la página para comenzar.

  4. 4

    Haz cortes en todo el encabezado, cuerpo y pie de página de tu página web para dividir aún más a la página. Este proceso es el principio de colocación de la página en un formato de tabla para usar en Dreamweaver.

  5. 5

    Haz cortes alrededor de cada elemento gráfico del encabezado, cuerpo y pie de página, como botones del menú, logotipos o imágenes. Trata de mantener alineados los segmentos para tus botones y elementos de alineación. La función de ajuste te ayudará a hacer esto más fácil.

    Guarda y optimiza tu diseño para Dreamweaver

  1. 1

    Accede al escritorio de tu computadora y crea una nueva carpeta para tu página web. Los usuarios de Mac seleccionarán Buscador > Nueva Carpeta. Los usuarios de Windows harán clic derecho en el escritorio y seleccionarán Nuevo > Carpeta. Crea una carpeta adicional dentro de ésta titulada "Imágenes".

  2. 2

    Vuelve a Photoshop y selecciona Archivo > Guardar para web (o Guardar para web y dispositivos para usuarios CS4). Se abrirá un cuadro de diálogo donde podrás optimizar tus imágenes cortadas para web y Dreamweaver.

  3. 3

    Haz ajustes del tipo, la calidad y el color de los archivos para cada uno de tus segmentos en la columna de la derecha del cuadro de diálogo. Selecciona un sector haciendo clic en la ventana de visualización del cuadro de diálogo. Las imágenes fotográficas deberán ser guardadas como archivos JPEG en la lista desplegable justo debajo de Predefinidos y las imágenes de color sólido como insignias o botones de menú se pueden guardar en formato GIF para un rendimiento web óptimo. Se pueden hacer ajustes de calidad en las dos listas desplegables de abajo. Puedes reducir la calidad de la mayoría de las imágenes y todavía se verán bien en tu sitio web, así que hazlo hasta que veas una diferencia notable. Esto hará que tu página cargue más rápido.

  4. 4

    Haz clic en Guardar una vez que cada segmento haya sido ajustado. Selecciona HTML e Imágenes en el formato de lista desplegable del cuadro de diálogo que aparece. Cambia la carpeta de destino a la carpeta de imágenes dentro de la carpeta de la página web creada en el escritorio. Tu diseño se ha optimizado y está listo para usar en Dreamweaver. Los elementos de la página se pueden encontrar en la paleta de archivos en Dreamweaver, a la derecha de la ventana de tu sitio. Puedes echar un vistazo a tu esquema entero recortado y optimizado para la web y mantenido tal como la diseñaste en Photoshop si abres el archivo .HTML creado en la carpeta de imágenes cuando completaste la opción Guardar para web en Photoshop.

Consejos y advertencias

  • Asegúrate de crear nuevas capas para cada nuevo elemento añadido a tu diseño. Esto hace que sea fácil hacer cambios más adelante y mantiene los elementos aislados de manera que un error en uno no signifique desarmar todo tu diseño.
  • Los usuarios que trabajan en una versión anterior a Photoshop CS3 no tienen la opción Guardar para web, pero pueden realizar la misma función en Adobe ImageReady, que se incluye con las versiones anteriores y se puede ejecutar directamente desde Photoshop.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles