Photoshop es una gran herramienta para aquellos que quieren tener una aproximación visual al diseño Web o que se sienten intimidados por la idea de tratar con código HTML. Tiene todas las herramientas necesarias 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 la Web y Adobe Dreamweaver en particular. Cosas que necesitará de computadora hotel Adobe Photoshop Software (preferiblemente CS3 o superior) Imagenes de archivo y el contenido de una página Web ( o el contenido ficticio)
Ver Más instrucciones
Configuración inicial
1

lanzamiento Photoshop y seleccione Archivo > Nuevo desde el menú de aplicaciones . Haga clic en el menú desplegable predeterminado y seleccione Web. Ajuste el tamaño desplegable a un tamaño estándar de Web que desea que su página sea .
2

Seleccione Archivo -> Abrir en el menú de la aplicación y abrir la imagen que desea utilizar como su cabecera. Esto creará una nueva pestaña o ventana de la imagen, dependiendo de la configuración de Photoshop.
3

Seleccione la herramienta Marco Rectangular en el panel Herramientas a la izquierda de su escrutinio . Ajuste el menú desplegable Estilo de tamaño fijo en el panel de opciones de herramienta por encima de su escrutinio y establecer la anchura igual a la anchura de la página que creó en el paso 1 . La altura puede ser tan alta o baja como le gustaría que la imagen de cabecera para que aparezca en su página Web.
4

Seleccione la herramienta Mover en el panel Herramientas y mover el marco sobre el área de la imagen quiere que su imagen de cabecera . Seleccione Imagen> Recortar en el menú de aplicaciones .
5

Seleccione Edición> Copiar para copiar la imagen de cabecera recortada. Vuelva a la pestaña o ventana que contiene la página Web del sondeo . Seleccione Editar > Pegar para pegar la cabecera hasta la página Web. Uso de la herramienta Mover , mueva la imagen de cabecera para que las esquinas superiores coinciden con las esquinas superiores de su página Web.
Diseño de su página y crear segmentos
6

abierto y agregar cualquier otro elemento que desee a su página web. Usted puede pegar en otras imágenes con el mismo proceso que se utiliza para pegar la cabecera. Incluya una carta con el texto utilizando el tipo de herramientas en el panel Herramientas . La mayoría de las páginas web incluyen un encabezado, un cuerpo que incluye su contenido principal y 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.
7

Tenga en mente la idea fundamental de las tablas en el diseño de sitio web cuando la disposición de su página en Photoshop.
8

seleccione Ver > Ajustar en el menú de la aplicación y seleccione la herramienta Slice, anidado bajo la herramienta Recortar en el panel Herramientas . Haga clic y arrastre una caja con la herramienta alrededor de la totalidad de la página para comenzar.
9

Hacer rodajas alrededor de la cabecera , cuerpo y pie de página de la página 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 el uso en Dreamweaver.
10

Hacer rodajas alrededor de cada elemento gráfico del encabezado , cuerpo y pie de página , como botones de menú, logotipos o imágenes . Trate de mantener las rebanadas para los botones y elementos de alineación alineadas. La función de ajuste le ayudará a hacer esto más fácil .
Ahorro y optimización de su diseño para Dreamweaver
11

Acceso escritorio de su ordenador y crear una nueva carpeta para su página Web. Los usuarios de Mac seleccione Finder> Nueva carpeta . Los usuarios de Windows haga clic derecho en el escritorio y seleccione Nuevo> Carpeta. Crea una carpeta adicional dentro de éste titulado " imágenes".
12

Volver a Photoshop y seleccione Archivo > Guardar para Web ( o Guardar para Web y dispositivos para usuarios de CS4 ) . Se abrirá un cuadro de diálogo donde podrá optimizar sus imágenes en rodajas para la Web y Dreamweaver.
13

Marca de tipo, calidad y ajustes de color de archivos de cada una de las rebanadas en la columna derecha de la cuadro de diálogo . Seleccione un sector haciendo clic en la ventana de visualización del cuadro de diálogo . Imágenes fotográficas deberán ser guardados como archivos JPEG de las imágenes desplegable justo debajo predefinidos y de color sólido como insignias o botones de menú se pueden guardar en formato GIF para un rendimiento óptimo Web . Ajustes de calidad se pueden hacer en las dos listas desplegables a continuación. Las imágenes pueden tener reducida su calidad mientras que todavía parece muy bien en su página web , por lo que bajar la calidad hasta que vea una diferencia notable. Esto hace que su carga de página más rápido.
14

Haga clic en Guardar una vez cada rebanada se ha ajustado. Seleccione HTML y las imágenes en el formato de lista desplegable del cuadro de diálogo que aparece. Cambiar la carpeta de destino en la carpeta de imágenes dentro de la carpeta de la página Web creada en el escritorio. Su diseño se ha optimizado y listo para su uso 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 su entera disposición en rodajas y optimizado para la web y se mantiene como la diseñaste en Photoshop , abra el archivo . HTML creado en la carpeta de imágenes cuando se completó la opción Guardar para Web de Photoshop.