Blueprint, entre sus archivos para descarga, proporciona una plantilla con una serie de guías que forman las 24 columnas disponibles para la maquetación, divididas también en una serie de filas, lo que configura una rejilla, que nos viene como anillo al dedo para diseñar atendiendo a los espacios que dispondremos más tarde durante la maquetación. Esa plantilla la entregan en el directorio "templates" y en un archivo PSD (de Photoshop) que podemos abrir para comenzar a diseñar fácilmente.
Nota: Este diseño vamos a realizarlo para enseñar en vídeo cómo maquetar con Blueprint CSS, para complementar las explicaciones ya entregadas en el Manual de Blueprint.
En este videotutorial utilizaremos Photoshop CS5, la versión más moderna en el momento de escribir estas líneas del afamado programa de diseño. No obstante, las funcionalidades que ponemos en marcha para diseñar esta plantilla son características también de versiones más antiguas del software, por lo que estarán al alcance de la mayoría de las personas.
Nota: Si os interesan estos vídeos de diseño web con Photoshop, os damos un par de referencias a otros dos videotutoriales que también muestran la realización de una plantilla web:
En el vídeo comenzamos descargando el framework Blueprint CSS y descomprimiendo el archivo. Luego abriremos con Photoshop la mencionada plantilla con la rejilla para el diseño. A partir de ahí, todo el trabajo que realizaremos será encaminado al ingenio de la creatividad gráfica de nuestra página web, creando todos los elementos que compondrán la plantilla.
En el videotutorial, durante el trabajo con Photoshop, mostraremos cómo realizar un sencillo fondo con un degradado y cómo realizar un marco para colocar el cuerpo de la página. Luego trabajaremos sobre los elementos de la cabecera, diseñando un rudimentario logotipo y una minimalista barra de navegación.
Luego trabajaremos sobre el cuerpo de la página, creando una noticia principal, en la que colocaremos tanto una imagen, como un titular y una entradilla. En este punto definiremos una línea de trabajo con tipografías, mezclando fuentes con y sin serifa, lo que hará que el conjunto de tipos case perfectamente, creando un contraste entre ellos. Veremos más adelante en el vídeo cómo se continua con el cuerpo de la página diseñando a tres columnas, colocando diversos elementos de nuestro supuesto web.
Acabaremos trabajando un pie de página con las cosas elementales que se suelen colocar en ellos, como la dirección de la empresa y una serie de logotipos de la redes sociales en las que estamos presentes.
Continuación: Si ves este vídeo y te preguntas luego sobre cómo maquetarlo con CSS, te recomiendo que accedas al videotutorial sobre la maquetación con CSS y Blueprint de este diseño Photoshop.
Como decimos, se trata de una videopráctica elemental de diseño web, en la que simplemente hemos hecho una plantilla con Photoshop. Realmente solo hemos utilizado Blueprint para ayudarmos de la rejilla en 24 columnas, pero más adelante realizaremos uso de ese framework CSS para maquetar el diseño que hemos realizado. De momento este videotutorial acaba con el final del diseño, pues ya con ello nos hemos ocupado casi una hora y veinte minutos, que es más que de sobra para comenzar.
Esperamos que este videotutorial de Photoshop os interese y no resulte demasiado pesado para los estudiantes. Ya me contaréis las impresiones comentando el artículo o el vídeo que hemos publicado en Youtube.
Fuente:enlace
Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros
Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve para más información
No hay comentarios:
Publicar un comentario