El diseño es un diseño sencillo pero actual ya que se han tenido en cuenta que sea facil de maquetar para los desarrolladores web.

A continuación capturas de pantalla y el enlace de descarga:

Descargar grátis: Plantilla web en PSD sencilla

A continuación os pongo una sucesión de capturas de pantalla y la plantilla Web en PSD para descargar mientras voy preparando el tutorial de la misma.

Por ahora acabo de terminar el PSD y pasaré a maquetarla para que cuando esté completamente preparada podáis comentarla y disfrutarla al 100%.

Descargar | Plantilla PSD con iconos y tipografia

Paso 1 – Configuración del documento psd.

Lo primero y esencial es configurar correctamente el documento en photoshop.

Abrimos el documento y aplicamos las siguiente medidas: Alto 1200px – Ancho 800px:

Debemos tener claro el diseño que queremos conseguir, e ir colocando las guias

al documento para conseguir un encuadre perfecto.

Una vez hemos colocado las guías exteriores, pasamos a agrandar el documento

pulsando en configuración de imagen – tamaño de lienzo.

Ahora como veis podemos empezar a dibujar el fondo y empezar a colocar guías y a distribuir espacios dentro de la web.

Paso 2 – Formas básicas de la plantilla.

Lo primero es dibujar el fondo: en este caso hemos escogido un color gris  ya que queremos conseguir un diseño sobrio y corporativo y no es necesario aplicarle gran cantidad de colores ni excentricidades.

Tras rellenar el fondo con el pincel nos vamos a filtro – ruido – aplicar ruido y aplicamos un poco de ruido.

Una vez tenemos el fondo vamos a ir definiendo las distintas áreas del sitio web empezando por el header:

El contenido del sitio web y el footer

Y porque no, tambien podemos poner una pequeña barra de navegación arriba para los iconos de idioma (ima web de negocios necesitará multiples idiomas).

Paso 3 – Los detalles del Header

Una vez tenemos las distintas áreas bien definidas pasamos a los distintos detalles y rellenos por partes.

Lo primero es observar y rellenar el header del sitio correctamente. Nosotros hemos elegido colocar el logotipo y la barra de navegación en el mismo sitio y dejar sitio para algún icono y para personalizar un poco el sitio web.

Además a la superficie principal le aplicamos el siguiente efecto de capa:

En la barra de navegación superior vamos a colocar pequeños iconos (adjuntos en el.rar) de banderas de los distintos países.

También le aplicaremos los siguientes efectos:

Con todo esto, nuestro header queda terminado a la espera de la barra de navegación, la cual realizaremos a continuación.

Paso 4 – Barra de navegación

Como veis es una barra de navegación muy sencillita pero también es bastante sencilla de programar y maquetar después (jeje) así que lo único que tenemos que hacer para diseñarla es colocar las guías para que haya siempre la misma separación entra una y otra.

Además también podemos colocar las guias para ubicarlas mejor en el header.

Una vez hecho esto solo debemos crear un diseño para el efecto “pulsado” de cada botón. En este caso hemos elegido este en azul con los mismos efectos de capa que la barra de las banderas de los idiomas:

Una vez diseñado y ubicado todo pasamos al cuerpo y al relleno del sitio web.

Paso 5 – Relleno del cuerpo

En este apartado debemos identificar los principales contenidos que vamos a insertar en la web, etc.

En nuestro caso vamos a insertar un separador para meter unos artículos en el lateral para dar el efecto de sidebar.

Para crear este separador aumentamos el documento hasta el máximo y hacemos una selección de 1 pixel de ancha.y la rellenamos de un color ligeramente mas claro que el que tiene de fondo.

Despues y completamente pegado al anterior repetimos el proceso pero esta vez rellenamos con un tono algo más oscuro al fondo del cuerpo.

Aumentamos el documento y estiramos la selección y vereis el efecto que tiene…si queréis podéis borrar los bordes con poca dureza y conseguiréis el efecto de difuminado…

Una vez creado el separador y hubicado en el cuerpo del diseño, psamos a rellenarlo de texto (ficticio en este caso) para hacernos una idea de que tal quedaría nuestro diseño ya maquetado.

Y tras esto pasamos a los detalles del tipo de iconos con el símbolo más junto con el texto de leer más. Esto le dará un toque muy bonito a cada artículo ya que hace también de separador entre uno y otro.

También y si os gusta, podeis añadir un pequeño título en cada uno de estos pequeños artículos.

Y esta sería la imagen del sidebars terminada:

Pasamos al Cuerpo principal que debe constar de un título y porque no, una imagen en el contenido del artículo.

Ayudandonos con las guias del documento insertamos el título del artículo principal:

Ahora vamos a crear un marco para poder insertar las imágenes dandole un toque profesional.

Los valores de capa del marco son los siguientes:

Y metemos en el una imagen ficticia dejando unos pequeños margenes para que se vea un poco el marco anterior.

Ahora terminamos añadiendo el texto ficticio del artículo para ver como quedaría, y le añadimos también el icono de leer más…

Y ya tenemos nuestro cuerpo terminado:

Paso 6 – Footer

Pasamos al footer donde debemos poner nuestra firma, la licencia del sitio o lo que veais útil para el usuario, teniendo el cuenta que es algo que siempre solemos ver todos los sitios web.

Le damos a la estructura los siguientes estilos de capa:

Aquí podeis ver como quedaria mi firma y la licencia de creative commons que después en maquetación la podremos poner como un link a nuestra licencia.

Paso 7 – Conclusiones finales

Como vereis nos es un diseño muy costoso ni complicado pero creo que es sencillo de maquetar y de realizar. Os animo a que lo hagais vuestras propias versiones y las podamos compartir entre todos.

Como siempre podeis encontrar todos los componentes de este tutorial incluyendo el .psd del mismo en el siguiente enlace:

Descargar | Plantilla PSD e Iconos

De momento os dejo estas capturas de pantalla y la plantilla en PSD pero como podéis comprobar en este enlace “Theme en wordpress desde un archivo de photoshop” estoy trabajando en hacer de esta plantilla un theme.

En esta captura podeis observar que en el diseño se ha tenido en cuenta el añadir un banner 468×60 en el header (rectangulo blanco junto al logotipo).

Aqui podeis ver que tenemos en cuenta el lector rss y publicidad en el sidebar (banner de 125×125)

Aquí podeis ver el resto del sidebar con las redes sociales y las categorías, enlaces o lo que querais añadirle desde wordpress.

Próximamente tendréis listo el theme para añadir a vuestro blog pero recordad que podeis pedir que os diseñe o que os maquete alguna funcionalidad en concreto si teneis pensado usarlo para vuestro blog personal.

Descargar || Plantilla PSD de un theme en Wordpress

Si quereis aprender a hacer este tipo de plantillas aquí os dejo algunos link interesantes:

Tutorial de RecursosPSD como hacer tu propia plantilla (Tutorial en español)

Tutorial para crear una web 2.0 (tutorial en inglés)

Espero vuestras dudas o sugerencias…un saludo enorme!!

• Fondo colorido con textura en piedra.
• Amplio menú de navegación traslúcido.

Como siempre lo podéis descargar de forma totalmente gratuita.

Descargar  |  Plantilla con textura en piedra y muy colorida

Para los que no quieran seguir el tutorial de diseño y esperan para continuar el tutorial de maquetación de dicha plantilla.

Además en este archivo podreis encontrar los iconos que hemos usado para realizar dicha plantilla.

Descargar | Plantilla vCard

1. Tutorial de diseño de la plantilla vCard.
2. Plantilla en PSD gratuita de la vCard.
3. Maquetación de la vCard en CSS y HTML.
4. Integración de Funcionalidad.

En esta serie de tutoriales aprenderemos que pasos debemos seguir para diseñar, maquetar y añadirle funcionalidad a un vCard.

¿Qué es una vCard?

Básicamente son un formato de intercambio de información que intenta imitar a las tarjetas de contacto clásicas de forma digital.

Las vCard son adjuntadas por email o publicadas en forma de Web. Pueden contener nombre, dirección, números telefónicos, Urls,  logos, fotografías, e incluso clips de audio.

Cosas a tener en cuenta a la hora de diseñar una vCard.

Son de diseño sencillo e informativo sobre una persona o empresa y debe constar de los siguientes apartados o partes:

• Principal – Donde expondremos datos de los conocimientos de la persona, o actividad empresarial de la entidad

• Trabajos – Donde expondremos los trabajos más recientes de dicha persona o entidad

• Redes sociales – Donde expondremos las redes sociales donde nos encontramos y las direcciones de las mismas

• Contacto – Donde pondremos un formulario de contacto para rellenar y los distintos métodos de contacto que sean útiles para los usuarios del sitio.

Empezamos con el diseño:

Paso 1 – Espacio de trabajo.

Abrimos photoshop y creamos un documento nuevo con las medidas 960 píxeles de altura y 800 de anchura.

Colocamos guías a 200 píxeles desde cada uno de los lados para definir el tamaño de la interfaz básica de la vCard.

Una vez hemos definido el tamaño de la interfaz rellenamos el fondo del documento de un color azul marino oscuro mate (# 364053) para darle un tono más corporativo.

Aplicamos un poco de ruido a la capa de fondo (Filtro > Ruido > Añadir Ruido).

En el menú Ruido seleccionamos la casilla de Gaussiano y aplicamos un 1% o un 2% al fondo azul, quedándonos algo así:

Paso 2 – Diseño de la interfaz básica.

Para empezar seleccionamos la herramienta de rectángulo redondeado y con un radio de 5px aplicamos la herramienta respetando las guias del documento que hemos puesto anteriormente.

Como veis hemos elegido un color crema que le va mucho al fondo:

Ahora le aplicamos unos efectos de capa a la interfaz:

Quedándonos como resultado algo así:

Paso 3 – Creación de las áreas y botones.

Para diseñar los botones seleccionamos la herramienta de rectángulo redondeado y aplicamos un poco más de radio que a la interfaz principal y le damos el mismo color y efectos de capa que a dicha interfaz.

Ahora lo multiplicamos para poner los distintos apartados

Una vez tenemos colocados los botones pasamos directamente a diseñar los colores principales para descargar la vCard y un resumen o Curriculum Vitae.

Paso 4 – Botones del Index.

Pasamos entonces a colocar los botones para descargar la vCard o el currículum vitae mío (en nuestro caso)…xD

Para ello (y para variar) seleccionamos la herramienta de rectángulo redondeado y le damos un poco más de radio que a los botones de las secciones. Por ejemplo le aplicamos 15píxeles de radio.

Además le damos un color gris seco y le añadimos los siguientes efectos de capa

Este es el resultado que obtendremos:

Pasamos a los detallitos de la plantilla, los separadores

Paso 5 – Colocación de los separadores.

Para crear el efecto de separadores solo debemos aumentar el menú de trabajo en un 1000% y con la herramienta rectangular seleccionar 1 píxel x 100píxeles por ejemplo y rellenar de un tono claro.

Justo después y al lado de la primera selección debemos hacer lo mismo pero rellenándolo con un color más oscuro que el fondo.

Tras esto ajustamos a donde lo queramos colocar y este es el resultado que obtendríamos:

Paso 6 – Insertar textos e iconos

El siguiente paso es muy simple, solo tenemos que rellenar nuestra plantilla con los textos que vamos a poner. En este caso lo que debe ir con toda seguridad en el principal de la plantilla es todo lo relacionado con nosotros y las capacidades  que queramos destacar sobre nuestra actividad profesional.

En mi caso hemos usado el generador de textos Lorem Ipsum para generar texto y rellenar la plantilla

El siguiente paso es colocar algunos iconos web de los que podéis encontrar en la esta misma web e incluirlos en el diseño consiguiendo este resultado:

Pasamos al último paso.

Paso Final – Marco de fotografía.

Algo elemental en una vCard es la fotografía de la persona o logotipo de la empresa que esté detrás de esta tarjeta así que creamos un recuadro blanco con la herramienta de forma rectangular y pulsamos Cntrl para que sea un cuadrado perfecto.

Elegimos el color blanco y colocamos la foto, en este caso el logotipo de mi blog.

Resumen

Como podéis ver no es un diseño complejo ni tampoco se espera dar demasiada funcionalidad ya que las vCard así lo requieren.

Ahora seguiré diseñando el resto de áreas para el futuro tutorial de maquetación

Diseño básico para una función sencilla que esta plantilla cumplirá a la perfección.

Descargar | Plantilla vCard

Gracias por seguirme y espero vuestros comentarios!!

Un Saludo!