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

Diseñar un blog estilo profesional en Photoshop

by
Length:LongLanguages:
This post is part of a series called Build a Responsive Layout With Skeleton.
Building a Responsive Layout With Skeleton: Starting Out

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)

Hoy vamos a analizar el tema de una revista de blog profesional en Photoshop. Este es un ejercicio de estética y aprenderás un montón de técnicas que mejorarán tus habilidades en Photoshop. ¡Toma un café, siéntate y comienza!


Recursos

Antes de comenzar, permítame presentarle algunos recursos que lo ayudarán.

La cuadrícula

El uso de una cuadrícula hace que sea mucho más fácil alinear los elementos y decidir sobre sus proporciones. En este diseño, usaremos una Cuadrícula línea de base creada por los geniales jugadores de Teehan + Lax. Es una cuadrícula de línea de 6px junto con el sistema de 960 grillas.

Tipografía

Tómalo en serio cuando elijas tipos de letra. Al seleccionar las fuentes correctas, logrará un diseño exitoso antes de pasar al siguiente paso y codificar la plantilla. Aquí hay un par de artículos para ayudarte a entender cuáles son las fuentes correctas para tu proyecto.

Anti-aliasing

Aquí hay un artículo realmente excelente, ¡tienes que leer este! No diré una sola palabra, excepto que para copia del cuerpo (tamaños de puntos pequeños) usaremos Sharp, y para encabezados (tamaños de puntos más grandes) usaremos Crisp.

Patron

Y una descarga rápida para tu colección .pat.


Paso 1: Configuración del documento

Abra Adobe Photoshop (yo uso CS5.1, pero no es necesario seguirlo). Como se mencionó anteriormente, deberá obtener una copia de la Cuadrícula base de TeehanLax. Extraiga el contenido de teehanlax_baseline_grid.zip, abra la carpeta Cuadrícula de base de Teehanlax y arrastre el grid2.psd a Photoshop.

Lo primero que haremos es seleccionar todas las capas existentes en el documento y eliminarlas. Todo, es decir, excepto la carpeta "Marcas". Una vez hecho esto, bloquee la carpeta Marcas en el panel de capas.

Vamos a construir un diseño bastante largo, así que ve y cambia la altura del documento. Para hacer eso, aplique la siguiente configuración yendo a Imagen > Tamaño del lienzo, cambiando la altura y configurando el Ancla a Centro superior.

Haga clic en Vista > Extras (para ver nuestras Guías), Reglas (para ver las Reglas).


Paso 2: Creando el fondo

Cree una nueva capa, llámela "BG", seleccione Herramienta Bote de pintura (G), complete el fondo con este valor de color (blanco): #FFFFFF. Luego vaya a Filtro> Ruido> Agregar ruido y aplique las siguientes configuraciones para darle al fondo un efecto de ruido suave.

  • Cantidad: 3.
  • Distribución: Uniforme.
  • Monocromático: cheque.

Paso 3: Creando la barra de navegación

Para crear la barra de navegación, seleccione la herramienta Rectángulo (U), cree un rectángulo de 1260x49px, pero asegúrese de que ya haya configurado el cuadro del color en este valor de color: #000000.

Consejo: "Si entra en las opciones de creación de formas, hay una casilla de verificación para" ajustar a píxeles ". Ahora, cuando cree una forma, siempre estará nítida, ya que los puntos nunca aterrizarán entre los" píxeles ". - Jeff

Desde el panel de capas, seleccione nuestra capa de la barra de navegación y arrástrela a una nueva carpeta (alternativamente, puede hacerlo manteniendo presionada la tecla CTRL + G), luego nombre a la carpeta Encabezado, recuerde que estamos trabajando en el área del encabezado .

Trabajemos en el color de la capa utilizando Superposición de degradado. Seleccione la forma de capa que hemos llamado "barra de navegación" y vaya a Capa > Estilo de capa> Superposición de degradado. Aplique los siguientes ajustes.

¡Gran trabajo hasta ahora! Continuemos aplicando el resto de la configuración de estilo de capa.

Superposición de Gradiente.

  • Modo de fusion: Normal.
  • Opacidad: 100%.
  • Gradiente inverso: comprobar.
  • Styler: Lineal.
  • Ángulo: 90 °.
  • Escala: 150%.

Sombra interior.

  • Modo de fusion: Normal.
  • Opacidad: 10%.
  • Ángulo: -90.
  • Usar luz global: Desmarcar.
  • Distancia: 5px.
  • Retraer: 0%
  • Tamaño: 8px.

Sombra paralela.

  • Modo de fusión: Normal.
  • Opacidad: 42%.
  • Ángulo: 90.
  • Usar luz global: Desmarcar.
  • Distancia: 2px.
  • Propagación: 0%.
  • Tamaño: 3px.

Extracto: los objetos inteligentes se introdujeron en Photoshop con el lanzamiento de CS2. Se agregaron filtros inteligentes en CS3. Por lo tanto, necesitará una versión actual de Photoshop para aprovechar estos tipos de técnicas no destructivas. Los objetos inteligentes y los filtros inteligentes permiten un flujo de trabajo flexible. Los objetos inteligentes apuntan a un objeto vectorial original, una imagen rasterizada o un archivo RAW.

El uso de objetos inteligentes significa que está trabajando con imágenes de referencia. Así que cuando se trabaja con objetos inteligentes, los cambios que se les aplican no afectan la imagen original. Incluso puedes guardar estos efectos e intercambiar imágenes. Los filtros inteligentes tampoco son efectos permanentes, pero pueden editarse o eliminarse. Los filtros normales son irreversibles, al menos después de guardar el documento. Psdtuts+


Para aplicar los filtros inteligentes sigue la imagen de abajo.

Añade un efecto de ruido a nuestra capa de filtros inteligentes.

  • Cantidad: 1.
  • Distribución: Uniforme.
  • Monocromático: Marcado.

Así es como se ve cuando se convierte una capa en filtros inteligentes.

He recibido un montón de preguntas sobre cómo hacer el efecto de costura en Photoshop. No es tan difícil; simplemente seleccione la Herramienta de tipo horizontal (T), luego mantenga presionada la tecla Negativa (-) hasta que obtenga el resultado a continuación.

Asigne a la capa el valor de este color: # 1C1C1C, luego aplique la opción Sombra paralela.

  • Modo de fusión: Normal.
  • Opacidad: 10%.
  • Ángulo: -90.
  • Usar luz global: Desmarcar.
  • Distancia: 1px.
  • Retraer: 0%
  • Tamaño: 0px.

Como se ve en la imagen de abajo, tenemos un efecto de puntada bastante convincente.

Nuestra navegación es un poco más oscura. Pensé que tal vez debería aplicar algo de luz, ¿qué te parece? Haga una copia de la barra de navegación, luego borre el estilo de capa y establezca la capa de relleno en 0%.

Aplique la configuración de estilo de capa como se ve en la imagen de abajo.

Superposicion Degradado

  • Modo de fusión: Normal.
  • Opacidad: 8%.
  • Degradado Invertir: Marcado.
  • Estilo: Lineal.
  • Ángulo: 90.
  • Escala: 100%.

Sombra Interior.

  • Color: #FFFFFF.
  • Modo de fusión: Normal.
  • Opacidad: 10%.
  • Ángulo: 90.
  • Usar luz global: Desmarcar.
  • Distancia: 1px.
  • Retraer: 100.
  • Tamaño: 0px.

Aquí hay una referencia antes y después.

Seleccione la herramienta de tipo horizontal (T), escriba el texto de navegación y luego aplique la siguiente configuración de caracteres como se ve en la imagen de abajo.

  • Fuente: Helvetica Neue LT Std.
  • Grosor: 55 Roman.
  • Tamaño: 12px.
  • Kerning: Medidas.
  • Color: #EBEBEB.
  • Suavizado: Nítido

Paso 4: Creando el menú desplegable

Sí, es hora de crear el menú desplegable. Tome la Herramienta Rectángulo Redondeado (U), cree un Redondeado de 147x120px y recuerde mantener la calidad de los bordes lo más posible: ¡perfección de píxeles!

Haga una selección con la herramienta Rectangular Marquee (M), invierta la selección. Ahora agregue una nueva máscara a nuestra capa siguiendo la configuración Capa> Máscara de capa> Revelar selección. Ahora hemos recortado efectivamente la parte superior.

Inverso.

Máscara de capa.

Así es como aparece la máscara de capa.

Ahora, demos a nuestra pequeña forma redondeada un efecto de superposición de degradado.

Superposicion de degradado.

  • Modo de fusión: Normal.
  • Opacidad: 100%.
  • Degradado Invertir: Desmarcar.
  • Estilo: Lineal.
  • Ángulo: 90.
  • Escala: 100%.

Sombra paralela.

  • Modo de fusión: Normal.
  • Opacidad: 76%.
  • Ángulo: -90.
  • Usar luz global: Desmarcar.
  • Distancia: 2px.
  • Extension: 0%.
  • Tamaño: 3px.

Vaya al siguiente paso y aplique el efecto de ruido.    

  • Cantidad: 2.
  • Distribución: Uniforme.
  • Monocromático: Marcado.

Seleccione la herramienta Rectangular Marquee (M), cree una selección de 147x49px, rellénela con este valor de color: #FFFFFF.

Llámelo "Transparente", establezca la capa de relleno en 0%.

Una vez completado, aplique el efecto de degradado transparente como se ve en la imagen a continuación.

Y así es como aparece después de haber aplicado el efecto de degradado transparente.

Ahora lo que vamos a hacer es duplicar una copia de la capa de rectángulo redondeado y establecer la capa de relleno en 0%. Luego aplicaremos el efecto de degradado transparente.

Superposicion de degradado.

  • Modo de fusión: Normal.
  • Opacidad: 8%.
  • Degradado Invertir: Desmarcado.
  • Estilo: Lineal.
  • Ángulo: 90.
  • Escala: 100%.

Sombra interior.

  • Color: #FFFFFF.
  • Modo de fusión: Normal.
  • Opacidad: 10%.
  • Ángulo: 90.
  • Usar luz global: Desmarcar.
  • Distancia: 1px.
  • Retraer: 100.
  • Tamaño: 0px.

Use la herramienta Rectangular Marquee (M) para crear las líneas de separación horizontales con # b4b4b4 como se ve en la imagen de abajo.

Tome la Herramienta de Texto horizontal (T), comience a escribir los elementos del submenú, usando la siguiente configuración de caracteres.

  • Fuente: Helvetica Neue LT Std.
  • Grosor: 55 Roman.
  • Tamaño: 12px.
  • Kerning: Medidas.
  • Interlineado: 18px.
  • Color: #EBEBEB.
  • Suavizado: Nítido.

Recuerde que el texto debe estar sentado en la cuadrícula de línea de base.


Paso 5: Crea el Logo

Coge la herramienta de texto horizontal (T), escribe el nombre de tu sitio web con la siguiente configuración de caracteres:

  • Fuente: Arial.
  • Grosor: Black.
  • Tamaño: 48px.
  • Kerning: Medidas.
  • Color: #202020-D55355.
  • Suavizado: Nítido.

Paso 6: Crear el banner de encabezado

Use la herramienta Rectangular Marquee (M) para crear una selección de 468x60px, rellénela con este valor de color: # 474747, luego aplique un efecto Trazo.

Trazo.

  • Tamaño: 3px.
  • Posicion: interior.
  • Modo de fusión: Normal.
  • Opacidad: 100%.
  • Tipo de relleno: Color.
  • Color: #FFFFFF.

Y así es como debería verse una vez que hayas completado todos esos pasos.


Paso 6: Crear la presentación de diapositivas

Muy bien, vamos a empezar con la presentación de diapositivas. Coge la herramienta Rectángulo (U), crea un rectángulo de 700x254px, luego aplica la siguiente configuración.

Sombra paralela.

  • Color: #000000.
  • Modo de fusión: Normal.
  • Opacidad: 50%.
  • Ángulo: 90.
  • Usar luz global: Desmarcar.
  • Distancia: 0px.
  • Extension: 0%.
  • Tamaño: 5px.

Arrastre una imagen al documento y cree una máscara de recorte presionando ALT + CTRL + G, puede hacerlo siguiendo la configuración Capa> Crear máscara de recorte.

Máscara de recorte.

Una vez más, toma la Herramienta Rectángulo (U), crea un rectángulo de 128x211px y aplica la máscara de recorte.

Ahora es el momento de hacer que nuestra diapositiva salte un poco agregando algunas sombras detrás del control deslizante. Seleccione la herramienta Rectángulo Marquesina (M), haga una selección de la forma de nuestras capas como se ve en la imagen de abajo.

Seleccione la herramienta Degradado (G), asegúrese de que sea una sombra de degradado transparente.

Aquí hay un consejo rápido para hacer la sombra correcta; una vez que seleccione la herramienta de degradado, haga clic y arrastre y asegúrese de que su dedo esté en la tecla MAYÚS.

Repita el mismo proceso con la capa correcta.

Hmm ... creo que nuestra presentación de diapositivas debe ser cosida, ¿qué te parece? Coge la herramienta Rectángulo (U), haz un rectángulo horizontal de 2px de altura y luego aplica la siguiente configuración de motivo.

Superposicion de motivo.

  • Modo de fusión: Normal.
  • Opacidad: 31%.
  • Escala: 100%.
  • Enlazar con capa: Marcado.

Haga una copia de nuestra puntada y arrástrela un poco hacia abajo como se ve en la imagen de abajo.

Así es como aparece cuando has aplicado el efecto de puntada al resto de las imágenes.

Hay un paso más que completar para nuestra presentación de diapositivas, los botones de navegación. Coge la herramienta Rectángulo redondeado (U), crea una forma redondeada de 119x19px, luego aplica la configuración de estilo de capa a la misma.

Trazo.

  • Tamaño: 1px.
  • Posicion: Exterior.
  • Modo de fusión: Normal.
  • Opacidad: 22%.
  • Tipo de relleno: Motivo.
  • Escala: 100%.
  • Enlazar con capa: Marcado.

Sombra paralela.

  • Color: #000000.
  • Modo de fusión: Normal.
  • Opacidad: 20%.
  • Ángulo: 90.
  • Usar luz global: Desmarcar.
  • Distancia: 0px.
  • Extension: 0%.
  • Tamaño: 3px.

Una vez más, seleccione la herramienta Rectángulo redondeado (U), cree una forma redondeada, asigne a la capa este valor de color: #DFDFDF, luego aplique la configuración de estilo de capa a continuación.

Editor de Degradado

Superposicion de degradado.

  • Modo de fusión: Normal.
  • Opacidad: 100%.
  • Degradado invertir: Desmarcar.
  • Styler: Linear.
  • Ángulo: 90.
  • Escala: 100%.

Sombra interna.

  • Color: #000000.
  • Modo de fusión: Normal.
  • Opacidad: 12%.
  • Ángulo: 120.
  • Usar luz global: Desmarcar.
  • Distancia: 2px.
  • Retraer: 0%
  • Tamaño: 2px.

Usa la misma herramienta para crear el resto de los botones.

¡No hemos terminado todavía! Necesitamos hacer una cosa más, vamos a crear un pequeño icono en nuestra presentación de diapositivas. Seleccione la Herramienta de forma personalizada (U), luego seleccione la forma como se muestra en la imagen de abajo.

Nota del editor: ¡No tengo idea de para qué es este elemento UI! Lo dejaremos a criterio del diseñador :)

Dale a la forma de la capa este valor de color: #FFFFFF

Coge la herramienta Lazo poligonal (L), divide la mitad de la forma haciendo una selección como se ve en la imagen de abajo.

¿Recuerdas cómo aplicamos máscaras de recorte antes? Bien entonces, dale a nuestra forma una máscara de capa.

Y ahí estamos, hemos terminado de crear nuestra presentación de diapositivas.


Paso 7: Crea las Categorías

Empecemos primero con el botón Love. Seleccione Rectangle Marquee Tool (M), cree un rectángulo vertical de 60px, use la herramienta de degradado para hacer una sombra transparente.

Cambia la opacidad de nuestra capa al 10%.

Seleccione la herramienta Rectángulo (U), cree un rectángulo vertical de 1x173px, luego aplique las siguientes configuraciones. Recuerda que siempre fijamos el relleno de la capa a 0%.

Superposicion de motivo.

  • Modo de fusión: Normal.
  • Opacidad: 25%.
  • Escala: 100%.
  • Enlazar con capa: Marcado.

Haga una copia de la capa vertical, arrástrela un poco hacia la derecha como se ve en la imagen de abajo.

Vamos a añadir texto a nuestro botón love. Seleccione la herramienta de tipo horizontal (T), escriba un número y luego aplique la siguiente configuración de caracteres.

  • Fuente: Arial.
  • Grosor: Bold.
  • Tamaño: 28px.
  • Kerning: Medidas.
  • Color: #E0E0E0.
  • Suavizado: Nítido.

Loves.

  • Fuente: Georgia.
  • Grosor: Bold Italic.
  • Tamaño: 21px.
  • Kerning: Medidas.
  • Color: #E0E0E0.
  • Suavizado: Nítido.

Terminaremos el botón de amor creando una forma de corazón. Seleccione la Herramienta de forma personalizada (U), elija la forma del corazón, dé a la forma de la capa este valor de color: # D25455.

Una vez completado el botón de amor, vamos al siguiente paso, colocando el texto y las imágenes en miniatura. Seleccione la herramienta de tipo horizontal (T), escriba el nombre de nuestra categoría, que en este caso es "Negocios> Gamificación", luego aplique la siguiente configuración de caracteres.

Category.

  • Fuente: Georgia.
  • Grosor: 55 Roman.
  • Tamaño: 13px.
  • Kerning: Medidas.
  • Color: #5E5E5E.
  • Suavizado: Nítido.

Title.

  • Fuente: Helvetica Neue LT Std.
  • Grosor: 55 Roman.
  • Tamaño: 18px.
  • Kerning: Medidas.
  • Interlineado: 18px.
  • Color: #5E5E5E.
  • Suavizado: Nítido.

Posted by, Date, Comments.

  • Fuente: Georgia.
  • Grosor: Regular.
  • Tamaño: 13px.
  • Kerning: Medidas.
  • Color: #5E5E5E-#AAAAAA.
  • Suavizado: Nítido.

Description.

  • Fuente: Arial.
  • Grosor: Regular.
  • Tamaño: 13px.
  • Kerning: Medidas.
  • Interlineado: 18px.
  • Color: #5E5E5E.
  • Suavizado: Nítido.

Tags.

  • Fuente: Georgia.
  • Grosor: Regular.
  • Tamaño: 11px.
  • Kerning: Medidas.
  • Color: #5E5E5E.
  • Suavizado: Nítido.
  • Fuente: Georgia.
  • Grosor: Regular.
  • Tamaño: 13px.
  • Kerning: Medidas.
  • Color: #AAAAAA.
  • Suavizado: Nítido.

Es hora de crear la imagen en miniatura. Coge la herramienta Rectángulo (U), crea un rectángulo de 160x157px, aplica la siguiente configuración de estilo de capa.

Trazo.

  • Tamaño: 3px.
  • Posicion: interior.
  • Modo de fusión: Normal.
  • Opacidad: 100%.
  • Tipo de relleno: Color.
  • Color: #FFFFFF.

Sombra paralela.

  • Color: #000000.
  • Modo de fusión: Normal.
  • Opacidad: 20%.
  • Ángulo: 90.
  • Usar luz global: Desmarcar.
  • Distancia: 0px.
  • Extension: 0%.
  • Tamaño: 3px.

Agregue una nueva imagen a nuestra forma de capa y fusione la imagen con la forma de capa aplicando la técnica de máscara; Capa> Crear máscara de recorte.

Estamos cerca de terminar la primera categoría. Agarre la herramienta Rectángulo (U), úsela para crear un rectángulo de 1px de altura como se ve en la imagen a continuación, luego aplíquele la siguiente configuración.

Superposicion de motivo.

  • Modo de fusión: Normal.
  • Opacidad: 10%.
  • Escala: 100%.
  • Enlazar con capa: Marcado.

Así es como debería verse una vez que haya creado el resto de las categorías. Recuerda que entre cada categoría hay un espacio en blanco de 29px de altura.


Paso 8: Crea los mensajes antiguos

Para crear las publicaciones antiguas, primero tome la Herramienta Rectángulo (U) y cree un rectángulo de 280x11 px.

Cree un espacio vacío haciendo una selección de 100px, recuerde cortar la parte de la capa, asegurándose de que haya usado la técnica de máscara.

Este es el espacio vacío donde vamos a agregar nuestro texto de "publicaciones anteriores".

Aplicar la configuración de estilo de capa.

Superposicion de motivo.

  • Modo de fusión: Normal.
  • Opacidad: 10%.
  • Escala: 100%.
  • Enlazar con capa: Marcado.

Escriba "OLD POSTS", luego aplique la siguiente configuración de caracteres.

  • Fuente: Helvetica Neue (TT).
  • Grosor: Bold.
  • Tamaño: 3px.
  • Kerning: Medidas.
  • Color: #999999.
  • Suavizado: Nítido.

Cree una pequeña línea vertical usando la herramienta Rectángulo (U) con 1px, luego aplíquele el efecto de costura. Recuerde configurar la opacidad de relleno a 0%.

Superposicion de motivo.

  • Modo de fusión: Normal.
  • Opacidad: 10%.
  • Escala: 100%.
  • Enlazar con capa: Marcado.

Coge la herramienta Rectángulo (U), crea un rectángulo de 60x61 px, aplica la misma configuración que hicimos con la imagen en miniatura de la categoría.

Trazo.

  • Tamaño: 3px.
  • Posicion: Interior.
  • Modo de fusión: Normal.
  • Opacidad: 100%.
  • Tipo de relleno: Color.
  • Color: #FFFFFF.

Sombra paralela.

  • Color: #000000.
  • Modo de fusión: Normal.
  • Opacidad: 20%.
  • Ángulo: 90.
  • Usar luz global: Desmarcar.
  • Distancia: 0px.
  • Dispersion: 0%.
  • Tamaño: 3px.

Añade una imagen y obtendrás este resultado.

Seleccione la herramienta de texto horizontal (T), escriba el nombre de nuestra categoría y la fecha, luego aplique la siguiente configuración de caracteres.

  • Fuente: Georgia.
  • Grosor: Regular.
  • Tamaño: 12px.
  • Kerning: Medidas.
  • Color: #5E5E5E-AAAAAA.
  • Suavizado: Nítido.

Title.

  • Fuente: Georgia.
  • Grosor: Regular.
  • Tamaño: 18px.
  • Kerning: Medidas.
  • Interlineado: 18px.
  • Color: #5E5E5E.
  • Suavizado: Nítido.

Este aspecto se ve cuando creas el resto de las categorías, entre cada categoría hay 18px de espacio en blanco.


Paso 9: Crea la siguiente página

Para crear la página siguiente, tome la herramienta Rectángulo (U), cree un rectángulo de 35x37 píxeles, dé a la forma de la capa este valor de color: # 333333.

Una vez más, toma la herramienta Rectángulo (U), crea el resto de las formas, dale a la capa este valor de color: #CCCCCC.

Seleccione la herramienta de tipo horizontal (T), escriba los números de las páginas, luego aplique la siguiente configuración de caracteres como se ve en la imagen de abajo.

  • Fuente: Helvetica Neue LT Std.
  • Grosor: 55 Roman.
  • Tamaño: 13px.
  • Kerning: Medidas.
  • Color: #5E5E5E.
  • Suavizado: Nítido.

Coge la herramienta Lápiz (B) y (¡con cuidado!) Crea el pequeño icono de píxel que se muestra aquí.


Paso 10: Crea la sección "Social Media"

Coge la herramienta Rectángulo (U), crea un rectángulo de 300x100 px como hicimos con la sección de publicaciones antiguas, crea un espacio vacío de 100 px y luego aplica la misma configuración. Tendremos este resultado a continuación.

Escriba el texto de suscripción, luego aplíquele la siguiente configuración de caracteres.

  • Fuente: Helvetica Neue (TT).
  • Grosor: Bold.
  • Tamaño: 14px.
  • Kerning: Medidas.
  • Color: #888888.
  • Suavizado: Nítido.

Es hora de añadir iconos de redes sociales. Usaremos los iconos Suscribir y Twitter, así que tome algunos iconos adecuados (pruebe estos desde Design Kindle) y arrastre un par a su documento. A continuación, aplique la siguiente configuración de caracteres.

Number of subscribers.

  • Fuente: Georgia.
  • Grosor: Regular.
  • Tamaño: 20px.
  • Kerning: Medidas.
  • Color: #444444.
  • Suavizado: Nítido.

Subscribers.

  • Fuente: Georgia.
  • Grosor: Regular.
  • Tamaño: 13px.
  • Kerning: Medidas.
  • Color: #999999.
  • Suavizado: Nítido.

Aplique la misma configuración a la sección de Twitter que ve en la imagen de abajo.

Y así es como aparece una vez que terminas.


Paso 10: Crea la sección "Cuadro de búsqueda"

Para crear la sección del cuadro de búsqueda, tome la Herramienta Rectángulo Redondeado (U), cree una forma redondeada de 220x31, luego aplique la siguiente configuración de estilo de capa.

Editor degradado.

Superposicion de degradado.

  • Modo de fusión: Normal.
  • Opacidad: 100%.
  • Degradado Invertir: Marcado.
  • Estilo: Lineal.
  • Ángulo: 90.
  • Escala: 100%.

Trazo.

  • Tamaño: 1px.
  • Posicion: Interior.
  • Modo de fusión: Normal.
  • Opacidad: 22%.
  • Tipo de relleno: Motivo.
  • Escala: 100%.
  • Enlazar con capa: Marcado.

Debería verse algo como esto:

Una vez más, tome la Herramienta Rectángulo Redondeado (U), cree la forma del botón, asigne a la forma de la capa este valor de color: #2D2D2D, convierta la forma en un Filtro inteligente yendo a Filtro> Convertir para filtros inteligentes, luego aplique la siguiente configuración .

Suporposicion de degradado.

  • Modo de fusión: Luz Suave.
  • Opacidad: 60%.
  • Degradado Invertir: Marcado.
  • Estilo: Lineal.
  • Ángulo: 90.
  • Escala: 100%.

Añadir ruido.

  • Cantidad: 2.
  • Distribución: Uniforme.    
  • Monocromático: Marcado.

Seleccione la herramienta de tipo horizontal (T), escriba "Buscar aquí" en el formulario y "Buscar" en el formulario de botón, luego aplique la siguiente configuración de caracteres.

  • Fuente: Helvetica Neue (TT).
  • Grosor: Bold.
  • Tamaño: 12px.
  • Kerning: Medidas.
  • Color: #D8D8D8.
  • Suavizado: Nitido.

Paso 11: Crea la sección “Patrocinadores”

Descargue o cree un banner publicitario de 125x125px como se ve en la imagen de abajo.


Paso 11: Crea la sección “Más popular”

Agarre la herramienta Rectángulo redondeado (U), cree una forma redondeada de 368x301px, establezca la capa de relleno en 0% y, a continuación, aplique las siguientes configuraciones de estilo de capa.

Sombra paralela.

  • Color: #000000.
  • Modo de fusión: Normal.
  • Opacidad: 28%.
  • Ángulo: 90.
  • Usar luz global: Desmarcar.
  • Distancia: 0px.
  • Extension: 0%.
  • Tamaño: 3px.

Así es como aparece ahora. Asegúrese de que ya haya establecido la capa de relleno en 0% para que podamos trabajar con un formulario vacío.

Nuevamente, tome la Herramienta Rectángulo Redondeado (U) y trabajemos en la parte anterior que es "TAB". Cree una forma redondeada de 230x36 px, asigne a la forma de la capa el valor de este color: # F4F3F3, luego aplique las siguientes configuraciones.

Superposicion de motivo.

  • Modo de fusión: Superponer.
  • Opacidad: 50%.
  • Degradado invertir: Marcado.
  • Estilo: Lineal.
  • Ángulo: 90.
  • Escala: 130%.

Añadir ruido.

  • Cantidad: 1.
  • Distribución: Uniforme.
  • Monocromático: cheque.

Coge la herramienta Rectángulo (U), haz tres líneas verticales, dale a la forma de la capa este valor de color: #DEDEDE como ves en la imagen de abajo.

Coge la herramienta de tipo horizontal (T), escribe los nombres de la sección más popular con la siguiente configuración de caracteres.

  • Fuente: Helvetica.
  • Grosor: Bold.
  • Tamaño: 12px.
  • Kerning: Medidas.
  • Color: #555555.
  • Suavizado: Nitido.

En este paso, vamos a crear una pequeña imagen en miniatura, tomar la Herramienta Rectángulo (U), crear un rectángulo de 40x43 píxeles y luego aplicar la siguiente configuración de estilo de capa.

Trazo.

  • Tamaño: 2px.
  • Posicion: Interior.
  • Modo de fusión: Normal.
  • Opacidad: 100%.
  • Tipo de relleno: Color.
  • Color: #FFFFFF.

Sombra paralela.

  • Color: #000000.
  • Modo de fusión: Normal.
  • Opacidad: 47%.
  • Ángulo: 90.
  • Usar luz global: Desmarcar.
  • Distancia: 0px.
  • Extension: 0%.
  • Tamaño: 2px.

Añade una imagen y obtendrás este resultado.

Coge la herramienta de texto horizontal (T), escribe el nombre de nuestras publicaciones y luego aplica la siguiente configuración de caracteres.

  • Fuente: Helvetica Neue LT Std.
  • Grosor: 55 Roman.
  • Tamaño: 14px.
  • Kerning: Medidas.
  • Interlineado: 18px.
  • Color: #444444.
  • Suavizado: Nitido.

Date.

  • Fuente: Georgia.
  • Grosor: Italic.
  • Tamaño: 12px.
  • Kerning: Medidas.
  • Color: #C0C0C0.
  • Suavizado: Nitido.

Crea una línea de costura de 368x1px.

Así es como se ve una vez que has completado todos los pasos anteriores. Haz seis copias de eso.


Paso 12: Crea la sección "Suscribir noticias"

Haga una copia de la carpeta del cuadro de búsqueda y cambie el nombre de "Buscar aquí" Para "Ingresar su correo electrónico" y "Buscar" para "Suscribirse". ¡Sencillo!


Paso 13: Crea la sección “Categorías y Páginas”

Para crear la sección de categorías y páginas, tome la Herramienta de texto horizontal (T), escriba el nombre de sus categorías, luego aplique la siguiente configuración de caracteres como se ve en la imagen de abajo.

  • Fuente: Helvetica Neue (TT).
  • Grosor: Bold.
  • Tamaño: 12px.
  • Kerning: Medidas.
  • Interlineado: 18px.
  • Color: #5E5E5E.
  • Suavizado: Nitido.

Right.

  • Fuente: Helvetica Neue (TT).
  • Grosor: Bold
  • Tamaño: 12px.
  • Kerning: Medidas.
  • Interlineado: 18px.
  • Color: #5E5E5E.
  • Suavizado: Nitido.

Este es el resultado final de nuestra sección de categorías y páginas.


Paso 14: Crea la sección "Video de la semana"

Coge la herramienta Rectángulo (U), crea un rectángulo de 300x181px, agrega una imagen y luego aplica la siguiente configuración de estilo de capa.

Trazo.

  • Tamaño: 3px.
  • Posicion: Interior.
  • Modo de fusión: Normal.
  • Opacidad: 100%.
  • Tipo de relleno: Color.
  • Color: #FFFFFF.

Sombra paralela.

  • Color: #000000.
  • Modo de fusión: Normal.
  • Opacidad: 12%.
  • Ángulo: 90.
  • Usar luz global: Desmarcar.
  • Distancia: 0px.
  • Extension: 0%.
  • Tamaño: 3px.

Este es el resultado final de nuestro área de "video de la semana".


Paso 15: Creando el área del pie de página

Coge la herramienta Rectángulo (U), crea un rectángulo de 1260x721, dale a la forma de la capa este valor de color: # 2D2D2D, luego aplica la siguiente configuración.

Añadir ruido.

  • Cantidad: 1.
  • Distribución: Uniforme.
  • Monocromático: Marcado.

Una vez más, tome la Herramienta Rectángulo (U), cree la parte anterior de la altura de 19 px, otorgue a la forma de la capa este valor de color: # 2D2D2D.

¿Recuerdas la técnica de la puntada? bien entonces, aplicalo a la parte anterior.

Coge la herramienta de texto horizontal (T), escribe el nombre del logotipo de tu sitio web con la siguiente configuración de caracteres.

  • Fuente: Arial.
  • Grosor: Black.
  • Tamaño: 13px.
  • Kerning: Medidas.
  • Color: #202020-D55355.
  • Suavizado: Nitido.

Cree una forma de rectángulo de 60x10 px, establezca la capa de relleno en 0% y luego aplique la siguiente configuración de patrón.

Superposicion de degradado.

  • Modo de fusión: Normal.
  • Opacidad: 34%.
  • Escala: 100%.
  • Enlazar con capa: Marcado.

Coge la herramienta de texto horizontal (T), escribe la descripción de tu sitio web con la siguiente configuración de caracteres.

  • Fuente: Arial.
  • Grosor: Regular.
  • Tamaño: 13px.
  • Kerning: Medidas.
  • Interlineado: 18px.
  • Color: #E0E0E0.
  • Suavizado: Nitido.

Twitter.

  • Fuente: Helvetica Neue (TT).
  • Grosor: Bold.
  • Tamaño: 14px.
  • Kerning: Medidas.
  • Color: #FFFFFF.
  • Suavizado: Nitido.

Title.

  • Fuente: Arial.
  • Grosor: Regular.
  • Tamaño: 13px.
  • Kerning: Medidas.
  • Interlineado: 18px.
  • Color: #E0E0E0.
  • Suavizado: Nitido.

Date.

  • Fuente: Georgia.
  • Grosor: Italic.
  • Tamaño: 12px.
  • Kerning: Medidas.
  • Color: #8F8F8F.
  • Suavizado: Nitido.

Cree una línea de separación horizontal de 221 píxeles como se ve en la imagen de abajo.

De esta manera, una vez que haya realizado todos los pasos anteriores, haga cinco copias.

Aplica la misma configuración a la sección de publicaciones recientes.

  • Fuente: Arial.
  • Grosor: Regular.
  • Tamaño: 13px.
  • Kerning: Medidas.
  • Interlineado: 18px.
  • Color: #E0E0E0.
  • Suavizado: Nitido.

Agrega una sección de Flickr como ves en la imagen de abajo.

Coge la herramienta Rectángulo (U), crea un rectángulo de 73px de altura para la barra de derechos de autor, luego aplica la técnica de puntada.

Coge la herramienta de texto horizontal (T), escribe el nombre del copyright y, a continuación, aplica la siguiente configuración de caracteres.

  • Fuente: Arial.
  • Grosor: Regular.
  • Tamaño: 13px.
  • Kerning: Medidas.
  • Interlineado: 18px.
  • Color: #E0E0E0.
  • Suavizado: Nitido.

Los derechos de autor del diseñador.

  • Fuente: Arial.
  • Grosor: Regular.
  • Tamaño: 13px.
  • Kerning: Medidas.
  • Interlineado: 18px.
  • Color: #E0E0E0.
  • Suavizado: Nitido.

Conclusion

Este ha sido un largo recorrido, y espero que haya aprendido algo nuevo y útil. Ahora debería poder aplicar algunas de estas técnicas a sus propios diseños, tomando sus propias decisiones en el camino. Si tiene alguna pregunta, no dude en preguntar en los comentarios a continuación y haré todo lo posible para ayudar. ¡Gracias por seguirnos!

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.