Una plantilla Web es un diseño básico de páginas Web --- --- o contenedor que puede volver a utilizar para crear varias páginas. La plantilla proporciona la estructura básica para su sitio web, que le permite mantener un tema constante y el diseño en todo el sitio sin tener que recrear cada página. Mientras que Photoshop no es técnicamente un programa de diseño de páginas Web, puede utilizarlo para crear plantillas web por la imagen PSD en varias secciones "rebanar" y luego exportar el PSD a una página Web HTML. A continuación, puede abrir el archivo de plantilla HTML en Dreamweaver o cualquier otro programa de diseño web y utilizarlo para crear las páginas de su sitio web.
Instrucciones
1 Iniciar un nuevo documento en Photoshop. Darle las dimensiones que desee utilizar para sus páginas web, así: Haga clic en "Archivo" en la barra de menú y elegir la opción "Nuevo" para abrir el cuadro de diálogo Nuevo. Escriba el ancho (en píxeles) en el "Ancho" El campo y la altura (en píxeles) en el campo "Altura". Haga clic en Aceptar."
2 Cree la bandera para su página Web. La bandera, por supuesto, es el gráfico o imagen que se muestra en la parte superior de la página. Por lo general, consiste en un logotipo de la empresa y algunos otros gráficos relativos a un producto o servicio. Usted puede insertar una imagen existente o utilizar herramientas de pintura y de texto de Photoshop para crear la bandera.
3 Crear los botones para su página Web. Estos se convertirán en enlaces, o "puntos calientes", que llevan a los usuarios del sitio web a diferentes páginas dentro del sitio. O bien insertar imágenes de los botones existentes y colocarlos donde desee en la plantilla o el uso de pintura y herramientas de texto de Photoshop para crear los botones.
4 Seleccione la "herramienta de corte" (quinto botón de la parte superior del cuadro de herramientas). Si no ha utilizado la herramienta División antes, este botón es probablemente ajustado a otra herramienta. Haga clic y mantenga pulsado el botón, y luego elegir la opción "herramienta de corte" en el desplegable.
5 Arrastre la herramienta de corte alrededor del primer botón o área en la plantilla en la que desea crear un vínculo. Esto crea un cuadro de la "rebanada" alrededor del objeto. Photoshop coloca esta caja en una celda de la tabla que se convertirá en una tabla HTML independiente al exportar este documento a HTML.
6 Haga clic con el nuevo segmento y seleccione "Opciones de sector Editar" en el menú desplegable. Esto abre el cuadro de diálogo Opciones de sector.
7 Escriba la dirección URL que desea en este botón para enlazar a en el campo "URL". También puede introducir otra información para el botón, como la página de navegador de destino, y las etiquetas alternativas. Si desea modificar el tamaño y la posición de la rebanada, hacerlo con las opciones en la sección "Dimensiones" del cuadro de diálogo. Haga clic en Aceptar."
8 Repita los pasos anteriores para la creación y edición de rebanadas opciones de sector para cada botón en la plantilla.
9 Haga clic en "Archivo" en la barra de menú y selecciona "Guardar para Web y dispositivos." Esto abre la opción Guardar cuadro de diálogo Web y dispositivos. Desde aquí se puede cambiar varios aspectos de su plantilla, como el color de fondo, la compresión de imágenes y la calidad, el tamaño del documento y así sucesivamente. Estas opciones están bien etiquetados y hablan por sí mismos. (Usted puede ver el código HTML de esta plantilla haciendo clic en el botón "Vista previa".)
10 Haga clic en el botón "Guardar". Un nombre y guardar el archivo HTML. Ha creado su plantilla web. Ahora puede abrirlo en un editor de páginas Web y añadir su contenido.
Consejos y advertencias
- Photoshop crea una nueva imagen para cada rebanada se crea y las guarda en un subdirectorio llamado "Imágenes". Cuando suba sus páginas a un servidor Web, asegúrese de incluir la carpeta Imágenes.
- Si usted tiene una buena comprensión de como se distribuyen las páginas Web en las tablas, puede utilizar este método para desarrollar algunas plantillas más sofisticados, incluyendo cuadros de texto. Para crear un cuadro de texto (o tabla), sólo tiene que establecer el "Tipo de sector" desplegable de Opciones de sector a "Sin imagen". Esto crea una tabla en blanco.