13. Creación de la plantilla en PSD

<< 12. Creación del boceto a lápiz de una web                      14. Introducción a etiquetas Div y estilos CSS >>

En el Panel Sitio seleccionamos / Sitio_Final/  13_Boceto_Plantilla / Boceto_Plantilla.psd  de 1024 x 650 px. Abrimos el documento en Photoshop y en Archivo / Guardar como… lo guardamos en C:.. /Curso_Dreamweaver / Mi_Sitio / creando una carpeta 13_Boceto_Plantilla para alojar el documento que nombramos Mi_Boceto_Plantilla.psd.

Empezamos a modificar los elementos de  un diseño web sencillo, para que cuando lleguemos a los siguientes capítulos en los que veremos las herramientas de DW podamos ir practicando sobre algo más real. No sólo hacer las prácticas en una página en blanco que al final se pierda y en la que no quede constancia de los ejercicios que vamos haciendo.

El fin de este diseño que realizamos en Photoshop es convertirse en la página de inicio de nuestra primera web.

Después vamos a Photoshop / Preferencias / Unidades y reglas y marcamos que las reglas sean en píxeles.

Y en Photoshop / Preferencias / Guías en líneas de cuadrícula le damos un valor de 100 px y en subdivisiones le indicamos 4 para conseguir una cuadrícula con celdas de 25 x 25 px.

Seguimos los pantallazos para ir personalizando la plantilla.

papel y web

01. Documento final con sectores

Tenemos creado el documento Mi_Boceto_Plantilla.psd para hacernos una idea lo más aproximada de como quedara nuestro diseño en la web.

Abrimos el documento en Photoshop y con la herramienta de seleccionar sectores vemos los diferentes sectores que tiene creados.

Vamos también al menú Ventana / Composición de capas que nos va a ayudar a localizar las capas que necesitamos en cada momento de esta práctica.

Aprovechamos para ver como en Photoshop hacemos un ficticio de como seran las difrentes páginas que forman nuestra web. Cuando estemos conformes con el resultado ( o lo esté nuestro potencial cliente), empezaremos a armar la web y generar el código con Dreamweaver.

Comprobamos en http://cursodw.papelyweb.com que es el mismo diseño que tenemos en Photoshop.

papel y web

02. Cabecera

Tenemos una Cabecera con las siguientes medidas: X=0 Y=100 An=1024 Al=150.

Si queremos podemos personalizarla.

papel y web

03. Logo

Cambiamos el logo con nuestro nombre y una leyenda.

papel y web

04. Textos cabecera

Creamos textos para completar la cabecera.

papel y web

05. Guardar Cabecera.png

Una vez acabada la cabecera, seleccionamos el sector “Cabecera” y lo guardamos para la web como “Cabecera.png” como sólo imágenes y sectores seleccionados. Dentro de Mi_Sitio / 13_Boceto_Plantilla

Automáticamente se crea una carpeta “imagenes” (sin acento) para alojar la “Cabecera.png”.

papel y web

06. Barra de navegación “Navega_Inicio”

Vemos la mancha para la barra de navegación, que tiene las siguientes medidas: X=0 Y=250 An=1024 Al= 25

En el panel de capas “iluminamos” las capas según conviene en cada caso y vamos a guardar como web, sólo los sectores seleccionados. Los guardamos dentro de Mi_Sitio / 13_Boceto_Plantilla, los sectores se van colocando automáticamente en la carpeta imagenes (sin acento).

Estos estados de botón los utilizamos más adelante cuando trabajemos dentro de la plantilla (Template) y practiquemos con los comportamientos para realizar un mapa de navegación que nos lleve a las diferentes páginas (Inicio, Currículum y galería) de nuestra web.

Empezamos “iluminando” en capas el “menú inicio”, seleccionamos el sector “Navega_Inicio” y lo guardamos para la web como “Navega_Inicio.png” como sólo imágenes y sectores seleccionados. Dentro de Mi_Sitio / 13_Boceto_Plantilla

papel y web

07. Navega_Curriculum

Iluminamos las capas para que es estado de botón Currículum este activado y seleccionamos el sector 2 y le cambiamos el nombre por Navega_Curriculum

Lo guardamos para la web como “Navega_Curriculum.png” como sólo imágenes y sectores seleccionados. Dentro de Mi_Sitio / 13_Boceto_Plantilla

papel y web

08. Navega_Galeria

Iluminamos las capas para que es estado de botón Galería este activado y seleccionamos el sector 2 y le cambiamos el nombre por Navega_Galeria

Lo guardamos para la web como “Navega_Galeria.png” como sólo imágenes y sectores seleccionados. Dentro de Mi_Sitio / 13_Boceto_Plantilla

papel y web

09. Pie

Localizamos en las capas la mancha para el Pie y cambiamos el texto con nuestro teléfono y email. Podemos también personalizar la mancha.

Lo guardamos para la web como “Pie.png” como sólo imágenes y sectores seleccionados. Dentro de Mi_Sitio / 13_Boceto_Plantilla

papel y web

10. Región editable “Inicio.png”

Identificamos la región editable, que es donde crearemos el contenido para realizar las prácticas, ya que tanto la cabecera como la barra de navegación y el pie serán fijos y formarán las partes comunes de la plantilla.

Este punto del diseño es el que nos servirá para hacer la plantilla de la web, ya que todo se irá repitiendo en todas las páginas. Ahora diseñaremos el resto de páginas, Inicio, Currículum y Galería.

Empezamos “iluminando” en capas para ver la página de “Inicio“, seleccionamos el sector “Region_Editable” le cambiamos el nombre a “Inicio” y lo guardamos para la web como “Inicio.png” como sólo imágenes y sectores seleccionados. Dentro de Mi_Sitio / 13_Boceto_Plantilla

papel y web

11. Región editable “Curriculum.png”

“Iluminamos” las capas necesarias para ver la página de “Currículum“, seleccionamos el sector “Region_Editable” le cambiamos el nombre a “Curriculum” y lo guardamos para la web como “Curriculum.png” como sólo imágenes y sectores seleccionados. Dentro de Mi_Sitio / 13_Boceto_Plantilla

papel y web

12. Región editable “Galeria.png”

“Iluminamos” las capas necesarias para ver la página de “Galería“, seleccionamos el sector “Region_Editable” le cambiamos el nombre a “Galeria” y lo guardamos para la web como “Galeria.png” como sólo imágenes y sectores seleccionados. Dentro de Mi_Sitio / 13_Boceto_Plantilla

papel y web

13. Comprobar en Bridge

Ya sólo nos queda localizar en Bridge la carpeta Mi_Sitio / 13_Boceto_Plantilla / Imagenes y comprobar que tenemos todas las imágenes necesarias para realizar las siguientes prácticas.

Crear las carpetas del curso

C: … / Cursos / Curso_Dreamweaver /  Curso_Final. Contiene los archivos finalizados que vamos a necesitar para completar las prácticas de curso.

C: … / Cursos / Curso_Dreamweaver /  Mi_Sitio. Es donde realizaremos las prácticas.

Si es necesario crea las carpetas que necesites. Es muy importante mantener la estructura de carpetas que recomendamos en estos apuntes, para seguir el curso sin perdidas de tiempo adicionales.

Envia un comentario

Debes ser Conectado Para publicar un comentario.