Tutorial para crear una plantilla web corporativa en photoshop.
Diseño Web, Plantillas PSD 1 Comentario
En este tutorial vamos a aprender a diseñar una plantilla con un diseño actual y orientado a empresas. Es un tutorial de nivel medio pero muy visual.
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
