Cualquiera que esté familiarizado con el desarrollo de páginas web sabe que normalmente no se empieza con la estructura HTML. En su lugar, se utiliza un programa gráfico para crear el diseño de la página. (Si se trabaja en una agencia, el diseño lo proporciona el diseñador gráfico o el cliente). La tarea consiste entonces en construir la página a partir de este diseño. Esto es exactamente de lo que vamos a hablar ahora.
En relación con la reconstrucción de maquetas, a menudo nos encontraremos con los términos " cortar y trocear ". En realidad, estos términos no significan otra cosa que tomar la plantilla o el diseño, cortarlo en su programa de gráficos y luego volver a unirlo utilizando HTML.
El programa gráfico adecuado
Cada uno tiene sus preferencias en cuanto al software que prefiere utilizar. Por supuesto, esto también se aplica a los programas gráficos. Sin embargo, en el contexto del diseño web profesional, las cosas son un poco diferentes. Aquí se utiliza Photoshop casi exclusivamente. De hecho, la mayoría de los borradores de diseño están disponibles como archivos PSD. Y es precisamente este formato PSD el que no se puede abrir o incluso editar en todos los programas.
Si no tienes Photoshop, no estás completamente perdido. GIMP es una posible alternativa. Puedes descargar el programa gratuitamente en http://www.gimp.org/. Te mostraré los pasos básicos para crear un diseño utilizando GIMP. Sin embargo, esto también funciona de forma similar en Photoshop.
Crea tu propio diseño
En primer lugar, piensa en los aspectos básicos del diseño:
- ¿Qué anchura debe tener la maqueta?
- ¿Cuántas columnas debe tener?
A continuación, cree el espacio de trabajo mediante Archivo>Nuevo y defina el tamaño. Aunque la maqueta que he creado "llena páginas", el contenido real sólo tiene una anchura de 1.000 píxeles. He fijado la altura del diseño en 887 píxeles. (Aunque la altura del sitio web se basará posteriormente en el contenido).
Los ajustes se confirman con OK. El espacio de trabajo está ahora disponible y puede ser llenado con contenido. (Para mayor claridad, trabajo con un fondo gris en el diseño. Esto no será visible más tarde en el sitio web).
Un elemento típico de la página web es el logotipo, que suele estar disponible como gráfico. Para insertarlo en el diseño, vaya a Archivo>Abrir y seleccione su logotipo, que debe estar en uno de los formatos PNG, GIF o JPEG. Confirma la selección con Abrir. Ahora pulse Ctrl+C para copiar el logotipo en el portapapeles. A continuación, cambia al diseño web actual y pulsa Ctrl+V. El logotipo pegado aún no estará en la posición deseada. Sin embargo, puede moverse fácilmente a la posición correcta utilizando la herramienta de movimiento.
Si la imagen no se puede mover, primero debe activar la capa. Encontrará los ajustes correspondientes enVentana>Diálogos desplegables>Capas.
Para una mejor maquetación, debería mostrar líneas guía. Para ello, haga clic en la regla con el botón del ratón y arrástrela hasta la posición deseada mientras mantiene pulsado el botón izquierdo del ratón.
Esto le permite dibujar tantas líneas guía como desee para alinear los elementos de la página web.
Ahora cree otra capa. Esta capa contendrá el menú superior.
Puede darle el nombre de Menú superior. Cree la capa con OK. Abre el rectángulo de selección y arrastra el área en la que se insertará la navegación.
En el ejemplo actual, supongo que el fondo del menú superior tendrá un degradado de color. Para ello, hago clic en Degradado de color: Selección con degradado de color (relleno).
El degradado de color debe ir del gris al negro. Los colores correspondientes se pueden ajustar utilizando los campos de color. Yo selecciono el tipo de degradado de color de VG a HG, para que vaya del color de primer plano al de fondo. Ahora mantenga pulsada la tecla Ctrly dibuje una línea de arriba a abajo en el área seleccionada. Después de soltar el botón izquierdo del ratón, el área tendrá el gradiente de color deseado.
En principio, ahora tiene dos opciones:
- Puede dejar el área de navegación tal como está.
- Puede insertar cada uno de los elementos del menú para que pueda ver exactamente qué fuentes, etc., está utilizando en el diseño.
Cuál de las dos opciones elija depende de usted, por supuesto. Sin embargo, si quiere presentar el diseño a sus clientes, por ejemplo, le aconsejo que incluya los elementos del menú. La experiencia demuestra que a muchos clientes les falta imaginación.
En primer lugar, debe seleccionar un tipo de letra. En GIMP encontrará los ajustes correspondientes en Ventana>Diálogos acoplables>Fuentes.
En el curso de esta serie, ya hemos discutido cuestiones de fuentes en relación con CSS y HTML. En última instancia, como diseñador web, puede especificar teóricamente cualquier fuente que desee. Sin embargo, no sabe si ese tipo de letra existe realmente en el ordenador del visitante del sitio y si, por tanto, puede mostrarse. Por tanto, es difícil comprobar los resultados, sobre todo si se utilizan fuentes muy exóticas. Sin embargo, volveré sobre este aspecto en el transcurso de esta serie cuando se trate de las fuentes del sitio web de ejemplo. Para el diseño actual, he decidido utilizar la siguiente configuración:
- Verdana negrita
- 20 píxeles
- Color de fuente blanco
Ahora puede insertar los elementos de menú individuales de esta manera. La mejor forma de hacerlo es copiar la capa que contiene el primer elemento del menú y pegarla como una nueva capa. A continuación, puede personalizar el texto de la capa. Cree el menú superior de esta manera.
El menú superior debe tener un efecto hover. Esto significa que si pasas el puntero del ratón por encima de cada uno de los elementos del menú, su color de fondo cambiará. Por supuesto, este aspecto también debe visualizarse en el diseño. Para ello, defina el color deseado y copie uno de los niveles de menú existentes. Asigne el color a esta capa. En el ejemplo actual, estoy asumiendo un gradiente de color azul. A continuación se inserta el texto del elemento de menú. Esto le da una idea de cómo será el menú al final.
