Comenzamos una serie de tutoriales para crear tu primera plantilla para Joomla y WordPress. desde su diseño estático con Photoshop y su codificación en xHTML y CSS utilizando el Framework 960 Grid System hasta la implementación en Joomla 1.5.

Para este primer ejemplo crearemos una plantilla lo más sencilla posible que sirva de excusa para la posterior codificación e implementación como plantilla de Joomla.

Este primer tutorial aborda conceptos muy básicos de Photoshop, por lo que está recomendado para los que se inician con este Programa, utilizaremos la versión CS4 pero para seguir el tutorial podréis disponer de versiones anteriores.

Estas son las partes del tutorial:

• Parte 1: Diseño Estático
• Parte 2: Codificación xHTML/CSS (proximamente…)
• Parte 3: Implementación en Joomla 1.5 (proximamente…)
• Parte 4: Implementación en WordPress (proximamente…)

Parte 1. Diseño Estático

Preparando el escenario

1- Descargamos el Framework CSS 960 Grid System

2- Descomprimimos el archivo descargado

3- Abrimos el documento de Photoshop que nos va a servir de rejilla para maquetar nuestra plantilla:

4- Pulsamos en el menú Imagen-> Tamaño del Lienzo (⌘+alt+C) y rellenamos con los siguientes datos, deberéis de cambiar las unidades a pixels:

5- Aplicamos algunas reglas más a los bordes de la imágen resultante de la siguiente manera:

6- Siempre que queramos podemos ocultar las guías (⌘+H) o no mostrar las columnas de fondo ocultando la capa “16 Col Grid”:

Colocando los elementos

Realizaremos una web ficticia de temática médica.

1- Comenzamos creando el menú superior. Para ello seleccionamos la herramienta Forma (U) y seleccionamos “Rectángulo redondeado”, con 8 pixels de radio y color gris claro #dadada:

2- Dibujamos 4 Módulos en la posición superior como muestra la imagen y escribimos el título de los ítems de menú, ponemos lo que queramos. Para el estilo de fuente he utilizado una Helvética Bold de 12 puntos de tamaño y de color un gris más oscuro #6d6d6d:

3- Colocamos el título de la Web en la posición directamente inferior al menú e incluimos como slogan un texto de ejemplo, seguimos manteniendo como estilo la tipografía Helvética Bold para el título y en variante normal para el slogan, podeis probar con varios tamaños que se ajusten a vuestros propósitos.

4- Dibujamos un rectángulo redondeado de la misma manera que en el paso 1 de color #dadada que ocupe lo que indican las guías de la siguiente imagen:

5- Descargamos una imagen de ejemplo gratuita de stock para elaborar la imagen de ejemplo de la portada. Para ello he utilizado la siguiente imagen de http://www.sxc.hu. Para que la imagen tenga los bordes redondeados:

- La posicionamos sobre el rectángulo redondeado y ajustamos su tamaño (⌘+T) de tal manera que sea más grande que el rectángulo.

- Con la capa de la imagen seleccionada y el botón de comando (⌘) apretado seleccionamos sobre la máscara vectorial del rectángulo gris situado debajo de la imagen, de esa forma crearemos una selección que mantendrá los bordes redondeados:

- Invertimos la selección (Menú selección->Invertir o ⌘+mayus+I) y con la capa de la imagen de stock seleccionada pulsamos la tecla delete para borrar la superficie alrededor de la imagen y deseleccionamos (⌘+D)

6- Algo importante va a ser el fondo, vamos a utilizar un degradado de fondo, para ello creamos una capa por encima de la del fondo (background), ocultamos la capa “16 Col Grid” y ocultamos las guías. Pulsamos la herramienta Degradado (G), seleccionamos un Degradado Lineal como muestra la imagen, los valores hexadecimales de color son #ededed (gris) y #ffffff (blanco)

7- Creamos el degradado, para ello deslizamos el tirador de arriba a abajo como muestra la imagen:

8- Volvemos a mostrar las guías (⌘+H) y creamos un rectángulo redondeado por encima de la capa del degradado con los siguientes tamaños:

9- Pulsamos con el botón derecho sobre la capa recién creada del rectángulo y hacemos click en “Opciones de Fusión”, se nos abrirá la ventana de “Estilos de Capa”, nosotros le daremos los siguientes valores a cada uno de los apartados:

10- Ahora vamos a poner un par de textos de relleno, uno será un encabezado y el otro el ejemplo de un párrafo. Y debajo de estos dos textos, colocaremos otra imagen de stock que podéis encontrar gratuitamente aquí. Para el encabezado he utilizado la fuente tipográfica “Georgia” de 24 puntos

11- Crearemos un pie de página que contendrá el texto del copyright de la Web, mediante una caja de texto centrada.

12- Ya tenemos nuestro diseño lista para ser codificado en xHTML/CSS.

En próximos capítulos veremos como transformar la plantilla en xHTML/CSS y como implementarla como plantilla de Joomla 1.5.x utilizando a su vez el Framework 960 Grid System.

Agrupado en: CSS, Diseño Web, Joomla by Miguel Puig
19 Comentarios »