Tutorial vCard – Parte #1 diseño de la plantilla
Plantillas PSD, Tutoriales No hay comentarios, deja el tuyo!
Con este pack de tutoriales podremos aprender a construir nuestra propia vCard, estará formado por varias partes:
- Tutorial de diseño de la plantilla vCard.
- Plantilla en PSD gratuita de la vCard.
- Maquetación de la vCard en CSS y HTML.
- 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!
