Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Complete Websites
Webdesign

Crear un diseño de sitio web terriblemente fresco y orientado horizontalmente

by
Length:MediumLanguages:

Spanish (Español) translation by Juan Pablo Diaz Cuartas (you can also view the original English article)

¿Estás de humor para algo diferente? Te guiaré en el proceso de creación de diseño de Stuff: blog y portafolio orientados horizontalmente. ¡Asegúrate de visitar la versión en línea de Stuff para ver el resultado final!

Paso 1 Crea un nuevo documento en Photoshop

Hazlo de 1300 x 800 px. Todo ese espacio no es realmente necesario, pero es bueno sentir el carácter panorámico del diseño mientras trabajamos.


Paso 2 Creando el fondo

Crea una nueva capa de relleno usando el color sólido # bfc6cd

Agregar ruido al fondo

Convierta una nueva capa en un "objeto inteligente" (haga clic con el botón derecho> Convertir a filtro inteligente) y aplique el filtro> Agregar ruido (puede ajustarlo más adelante si es necesario gracias a la función de filtros inteligentes). Bloquee la capa. Para mantener el proyecto limpio y organizado, puede eliminar la máscara de la capa y convertirla en la capa de fondo predeterminada (opcional).


Paso 3 Creando la gran flecha "Stuff"

Crea una nueva forma de flecha usando el preajuste "herramienta de forma". Luego, use la herramienta de selección directa para ajustar la forma para que se vea bien (mueva los puntos a su alrededor como mejor le parezca).

Seleccione la herramienta Transformación libre, mueva la flecha 310px desde la parte superior, luego tome y mueva la regla horizontal para crear una nueva guía. Ajústalo al centro de la flecha. A partir de ahora, representará el eje horizontal principal del sitio.

Agregue 4 estilos a la flecha (haciendo doble clic en la capa): sombra paralela, sombra interior, brillo externo y superposición de degradado (desde #cbcbcb a #ffffff).

Agregue una nueva capa de texto encima de la capa de flecha.

Agregue estilos al texto: sombra interior, superposición de degradado y trazo. Para un mejor efecto de profundidad, haga que el trazo sea visible solo en la mitad inferior del texto utilizando un trazo "degradado" con los ajustes alfa de la mitad superior configurados en "0" opacidad.

Las sombras externas e internas dan a la flecha un aspecto más 3D, pero para que sea aún mejor, creemos un efecto de luz brillante y simple. Cree un nuevo rectángulo y use la herramienta Convertir punto para modificar su forma y crear una ligera curvatura. Vamos a enmascarar esto sobre la capa de flecha para crear un efecto brillante.

Establezca este relleno de capa en 0% y agregue estilo de superposición de degradado con sutil blanco difuminado.

Para evitar que la capa de luz vaya más allá de la flecha: ctrl + clic en la capa de flecha para hacer una selección agregar máscara de capa a la capa de luz


Paso 4 Agregar luz de fondo

Para centrar la atención de los espectadores en el logotipo, haz una luz para que la flecha sobresalga del fondo. Puedes usar un método primitivo que es:

  • Crear nueva capa (ctrl + shift + N)
  • Seleccionar herramienta de degradado
  • Restablecer (D) e invertir (X) colores
  • Seleccione un degradado radial de blanco a completo
  • Mientras mantiene presionada la tecla shift, arrastre una línea para crear el degradado
  • Haz la opacidad de la capa de degradado 80% (8)

Paso 5 Crea la plantilla del titular del contenido

Cree un rectángulo blanco de 240 píxeles de ancho (la altura debe ser un poco más alta que el documento).

  • Duplicarlo (ctrl + d) y cambiar el color - representará una imagen en una publicación de blog,
  • Transfórmalo (ctrl + t) - configura el tamaño a 216 x 130px, y mueve su centro al eje de la página,
  • Agregue guías verticales para marcar las fronteras del contenido futuro

Paso 6 Agregar texto

Encima de la foto, crea un cuadro de texto nuevo y llénalo con el título del blog. Use una fuente condensada como League Gothic (gratis en League of Moveable Type). Debajo de la foto, crea otro cuadro de texto nuevo para el contenido general.


Paso 7 Diseñando el titular del contenido

Haga una selección para el contenido y cree una nueva capa de máscara para el gran rectángulo. Cambie la densidad de la máscara al 80%

Agregue estilos de brillo externo (negro) e interno (blanco) a la capa de la tira para una apariencia más 3D.


Paso 8 Agregar texto meta

Agrega texto de metainformación sobre la publicación. He usado 12px Georgia cursiva, altura de línea de 17px. Recuerde hacer uso de guías para mantener los textos en una línea


Paso 9 Creando el botón "Leer más"

Crea el texto "leer más" debajo de la publicación

Una capa debajo de ella, crea un nuevo rectángulo para que sea un botón de leer más.

Agregue estilos de degradado y trazo. Consejo: haga que el Stoke adentro, para tener las esquinas perfectamente afiladas del botón

Agregue un degradado sutil a la capa de texto también.


Paso 10 Creando una insignia de publicación

Para crear la insignia, use otro rectángulo, agregue texto (he usado Arial) y gire ambas capas juntas 45 grados. 

Añadir máscara a la capa del rectángulo para ocultar las esquinas innecesarias 

... y agrega 2 rectángulos pequeños como una ilusión de que la insignia está debajo de la imagen. 

Agregue una sombra sutil a la insignia. Sugerencia: para el modo de mezcla de sombras use Normal en lugar de Multiplicar por defecto, para que tenga efecto incluso si usa la insignia como el archivo PNG transparente


Paso 11 El menú 

Crea una nueva capa de texto. En lugar de color negro (que puede no ser natural en fondos claros), use gris oscuro para lograr un aspecto más natural. 

Sugerencia: Para crear líneas horizontales en lugar de utilizar la herramienta de línea, cree texto no suavizado utilizando el glifo subrayado "_" Siempre será nítido como un píxel y los espacios entre las líneas serán fáciles de controlar gracias al parámetro de altura de línea.  Use la misma altura de línea que en el texto del menú y cree tantas líneas como elementos de menú, menos uno. Haga las líneas más largas de lo necesario. 

Establezca este relleno de capa en aproximadamente 15% y agregue una sombra blanca. 

Agregue la máscara a la capa de líneas y pinte con un pincel suave para lograr bordes que desaparezcan. 


Paso 12 Crea el formulario de búsqueda 

Crea un rectángulo con esquinas redondeadas (3px) para una entrada de búsqueda. 

Agregue sombra interna a la caja y haga que el relleno de capa llegue al 70% 

Encima, agregue texto de búsqueda y cree una forma personalizada como flecha de envío. Agregue sombra interna a la caja y haga que el relleno de capa llegue al 70% 


Paso 13 Dónde obtener logotipos de redes sociales 

Como las imágenes vectoriales se recomiendan para este fin, sugiero que se busquen los logotipos necesarios en el servicio www.brandsoftheworld.com. En la mayoría de los casos, es la forma más rápida. Abra el logotipo en Illustrator, copie los contornos y pegue en Photoshop como formas. También puedes usar los íconos Buddy de Orman Clark.

Establezca el relleno de la capa en 0% y agregue estilos (sombra paralela, sombra interior y superposición de color) para lograr el aspecto 3D. Para obtener el logotipo en estado activo (iluminado), cambie el color y la intensidad del estilo Superposición de colores.

Copie este estilo y copie a otros logotipos (haga clic con el botón derecho en la capa / Copie el Estilo de capa).


Paso 14 Creando el cuadro de comentario

Para agregar un cuadro de comentarios, cree otro rectángulo de esquinas redondeadas de aproximadamente 520 píxeles de ancho y agregue el estilo Drop Shadow.

Seleccione la parte más grande y agregue máscara a esta capa.

Duplicar la capa e invertir su máscara. Haga que el relleno de la nueva capa sea 25%.

En la configuración de fusión, marque la opción "Ocultar máscara de máscara de efectos" para evitar la incoherencia en la línea sombreada de ambas capas.

Crea una línea vertical negra en el borde entre estos cuadros, haz que sea relleno también un 25% y agrega una sombra blanca de 1 píxel dirigida hacia la derecha.

Agregue un avatar de muestra y textos usando colores previamente utilizados.


Paso 15 Crear flechas para un control deslizante de portafolio

Crea formas de círculo y pega estilos de capa desde la flecha del logotipo. Corta la forma de flecha del círculo usando la forma personalizada y el modo de corte.

Debajo de esta capa de botón, cree otro círculo, del mismo tamaño o más pequeño, y pegue el estilo degradado del logotipo. Consejo: Si una capa tiene muchos estilos y desea copiar solo una, puede arrastrar el estilo mientras se presiona alt y soltarlo en otra capa.

Agregue luz (de la misma manera que arriba a la flecha del logotipo).

Si quiere hacer una pequeña mejora, que nadie notará, cree luces separadas para el botón y el agujero en forma de flecha, y mueva la segunda un poco hacia abajo. Y si ya tiene dos luces separadas, puede fácilmente (sin enmascaramiento adicional) hacer que el botón se vuelva más fuerte para ser mejor visible en el botón muy brillante.

Seleccione todas las capas de botones y cree un objeto inteligente para ellas.

Duplicar capa, mover y voltear horizontalmente. Ahora, si edita una flecha (haga doble clic en la capa inteligente), ambas cambiarán.


¡Eso es!

Todos los demás elementos se pueden hacer copiando, pegando y redimensionando los elementos existentes que hemos diseñado.

Sugerencia: la fuente League Gothic y otras fuentes gratuitas de software libre con licencias de diseñador web se pueden encontrar en www.fontsquirrel.com


¿Te gustaría crear la versión HTML o WordPress de las cosas?

OK, entonces tienes PSD más o menos listo, y me gustaría ir más allá. Como Stuff necesita un enfoque diferente del contenido, debido a su carácter horizontal, es realmente complicado codificarlo correctamente. No conozco muchos sitios web horizontales que lograron evitar errores comunes (por ejemplo, no funciona el desplazamiento del mouse). Deje un comentario si desea conocer las mejores formas de codificar este diseño y veremos si no podemos llevar el tutorial al sitio.

De todos modos, si desea ahorrar algo de tiempo y tener todo en el plato plateado, puede descargar una plantilla HTML o una versión WordPress de Stuff por unos pocos dólares. ¡Gracias!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.