crear diseño de pagina web

BIENVENIDOS A MI NUEVO POST

Hoy vamos a aprender como hacer un diseño elegante de pagina web. En la primera parte del tutorial vamos a construir el concepto de diseño Photoshop con un esquema de color oscuro y diseñar el contenido a una red de base sólida.



Aquí está el sitio Web que va a crear. Es un elegante diseño con sutiles degradados e imágenes de captura de los ojos sobre la base de un plan global de color oscuro negro / gris. Todo el sitio se presenta de acuerdo a una red sólida que ayuda a equilibrar los elementos de la página.







El cliente de ficción que he hecho para este proyecto de tutorial es una marca de gafas pequeño llamado OPTIK. Ellos quieren un sitio web para mostrar su gama de productos. Tiene que reflejar el estilo elegante de su gafas de sol deportivas y dirigir al usuario a sus cuatro gamas de productos. Una selección de la fotografía ha sido suministrada, que necesita un lugar destacado para mostrar los productos, de lo contrario, el diseñador tiene rienda suelta sobre el diseño general y el diseño. Si usted está buscando para completar su cartera de diseño o si usted está buscando un proyecto para utilizar como práctica / experimentación, no dude en utilizar este cliente de ficción como base para sus propios diseños.




El diseño que va a crear como parte de este tutorial comienza en el papel como un bosquejo junto con las notas simples. Siempre es digno de lista a los elementos que se requieren en una página para que pueda dar cabida y todo el orden en términos de importancia. Un dibujo sencillo da cuerpo a la disposición general y nos da una dirección clara, cuando nos abrimos Photoshop.




Crear un nuevo documento en Photoshop. Tengo una plantilla predefinida que uso que ya contiene columnas, canales y una rejilla base 24px. Utilice el generador de mano de http://grid.mindplay.dk para crear su propio, o si usted es un acceso a todos los miembros Áreas , basta con descargar el archivo de origen y guárdelo para sus diseños futuros.






Llene el fondo con negro, a continuación, utilice el patrón de zig-zag de mis Line25 patrones de píxeles regalo de promoción para llenar una nueva capa. Invertir la selección, cambiar el modo a pantalla y reducir la opacidad al 10%.






Dibujar una selección en el centro del documento midiendo la anchura de la rejilla y llenarlo con negro en una nueva capa.






Abra la ventana de estilos de capa y modificar la configuración Sombra para producir un resplandor suave y gris de detrás del panel de contenido.






Pegar en el logotipo de OPTIK y alinearla a la red, que abarca tres columnas y la alineación de la línea de base del texto con la cuadrícula base. Aquí estoy usando la versión original del vector, pero estoy seguro de una acción de la varita mágica poco en el formato JPEG anterior le permitirá utilizar el mismo logotipo.






Dar el logotipo de un tratamiento fresco en la forma de un gradiente de color gris sutil y muy ligero bisel y relieve los efectos de dar un estilo metálica básica.







Utilice la herramienta de texto para escribir un menú de navegación a lo largo de la línea de fondo lo mismo con cada elemento de la alineación a una columna. Establezca el estilo de fuente Helvetica 14 puntos en mayúsculas con un relleno de color azul claro.






Dibuja una selección fina en todo el ancho del panel de contenido y lo rellenamos con un gradiente sutil. Duplicar y mover de un tirón este gradiente y vuelva a colocarla para delinear un área de características en la parte superior del diseño de página de inicio.







Pegar en la primera de las fotografías de productos llamados, que es en realidad una foto de stock de un compañero fresco en un poco de cortesía gafas de sol de Thinkstock . Escala la imagen a su tamaño para que quepa en el área de función.






Dibuja una selección y crear una máscara de capa para ocultar las partes no deseadas de la imagen, dejando un estilo de buzón panel de función.







Use la cuadrícula para alinear algunos contenidos relacionados con la imagen característica. Aquí, el logotipo de Hydro-tek ha sido importado de Illustrator con el mismo Eurostile la fuente, mientras el cuerpo del texto se añade en Photoshop # 9d9d9d 16pt Helvetica.







Utilice la herramienta Rectángulo redondeado para dibujar la forma básica de un botón, y luego traerlo a la vida con un gradiente y el accidente cerebrovascular 1px bien. Los colores han sido recogidos de la imagen para atar todo juntos mientras se mantiene la tonalidad azul básico como el fin de proporcionar un color reconocible y coherente entre todos los elementos seleccionables y enlaces.





Dibuja cuatro cajas por debajo de la de sus características en la alineación de su tamaño de acuerdo a la red. Llene las cuatro cajas de color negro.






Abre la ventana estilo de capa y dar a los cuadros de un gradiente de grises sutiles y los accidentes cerebrovasculares 1px para definir su contorno. Estos cuatro cuadros se refieren a los cuatro eslabones principales de Sun, Deporte, Tecnología y Especiales.






Importar una imagen que se relaciona con la gama de productos Sun y engancharlo a la medida con una máscara de capa para que quepa en la caja de poco contenido. Esta imagen en particular es otra de Thinkstock .






Duplica la capa de la imagen y luego ir a Imagen> Ajustes> Tono / Saturación. Disminución de la saturación del orden del 60%. Vamos a salvar a las dos capas para crear un genial efecto de activación en la página web con código final.






Escriba un breve párrafo descriptivo que se refiere a la gama de productos, seguido por una llamada al vínculo de la acción en el color azul habitual de anclaje.







Acabar con estos cuadros de poco contenido con imágenes y contenidos relacionados con el deporte, las secciones de Tecnología y Especiales. Más fotos de pensar de archivo se utiliza junto con una foto Creative Commons de Flickr por Monsalvador .






Debajo del panel de contenido principal de usar la herramienta de texto para exponer parte del contenido típico de pie de página, como aviso de copyright, los enlaces secundarios y una parte posterior de anclaje superior.






Dar un paso atrás y mirar por encima del diseño con la red de encendido y apagado. La alineación de todos los elementos de las columnas y la cuadrícula de referencia ayuda a lograr un perfecto flujo horizontal y vertical, con todos los elementos de página que se está perfectamente alineados.






El concepto final, PSD ya está listo para la codificación como una página web completamente funcional. Si usted está emocionado de pasar a la etapa siguiente, echa un vistazo a la segunda parte en mi blog sobre diseño web Line25 . En la parte de codificación de este tutorial vamos a construir el concepto de página web en formato HTML y CSS.