Bienvenidos
En este post aprenderás a diseñar una página web desde lo más básico, partiendo por conceptos básicos hasta llegar ah darle un bonito estilo a tu diseño. Para desarrollar este tutorial con soltura lo único que necesitas es tener conocimientos básicos sobre Photoshop. Ojala te sea de utilidad el tutorial y éxito (:
Antes de Empezar
Primero que todo, debemos imaginarnos el orden de la posición de los elementos de nuestro diseño web. Para este tutorial yo prepare la siguiente plantilla:
Analicemos un poco:
Logo: Esta contiene el banner, logo corporativo, etc.
Menú: Este permite la navegación por el sitio web.
Contenido: Contenido del sitio.
Pie de Pagina: Referencias al autor, copyright, etc.
Una vez decidida la el orden de los elementos podemos acomodarlos y darles un estilo a nuestra composición, en este tutorial desarrollaremos un diseño referente a una web personal:
No hemos hecho un estructura muy original pero es un ejemplo para desarrollar el tutorial.
Comencemos
Para empezar crearemos un documento del tamaño que nosotros decidamos, en mi caso 850 x 580.
Y después elegir el fondo para tu web, ya sea una imagen o un color, yo ocupare una imagen un tanto difuminada (la adapte al tamaño de mi documento).
Luego seleccionaremos nuestro logo o simplemente escribimos nuestro nombre o nickname y lo acomodamos en la esquina superior derecha de nuestro documento, así como se muestra en la imagen.
Después creamos 4 figuras rectangulares y luego las ordenamos en dirección vertical, le podemos dar un degradado y bajarle la opacidad, de cualquier modo dejare los estilos utilizados para descargar mas abajo. Luego escribimos los nombres de las secciones de nuestra web en cada uno de los rectángulos, también poniéndole un estilo como de sombra dura, así como se ve en la imagen.
Luego crear una enorme figura cuadrada y copiamos el estilo que le dimos a los rectángulos del menú. Después ponemos texto dentro del cuadrado con el estilo del texto del menú o diferente, eso ya va a gusto personal.
Bueno por ultimo solo queda poner los derechos para que sepan que nosotros creamos el diseño y también para que no roben el diseño, aunque de igual manera algunos usuarios roban plantillas de otros pero bueno aya ellos.
Extras
- Generador de párrafos: www.lipsum.es
- Descarga el PSD con cual se creo el diseño
Click en la imagen para descargar
- Descarga la Plantilla lista en PSD: Click Aqui
Fin
Espero que te aya servido y compártelo si te gusto (: Adiós!