Cómo crear una página de inicio en Photoshop CS3

A pesar de que implica varios pasos y una familiaridad básica con herramientas de Photoshop, la creación de una página de inicio en Photoshop se puede hacer, siempre y cuando tenga una cierta familiaridad con el diseño de la interfaz. Photoshop es útil para la creación de páginas Web con gráficos pesados, que se utiliza normalmente en una página web, o lo que se conoce como un mapa de imagen. Un mapa de imagen es un conjunto de imágenes que se pueden ajustar para crear enlaces que funcionan como botones. La ventaja de utilizar un mapa de imagen diseñada en Photoshop es que su página de inicio se verá mucho más atractivo como un gráfico en lugar de un montón de texto con formato estándar.

Instrucciones

Crear su página principal en Photoshop

1 Abrir Photoshop. Haga clic en "Archivo"> ​​"Nuevo" para crear un nuevo archivo. Por el tamaño, seleccione "preestablecido Web" y seleccione 640 x 480 o superior.

2 Elegir sus colores del diseño y el tema. Llenar la capa de fondo con las opciones de color utilizando herramientas de diseño de Photoshop. Seleccionar colores mediante la herramienta Selector de color, y complete su fondo yendo al menú: Haga clic en "Editar"> "relleno"> "primer plano / color de fondo."

3 Añadir opciones del texto y de fuente en forma de botones usando su tema del color. Seleccione la herramienta Texto, disponible en la barra de herramientas, o seleccione la ventana Tipo ( "Ventana"> "carácter") para ver las opciones. Utilice la herramienta Texto para crear un diseño básico para el lugar donde desea que sus botones, enlaces y otros textos para ser incorporado en su diseño. Para la profundidad adicional de la imagen y la mejora estética, agregar efectos de texto como sombras a su estilo de capa. Acceder a los efectos de tipo por ir al menú: "Capa"> "Estilo de capa"> "Sombra".

4 Incorporar sus imágenes y logotipo en el diseño de su página de inicio. Colorear las imágenes para que coincida con su diseño, y ajustar los modos de mezcla, la transparencia de capa y colocación de la imagen hasta que esté satisfecho con la interfaz de su diseño de página de inicio. Ajustar los colores por ir al menú: "Imagen"> "Ajuste"> "Balance de color". Es posible ajustar la transparencia de sus imágenes mediante el acceso a la función de la opacidad, que se encuentra en la sección superior de la paleta Capas. El menú Modo de fusión también se puede acceder en la paleta Capas.

5 Haga los ajustes adicionales al diseño de la página principal utilizando herramientas de diseño de Photoshop.

6 Haga clic en "Archivo"> ​​"Guardar como" y guardar la imagen como un archivo PSD.

Haga su Diseño Página funcional como una página Web

7 Cortar la imagen a romper su diseño visual en partes de un mapa de imagen por la elección de la herramienta División, que se encuentra en la caja de herramientas. Dividir la imagen en una cuadrícula con las cajas, colocando rodajas (en forma de cuadrados o rectángulos) sobre los botones, gráficos y otras partes de su diseño.

8 Elija la herramienta Seleccionar sector para más opciones, que se encuentra bajo el menú de la herramienta de la rebanada. Aparecerá un submenú en la parte superior de la pantalla con varias opciones para ajustar el corte en lonchas imagen.

9 Vincular las imágenes a otras páginas. Elija la herramienta Seleccionar sector. Haga clic en el pequeño icono a la derecha ahora que se asemeja a un documento de cuadro de texto para abrir una ventana que le permite ajustar los enlaces y URLs (direcciones de las páginas web) para cada rebanada. Esto le permitirá crear hipervínculos (botones que conducen a otras páginas web) de su imagen.

10 Comenzar a exportar sus cortes de imagen y ajustes de enlace de la imagen. Haga clic en "Archivo"> ​​"Guardar para Web y dispositivos" para abrir la ventana Exportar. Compruebe la configuración haciendo clic en la flecha de submenú en "Editar la configuración de salida", y ajustar según sea necesario.

11 Ajuste su configuración cuando aún estaba en la ventana de diálogo Guardar. Elija la carpeta en la que desea que los archivos de mapa de imágenes para ir. Vaya a "Formato" y seleccione "HTML e imágenes." Haga clic en "Guardar" para guardar el mapa de imágenes. Esto exportará el archivo HTML (utilizado para la visualización de su mapa de imagen en la Web) en la carpeta principal del directorio, así como crear automáticamente una carpeta separada para las imágenes que se encontrará en las diferentes gráficos (determinadas por la configuración de la rebanada).

12 Para probar la página Web, abra su navegador, abra la nueva carpeta y haga clic en el archivo HTML.

Consejos y advertencias

• Puede editar el archivo HTML manualmente si es necesario.