Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. UI Design

Diseñando una elegante presentación de Blog en Photoshop

by
Difficulty:IntermediateLength:MediumLanguages:

Spanish (Español) translation by CYC (you can also view the original English article)

Final product image
What You'll Be Creating

En este tutorial te mostraré cómo crear un diseño de blog simple y elegante en Photoshop. Usaremos una imagen fuerte por encima del doblez (donde quiera que esté) con un mensaje sencillo, seguido por una tipografía muy limpia y elegante.

Recursos del Tutorial

Para continuar necesitarás los siguientes recursos (libremente disponibles):

Prepara el documento

Paso 1

Comienza creando un nuevo documento (Archivo > Nuevo...) utilizando la configuración que se muestra a continuación. Eres libre de usar un lienzo con las dimensiones que prefieras - la web no tiene un ancho fijo, después de todo.

Asegúrate de que la resolución está establecida en 72 píxeles / pulgada

Paso 2

Vamos a establecer algunas guías para que nuestro diseño tenga suficiente espacio y se vea equilibrado. No siempre utilizo una cuadrícula, pero establecer algunas líneas guías garantizará la pulcritud y ayudará a definir el ancho de nuestro sitio web. Ve a Ver > Nueva Guía... y establece algunas líneas guía. Yo suelo elegir 1000px como el ancho del sitio web y añadir algunas líneas guía en las esquinas para que tenga espacio para respirar....

Nota: Las líneas guía utilizadas para este tutorial: vertical a 100px, 285px, 445px, 600px, 605px, 765px, 925px y 1100px.

Sugerencia: También puedes utilizar el complemento GuideGuide de Photoshop para hacer este proceso aún más rápido.

Paso 3

Adhiriéndote a esta etiqueta de Photoshop mantendrás las cosas organizadas y fáciles de navegar o editar. Vamos a crear cuatro grupos de capas denominadas Encabezado, Contenido, Compartir y Pie de Página. Para crear grupos, ve a Capa > Nuevo > Grupo... y dale a cada uno un título como se ha mencionado. Para la creación rápida de un grupo basta con hacer clic en el icono.

Diseñando el área del encabezado

El área de cabecera desempeña un papel muy importante en la participación con los usuarios y garantiza que el visitante permanezca en el sitio web. Para este blog voy a usar un plano de bienvenida de un café en Londres. Al elegir una imagen para tu proyecto asegúrate de que envía el mensaje correcto a los visitantes y satisface las necesidades del cliente.

Paso 1

Primero crearemos el fondo del blog. En el interior del grupo del encabezado, dibuja una forma de rectángulo de cualquier color utilizando la Herramienta Rectángulo (U). En mi caso dibujé el rectángulo del tamaño de 1200 x 600px y lo puse en la parte superior del documento.

Ahora descarga la foto del Cafe, arrástrala al documento de Photoshop y colócala encima de la capa del rectángulo. Cambia el nombre de la capa de la imagen a algo que puedas reconocer más tarde, en mi caso he utilizado IMG. Después, mantén presionada la tecla Alt y el cursor sobre la capa de la foto hasta que veas una pequeña flecha apuntando hacia abajo y luego suéltala. Acabas de crear una Máscara de Recorte.

Ahora pulsa Control + T y cambia el tamaño de la foto para que se ajuste a tus necesidades.

Sugerencia: mantén presionada la tecla Mayús para transformarla proporcionalmente.

Paso 2

Ahora necesitamos hacer nuestro fondo del blog más oscuro y más neutral para que cuando pongamos la copia encima sea legible. Vamos a desenfocar ligeramente nuestra imagen yendo a Filtro > Desenfocar > Desenfoque Gaussiano... y fijando el Radio a 3 pixeles. El uso de un ligero efecto de desenfoque ayuda a eliminar los detalles de una imagen nítida y permite que los ojos de los visitantes se centren en elementos más prominentes, en nuestro caso es el mensaje del blog.

Vamos a crear una nueva capa por encima de la imagen colocada y convertirla en una máscara de recorte como se muestra en el paso anterior. Rellena esto con un tono negro y reduce la opacidad al 50% para que nuestra imagen se vuelva más oscura, pero siga siendo bastante visible.

Paso 3

Es hora de agregar un logo a nuestro blog. Crea un nuevo grupo dentro del grupo  Encabezado y denomínalo Logo. Para este tutorial usaré un logotipo simple basado en tipografía. Elige la Herramienta Texto Horizontal (T), con la fuente Bentham y un tamaño de 30px y escribe el título de tu blog. Ten en cuenta que el espaciado de las letras es mayor de lo habitual, creando una apariencia más elegante y haciendo que los caracteres en mayúsculas sean más fáciles de leer.

Para añadir énfasis, hagamos un borde alrededor de él. Selecciona la Herramienta Rectángulo (U) y dibuja un rectángulo que sea ligeramente más grande que el texto.

Ahora haz clic con el botón derecho del ratón en la capa y selecciona Opciones de Fusión... aplica las siguientes opciones de trazado.

Por último establece el relleno de la capa del rectángulo a 0% y tendrás un bonito trazado de 1px alrededor de tu logotipo ficticio.

Paso 4

Este es el momento en donde agregamos un mensaje en el blog para resumir de lo que se trata. Selecciona la Herramienta de Texto Horizontal (T), con la fuente Bentham y un tamaño de 60px y escribe un mensaje corto para tus lectores. Asegúrate de que la altura de la línea es lo suficientemente espaciosa para que el texto tenga espacio para respirar y se vea equilibrado.

Para el signo y he usado Baskerville (itálico) porque es más adornado. Para el mensaje secundario he utilizado el conjunto de fuentes PT Serif (Italic) con un tamaño de 20px. Asegúrate de poner tu mensaje verticalmente en el centro de la imagen de cabecera para que parezca equilibrado y pulido.

Diseñando el área de contenido

Minimiza el grupo Encabezado haciendo clic en la pequeña flecha junto al título del grupo y abre el grupo de contenido para que todas las capas estén organizadas y sean fáciles de navegar.

Paso 1

Comencemos por crear nuestro blog. Selecciona la Herramienta Texto (T) y, con un color oscuro y una fuente bastante grande, ingresa el título de tu publicación. Trata de evitar el uso de negro absoluto y elegir un color más sutil, como gris oscuro, para que no sea vea demasiado duro. Para este tutorial estoy usando gris oscuro #444444 con una fuente Bentham en mayúsculas y un tamaño de 42px. Coloca tu título en el centro del documento y dale un montón de espacio en la parte superior para que la atención de los lectores se vaya al titular.

Paso 2

Reduce el tamaño de la fuente a 14px e ingresa la fecha de la publicación del blog, el autor, la categoría, las etiquetas, la ubicación o lo que desees, para ofrecerle a tus lectores una visión general de la publicación. En mi caso he puesto la fecha y la ubicación de la entrada en mayúsculas para permanecer fiel al título.

Paso 3

Un blog sin contenido real no vale nada, por lo tanto, no importa lo bueno que sea el diseño. Utilizando la Herramienta Texto (T), mantén presionado el botón del ratón y haz un contenedor entre la segunda y la penúltima guía. El ancho del contenedor entre estas líneas guía debe ser de 640px y la altura dependerá de la longitud de tu publicación.

Establece el color de fondo a algo más ligero y fácil para el ojo. En mi caso utilicé gris #6f6f6f más ligero con un tamaño de 18px y la fuente PT Serif teniendo una altura de 34px ajustada a la línea. La altura de la línea debe ser alrededor de 1,5 - 1,9 dependiendo del estilo de la tipografía. Puedes calcular fácilmente la altura de línea multiplicando el tamaño de la fuente que utilizas por 1.9, por ejemplo, en mi caso, utilicé la fuente con un tamaño de 18px, así que: 18 * 1.8 = 34.2.

Paso 4

Como diseñador, siempre tienes que pensar en diseñar un entorno dinámico, por lo tanto, incluye estilos para hipervínculos o estados ':hover' para los botones. Créeme, los desarrolladores te agradecerán por esto. Selecciona un color sutil que se destaque en tu copia principal, resalta una de las frases que enlazan a otro lugar y cambia su color. En mi caso estoy usando rojo pálido #e3514e.

Diseñando los botones para Compartir

Hemos terminado con la copia principal para la publicación del blog y ahora crearemos algunos botones de uso compartido para que los lectores puedan compartir contenido con su red social de preferencia.

Paso 1

Minimiza el grupo del Contenido y abre el grupo de Compartir donde colocaremos nuestros botones. Selecciona la Herramienta Rectángulo (U) y dibuja un rectángulo entre la segunda y la penúltima guía como la copia principal. En mi caso es 640 x 54px. Haz clic con el botón derecho, selecciona Opciones de Fusión... y aplica las siguientes opciones.

Color usado #838383

Por último, reduce la opción de relleno de la capa a 0% y tendrás un contenedor de contorno para tus redes de redes sociales.

Paso 2

Selecciona la Herramienta Línea (U) y ajusta el ancho a 1px, después de que dibujes tres líneas verticales que dividirán nuestro contenedor en cuatro partes iguales. Las líneas guía ayudarán a posicionarlas. Asegúrate de que las líneas sean del mismo color que el contorno del contenedor.

Sugerencia: mantén presionada la tecla Mayús para asegurarte de que las líneas funcionan perfectamente rectas.

Sugerencia: haz clic en Control+; para ocultar / mostrar líneas guía.

Paso 3

Finalmente selecciona la Herramienta Texto (T) y escribe una copia, dejando que la gente sepa que es para compartir. En mi caso usé un simple SHARE:, después de lo cual he anotado los nombres de las redes sociales disponibles para compartir.

Coloca los nombres dentro del contenedor y céntralos para que estén en el centro de los bloques separados.

Paso 4

¡Excelente! La función para compartir el contenido está hecha, todo lo que necesitamos para terminar es crear cómo se vería el botón con el cursor encima. Simplemente selecciona la Herramienta Rectángulo (U) y con el mismo color que usaste para el enlace, dibuja un rectángulo debajo del nombre de la red social que cubre el espacio dividido.

Diseñando el Pie de Página

Finalmente es hora de envolver nuestro diseño del blog poniendo un pie de página simple con una información de los derechos reservados.

Paso 1

Minimiza el grupo Compartir y abre el grupo Pie de página. Después de dibujar un simple rectángulo en la parte inferior que va a través del documento de manera horizontal, deja espacio suficiente en la parte superior. He usado gris #555555 y alrededor de 110px de espacio en blanco por encima de la forma.

Paso 2

Finalmente selecciona la Herramienta Texto (T) y apunta algunas copias simples de copyright. En mi caso he utilizado PT Serif con 14px y un color blanco #FFFFFF. Coloca tu copia en el centro del rectángulo y alínealo verticalmente.

Y hemos terminado con el diseño. ¡Felicitaciones!

Conclusión

En este tutorial pasamos por el proceso de creación de un diseño de blog muy simple y elegante. Tiene una fuerte cabecera basada en imágenes por encima del pliegue y utiliza un enfoque de tipografía en primer lugar para el contenido del blog.

¡Echa un vistazo a Crear un tema para un blog desde Evernote desarrollado con Postach.io donde veremos la construcción de este diseño para el blog en el navegador, la integración con una plataforma de blogs y hacerlo a medida!

Si tienes alguna pregunta o ideas, por favor ¡cuéntamos en el área de comentarios!

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.