Bueno, en este sencillo tutorial de Photoshop, les enseñaré cómo hacer un buen diseño de sitio web, un diseño de sitio web profesional (estilo comercial), es decir. Puedes ver el diseño del sitio web que he hecho usando este tutorial a continuación.
(resultado del tutorial. haga clic para ampliar la imagen)
1. Nuevo documento/lienzo
Muy bien, comencemos creando un nuevo documento en el que podamos diseñar nuestra plantilla. Para este tutorial he usado un tamaño de documento de 900×1000 píxeles, pero puede usar el tamaño que realmente desee, solo manténgalo alrededor del tamaño general de la plantilla.
Después de crear un nuevo documento, querrá configurar un buen fondo para el diseño de su sitio web. Para esto he usado un color de fondo de #003466. Después de llenar su fondo con un color sólido, puede darle más detalles aplicando Filtro > Ruido > Añadir ruido con una cantidad de aproximadamente 0.5-1.5 (una de las tendencias actuales en el diseño web es aplicar ruido al fondo), y también puede agregar detalles al fondo agregando un degradado oscuro en la parte superior y luego bajando la opacidad. Para esto, puede usar un negro a transparente gradiente, o un negro a blanco degradado, aunque si usa la última opción, deberá cambiar su modo de capa a Multiplicar y bajar la opacidad!
Ahora que ha creado su fondo, avance al siguiente paso y cree un área contenedora para el resto de la plantilla.
2. Área del contenedor de plantillas
Necesitará un área de contenedor simple para el diseño de su sitio web para todo su contenido y demás. Puedes hacer uno realmente simple simplemente haciendo un rectángulo blanco en el medio de tu plantilla, o puedes ir un poco más complejo y hacer un bonito contenedor con bordes redondeados. Puede hacer un rectángulo de bordes redondeados usando el Herramienta Rectángulo redondeado o usando los canales, probablemente solo quiera obtener la herramienta de rectángulo redondeado y crear uno.
También querrá asegurarse de configurar su configuración para la herramienta de rectángulo redondeado, similar a la mía si lo desea.
¿Terminaste el área del contenedor, a menos que haya algo más que quieras hacer? Para obtener más detalles (puede que no sea lo más eficiente), puede agregar un brillo exterior (sombra) al área del contenedor, vea mi configuración de Resplandor exterior si desea agregar una sombra al exterior del contenedor.
3. Sección de pie de página
Normalmente esperaría hasta el final para agregar un pie de página, pero en este caso no lo estamos, creo que es mejor que lo agreguemos ahora. En primer lugar, comience haciendo una selección que contenga todo el ancho del área de su contenedor, pero solo alrededor 30-40 píxeles de la altura, como se muestra en la siguiente captura de pantalla.
Suficientemente simple. Después de crear su selección, similar a la mía que se muestra arriba, haga clic derecho en su selección (con su herramienta de selección aún activa) y luego haga clic en Capa a través de corte, después de hacer esto, su área seleccionada estará en una capa separada. Después de hacer que su sección de pie de página se separe, haga clic derecho en su capa y vaya a la Opciones de fusiónhaga clic Gradiente de superposición y aplicar estos ajustes.
Ahora, termine su área de pie de página simplemente agregando su aviso de derechos de autor y algunos enlaces si desea agregar enlaces en su pie de página. Algunas personas también hacen un área de pie de página extra grande y agregan cosas como Publicaciones recientes, Archivos, incluso Blogroll. Pero no estoy realmente en ese tipo de cosas. Entonces, ¡has terminado con el área del pie de página!
Si se pregunta cómo va mi diseño hasta ahora, puede ver el diseño hasta ahora aquí.
4. Encabezado/Logotipo/Área de navegación
Ahora vamos a crear el área de encabezado donde va el logotipo y, a veces, algunos botones de navegación. Comience haciendo una selección rectangular en todo el ancho del área de su contenedor, pero solo alrededor 50-100 píxeles de altura, haga esta selección en la parte superior del área del contenedor.
mi selección fue 802×59 píxeles para ser exactos. Después de hacer su selección, salga del herramienta gradiente y hacer un negro a transparente gradiente desde la parte inferior de la selección hasta el área central, como la mía.
Después de hacer su degradado, cambie la opacidad de la capa a alrededor 10-20%. Ahora debe agregar el nombre/eslogan/descripción de su sitio web en la esquina izquierda, si no encaja, querrá mover la capa de degradado un poco hacia abajo. Me las arreglé para llegar a esto:
La fuente que he usado arriba se llama innumerables profesionales, pero estoy bastante seguro de que es una fuente comercial, por lo que es posible que deba usar algo diferente. Una buena alternativa a esta fuente sería Arialque es una fuente gratuita que debería venir con Windows 🙂 Los colores que he usado en mi logotipo de texto son #f1360b (naranja) y #969696 (gris).
Ahora, cree algunos enlaces/botones de navegación en la esquina derecha de su sección de encabezado. Usé la misma fuente que antes (Myriad Pro) con el color #969696.
También necesitarás separar un poco cada uno de los textos, puedes hacer esto fácilmente simplemente presionando la tecla de la barra espaciadora más de lo habitual una vez 😉 Después de hacer tus enlaces, puedes hacer las cosas más interesantes agregando un rollover efecto. Comience haciendo una selección (toda la altura de la barra, desde la parte superior del contenedor hasta donde termina el degradado) y la mitad del espacio entre los enlaces.
Ahora complete su selección con un color: usé el naranja brillante que hice antes para el logotipo de texto (#f1360b), después de completar su selección, es posible que desee aplicar esta superposición de degradado para obtener un efecto más interesante. Termine cambiando el texto ‘Inicio’ a blanco (#ffffff)
¡Vale, no está mal! Creo que hemos terminado con esta sección también.
5. Banner del sitio web
Este es un paso bastante fácil, todo lo que tiene que hacer es agregar un gráfico de banner debajo de nuestro encabezado. En primer lugar, necesitará una foto de archivo de algún tipo, ¿está dispuesto a pagar? Entonces recomiendo iStockFoto o Tiempo de sueños. ¿No puedes pagar? No hay problema, prueba stock.xchngo YotoFoto! Una vez que tenga la foto que desea usar en su banner, copie y pegue la imagen en su documento de plantilla. Cree una selección debajo de su encabezado y luego recorte su imagen a la selección (imagen > recortar)
Agregué el cojo ‘aprender. inspirar. crear.’ parte, aunque no se me ocurrió ese eslogan. El tamaño de mi banner cuando terminé con él era 601×140 píxeles, y también reduje la opacidad de la capa de fotos de archivo para 50% para darle un poco de efecto extra… más o menos. Haga clic aquí para ver el diseño completo hasta el momento.
Muy bien… bueno, casi hemos terminado con esta parte, ¿lo hiciste bien? ¡Es bastante fácil, solo toma una foto que te guste y conviértela en un pequeño banner! Preferiblemente algo relacionado con tu sitio web, por cierto.
7. Sección de navegación/barra lateral
Entonces, hagamos una barra lateral. Comience haciendo una selección en el lado izquierdo de su diseño, usando el Herramienta Marco Rectangular. Mi selección terminó siendo 200×809 píxeles de tamaño, dejando espacios de un píxel donde sea necesario (cerca del pie de página y cerca del encabezado, debe dejar espacios de un píxel)
Después de hacer su selección, rellénelo con un bonito color azul suave, el código hexadecimal para el color que usé fue #3e72a4. Después de llenar su contenedor de barra lateral con el color adecuado, ¡comience a agregar texto! Empecé agregando el texto ‘Menú del sitio web’ en innumerables profesionales cerca de la parte superior de la barra lateral, luego agregué un bonito adorno debajo.
Puede encontrar la forma anterior en el conjunto ‘Ornamentos’ que viene con Photoshop. También agregué en esta Sombra paralela a ambas capas.
¡Ahora agregue algunos enlaces de navegación! usé la fuente Arialcon un tamaño de 14 puntos/píxelutilizando también el color blanco (#ffffff)
Repita este paso para la sección ‘Nuestros socios’ en la barra lateral, corte una línea de un píxel después de la sección de nuestros socios, luego haga un ‘¿Qué hay de nuevo?’ sección. Mira lo que he hecho aquí:
Muy bien, no está mal hasta ahora, aunque no hay mucho más que podamos hacer por la barra lateral. Si está un poco perdido, puede hacer clic en la imagen de arriba para obtener una vista previa más grande.
8. Área de actualizaciones de contenido/noticias
Muy bien, la parte más importante ahora, el área de contenido/noticias. Comience escribiendo un título en su área grande en blanco, similar al mío:
Ahora un poco de texto aleatorio debajo, un buen lugar para obtener texto de relleno es el sitio web oficial de Lorem Ipsum.
Vea el diseño de nuestro sitio web hasta ahora.
Ahora puede agregar lo que quiera al área de contenido, puede agregar otro encabezado como ‘¿Quiénes somos, de qué se trata?’, lo que sea. Todo depende de para qué sitio web es realmente el diseño, qué tema buscas. ¿Agregar un anuncio de Google tal vez? 😉 Eso probablemente no se verá muy profesional en realidad.
(haga clic para ver más grande)
De todos modos, ¡espero que hayas disfrutado este tutorial de Photoshop! Muchas gracias por leer, y espero que hayas podido seguir este tutorial fácilmente.
¿Todavía no eres usuari@ de Fiverr ?
Tenemos un artículo sobre Fiverr donde te contamos cono funciona.